Add multiple demo for TreeSelect

This commit is contained in:
afc163 2017-08-21 18:07:39 +08:00
parent 55f58cf59f
commit 50bdbbda40
4 changed files with 100 additions and 6 deletions

View File

@ -86,6 +86,45 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
</span>
`;
exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
<span
class="ant-select ant-select-enabled ant-select-allow-clear"
style="width:300px;"
>
<span
aria-autocomplete="list"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--multiple"
role="combobox"
>
<ul
class="ant-select-selection__rendered"
>
<li
class="ant-select-search ant-select-search--inline"
>
<span
class="ant-select-search__field__wrap"
>
<input
class="ant-select-search__field"
role="textbox"
value=""
/>
</span>
</li>
</ul>
<span
class="ant-select-search__field__placeholder"
style="display:block;"
>
Please select
</span>
</span>
</span>
`;
exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
<span
class="ant-select ant-select-enabled"

View File

@ -1,13 +1,13 @@
---
order: 2
order: 3
title:
zh-CN:
en-US: Multiple
zh-CN: 可勾
en-US: Checkable
---
## zh-CN
多选和勾选框功能。
使用勾选框实现多选功能。
## en-US
@ -58,7 +58,6 @@ class Demo extends React.Component {
treeData,
value: this.state.value,
onChange: this.onChange,
multiple: true,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
searchPlaceholder: 'Please select',

View File

@ -0,0 +1,56 @@
---
order: 1
title:
zh-CN: 多选
en-US: Multiple Selection
---
## zh-CN
多选的树选择。
## en-US
Multiple selection usage.
````jsx
import { TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;
class Demo extends React.Component {
state = {
value: undefined,
}
onChange = (value) => {
console.log(arguments);
this.setState({ value });
}
render() {
return (
<TreeSelect
showSearch
style={{ width: 300 }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
multiple
treeDefaultExpandAll
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="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
);
}
}
ReactDOM.render(<Demo />, mountNode);
````

View File

@ -1,5 +1,5 @@
---
order: 1
order: 2
title:
zh-CN: 从数据直接生成
en-US: Generate form tree data