fix lint

components/tree-select/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import TreeSelect, { TreeNode } from 'rc-tree-select';
 import classNames from 'classnames';
-// import assign from 'object-assign';
 // import animation from '../common/openAnimation';
 
 const AntTreeSelect = React.createClass({
@@ -12,7 +11,8 @@ const AntTreeSelect = React.createClass({
       optionLabelProp: 'value',
       choiceTransitionName: 'zoom',
       showSearch: false,
-      size: 'default'
+      size: 'default',
+      // openAnimation: animation,
     };
   },
   render() {

components/tree/demo/basic-controlled.md

@@ -0,0 +1,188 @@
+# 受控操作示例
+
+- order: 1
+
+受控操作示例
+
+---
+
+````jsx
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
+
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({title: key, key: key});
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const __level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(__level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+
+function isInclude(smallArray, bigArray) {
+  return smallArray.every((ii, i) => {
+    return ii === bigArray[i];
+  });
+}
+// console.log(isInclude(['0', '1'], ['0', '10', '1']));
+
+function getCheckedKeys(node, checkedKeys, allCheckedNodesKeys) {
+  const nodeKey = node.props.eventKey;
+  let newCks = [...checkedKeys];
+  let nodePos;
+  const unCheck = allCheckedNodesKeys.some(item => {
+    if (item.key === nodeKey) {
+      nodePos = item.pos;
+      return true;
+    }
+  });
+  if (unCheck) {
+    const nArr = nodePos.split('-');
+    newCks = [];
+    allCheckedNodesKeys.forEach(item => {
+      const iArr = item.pos.split('-');
+      if (item.pos === nodePos ||
+        nArr.length > iArr.length && isInclude(iArr, nArr) ||
+        nArr.length < iArr.length && isInclude(nArr, iArr)) {
+        // 过滤掉 非父级节点 和 所有子节点。
+        // 因为 node节点 不选时，其 非父级节点 和 所有子节点 都不选。
+        return;
+      }
+      newCks.push(item.key);
+    });
+  } else {
+    newCks.push(nodeKey);
+  }
+  return newCks;
+}
+
+function loopData(data, callback) {
+  const loop = (d, level = 0) => {
+    d.forEach((item, index) => {
+      const pos = `${level}-${index}`;
+      if (item.children) {
+        loop(item.children, pos);
+      }
+      callback(item, index, pos);
+    });
+  };
+  loop(data);
+}
+
+function getFilterExpandedKeys(data, expandedKeys) {
+  const expandedPosArr = [];
+  loopData(data, (item, index, pos) => {
+    if (expandedKeys.indexOf(item.key) > -1) {
+      expandedPosArr.push(pos);
+    }
+  });
+  const filterExpandedKeys = [];
+  loopData(data, (item, index, pos) => {
+    expandedPosArr.forEach(p => {
+      if ((pos.split('-').length < p.split('-').length
+        && p.indexOf(pos) === 0 || pos === p)
+        && filterExpandedKeys.indexOf(item.key) === -1) {
+        filterExpandedKeys.push(item.key);
+      }
+    });
+  });
+  return filterExpandedKeys;
+}
+
+const Demo = React.createClass({
+  propTypes: {
+    multiple: React.PropTypes.bool,
+  },
+  getDefaultProps() {
+    return {
+      multiple: false,
+    };
+  },
+  getInitialState() {
+    return {
+      expandedKeys: getFilterExpandedKeys(gData, ['0-0-0', '0-0-1']),
+      checkedKeys: ['0-0-0'],
+      selectedKeys: [],
+    };
+  },
+  onExpand(treeNode, expand, expandedKeys) {
+    console.log('onExpand', expand, expandedKeys);
+    const index = expandedKeys.indexOf(treeNode.props.eventKey);
+    if (expand) {
+      if (index > -1) {
+        expandedKeys.splice(index, 1);
+      }
+    } else {
+      if (index === -1) {
+        expandedKeys.push(treeNode.props.eventKey);
+      }
+    }
+    this.setState({
+      expandedKeys: expandedKeys,
+    });
+  },
+  onCheck(info) {
+    console.log('check: ', info);
+    this.setState({
+      checkedKeys: getCheckedKeys(info.node, info.checkedKeys, info.allCheckedNodesKeys),
+      selectedKeys: ['0-3', '0-4'],
+    });
+  },
+  onSelect(info) {
+    console.log('selected: ', info);
+    let selectedKeys = [...this.state.selectedKeys];
+    const index = selectedKeys.indexOf(info.node.props.eventKey);
+    if (index > -1) {
+      selectedKeys.splice(index, 1);
+    } else if (this.props.multiple) {
+      selectedKeys.push(info.node.props.eventKey);
+    } else {
+      selectedKeys = [info.node.props.eventKey];
+    }
+    this.setState({
+      selectedKeys: 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}>{loop(item.children)}</TreeNode>;
+        }
+        return <TreeNode key={item.key} title={item.key} />;
+      });
+    };
+    return (<div>
+      <h2>controlled</h2>
+      <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>);
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
+````

components/tree/demo/basic.md

@@ -10,18 +10,70 @@
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
-ReactDOM.render(
+const Demo = React.createClass({
-  <Tree defaultExpandAll={false}>
+  propTypes: {
-    <TreeNode title="parent 1">
+    keys: React.PropTypes.array,
-      <TreeNode title="leaf" />
+  },
-      <TreeNode title="parent 1-1">
+  getDefaultProps() {
-        <TreeNode title="parent 2-1">
+    return {
-          <TreeNode title="leaf" />
+      keys: ['0-0-0', '0-0-1'],
-          <TreeNode title="leaf" />
+    };
+  },
+  getInitialState() {
+    const keys = this.props.keys;
+    return {
+      defaultExpandedKeys: keys,
+      defaultSelectedKeys: keys,
+      defaultCheckedKeys: keys,
+      switchIt: true,
+    };
+  },
+  onExpand(treeNode, expand, expandedKeys) {
+    console.log('onExpand', expand, expandedKeys);
+  },
+  onSelect(info) {
+    console.log('selected', info);
+  },
+  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>
+      <Tree className="myCls" showLine multiple checkable
+          defaultExpandedKeys={this.state.defaultExpandedKeys}
+          onExpand={this.onExpand}
+          defaultSelectedKeys={this.state.defaultSelectedKeys}
+          defaultCheckedKeys={this.state.defaultCheckedKeys}
+          onSelect={this.onSelect} onCheck={this.onCheck}>
+        <TreeNode title="parent 1" key="0-0">
+          <TreeNode title="parent 1-0" key="0-0-0" disabled>
+            <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
+            <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>
         </TreeNode>
-        <TreeNode title="leaf" />
+      </Tree>
-      </TreeNode>
+
-    </TreeNode>
+      <br />
-  </Tree>
+      <div>
-, mountNode);
+        <button onClick={this.change}>change state</button>
+        <p>defaultXX 的初始化状态不会改变</p>
+      </div>
+    </div>);
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
 ````

components/tree/demo/checkbox.md

@@ -1,32 +0,0 @@
-# 可选择
-
-- order: 1
-
-提供复选框操作功能。
-
----
-
-````jsx
-import { Tree } from 'antd';
-const TreeNode = Tree.TreeNode;
-
-function handleCheck(info) {
-  console.log('check: ', info);
-}
-
-ReactDOM.render(<div>
- <Tree defaultExpandAll checkable onCheck={handleCheck}>
-    <TreeNode title="parent 1">
-      <TreeNode title="leaf" />
-      <TreeNode title="parent 1-1">
-        <TreeNode title="parent 2-1">
-          <TreeNode title="leaf" />
-          <TreeNode title="leaf" />
-        </TreeNode>
-        <TreeNode title="leaf" />
-      </TreeNode>
-    </TreeNode>
-  </Tree>
-</div>
-, mountNode);
-````

components/tree/demo/contextmenu.md

@@ -0,0 +1,107 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { Tree, Tooltip } from 'antd';
+import assign from 'object-assign';
+const TreeNode = Tree.TreeNode;
+
+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();
+    document.body.onclick = (e) => {
+      // console.log(e.target);
+      if (contains(this.cmContainer, e.target)) {
+        return;
+      }
+      this.componentWillUnmount();
+      this.toolTip = null;
+    };
+  },
+  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);
+  },
+  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 placement="bottomRight" title="tooltip">
+        <span>show tooltip</span>
+    </Tooltip>);
+
+    const container = this.getContainer();
+    assign(this.cmContainer.style, {
+      position: 'absolute',
+      left: info.event.pageX + 'px',
+      top: info.event.pageY + 'px',
+    });
+
+    ReactDOM.render(<div
+      style={{padding: 10, backgroundColor: '#fff', border: '1px solid #ccc'}}>
+      <h4>{info.node.props.title}</h4>
+      {this.toolTip}
+      </div>, container);
+  },
+  render() {
+    return (
+      <div>
+        <h2>right click contextmenu</h2>
+        <Tree onRightClick={this.onRightClick} onSelect={this.onSelect}
+          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>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
+````

components/tree/demo/draggable.md

@@ -0,0 +1,123 @@
+# 拖动示例
+
+- order: 2
+
+拖动示例
+
+---
+
+````jsx
+import { Tree } from 'antd';
+const TreeNode = Tree.TreeNode;
+
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({title: key, key: key});
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const __level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(__level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      gData: gData,
+      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
+    };
+  },
+  onTreeDragStart() {
+  },
+  onTreeDragEnter(info) {
+    // console.log(info);
+    this.setState({
+      expandedKeys: info.expandedKeys,
+    });
+  },
+  onTreeDrop(info) {
+    console.log(info);
+    const dropKey = info.node.props.eventKey;
+    const dragKey = info.dragNode.props.eventKey;
+    // const dragNodesKeys = info.dragNodesKeys;
+    const loop = (data, key, callback) => {
+      data.forEach((item, index, arr) => {
+        if (item.key === key) {
+          return callback(item, index, arr);
+        }
+        if (item.children) {
+          return loop(item.children, key, callback);
+        }
+      });
+    };
+    const data = [...this.state.gData];
+    let dragObj;
+    loop(data, dragKey, (item, index, arr) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+    if (info.dropToGap) {
+      let ar;
+      let i;
+      loop(data, dropKey, (item, index, arr) => {
+        ar = arr;
+        i = index;
+      });
+      ar.splice(i, 0, dragObj);
+    } else {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到尾部，可以是随意位置
+        item.children.push(dragObj);
+      });
+    }
+    this.setState({
+      gData: data,
+      expandedKeys: info.originExpandedKeys,
+    });
+  },
+  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
+              onTreeDragStart={this.onTreeDragStart}
+              onTreeDragEnter={this.onTreeDragEnter}
+              onTreeDrop={this.onTreeDrop}
+              >
+          {loop(this.state.gData)}
+        </Tree>
+      </div>
+    </div>);
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
+````

components/tree/demo/dynamic.md

@@ -10,51 +10,79 @@
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
-const asyncTree = [{
+function generateTreeNodes(treeNode) {
-  name: 'pNode 01',
+  const arr = [];
-  key: '0-0'
+  const key = treeNode.props.eventKey;
-}];
+  for (let i = 0; i < 3; i++) {
+    arr.push({name: `leaf ${key}-${i}`, key: `${key}-${i}`});
+  }
+  return arr;
+}
 
-const generateTreeNodes = () => {
+function setLeaf(treeData, curKey, level) {
-  return [{
+  const loopLeaf = (data, lev) => {
-    name: '伯约',
+    const l = lev - 1;
-    key: '0-0-0'
+    data.forEach((item) => {
-  }];
+      if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
-};
+        curKey.indexOf(item.key) !== 0) {
-
+        return;
-const TreeDemo = React.createClass({
+      }
-  timeout(duration = 0) {
+      if (item.children) {
-    return new Promise((resolve) => {
+        loopLeaf(item.children, l);
-      setTimeout(resolve.bind(this), duration);
+      } 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);
+}
+
+const Demo = React.createClass({
+  propTypes: {},
   getInitialState() {
     return {
-      treeData: []
+      treeData: [],
     };
   },
   componentDidMount() {
-    this.timeout(1000).then(() => {
+    setTimeout(() => {
       this.setState({
-        treeData: asyncTree
+        treeData: [
+          {name: 'pNode 01', key: '0-0'},
+          {name: 'pNode 02', key: '0-1'},
+          {name: 'pNode 03', key: '0-2', isLeaf: true},
+        ],
       });
-      return asyncTree;
+    }, 100);
-    });
   },
-  handleSelect(info) {
+  onSelect(info) {
     console.log('selected', info);
   },
-  handleDataLoaded(treeNode) {
+  onLoadData(treeNode) {
-    return this.timeout(1000).then(() => {
+    return new Promise((resolve) => {
-      const child = generateTreeNodes();
+      setTimeout(() => {
-      const treeData = [...this.state.treeData];
+        const treeData = [...this.state.treeData];
-      treeData.forEach((item) => {
+        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
-        if (item.key === treeNode.props.eventKey) {
+        this.setState({treeData});
-          item.children = child;
+        resolve();
-        }
+      }, 500);
-      });
-      this.setState({treeData});
-      return child;
     });
   },
   render() {
@@ -62,20 +90,21 @@ const TreeDemo = React.createClass({
       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} />;
         }
+        return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0' ? true : false} />;
       });
     };
-    const parseTreeNode = data => loop(data);
+    const treeNodes = loop(this.state.treeData);
-    let treeNodes = parseTreeNode(this.state.treeData);
     return (
-      <Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
+      <div>
-        {treeNodes}
+        <h2>dynamic render</h2>
-      </Tree>
+        <Tree onSelect={this.onSelect} loadData={this.onLoadData}>
+          {treeNodes}
+        </Tree>
+      </div>
     );
-  }
+  },
 });
 
-ReactDOM.render(<TreeDemo />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````

components/tree/demo/special.md

@@ -1,67 +0,0 @@
-# 接收外部传参
-
-- order: 2
-
-受控组件，外部传入参数，控制树对象节点。
-
----
-
-````jsx
-import { Tree, Button } from 'antd';
-const TreeNode = Tree.TreeNode;
-
-class TreeDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    ['handleClick', 'handleCheck', 'handleSelect'].forEach((m)=> {
-      this[m] = this[m].bind(this);
-    });
-    this.state = {
-      checkedKeys: [],
-      selectedKeys: []
-    };
-  }
-  handleClick() {
-    this.setState({
-      checkedKeys: ['p11'],
-      selectedKeys: ['p21', 'p11']
-    });
-  }
-  handleCheck(info) {
-    console.log('check: ', info);
-    this.setState({
-      checkedKeys: ['p21'],
-      selectedKeys: ['p1', 'p21']
-    });
-  }
-  handleSelect(info) {
-    console.log('selected: ', info);
-    this.setState({
-      checkedKeys: ['p21'],
-      selectedKeys: ['p21']
-    });
-  }
-  render() {
-    return (<div>
-      <Tree defaultExpandAll checkable
-            onCheck={this.handleCheck} checkedKeys={this.state.checkedKeys}
-            onSelect={this.handleSelect} selectedKeys={this.state.selectedKeys} multiple>
-        <TreeNode title="parent 1" key="p1">
-          <TreeNode key="p10" title="leaf"/>
-          <TreeNode title="parent 1-1" key="p11">
-            <TreeNode title="parent 2-1" key="p21">
-              <TreeNode title="test" />
-              <TreeNode title={<span>sss</span>}/>
-            </TreeNode>
-            <TreeNode key="p22" title="leaf"/>
-          </TreeNode>
-        </TreeNode>
-        <TreeNode key="p12" title="leaf"/>
-      </Tree>
-      <Button type="primary" size="small" onClick={this.handleClick}>点此控制树节点</Button>
-    </div>);
-  }
-}
-
-ReactDOM.render(<TreeDemo />, mountNode);
-````

components/tree/index.jsx

@@ -8,6 +8,7 @@ const AntTree = React.createClass({
       prefixCls: 'ant-tree',
       checkable: false,
       showIcon: false,
+      openAnimation: animation,
     };
   },
   render() {
@@ -16,7 +17,7 @@ const AntTree = React.createClass({
     if (checkable) {
       checkable = <span className={`${props.prefixCls}-checkbox-inner`}></span>;
     }
-    return <Tree openAnimation={animation} {...props} checkable={checkable}>
+    return <Tree {...props} checkable={checkable}>
       {this.props.children}
     </Tree>;
   }

components/tree/index.md

@@ -18,20 +18,32 @@
 |-----------|------------------------------------------|------------|--------|
 |multiple | 是否支持多选 | bool | false |
 |checkable | 是否支持选中 | bool   | false    |
-|defaultExpandAll | 设置展开所有树节点 | bool | false |
+|defaultExpandAll | 默认展开所有树节点 | bool | false |
 |defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] |
+|expandedKeys | （受控）展开指定的树节点 | String[] | [] |
+|checkedKeys | （受控）选中复选框的树节点 | String[] | [] |
 |defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] |
+|selectedKeys | （受控）设置选中的树节点 | String[] | - |
 |defaultSelectedKeys | 默认选中的树节点 | String[] | [] |
-|checkedKeys | 设置选中复选框的树节点 | String[] | - |
+|onExpand | 展开/收起节点时触发 | function(node, expanded, expandedKeys) | - |
-|selectedKeys | 设置选中的树节点 | String[] | - |
+|onCheck | 点击复选框触发 | function(e:{checked:bool, node, checkedKeys, event}) | - |
-|onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - |
 |onSelect | 点击树节点触发 | function(e:{selected:bool,node,selectedKeys,event}) | - |
-|onDataLoaded | 异步加载数据 | function(node)| - |
+|filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - |
+|loadData | 异步加载数据 | function(node)| - |
+|onRightClick | 显示右键菜单 | function({event,node}) | - |
+|draggable | 设置节点可拖拽（IE>8） | bool | false |
+|onTreeDragStart | 开始拖拽时调用 | function({event,node}) | - |
+|onTreeDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - |
+|onTreeDragOver | dragover 触发时调用 | function({event,node}) | - |
+|onTreeDragLeave | dragleave 触发时调用 | function({event,node}) | - |
+|onTreeDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
 
 ### TreeNode props
 
 | 参数       | 说明                                      | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|--------|
 |disabled | 禁掉响应 | bool | false |
+|disableCheckbox | 禁掉 checkbox | bool | false |
 |title | 标题 | String | '---' |
-|key | 被树的defaultCheckedKeys/defaultSelectedKeys/defaultExpandedKeys所用 | String | 内部计算出的节点位置 |
+|key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | String | 内部计算出的节点位置 |
+|isLeaf | 设置为叶子节点 | bool | false |

package.json

@@ -61,7 +61,7 @@
     "rc-tabs": "~5.6.0",
     "rc-time-picker": "~1.0.0",
     "rc-tooltip": "~3.3.0",
-    "rc-tree": "^0.23.1",
+    "rc-tree": "^0.25.3",
     "rc-tree-select": "^0.3.3",
     "rc-trigger": "~1.0.6",
     "rc-upload": "~1.7.0",

style/components/tree.less

@@ -26,6 +26,41 @@
     list-style: none;
     white-space: nowrap;
     outline: 0;
+    a[draggable],
+    a[draggable="true"] {
+      color: #333;
+      -moz-user-select: none;
+      -khtml-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      /* Required to make elements draggable in old WebKit */
+      -khtml-user-drag: element;
+      -webkit-user-drag: element;
+    }
+    &.drag-over {
+      > a[draggable] {
+        background-color: #316ac5;
+        color: white;
+        border: 1px #316ac5 solid;
+        opacity: 0.8;
+      }
+    }
+    &.drag-over-gap-top {
+      > a[draggable] {
+        border-top: 2px blue solid;
+      }
+    }
+    &.drag-over-gap-bottom {
+      > a[draggable] {
+        border-bottom: 2px blue solid;
+      }
+    }
+    &.filter-node {
+      > a {
+        color: #a60000!important;
+        font-weight: bold!important;
+      }
+    }
     ul {
       margin: 0;
       padding: 0 0 0 18px;
@@ -45,7 +80,6 @@
       &.@{tree-prefix-cls}-checkbox {
         margin: 3px 4px 0 0;
       }
-      &.@{tree-prefix-cls}-switcher-noop,
       &.@{tree-prefix-cls}-switcher,
       &.@{tree-prefix-cls}-iconEle {
         line-height: 0;
@@ -69,17 +103,6 @@
         }
       }
       &.@{tree-prefix-cls}-switcher {
-        &-disabled {
-          background: #fff;
-          position: relative;
-          &:after {
-            content: '-';
-            position: absolute;
-            top: 8px;
-            left: 6px;
-            color: gray;
-          }
-        }
         &.@{tree-prefix-cls}-roots_open,
         &.@{tree-prefix-cls}-center_open,
         &.@{tree-prefix-cls}-bottom_open,
@@ -107,8 +130,10 @@
   }
   &-treenode-disabled {
     >span,
-    >a {
+    >a,
-      color: gray;
+    >a span {
+      color: #ccc;
+      cursor: not-allowed;
     }
   }
   &-node-selected {

style/components/treeSelect.less

@@ -26,6 +26,12 @@
     list-style: none;
     white-space: nowrap;
     outline: 0;
+    &.filter-node {
+      > a {
+        color: #a60000!important;
+        font-weight: bold!important;
+      }
+    }
     ul {
       margin: 0;
       padding: 0 0 0 18px;
@@ -45,7 +51,6 @@
       &.@{tree-select-tree-prefix-cls}-checkbox {
         margin: 3px 4px 0 0;
       }
-      &.@{tree-select-tree-prefix-cls}-switcher-noop,
       &.@{tree-select-tree-prefix-cls}-switcher,
       &.@{tree-select-tree-prefix-cls}-iconEle {
         line-height: 0;
@@ -69,17 +74,6 @@
         }
       }
       &.@{tree-select-tree-prefix-cls}-switcher {
-        &-disabled {
-          background: #fff;
-          position: relative;
-          &:after {
-            content: '-';
-            position: absolute;
-            top: 8px;
-            left: 6px;
-            color: gray;
-          }
-        }
         &.@{tree-select-tree-prefix-cls}-roots_open,
         &.@{tree-select-tree-prefix-cls}-center_open,
         &.@{tree-select-tree-prefix-cls}-bottom_open,
@@ -107,8 +101,10 @@
   }
   &-treenode-disabled {
     >span,
-    >a {
+    >a,
-      color: gray;
+    >a span {
+      color: #ccc;
+      cursor: not-allowed;
     }
   }
   &-node-selected {