simplify tree demos

components/tree/demo/basic-controlled.md

@@ -9,7 +9,6 @@
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
-import React, { PropTypes } from 'react';
 
 const x = 3;
 const y = 2;
@@ -73,9 +72,6 @@ function getFilterExpandedKeys(data, expandedKeys) {
 }
 
 const Demo = React.createClass({
-  propTypes: {
-    multiple: PropTypes.bool,
-  },
   getDefaultProps() {
     return {
       multiple: true,
@@ -100,9 +96,7 @@ const Demo = React.createClass({
         expandedKeys.push(treeNode.props.eventKey);
       }
     }
-    this.setState({
-      expandedKeys: expandedKeys,
-    });
+    this.setState({ expandedKeys });
   },
   onCheck(checkedKeys) {
     this.setState({
@@ -112,30 +106,27 @@ const Demo = React.createClass({
   },
   onSelect(selectedKeys, info) {
     console.log('onSelect', info);
-    this.setState({
-      selectedKeys,
-    });
+    this.setState({ selectedKeys });
   },
   render() {
-    const loop = data => {
-      return data.map((item) => {
-        if (item.children) {
-          return (<TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0' ? true : false}>
+    const loop = data => data.map((item) => {
+      if (item.children) {
+        return (
+          <TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0'}>
             {loop(item.children)}
-          </TreeNode>);
-        }
-        return <TreeNode key={item.key} title={item.key}/>;
-      });
-    };
-    return (<div>
-      <h2>controlled</h2>
+          </TreeNode>
+        );
+      }
+      return <TreeNode key={item.key} title={item.key}/>;
+    });
+    return (
       <Tree checkable multiple={this.props.multiple} defaultExpandAll
         onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
         onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
         onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}>
         {loop(gData)}
       </Tree>
-    </div>);
+    );
   },
 });
 

components/tree/demo/basic.md

@@ -2,19 +2,15 @@
 
 - order: 0
 
-最简单的用法。
+最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
 
 ---
 
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
-import React, { PropTypes } from 'react';
 
 const Demo = React.createClass({
-  propTypes: {
-    keys: PropTypes.array,
-  },
   getDefaultProps() {
     return {
       keys: ['0-0-0', '0-0-1'],
@@ -26,7 +22,6 @@ const Demo = React.createClass({
       defaultExpandedKeys: keys,
       defaultSelectedKeys: keys,
       defaultCheckedKeys: keys,
-      switchIt: true,
     };
   },
   onExpand(treeNode, expand, expandedKeys) {
@@ -38,18 +33,8 @@ const Demo = React.createClass({
   onCheck(info) {
     console.log('onCheck', info);
   },
-  change() {
-    const keys = this.props.keys;
-    this.setState({
-      defaultExpandedKeys: ['0-0', keys[this.state.switchIt ? 0 : 1]],
-      defaultSelectedKeys: [keys[this.state.switchIt ? 0 : 1]],
-      defaultCheckedKeys: [keys[this.state.switchIt ? 1 : 0]],
-      switchIt: !this.state.switchIt,
-    });
-  },
   render() {
-    return (<div style={{ margin: '0 20px' }}>
-      <h2>simple</h2>
+    return (
       <Tree className="myCls" showLine multiple checkable
         defaultExpandedKeys={this.state.defaultExpandedKeys}
         onExpand={this.onExpand}
@@ -62,17 +47,11 @@ const Demo = React.createClass({
             <TreeNode title="leaf" key="0-0-0-1" />
           </TreeNode>
           <TreeNode title="parent 1-1" key="0-0-1">
-            <TreeNode title={<span style={{ color: 'red' }}>sss</span>} key="0-0-1-0" />
+            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
           </TreeNode>
         </TreeNode>
       </Tree>
-
-      <br />
-      <div>
-        <button onClick={this.change}>change state</button>
-        <p>defaultXX 的初始化状态不会改变</p>
-      </div>
-    </div>);
+    );
   },
 });
 

components/tree/demo/contextmenu.md

@@ -1,115 +0,0 @@
-# 右键菜单
-
-- order: 0
-
-右键菜单示例
-
----
-
-````jsx
-import { Tree, Tooltip } from 'antd';
-import assign from 'object-assign';
-const TreeNode = Tree.TreeNode;
-import React from 'react';
-
-function contains(root, n) {
-  let node = n;
-  while (node) {
-    if (node === root) {
-      return true;
-    }
-    node = node.parentNode;
-  }
-  return false;
-}
-
-const Demo = React.createClass({
-  propTypes: {},
-  componentDidMount() {
-    this.getContainer();
-    // console.log(ReactDOM.findDOMNode(this), this.cmContainer);
-    console.log(contains(ReactDOM.findDOMNode(this), this.cmContainer));
-  },
-  componentWillUnmount() {
-    if (this.cmContainer) {
-      ReactDOM.unmountComponentAtNode(this.cmContainer);
-      document.body.removeChild(this.cmContainer);
-      this.cmContainer = null;
-    }
-  },
-  onSelect(info) {
-    console.log('selected', info);
-  },
-  onRightClick(info) {
-    console.log('right click', info);
-    this.renderCm(info);
-  },
-  onMouseEnter(info) {
-    console.log('enter', info);
-    this.renderCm(info);
-  },
-  onMouseLeave(info) {
-    console.log('leave', info);
-  },
-  getContainer() {
-    if (!this.cmContainer) {
-      this.cmContainer = document.createElement('div');
-      document.body.appendChild(this.cmContainer);
-    }
-    return this.cmContainer;
-  },
-  renderCm(info) {
-    if (this.toolTip) {
-      ReactDOM.unmountComponentAtNode(this.cmContainer);
-      this.toolTip = null;
-    }
-    this.toolTip = (<Tooltip trigger="click" placement="bottomRight" prefixCls="rc-tree-contextmenu" defaultVisible overlay={<h4>{info.node.props.title}</h4>}>
-        <span></span>
-    </Tooltip>);
-
-    const container = this.getContainer();
-    assign(this.cmContainer.style, {
-      position: 'absolute',
-      left: info.event.pageX + 'px',
-      top: info.event.pageY + 'px',
-    });
-
-    ReactDOM.render(this.toolTip, container);
-  },
-  render() {
-    return (
-      <div>
-        <h2>right click contextmenu</h2>
-        <Tree onRightClick={this.onRightClick} onSelect={this.onSelect}
-          defaultSelectedKeys={['0-1', '0-1-1']}
-          multiple defaultExpandAll showLine>
-          <TreeNode title="parent 1" key="0-1">
-            <TreeNode title="parent 1-0" key="0-1-1">
-              <TreeNode title="leaf0" />
-              <TreeNode title="leaf1" />
-              <TreeNode title="leaf2" />
-            </TreeNode>
-            <TreeNode title="parent 1-1">
-              <TreeNode title="leaf" />
-            </TreeNode>
-          </TreeNode>
-        </Tree>
-        <h2>hover popup contextmenu</h2>
-        <Tree onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onSelect={this.onSelect} multiple defaultExpandAll showLine>
-          <TreeNode title="parent 1" key="0-1">
-            <TreeNode title="parent 1-0" key="0-1-1">
-              <TreeNode title="leaf" />
-              <TreeNode title="leaf" />
-            </TreeNode>
-            <TreeNode title="parent 1-1">
-              <TreeNode title="leaf" />
-            </TreeNode>
-          </TreeNode>
-        </Tree>
-      </div>
-    );
-  },
-});
-
-ReactDOM.render(<Demo />, mountNode);
-````

components/tree/demo/draggable.md

@@ -2,14 +2,13 @@
 
 - order: 2
 
-拖动示例
+将节点拖拽到其他节点内部或前后。
 
 ---
 
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
-import React from 'react';
 
 const x = 3;
 const y = 2;
@@ -42,14 +41,11 @@ generateData(z);
 const Demo = React.createClass({
   getInitialState() {
     return {
-      gData: gData,
+      gData,
       expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
     };
   },
-  onDragStart() {
-  },
   onDragEnter(info) {
-    // console.log(info);
     this.setState({
       expandedKeys: info.expandedKeys,
     });
@@ -96,26 +92,19 @@ const Demo = React.createClass({
     });
   },
   render() {
-    const loop = data => {
-      return data.map((item) => {
-        if (item.children) {
-          return <TreeNode key={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
-        }
-        return <TreeNode key={item.key} title={item.key} />;
-      });
-    };
-    return (<div className="draggable-demo">
-      <h2>draggable </h2>
-      <p>drag a node into another node</p>
-      <div className="draggable-container">
-        <Tree defaultExpandedKeys={this.state.expandedKeys} openAnimation={{}} draggable
-          onDragStart={this.onDragStart}
-          onDragEnter={this.onDragEnter}
-          onDrop={this.onDrop}>
-          {loop(this.state.gData)}
-        </Tree>
-      </div>
-    </div>);
+    const loop = data => data.map((item) => {
+      if (item.children) {
+        return <TreeNode key={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
+      }
+      return <TreeNode key={item.key} title={item.key} />;
+    });
+    return (
+      <Tree defaultExpandedKeys={this.state.expandedKeys} openAnimation={{}} draggable
+        onDragEnter={this.onDragEnter}
+        onDrop={this.onDrop}>
+        {loop(this.state.gData)}
+      </Tree>
+    );
   },
 });
 

components/tree/demo/dynamic.md

@@ -2,14 +2,13 @@
 
 - order: 3
 
-异步加载数据
+点击展开节点，动态加载数据。
 
 ---
 
 ````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
-import React from 'react';
 
 function generateTreeNodes(treeNode) {
   const arr = [];
@@ -56,7 +55,6 @@ function getNewTreeData(treeData, curKey, child, level) {
 }
 
 const Demo = React.createClass({
-  propTypes: {},
   getInitialState() {
     return {
       treeData: [],
@@ -87,22 +85,17 @@ const Demo = React.createClass({
     });
   },
   render() {
-    const loop = (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' ? true : false} />;
-      });
-    };
+    const loop = data => 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 (
-      <div>
-        <h2>dynamic render</h2>
-        <Tree onSelect={this.onSelect} loadData={this.onLoadData}>
-          {treeNodes}
-        </Tree>
-      </div>
+      <Tree onSelect={this.onSelect} loadData={this.onLoadData}>
+        {treeNodes}
+      </Tree>
     );
   },
 });

components/tree/index.md

@@ -30,7 +30,7 @@
 |onSelect | 点击树节点触发 | function(e:{selected:bool,node,selectedKeys,event}) | - |
 |filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - |
 |loadData | 异步加载数据 | function(node)| - |
-|onRightClick | 显示右键菜单 | function({event,node}) | - |
+|onRightClick | 响应右键点击 | function({event,node}) | - |
 |draggable | 设置节点可拖拽（IE>8） | bool | false |
 |onDragStart | 开始拖拽时调用 | function({event,node}) | - |
 |onDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - |