From 8ca8fbd45370774400d680e96002c7f9107bddc5 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 16 Jul 2020 22:44:00 +0800
Subject: [PATCH] feat: update tree

---
 antdv-demo                          |  2 +-
 components/vc-tree/src/Tree.jsx     | 34 ++++++++++-------------------
 components/vc-tree/src/TreeNode.jsx | 15 ++++---------
 components/vc-tree/src/util.js      |  4 ++--
 examples/App.vue                    |  2 +-
 5 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/antdv-demo b/antdv-demo
index 59b0f4906..7713f7b97 160000
--- a/antdv-demo
+++ b/antdv-demo
@@ -1 +1 @@
-Subproject commit 59b0f4906bf50dcd93edfd55ec9ae26ed9578d21
+Subproject commit 7713f7b97f8ce3493094935d5fc1eaaf4ea501aa
diff --git a/components/vc-tree/src/Tree.jsx b/components/vc-tree/src/Tree.jsx
index c64ddaac0..8c5b1e507 100644
--- a/components/vc-tree/src/Tree.jsx
+++ b/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>
diff --git a/components/vc-tree/src/TreeNode.jsx b/components/vc-tree/src/TreeNode.jsx
index 05421fb05..3e88282b8 100644
--- a/components/vc-tree/src/TreeNode.jsx
+++ b/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>;
     },
   },
 
diff --git a/components/vc-tree/src/util.js b/components/vc-tree/src/util.js
index 5ee8dd1e9..133f6060c 100644
--- a/components/vc-tree/src/util.js
+++ b/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
diff --git a/examples/App.vue b/examples/App.vue
index 23d1d7dac..b514e5106 100644
--- a/examples/App.vue
+++ b/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: {