make TreeSelect demo more readable

components/tree-select/demo/basic.md

@@ -10,36 +10,6 @@
 import { TreeSelect } from 'antd';
 const TreeNode = TreeSelect.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({
-      label: key + '-label',
-      value: key + '-value',
-      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 {
@@ -51,23 +21,11 @@ const Demo = React.createClass({
     this.setState({ value });
   },
   render() {
-    return (<div>
+    return (
-      <h5>使用 treeData</h5>
-      <TreeSelect style={{ width: 360 }}
-        dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
-        treeData={gData} showSearch
-        value={this.state.value}
-        treeDefaultExpandAll
-        placeholder={<i>请下拉选择</i>}
-        searchPlaceholder="please search"
-        treeNodeFilterProp="title"
-        onChange={this.onChange} />
-
-      <br /><br />
-      <h5>手工构造 TreeNode</h5>
       <TreeSelect style={{ width: 360 }}
         value={this.state.value}
         dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="请选择"
         treeDefaultExpandAll
         onChange={this.onChange}>
         <TreeNode value="parent 1" title="parent 1" key="0-1">
@@ -76,15 +34,13 @@ const Demo = React.createClass({
             <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: 'red' }}>sss</b>} key="random3" />
+            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
           </TreeNode>
         </TreeNode>
       </TreeSelect>
-    </div>);
+    );
   },
 });
 
-ReactDOM.render(
+ReactDOM.render(<Demo />, mountNode);
-  <Demo />
-, mountNode);
 ````

components/tree-select/demo/checkable.md

@@ -1,48 +1,46 @@
-# 更多功能
+# 多选
 
-- order: 1
+- order: 2
 
-更多功能。
+多选和勾选框功能。
 
 ---
 
 ````jsx
 import { TreeSelect } from 'antd';
 
-const x = 3;
+const treeData = [{
-const y = 2;
+  'label': '节点一',
-const z = 1;
+  'value': '0-0',
-const gData = []; // 手工构造数据
+  'key': '0-0',
-const generateData = (_level, _preKey, _tns) => {
+  'children': [{
-  const preKey = _preKey || '0';
+    'label': '子节点一',
-  const tns = _tns || gData;
+    'value': '0-0-0',
-  const children = [];
+    'key': '0-0-0',
-  for (let i = 0; i < x; i++) {
+  }, {
-    const key = `${preKey}-${i}`;
+    'label': '子节点二',
-    tns.push({
+    'value': '0-0-1',
-      label: key + '-label',
+    'key': '0-0-1',
-      value: key + '-value',
+  }],
-      key: key,
+}, {
-    });
+  'label': '节点二',
-    if (i < y) {
+  'value': '0-1',
-      children.push(key);
+  'key': '0-1',
-    }
+  'children': [{
-  }
+    'label': '子节点三',
-  if (_level < 0) {
+    'value': '0-1-0',
-    return tns;
+    'key': '0-1-0',
-  }
+  }, {
-  const __level = _level - 1;
+    'label': '子节点四',
-  children.forEach((key, index) => {
+    'value': '0-1-1',
-    tns[index].children = [];
+    'key': '0-1-1',
-    return generateData(__level, key, tns[index].children);
+  }],
-  });
+}];
-};
-generateData(z);
 
 const Demo = React.createClass({
   getInitialState() {
     return {
-      value: ['0-0-0-value'],
+      value: ['0-0-0'],
     };
   },
   onChange(value) {
@@ -51,16 +49,17 @@ const Demo = React.createClass({
   },
   render() {
     const tProps = {
-      treeData: gData,
+      treeData,
       value: this.state.value,
       onChange: this.onChange,
       multiple: true,
       treeCheckable: true,
       treeDefaultExpandAll: true,
+      style: {
+        width: 360,
+      },
     };
-    return (
+    return <TreeSelect {...tProps} />;
-      <TreeSelect style={{ width: 360 }} {...tProps} />
-    );
   },
 });
 

components/tree-select/demo/size.md

@@ -1,82 +0,0 @@
-# 大小
-
-- order: 2
-
-不同大小的 TreeSelect。
-
----
-
-````jsx
-import { TreeSelect } from 'antd';
-
-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({
-      label: key + '-label',
-      value: key + '-value',
-      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: '',
-    };
-  },
-  onChange(value) {
-    this.setState({ value });
-  },
-  render() {
-    return (
-      <div>
-        <TreeSelect size="large" style={{ width: 360 }}
-          dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
-          treeData={gData}
-          value={this.state.value}
-          treeDefaultExpandAll
-          onChange={this.onChange} />
-        <br /><br />
-        <TreeSelect style={{ width: 360 }}
-          dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
-          treeData={gData}
-          value={this.state.value}
-          treeDefaultExpandAll
-          onChange={this.onChange} />
-        <br /><br />
-        <TreeSelect size="small" style={{ width: 360 }}
-          dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
-          treeData={gData}
-          value={this.state.value}
-          treeDefaultExpandAll
-          onChange={this.onChange} />
-      </div>
-    );
-  },
-});
-
-ReactDOM.render(
-  <Demo />
-, mountNode);
-````

components/tree-select/demo/treeData.md

@@ -0,0 +1,55 @@
+# 从数据直接生成
+
+- order: 1
+
+使用 `treeData` 把 JSON 数据直接生成树结构。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+
+const treeData = [{
+  'label': '节点一',
+  'value': '0-0',
+  'key': '0-0',
+  'children': [{
+    'label': '子节点一',
+    'value': '0-0-1',
+    'key': '0-0-1',
+  }, {
+    'label': '子节点二',
+    'value': '0-0-2',
+    'key': '0-0-2',
+  }],
+}, {
+  'label': '节点二',
+  'value': '0-1',
+  'key': '0-1',
+}];
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      value: '',
+    };
+  },
+  onChange(value) {
+    console.log(arguments);
+    this.setState({ value });
+  },
+  render() {
+    return (
+      <TreeSelect style={{ width: 360 }}
+        value={this.state.value}
+        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+        treeDefaultExpandAll
+        onChange={this.onChange} />
+    );
+  },
+});
+
+ReactDOM.render(<Demo />, mountNode);
+````