feat: tree add activeKey

Author: tangjinzhou

components/vc-tree/Tree.tsx

@@ -31,6 +31,7 @@ import {
   shallowRef,
   watch,
   watchEffect,
+  nextTick,
 } from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import type { CheckInfo, DraggableFn } from './props';
@@ -246,6 +247,26 @@ export default defineComponent({
     const scrollTo: ScrollTo = scroll => {
       listRef.value.scrollTo(scroll);
     };
+    watch(
+      () => props.activeKey,
+      () => {
+        if (props.activeKey !== undefined) {
+          activeKey.value = props.activeKey;
+        }
+      },
+      { immediate: true },
+    );
+    watch(
+      activeKey,
+      val => {
+        nextTick(() => {
+          if (val !== null) {
+            scrollTo({ key: val });
+          }
+        });
+      },
+      { immediate: true, flush: 'post' },
+    );
     // =========================== Expanded ===========================
     /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
     const setExpandedKeys = (keys: Key[]) => {
@@ -270,16 +291,14 @@ export default defineComponent({
       currentMouseOverDroppableNodeKey = null;
     };
     // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
-    const onNodeDragEnd: NodeDragEventHandler = (event, node, outsideTree = false) => {
+    const onNodeDragEnd: NodeDragEventHandler = (event, node) => {
       const { onDragend } = props;
 
       dragState.dragOverNodeKey = null;
 
       cleanDragState();
 
-      if (onDragend && !outsideTree) {
-        onDragend({ event, node: node.eventData });
-      }
+      onDragend?.({ event, node: node.eventData });
 
       dragNode = null;
     };
@@ -552,8 +571,8 @@ export default defineComponent({
         dropPosition: dropPosition + Number(posArr[posArr.length - 1]),
       };
 
-      if (onDrop && !outsideTree) {
-        onDrop(dropResult);
+      if (!outsideTree) {
+        onDrop?.(dropResult);
       }
 
       dragNode = null;
@@ -865,8 +884,9 @@ export default defineComponent({
       if (activeKey.value === newActiveKey) {
         return;
       }
-
-      activeKey.value = newActiveKey;
+      if (props.activeKey !== undefined) {
+        activeKey.value = newActiveKey;
+      }
       if (newActiveKey !== null) {
         scrollTo({ key: newActiveKey });
       }

components/vc-tree/index.ts

@@ -1,4 +1,4 @@
-// base rc-tree 5.3.7
+// base rc-tree 5.4.4
 import type { TreeProps, TreeNodeProps } from './props';
 import Tree from './Tree';
 import TreeNode from './TreeNode';

components/vc-tree/props.ts

@@ -121,6 +121,7 @@ export type DraggableFn = (node: DataNode) => boolean;
 export const treeProps = () => ({
   prefixCls: String,
   focusable: { type: Boolean, default: undefined },
+  activeKey: [Number, String] as PropType<Key>,
   tabindex: Number,
   children: PropTypes.any,
   treeData: { type: Array as PropType<DataNode[]> }, // Generate treeNode by children

components/vc-tree/util.tsx

@@ -287,7 +287,11 @@ export function convertDataToTree(
   const list = Array.isArray(treeData) ? treeData : [treeData];
   return list.map(({ children, ...props }): NodeElement => {
     const childrenNodes = convertDataToTree(children, processor);
-    return <TreeNode {...processProps(props)}>{childrenNodes}</TreeNode>;
+    return (
+      <TreeNode key={props.key} {...processProps(props)}>
+        {childrenNodes}
+      </TreeNode>
+    );
   });
 }