Merge pull request #438 from ant-design/develop-0.10.0fortreedynamic

Dynamic Tree

components/tree/demo/basic.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var Tree = antd.Tree;
-var TreeNode = Tree.TreeNode;
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
 
 ReactDOM.render(
   <Tree defaultExpandAll={false}>

components/tree/demo/checkbox.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var Tree = antd.Tree;
-var TreeNode = Tree.TreeNode;
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
 
 function handleCheck(info) {
   console.log('check: ', info);

components/tree/demo/dynamic.md

@@ -0,0 +1,80 @@
+# 异步数据加载
+
+- order: 3
+
+异步加载数据
+
+---
+
+````jsx
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
+
+const asyncTree = [
+  {name: "pNode 01", key: "0-0"},
+];
+
+const generateTreeNodes = () => {
+  const arr  = [
+       {name: "伯约", key: "0-0-0"},
+  ];
+  return arr;
+}
+
+const TreeDemo = React.createClass({
+  timeout(duration = 0) {
+    return new Promise((resolve, reject) => {
+        setTimeout(resolve.bind(this), duration);
+    })
+  },
+  getInitialState() {
+    return {
+      treeData: []
+    };
+  },
+  componentDidMount() {
+    this.timeout(1000).then(() => {
+      this.setState({
+        treeData: asyncTree
+      });
+      return asyncTree;
+    });
+  },
+  handleSelect(info) {
+    console.log('selected', info);
+  },
+  handleDataLoaded(treeNode) {
+    return this.timeout(1000).then(() => {
+      const child = generateTreeNodes();
+      const treeData = [...this.state.treeData];
+      treeData.forEach((item) => {
+        if (item.key === treeNode.props.eventKey) {
+          item.children = child;
+        }
+      });
+      this.setState({treeData});
+      return child;
+    });
+  },
+  render() {
+    const loop = (data) => {
+      return data.map((item) => {
+        if (item.children) {
+          return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
+        } else {
+          return <TreeNode title={item.name} key={item.key}></TreeNode>;
+        }
+      })
+    };
+    const parseTreeNode = data => loop(data);
+    let treeNodes = parseTreeNode(this.state.treeData);
+    return (
+        <Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
+          {treeNodes}
+        </Tree>
+    )
+  }
+})
+
+ReactDOM.render(<TreeDemo />, document.getElementById('components-tree-demo-dynamic'));
+````

components/tree/demo/special.md

@@ -7,9 +7,8 @@
 ---
 
 ````jsx
-var Tree = antd.Tree;
-var TreeNode = Tree.TreeNode;
-var Button = antd.Button;
+import { Tree, Button } from 'antd';
+const TreeNode = Tree.TreeNode;
 
 class TreeDemo extends React.Component {
   constructor(props) {

components/tree/index.md

@@ -24,6 +24,7 @@
 |defaultSelectedKeys | 默认选中的树节点 | String[] | [] |
 |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - |
 |onSelect | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys,event}) | - |
+|onDataLoaded | 异步加载数据 | function(node)| - |
 
 ### TreeNode props
 

package.json

@@ -58,7 +58,7 @@
     "rc-table": "~3.3.0",
     "rc-tabs": "~5.4.3",
     "rc-tooltip": "~3.0.1",
-    "rc-tree": "~0.16.2",
+    "rc-tree": "~0.18.1",
     "rc-upload": "~1.6.4",
     "rc-util": "~2.0.3",
     "react-slick": "~0.8.0",

style/components/tree.less

@@ -57,6 +57,16 @@
         cursor: pointer;
         outline: none;
       }
+      &.@{tree-prefix-cls}-icon_loading {
+        &:after {
+          content: '\e610';
+          display: inline-block;
+          font-family: 'anticon';
+          font-weight: bold;
+          .animation(loadingCircle 1s infinite linear);
+          margin-top:8px;
+        }
+      }
       &.@{tree-prefix-cls}-switcher {
         &-disabled {
           background: #fff;