refactor:tree (#6276)

Author: shifeng1993

components/style.ts

@@ -42,7 +42,7 @@ import './cascader/style';
 // import './timeline/style';
 // import './input-number/style';
 // import './transfer/style';
-import './tree/style';
+// import './tree/style';
 // import './upload/style';
 // import './layout/style';
 // import './anchor/style';

components/tree/DirectoryTree.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import { nextTick, onUpdated, ref, watch, defineComponent, computed } from 'vue';
 import debounce from 'lodash-es/debounce';
 import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined';
@@ -18,12 +18,13 @@ import { conductExpandParent } from '../vc-tree/util';
 import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { filterEmpty } from '../_util/props-util';
+import { someType } from '../_util/type';
 
 export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
 
 export const directoryTreeProps = () => ({
   ...treeProps(),
-  expandAction: { type: [Boolean, String] as PropType<ExpandAction> },
+  expandAction: someType<ExpandAction>([Boolean, String]),
 });
 
 export type DirectoryTreeProps = Partial<ExtractPropTypes<ReturnType<typeof directoryTreeProps>>>;

components/tree/Tree.tsx

@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import { watchEffect, ref, defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
 import VcTree from '../vc-tree';
@@ -15,6 +15,10 @@ import dropIndicatorRender from './utils/dropIndicator';
 import devWarning from '../vc-util/devWarning';
 import { warning } from '../vc-util/warning';
 import omit from '../_util/omit';
+import { booleanType, someType, arrayType, functionType, objectType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
 
 export interface AntdTreeNodeAttribute {
   eventKey: string;
@@ -84,58 +88,53 @@ export const treeProps = () => {
   const baseTreeProps = vcTreeProps();
   return {
     ...baseTreeProps,
-    showLine: {
-      type: [Boolean, Object] as PropType<boolean | { showLeafIcon: boolean }>,
-      default: undefined,
-    },
+    showLine: someType<boolean | { showLeafIcon: boolean }>([Boolean, Object]),
     /** 是否支持多选 */
-    multiple: { type: Boolean, default: undefined },
+    multiple: booleanType(),
     /** 是否自动展开父节点 */
-    autoExpandParent: { type: Boolean, default: undefined },
+    autoExpandParent: booleanType(),
     /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
-    checkStrictly: { type: Boolean, default: undefined },
+    checkStrictly: booleanType(),
     /** 是否支持选中 */
-    checkable: { type: Boolean, default: undefined },
+    checkable: booleanType(),
     /** 是否禁用树 */
-    disabled: { type: Boolean, default: undefined },
+    disabled: booleanType(),
     /** 默认展开所有树节点 */
-    defaultExpandAll: { type: Boolean, default: undefined },
+    defaultExpandAll: booleanType(),
     /** 默认展开对应树节点 */
-    defaultExpandParent: { type: Boolean, default: undefined },
+    defaultExpandParent: booleanType(),
     /** 默认展开指定的树节点 */
-    defaultExpandedKeys: { type: Array as PropType<Key[]> },
+    defaultExpandedKeys: arrayType<Key[]>(),
     /** （受控）展开指定的树节点 */
-    expandedKeys: { type: Array as PropType<Key[]> },
+    expandedKeys: arrayType<Key[]>(),
     /** （受控）选中复选框的树节点 */
-    checkedKeys: {
-      type: [Array, Object] as PropType<Key[] | { checked: Key[]; halfChecked: Key[] }>,
-    },
+    checkedKeys: someType<Key[] | { checked: Key[]; halfChecked: Key[] }>([Array, Object]),
     /** 默认选中复选框的树节点 */
-    defaultCheckedKeys: { type: Array as PropType<Key[]> },
+    defaultCheckedKeys: arrayType<Key[]>(),
     /** （受控）设置选中的树节点 */
-    selectedKeys: { type: Array as PropType<Key[]> },
+    selectedKeys: arrayType<Key[]>(),
     /** 默认选中的树节点 */
-    defaultSelectedKeys: { type: Array as PropType<Key[]> },
-    selectable: { type: Boolean, default: undefined },
+    defaultSelectedKeys: arrayType<Key[]>(),
+    selectable: booleanType(),
 
-    loadedKeys: { type: Array as PropType<Key[]> },
-    draggable: { type: Boolean, default: undefined },
-    showIcon: { type: Boolean, default: undefined },
-    icon: { type: Function as PropType<(nodeProps: AntdTreeNodeAttribute) => any> },
+    loadedKeys: arrayType<Key[]>(),
+    draggable: booleanType(),
+    showIcon: booleanType(),
+    icon: functionType<(nodeProps: AntdTreeNodeAttribute) => any>(),
     switcherIcon: PropTypes.any,
     prefixCls: String,
     /**
      * @default{title,key,children}
      * deprecated, please use `fieldNames` instead
      * 替换treeNode中 title,key,children字段为treeData中对应的字段
      */
-    replaceFields: { type: Object as PropType<FieldNames> },
-    blockNode: { type: Boolean, default: undefined },
+    replaceFields: objectType<FieldNames>(),
+    blockNode: booleanType(),
     openAnimation: PropTypes.any,
     onDoubleclick: baseTreeProps.onDblclick,
-    'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
-    'onUpdate:checkedKeys': Function as PropType<(keys: Key[]) => void>,
-    'onUpdate:expandedKeys': Function as PropType<(keys: Key[]) => void>,
+    'onUpdate:selectedKeys': functionType<(keys: Key[]) => void>(),
+    'onUpdate:checkedKeys': functionType<(keys: Key[]) => void>(),
+    'onUpdate:expandedKeys': functionType<(keys: Key[]) => void>(),
   };
 };
 
@@ -168,6 +167,10 @@ export default defineComponent({
       '`children` of Tree is deprecated. Please use `treeData` instead.',
     );
     const { prefixCls, direction, virtual } = useConfigInject('tree', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const treeRef = ref();
     const scrollTo: ScrollTo = scroll => {
       treeRef.value?.scrollTo(scroll);
@@ -236,7 +239,7 @@ export default defineComponent({
         itemHeight,
       };
       const children = slots.default ? filterEmpty(slots.default()) : undefined;
-      return (
+      return wrapSSR(
         <VcTree
           {...newProps}
           virtual={virtual.value}
@@ -251,6 +254,7 @@ export default defineComponent({
               [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
             },
             attrs.class,
+            hashId.value,
           )}
           direction={direction.value}
           checkable={checkable}
@@ -267,7 +271,7 @@ export default defineComponent({
             checkable: () => <span class={`${prefixCls.value}-checkbox-inner`} />,
           }}
           children={children}
-        ></VcTree>
+        ></VcTree>,
       );
     };
   },

components/tree/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Tree
-cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ag9_Q6ArswEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A hierarchical list structure component.
@@ -17,6 +17,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| allowDrop | Whether to allow dropping on the node | ({ dropNode, dropPosition }) => boolean | - |  |
 | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false |  |
 | blockNode | Whether treeNode fill remaining horizontal space | boolean | false |  |
 | checkable | Adds a `Checkbox` before the treeNodes | boolean | false |  |
@@ -28,6 +29,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | expandedKeys(v-model) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] \| number\[] | \[] |  |
 | fieldNames | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } | 3.0.0 |
 | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |  |
+| height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | - |  |
 | loadData | Load data asynchronously | function(node) | - |  |
 | loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] \| number\[] | \[] |  |
 | multiple | Allows selecting multiple treeNodes | boolean | false |  |

components/tree/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Tree
 subtitle: 树形控件
-cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ag9_Q6ArswEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 多层次的结构列表。
@@ -18,6 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |  |
 | --- | --- | --- | --- | --- | --- |
+| allowDrop | 是否允许拖拽时放置在该节点 | ({ dropNode, dropPosition }) => boolean | - |  |
 | autoExpandParent | 是否自动展开父节点 | boolean | false |  |  |
 | blockNode | 是否节点占据一行 | boolean | false |  |  |
 | checkable | 节点前添加 Checkbox 复选框 | boolean | false |  |  |
@@ -29,6 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | expandedKeys(v-model) | （受控）展开指定的树节点 | string\[] \| number\[] | \[] |  |  |
 | fieldNames | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | object | {children:'children', title:'title', key:'key' } | 3.0.0 |  |
 | filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - |  |  |
+| height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | - |  |
 | loadData | 异步加载数据 | function(node) | - |  |  |
 | loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] \| number\[] | \[] |  |  |
 | multiple | 支持点选多个节点（节点本身） | boolean | false |  |  |