feat: update tree

antdv-demo

@@ -1 +1 @@
-Subproject commit 59b0f4906bf50dcd93edfd55ec9ae26ed9578d21
+Subproject commit 7713f7b97f8ce3493094935d5fc1eaaf4ea501aa

components/vc-tree/src/Tree.jsx

@@ -27,16 +27,6 @@ import {
  * other props can pass with context for future refactor.
  */
 
-function getWatch(keys = []) {
-  const watch = {};
-  keys.forEach(k => {
-    watch[k] = function() {
-      this.needSyncKeys[k] = true;
-    };
-  });
-  return watch;
-}
-
 const Tree = {
   name: 'Tree',
   inheritAttrs: false,
@@ -139,18 +129,17 @@ const Tree = {
   },
 
   watch: {
-    ...getWatch([
-      'treeData',
-      'children',
-      'expandedKeys',
-      'autoExpandParent',
-      'selectedKeys',
-      'checkedKeys',
-      'loadedKeys',
-    ]),
+    // ...getWatch([
+    //   'treeData',
+    //   'children',
+    //   'expandedKeys',
+    //   'autoExpandParent',
+    //   'selectedKeys',
+    //   'checkedKeys',
+    //   'loadedKeys',
+    // ]),
     __propsSymbol__() {
       this.setState(this.getDerivedState(getOptionProps(this), this.$data));
-      this.needSyncKeys = {};
     },
   },
 
@@ -160,9 +149,8 @@ const Tree = {
       const newState = {
         _prevProps: { ...props },
       };
-      const self = this;
       function needSync(name) {
-        return (!_prevProps && name in props) || (_prevProps && self.needSyncKeys[name]);
+        return (!_prevProps && name in props) || (_prevProps && _prevProps[name] !== props[name]);
       }
 
       // ================== Tree Node ==================
@@ -671,7 +659,7 @@ const Tree = {
         style={style}
         role="tree"
         unselectable="on"
-        tabIndex={focusable ? tabIndex : null}
+        tabindex={focusable ? tabIndex : null}
       >
         {mapChildren(treeNode, (node, index) => this.renderTreeNode(node, index))}
       </ul>

components/vc-tree/src/TreeNode.jsx

@@ -1,8 +1,8 @@
-import { inject, provide } from 'vue';
+import { inject, provide, Transition } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import classNames from 'classnames';
 import { getNodeChildren, mapChildren, warnOnlyTreeNode, getDataAndAria } from './util';
-import { initDefaultProps, filterEmpty, getComponent } from '../../_util/props-util';
+import { initDefaultProps, getComponent, getSlot } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import getTransitionProps from '../../_util/getTransitionProps';
 
@@ -64,10 +64,6 @@ const TreeNode = {
       vcTreeNode: inject('vcTreeNode', {}),
     };
   },
-  inject: {
-    vcTree: { default: () => ({}) },
-    vcTreeNode: { default: () => ({}) },
-  },
   created() {
     provide('vcTreeNode', this);
   },
@@ -245,10 +241,7 @@ const TreeNode = {
     },
 
     getNodeChildren() {
-      const {
-        $slots: { default: children },
-      } = this;
-      const originList = filterEmpty(children);
+      const originList = getSlot(this);
       const targetList = getNodeChildren(originList);
 
       if (originList.length !== targetList.length) {
@@ -523,7 +516,7 @@ const TreeNode = {
         );
       }
 
-      return <transition {...animProps}>{$children}</transition>;
+      return <Transition {...animProps}>{$children}</Transition>;
     },
   },
 

components/vc-tree/src/util.js

@@ -1,7 +1,7 @@
 /* eslint no-loop-func: 0*/
 import warning from 'warning';
 import TreeNode from './TreeNode';
-import { getOptionProps } from '../../_util/props-util';
+import { getOptionProps, getSlot } from '../../_util/props-util';
 const DRAG_SIDE_RANGE = 0.25;
 const DRAG_MIN_GAP = 2;
 
@@ -54,7 +54,7 @@ export function isCheckDisabled(node) {
 
 export function traverseTreeNodes(treeNodes, callback) {
   function processNode(node, index, parent) {
-    const children = node ? node.children?.default() : treeNodes;
+    const children = node ? getSlot(node) : treeNodes;
     const pos = node ? getPosition(parent.pos, index) : 0;
 
     // Filter children

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/tree/demo/basic';
+import demo from '../antdv-demo/docs/tree/demo/customized-icon';
 
 export default {
   components: {