refactor: Tree support generic (#32992)

* chore: bump rc-tree

* test: add test case

* test: Add ts check

components/tree/Tree.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import HolderOutlined from '@ant-design/icons/HolderOutlined';
-import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree, { TreeNode, TreeProps as RcTreeProps, BasicDataNode } from 'rc-tree';
 import classNames from 'classnames';
 import { DataNode, Key } from 'rc-tree/lib/interface';
 import DirectoryTree from './DirectoryTree';
@@ -98,8 +98,8 @@ interface DraggableConfig {
   nodeDraggable?: DraggableFn;
 }
 
-export interface TreeProps
-  extends Omit<RcTreeProps, 'prefixCls' | 'showLine' | 'direction' | 'draggable'> {
+export interface TreeProps<T extends BasicDataNode = DataNode>
+  extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable'> {
   showLine?: boolean | { showLeafIcon: boolean };
   className?: string;
   /** 是否支持多选 */
@@ -143,11 +143,13 @@ export interface TreeProps
   blockNode?: boolean;
 }
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<RcTree>> {
+type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(
+  props: React.PropsWithChildren<TreeProps<T>> & { ref?: React.Ref<RcTree> },
+) => React.ReactElement) & {
+  defaultProps: Partial<React.PropsWithChildren<TreeProps<any>>>;
   TreeNode: typeof TreeNode;
   DirectoryTree: typeof DirectoryTree;
-}
+};
 
 const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
   const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);
@@ -223,7 +225,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       {children}
     </RcTree>
   );
-}) as CompoundedComponent;
+}) as unknown as CompoundedComponent;
 
 Tree.TreeNode = TreeNode;
 

components/tree/__tests__/type.test.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import type { BasicDataNode } from 'rc-tree';
+import Tree from '../index';
+
+describe('Tree.TypeScript', () => {
+  it('without generic', () => {
+    const wrapper = mount(
+      <Tree
+        treeData={[
+          {
+            title: 'Bamboo',
+            key: 'bamboo',
+            children: [
+              {
+                title: 'Little',
+                key: 'little',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('support generic', () => {
+    interface MyDataNode extends BasicDataNode {
+      bamboo: string;
+      list?: MyDataNode[];
+    }
+
+    const wrapper = mount(
+      <Tree<MyDataNode>
+        treeData={[
+          {
+            bamboo: 'good',
+            list: [
+              {
+                bamboo: 'well',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(wrapper).toBeTruthy();
+  });
+});

package.json

@@ -120,7 +120,7 @@
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.25.3",
-    "rc-cascader": "~2.1.0",
+    "rc-cascader": "~2.2.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.6.0",
@@ -146,8 +146,8 @@
     "rc-tabs": "~11.10.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",
-    "rc-tree": "~5.2.0",
-    "rc-tree-select": "~4.6.0",
+    "rc-tree": "~5.3.0",
+    "rc-tree-select": "~4.7.0",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.14.0",