Refactor tree loadData demo

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -843,7 +843,59 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
   class="ant-tree"
   role="tree-node"
   unselectable="true"
+>
+  <li
+    class=""
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher_close"
     />
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
+      title="Expand to load"
+    >
+      <span
+        class="ant-tree-title"
+      >
+        Expand to load
+      </span>
+    </span>
+  </li>
+  <li
+    class=""
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher_close"
+    />
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
+      title="Expand to load"
+    >
+      <span
+        class="ant-tree-title"
+      >
+        Expand to load
+      </span>
+    </span>
+  </li>
+  <li
+    class=""
+  >
+    <span
+      class="ant-tree-switcher ant-tree-switcher-noop"
+    />
+    <span
+      class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
+      title="Tree Node"
+    >
+      <span
+        class="ant-tree-title"
+      >
+        Tree Node
+      </span>
+    </span>
+  </li>
+</ul>
 `;
 
 exports[`renders ./components/tree/demo/line.md correctly 1`] = `

components/tree/demo/dynamic.md

@@ -17,89 +17,48 @@ To load data asynchronously when click to expand a treeNode.
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
-function generateTreeNodes(treeNode) {
-  const arr = [];
-  const key = treeNode.props.eventKey;
-  for (let i = 0; i < 3; i++) {
-    arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
-  }
-  return arr;
-}
-
-function setLeaf(treeData, curKey, level) {
-  const loopLeaf = (data, lev) => {
-    const l = lev - 1;
-    data.forEach((item) => {
-      if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
-        curKey.indexOf(item.key) !== 0) {
-        return;
-      }
-      if (item.children) {
-        loopLeaf(item.children, l);
-      } else if (l < 1) {
-        item.isLeaf = true;
-      }
-    });
-  };
-  loopLeaf(treeData, level + 1);
-}
-
-function getNewTreeData(treeData, curKey, child, level) {
-  const loop = (data) => {
-    if (level < 1 || curKey.length - 3 > level * 2) return;
-    data.forEach((item) => {
-      if (curKey.indexOf(item.key) === 0) {
-        if (item.children) {
-          loop(item.children);
-        } else {
-          item.children = child;
-        }
-      }
-    });
-  };
-  loop(treeData);
-  setLeaf(treeData, curKey, level);
-}
-
 class Demo extends React.Component {
   state = {
-    treeData: [],
-  }
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({
     treeData: [
-          { name: 'pNode 01', key: '0-0' },
-          { name: 'pNode 02', key: '0-1' },
-          { name: 'pNode 03', key: '0-2', isLeaf: true },
+      { title: 'Expand to load', key: '0' },
+      { title: 'Expand to load', key: '1' },
+      { title: 'Tree Node', key: '2', isLeaf: true },
     ],
-      });
-    }, 100);
-  }
-  onSelect = (info) => {
-    console.log('selected', info);
   }
   onLoadData = (treeNode) => {
     return new Promise((resolve) => {
+      if (treeNode.props.children) {
+        resolve();
+        return;
+      }
       setTimeout(() => {
-        const treeData = [...this.state.treeData];
-        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
-        this.setState({ treeData });
+        treeNode.props.dataRef.children = [
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
+        ];
+        this.setState({
+          treeData: [...this.state.treeData],
+        });
         resolve();
       }, 1000);
     });
   }
-  render() {
-    const loop = data => data.map((item) => {
+  renderTreeNodes = (data) => {
+    return data.map((item) => {
       if (item.children) {
-        return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
-      }
-      return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
-    });
-    const treeNodes = loop(this.state.treeData);
         return (
-      <Tree onSelect={this.onSelect} loadData={this.onLoadData}>
-        {treeNodes}
+          <TreeNode title={item.title} key={item.key} dataRef={item}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode {...item} dataRef={item} />;
+    });
+  }
+  render() {
+    return (
+      <Tree loadData={this.onLoadData}>
+        {this.renderTreeNodes(this.state.treeData)}
       </Tree>
     );
   }