From 35ef2b0b2d4d9b3ea0b179aff801d528c73e6c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:16:02 +0800 Subject: [PATCH] add tree-select --- components/tree-select/demo/basic.md | 55 ++++++++++++++ components/tree-select/demo/enhance.md | 99 ++++++++++++++++++++++++++ components/tree-select/index.jsx | 57 +++++++++++++++ components/tree-select/index.md | 28 ++++++++ index.js | 1 + package.json | 3 +- 6 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 components/tree-select/demo/basic.md create mode 100644 components/tree-select/demo/enhance.md create mode 100644 components/tree-select/index.jsx create mode 100644 components/tree-select/index.md diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md new file mode 100644 index 000000000000..211f7b4cf8f7 --- /dev/null +++ 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 ( +
+

Single Select

+ + + + + + + + sss} /> + + + +
+ ); + }, +}); + +ReactDOM.render( + +, document.getElementById('components-tree-select-demo-basic')); +```` diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md new file mode 100644 index 000000000000..f6a3096996d9 --- /dev/null +++ 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 {loop(item.children)}; + } + return ; + }); + }; + 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 (
+

more

+ + {loop(gData)} + +
); + }, +}); + +ReactDOM.render(
+ +
+, document.getElementById('components-tree-select-demo-enhance')); +```` diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx new file mode 100644 index 000000000000..aea1760da698 --- /dev/null +++ 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 = ; + } + + return ( + + ); + } +}); + +AntTreeSelect.TreeNode = TreeNode; +export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md new file mode 100644 index 000000000000..3e4cf4e5e1e6 --- /dev/null +++ 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 相同||| diff --git a/index.js b/index.js index 0b5a8bbbbcea..0b379216696b 100644 --- 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'), diff --git a/package.json b/package.json index e136f00b41ee..d81846da3c81 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,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",