refactor: tree

components/tree/Tree.tsx

@@ -1,4 +1,4 @@
-import type { VNode, PropType, DefineComponent, ExtractPropTypes, CSSProperties } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
 import { ref } from 'vue';
 import { defineComponent } from 'vue';
 import classNames from '../_util/classNames';
@@ -7,7 +7,7 @@ import animation from '../_util/openAnimation';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import type { DataNode, FieldNames, Key } from '../vc-tree/interface';
+import type { DataNode, DragNodeEvent, FieldNames, Key } from '../vc-tree/interface';
 import { treeProps as vcTreeProps } from '../vc-tree/props';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import renderSwitcherIcon from './utils/iconUtil';
@@ -33,36 +33,20 @@ export interface AntdTreeNodeAttribute {
   disableCheckbox: boolean;
 }
 
-export interface AntTreeNodeProps {
+export type AntTreeNodeProps = DataNode;
-  className?: string;
-  checkable?: boolean;
-  disabled?: boolean;
-  disableCheckbox?: boolean;
-  title?: string | any;
-  key?: Key;
-  eventKey?: string;
-  isLeaf?: boolean;
-  checked?: boolean;
-  expanded?: boolean;
-  loading?: boolean;
-  selected?: boolean;
-  selectable?: boolean;
-  icon?: ((treeNode: AntdTreeNodeAttribute) => any) | VNode;
-  children?: any;
-  [customProp: string]: any;
-}
 
-export type AntTreeNode = DefineComponent<AntTreeNodeProps, {}>;
+// [Legacy] Compatible for v2
+export type TreeDataItem = DataNode;
 
 export interface AntTreeNodeBaseEvent {
-  node: AntTreeNode;
+  node: DataNode;
   nativeEvent: MouseEvent;
 }
 
 export interface AntTreeNodeCheckedEvent extends AntTreeNodeBaseEvent {
   event: 'check';
   checked?: boolean;
-  checkedNodes?: AntTreeNode[];
+  checkedNodes?: DataNode[];
 }
 
 export interface AntTreeNodeSelectedEvent extends AntTreeNodeBaseEvent {
@@ -76,7 +60,7 @@ export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
 }
 
 export interface AntTreeNodeMouseEvent {
-  node: AntTreeNode;
+  node: DataNode;
   event: DragEvent;
 }
 
@@ -85,17 +69,14 @@ export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
 }
 
 export interface AntTreeNodeDropEvent {
-  node: AntTreeNode;
+  node: DragNodeEvent;
-  dragNode: AntTreeNode;
+  dragNode: DragNodeEvent;
   dragNodesKeys: Key[];
   dropPosition: number;
   dropToGap?: boolean;
   event: MouseEvent;
 }
 
-// [Legacy] Compatible for v2
-export type TreeDataItem = DataNode;
-
 export const treeProps = () => {
   return {
     ...vcTreeProps(),
@@ -130,8 +111,6 @@ export const treeProps = () => {
     defaultSelectedKeys: { type: Array as PropType<Key[]> },
     selectable: { type: Boolean, default: undefined },
 
-    /** filter some AntTreeNodes as you need. it should return true */
-    filterAntTreeNode: { type: Function as PropType<(node: AntTreeNode) => boolean> },
     loadedKeys: { type: Array as PropType<Key[]> },
     draggable: { type: Boolean, default: undefined },
     showIcon: { type: Boolean, default: undefined },

components/tree/breakchange.md

@@ -0,0 +1 @@
+title 的渲染逻辑

components/tree/index.tsx

@@ -6,13 +6,13 @@ export { EventDataNode, DataNode } from '../vc-tree/interface';
 
 export {
   TreeProps,
-  AntTreeNode,
   AntTreeNodeMouseEvent,
   AntTreeNodeExpandedEvent,
   AntTreeNodeCheckedEvent,
   AntTreeNodeSelectedEvent,
   AntdTreeNodeAttribute,
   AntTreeNodeProps,
+  TreeDataItem,
 } from './Tree';
 
 export { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps } from './DirectoryTree';

components/vc-tree/Tree.tsx

@@ -58,7 +58,6 @@ export default defineComponent({
   setup(props, { attrs, slots }) {
     const destroyed = ref(false);
     let delayedDragEnterLogic: Record<Key, number> = {};
-
     const indent = ref();
     const selectedKeys = ref([]);
     const checkedKeys = ref([]);
@@ -147,7 +146,7 @@ export default defineComponent({
             ? conductExpandParent(props.expandedKeys, keyEntities.value)
             : props.expandedKeys;
       } else if (!init && props.defaultExpandAll) {
-        const cloneKeyEntities = { ...keyEntities };
+        const cloneKeyEntities = { ...keyEntities.value };
         delete cloneKeyEntities[MOTION_KEY];
         keys = Object.keys(cloneKeyEntities).map(key => cloneKeyEntities[key].key);
       } else if (!init && props.defaultExpandedKeys) {
@@ -223,7 +222,7 @@ export default defineComponent({
     // =========================== Expanded ===========================
     /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
     const setExpandedKeys = (keys: Key[]) => {
-      if (props.expandedKeys !== undefined) {
+      if (props.expandedKeys === undefined) {
         expandedKeys.value = keys;
       }
     };
@@ -267,7 +266,6 @@ export default defineComponent({
     const onNodeDragStart: NodeDragEventHandler = (event, node) => {
       const { onDragstart } = props;
       const { eventKey, eventData } = node;
-
       dragNode = node;
       dragStartMousePosition = {
         x: event.clientX,
@@ -351,24 +349,22 @@ export default defineComponent({
         // since if logic is on the bottom
         // it will be blocked by abstract dragover node check
         //   => if you dragenter from top, you mouse will still be consider as in the top node
-        (event as any).persist();
         delayedDragEnterLogic[node.pos.value] = window.setTimeout(() => {
           if (!dragState.dragging) return;
 
           let newExpandedKeys = [...expandedKeys.value];
-          const entity = keyEntities[node.eventKey.value];
+          const entity = keyEntities.value[node.eventKey.value];
 
           if (entity && (entity.children || []).length) {
             newExpandedKeys = arrAdd(expandedKeys.value, node.eventKey.value);
           }
-
           setExpandedKeys(newExpandedKeys);
 
           if (onExpand) {
             onExpand(newExpandedKeys, {
               node: node.eventData.value,
               expanded: true,
-              nativeEvent: (event as any).nativeEvent,
+              nativeEvent: event,
             });
           }
         }, 800);
@@ -579,7 +575,7 @@ export default defineComponent({
         })
         .filter(node => node);
 
-      if (props.selectedKeys !== undefined) {
+      if (props.selectedKeys === undefined) {
         selectedKeys.value = newSelectedKeys;
       }
 
@@ -589,7 +585,7 @@ export default defineComponent({
           selected: targetSelected,
           node: treeNode,
           selectedNodes,
-          nativeEvent: (e as any).nativeEvent,
+          nativeEvent: e,
         });
       }
     };
@@ -604,7 +600,7 @@ export default defineComponent({
         event: 'check',
         node: treeNode,
         checked,
-        nativeEvent: (e as any).nativeEvent,
+        nativeEvent: e,
       };
 
       if (checkStrictly) {
@@ -615,11 +611,11 @@ export default defineComponent({
         checkedObj = { checked: newCheckedKeys, halfChecked: newHalfCheckedKeys };
 
         eventObj.checkedNodes = newCheckedKeys
-          .map(checkedKey => keyEntities[checkedKey])
+          .map(checkedKey => keyEntities.value[checkedKey])
           .filter(entity => entity)
           .map(entity => entity.node);
 
-        if (props.checkedKeys !== undefined) {
+        if (props.checkedKeys === undefined) {
           checkedKeys.value = newCheckedKeys;
         }
       } else {
@@ -647,17 +643,16 @@ export default defineComponent({
         eventObj.checkedNodes = [];
         eventObj.checkedNodesPositions = [];
         eventObj.halfCheckedKeys = newHalfCheckedKeys;
-
+        console.log(eventObj);
         newCheckedKeys.forEach(checkedKey => {
           const entity = keyEntities.value[checkedKey];
           if (!entity) return;
 
           const { node, pos } = entity;
-
           eventObj.checkedNodes.push(node);
           eventObj.checkedNodesPositions.push({ node, pos });
         });
-        if (props.checkedKeys !== undefined) {
+        if (props.checkedKeys === undefined) {
           checkedKeys.value = newCheckedKeys;
           halfCheckedKeys.value = newHalfCheckedKeys;
         }
@@ -698,7 +693,7 @@ export default defineComponent({
               });
             }
 
-            if (props.loadedKeys !== undefined) {
+            if (props.loadedKeys === undefined) {
               loadedKeys.value = newLoadedKeys;
             }
             loadingKeys.value = newLoadingKeys;
@@ -785,7 +780,7 @@ export default defineComponent({
         onExpand(newExpandedKeys, {
           node: treeNode,
           expanded: targetExpanded,
-          nativeEvent: (e as any).nativeEvent,
+          nativeEvent: e,
         });
       }
 

v2-doc

@@ -1 +1 @@
-Subproject commit d571ad4bf772cfc372511dc1dedf07981dc56ae8
+Subproject commit 2e39bc81a84e2cfa90e8863e8f18d5a3d3ab1995