add tree-select

9 years ago · 77a59bbd76
6 changed files with 242 additions and 1 deletions
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@ -0,0 +1,55 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+const TreeNode = TreeSelect.TreeNode;
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      value: '1',
+    };
+  },
+  onChange(e) {
+    let value;
+    if (e.target) {
+      value = e.target.value;
+    } else {
+      value = e;
+    }
+    this.setState({value});
+  },
+  render() {
+    return (
+      <div style={{margin: 20}}>
+        <h2>Single Select</h2>
+        <TreeSelect style={{width: 300}} showSearch
+              value={this.state.value}
+              dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+              treeProps={{defaultExpandAll: true}}
+              onChange={this.onChange}>
+          <TreeNode value="parent 1" title="parent 1" key="0-1">
+            <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+              <TreeNode value="leaf" title="leaf" key="random" />
+              <TreeNode value="leaf" title="leaf" />
+            </TreeNode>
+            <TreeNode value="parent 1-1" title="parent 1-1">
+              <TreeNode value="sss" title={<span style={{color: 'red'}}>sss</span>} />
+            </TreeNode>
+          </TreeNode>
+        </TreeSelect>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <Demo />
+, document.getElementById('components-tree-select-demo-basic'));
+````
--- a/components/tree-select/demo/enhance.md
+++ b/components/tree-select/demo/enhance.md
@ -0,0 +1,99 @@
+# 更多功能
+
+- order: 1
+
+更多功能。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+const TreeNode = TreeSelect.TreeNode;
+
+const x = 5;
+const y = 3;
+const z = 2;
+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 {
+      value: [],
+    };
+  },
+  onDeselect(selectedValue) {
+    console.log('onDeselect', selectedValue);
+    const newVal = [...this.state.value];
+    newVal.splice(newVal.indexOf(selectedValue), 1);
+    this.setState({
+      value: newVal,
+    });
+  },
+  onSelect(selectedKey, node, selectedKeys) {
+    console.log('selected: ', selectedKey, selectedKeys);
+    this.setState({
+      value: selectedKeys,
+    });
+  },
+  onCheck(checkedKey, node, checkedKeys) {
+    console.log('onCheck:', checkedKey);
+    this.setState({
+      value: checkedKeys,
+    });
+  },
+  render() {
+    const loop = data => {
+      return data.map((item) => {
+        if (item.children) {
+          return <TreeNode key={item.key} value={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
+        }
+        return <TreeNode key={item.key} value={item.key} title={item.key} />;
+      });
+    };
+    const treeProps = {
+      showIcon: false,
+      showLine: true,
+      checkable: true,
+      defaultCheckedKeys: this.state.value,
+      defaultSelectedKeys:  this.state.value,
+      // selectedKeys:  this.state.value,
+      // checkedKeys: this.state.value,
+      // onCheck: this.onCheck,
+    };
+    return (<div style={{padding: '10px 30px'}}>
+      <h3>more</h3>
+      <TreeSelect style={{width: 300}} defaultValue={this.state.value} multiple treeProps={treeProps}
+        onSelect={this.onSelect} onCheck={this.onCheck} onDeselect={this.onDeselect}>
+        {loop(gData)}
+      </TreeSelect>
+    </div>);
+  },
+});
+
+ReactDOM.render(<div>
+  <Demo />
+</div>
+, document.getElementById('components-tree-select-demo-enhance'));
+````
--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@ -0,0 +1,57 @@
+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({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-select',
+      transitionName: 'slide-up',
+      optionLabelProp: 'value',
+      choiceTransitionName: 'zoom',
+      showSearch: false,
+      size: 'default'
+    };
+  },
+  render() {
+    const props = this.props;
+    let {
+      size, className, combobox, notFoundContent
+    } = this.props;
+
+    const cls = classNames({
+      'ant-select-lg': size === 'large',
+      'ant-select-sm': size === 'small',
+      [className]: !!className,
+    });
+
+    if (combobox) {
+      notFoundContent = null;
+    }
+
+    const treeProps = {
+      prefixCls: 'ant-tree',
+      checkable: false,
+      showIcon: false,
+      openAnimation: animation
+    };
+    assign(treeProps, props.treeProps);
+
+    let checkable = treeProps.checkable;
+    if (checkable) {
+      treeProps.checkable = <span className={`${treeProps.prefixCls}-checkbox-inner`}></span>;
+    }
+
+    return (
+      <TreeSelect {...this.props}
+        treeProps={treeProps}
+        className={cls}
+        notFoundContent={notFoundContent} />
+    );
+  }
+});
+
+AntTreeSelect.TreeNode = TreeNode;
+export default AntTreeSelect;
--- a/components/tree-select/index.md
+++ b/components/tree-select/index.md
@ -0,0 +1,28 @@
+# TreeSelect
+
+- category: Components
+- chinese: 树选择控件
+- type: 表单
+
+---
+
+## 何时使用
+
+当需要从树控件中灵活地筛选数据时
+
+## API
+
+### Tree props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+|multiple | 是否支持多选 | bool | false |
+|[select-props](http://ant.design/components/select/#select-props) | the same as select props | ||
+|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) |
+
+### TreeNode props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+|value | default as optionFilterProp | String | 'value' |
+|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同|||
--- a/index.js
+++ b/index.js
@ -29,6 +29,7 @@ const antd = {
  Alert: require('./components/alert'),
  Validation: require('./components/validation'),
  Tree: require('./components/tree'),
+  TreeSelect: require('./components/tree-select'),
  Upload: require('./components/upload'),
  Badge: require('./components/badge'),
  Menu: require('./components/menu'),
--- a/package.json
+++ b/package.json
@ -59,7 +59,8 @@
    "rc-tabs": "~5.5.0",
    "rc-time-picker": "~1.0.0",
    "rc-tooltip": "~3.3.0",
-    "rc-tree": "~0.19.0",
+    "rc-tree": "^0.21.2",
+    "rc-tree-select": "~0.2.1",
    "rc-trigger": "~1.0.6",
    "rc-upload": "~1.7.0",
    "rc-util": "~3.0.1",