mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

update tree controlled demo

Browse Source
This commit is contained in:
afc163 2017-09-15 10:42:59 +08:00
parent 6acf6fc643
commit b36df9da2b
2 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/tree/__tests__/__snapshots__/demo.test.js.snap
View File

@ -185,7 +185,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
class="ant-tree-switcher ant-tree-switcher_open"
/>
<span
class="ant-tree-checkbox"
class="ant-tree-checkbox ant-tree-checkbox-indeterminate"
>
<span
class="ant-tree-checkbox-inner"
@ -212,7 +212,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
class="ant-tree-switcher ant-tree-switcher_open"
/>
<span
class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
class="ant-tree-checkbox ant-tree-checkbox-checked"
>
<span
class="ant-tree-checkbox-inner"

82
components/tree/demo/basic-controlled.md
View File

@ -17,33 +17,41 @@ basic controlled example
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 });
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 treeData = [{
"title": "0-0",
"key": "0-0",
"children": [{
"title": "0-0-0",
"key": "0-0-0",
"children": [
{ "title": "0-0-0-0", "key": "0-0-0-0" },
{ "title": "0-0-0-1", "key": "0-0-0-1" },
{ "title": "0-0-0-2", "key": "0-0-0-2" },
],
}, {
"title": "0-0-1",
"key": "0-0-1",
"children": [
{ "title": "0-0-1-0", "key": "0-0-1-0" },
{ "title": "0-0-1-1", "key": "0-0-1-1" },
{ "title": "0-0-1-2", "key": "0-0-1-2" },
],
}, {
"title": "0-0-2",
"key": "0-0-2",
}],
}, {
"title": "0-1",
"key": "0-1",
"children": [
{ "title": "0-1-0-0", "key": "0-1-0-0" },
{ "title": "0-1-0-1", "key": "0-1-0-1" },
{ "title": "0-1-0-2", "key": "0-1-0-2" },
],
}, {
"title": "0-2",
"key": "0-2",
}];
class Demo extends React.Component {
state = {
@ -62,26 +70,26 @@ class Demo extends React.Component {
});
}
onCheck = (checkedKeys) => {
this.setState({
checkedKeys,
selectedKeys: ['0-3', '0-4'],
});
console.log('onCheck', checkedKeys);
this.setState({ checkedKeys });
}
onSelect = (selectedKeys, info) => {
console.log('onSelect', info);
this.setState({ selectedKeys });
}
render() {
const loop = data => data.map((item) => {
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0'}>
{loop(item.children)}
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} title={item.key} />;
return <TreeNode {...item} />;
});
}
render() {
return (
<Tree
checkable
@ -93,7 +101,7 @@ class Demo extends React.Component {
onSelect={this.onSelect}
selectedKeys={this.state.selectedKeys}
>
{loop(gData)}
{this.renderTreeNodes(treeData)}
</Tree>
);
}