add new adddemo

.gitignore

@@ -36,3 +36,4 @@ jspm_packages
 
 dist
 coverage
+.idea

demo/Demo1.js

@@ -1,61 +0,0 @@
-/**
- *
- * @title Tree基本使用事例
- * @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
- *
- */
-
-
-import React, {
-	Component
-} from 'react';
-import Tree from '../../src';
-
-const TreeNode = Tree.TreeNode;
-
-const defaultProps = {
-	keys: ['0-0-0', '0-0-1']
-}
-console.log(Tree);
-class Demo1 extends Component {
-	constructor(props) {
-		super(props);
-		const keys = this.props.keys;
-		this.state = {
-			defaultExpandedKeys: keys,
-			defaultSelectedKeys: keys,
-			defaultCheckedKeys: keys,
-		};
-	}
-	onSelect(info) {
-		console.log('selected', info);
-	}
-	onCheck(info) {
-		console.log('onCheck', info);
-	}
-	render() {
-		return (
-			<Tree className="myCls" showLine checkable
-	        defaultExpandedKeys={this.state.defaultExpandedKeys}
-	        defaultSelectedKeys={this.state.defaultSelectedKeys}
-	        defaultCheckedKeys={this.state.defaultCheckedKeys}
-	        onSelect={this.onSelect} onCheck={this.onCheck}
-	      >
-	        <TreeNode title="parent 1" key="0-0">
-	          <TreeNode title="parent 1-0" key="0-0-0" disabled>
-	            <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
-	            <TreeNode title="leaf" key="0-0-0-1" />
-	          </TreeNode>
-	          <TreeNode title="parent 1-1" key="0-0-1">
-	            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
-	          </TreeNode>
-	        </TreeNode>
-	      </Tree>
-		);
-	}
-}
-
-Demo1.defaultProps = defaultProps;
-
-
-export default Demo1;

demo/Demo4.js

@@ -1,160 +0,0 @@
-/**
- *
- * @title Tree可搜索事例
- * @description
- *
- */
-
-
-import React, {
-  Component
-} from 'react';
-import FormControl from 'bee-form-control';
-import Tree from '../../src';
-
-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 TreeNode = Tree.TreeNode;
-
-const dataList = [];
-const generateList = (data) => {
-  for (let i = 0; i < data.length; i++) {
-    const node = data[i];
-    const key = node.key;
-    dataList.push({
-      key,
-      title: key
-    });
-    if (node.children) {
-      generateList(node.children, node.key);
-    }
-  }
-};
-generateList(gData);
-
-const getParentKey = (key, tree) => {
-  let parentKey;
-  for (let i = 0; i < tree.length; i++) {
-    const node = tree[i];
-    if (node.children) {
-      if (node.children.some(item => item.key === key)) {
-        parentKey = node.key;
-      } else if (getParentKey(key, node.children)) {
-        parentKey = getParentKey(key, node.children);
-      }
-    }
-  }
-  return parentKey;
-};
-
-
-class Demo4 extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expandedKeys: [],
-      searchValue: '',
-      autoExpandParent: true,
-    }
-  }
-  onExpand = (expandedKeys) => {
-    this.setState({
-      expandedKeys,
-      autoExpandParent: false,
-    });
-  }
-  onChange = (value) => {
-    // const value = e.target.value;
-    const expandedKeys = [];
-    dataList.forEach((item) => {
-      if (item.key.indexOf(value) > -1) {
-        expandedKeys.push(getParentKey(item.key, gData));
-      }
-    });
-    const uniqueExpandedKeys = [];
-    expandedKeys.forEach((item) => {
-      if (item && uniqueExpandedKeys.indexOf(item) === -1) {
-        uniqueExpandedKeys.push(item);
-      }
-    });
-    this.setState({
-      expandedKeys: uniqueExpandedKeys,
-      searchValue: value,
-      autoExpandParent: true,
-    });
-  }
-  render() {
-    const {
-      searchValue,
-      expandedKeys,
-      autoExpandParent
-    } = this.state;
-    const loop = data => data.map((item) => {
-      const index = item.key.search(searchValue);
-      const beforeStr = item.key.substr(0, index);
-      const afterStr = item.key.substr(index + searchValue.length);
-      const title = index > -1 ? (
-        <span>
-          {beforeStr}
-          <span className="u-tree-searchable-filter">{searchValue}</span>
-          {afterStr}
-        </span>
-      ) : <span>{item.key}</span>;
-      if (item.children) {
-        return (
-          <TreeNode key={item.key} title={title}>
-            {loop(item.children)}
-          </TreeNode>
-        );
-      }
-      return <TreeNode key={item.key} title={title} />;
-    });
-    return (
-      <div>
-        <FormControl
-          style={{ width: 200 }}
-          placeholder="Search"
-          onChange={this.onChange}
-        />
-        <Tree
-          onExpand={this.onExpand}
-          expandedKeys={expandedKeys}
-          autoExpandParent={autoExpandParent}
-        >
-          {loop(gData)}
-        </Tree>
-      </div>
-    );
-  }
-}
-
-export default Demo4;

demo/demolist/Demo7.js

@@ -7,147 +7,195 @@
 
 
 import React, {
-  Component
+    Component
 } from 'react';
 import Tree from '../../src';
 import Button from 'bee-button';
-
+import FormControl from 'bee-form-control';
+import Icon from 'bee-icon';
 const TreeNode = Tree.TreeNode;
 
 
 class Demo7 extends Component {
-  constructor(props) {
+    constructor(props) {
-    super(props);
+        super(props);
-    this.state = {
+        this.state = {
-      treeData: [],
+            treeData: [],
-      defaultExpandedKeys: ['0-0', '0-1', '0-2'],
+            defaultExpandedKeys: ['0-0', '0-1', '0-2'],
-      parentNode: {}
+            parentNode: {},
-    };
+            editValue: ''
-    this.onSelect = this.onSelect.bind(this);
+        };
-    this.addNode = this.addNode.bind(this);
+        this.parentNode = null
-    this.clickFun = this.clickFun.bind(this);
-    this.getNodeByKey = this.getNodeByKey.bind(this);
-    this.parentNode = null
-  }
-  componentDidMount() {
-      setTimeout(() => {
-        this.setState({
-          treeData: [{
-            name: 'pNode 01',
-            key: '0-0',
-            children: [{
-              name: 'leaf 0-0-0',
-              key: '0-0-0'
-            }, {
-              name: 'leaf 0-0-1',
-              key: '0-0-1'
-            }]
-          }, {
-            name: 'pNode 02',
-            key: '0-1',
-            children: [{
-              name: 'leaf 0-1-0',
-              key: '0-1-0'
-            }, {
-              name: 'leaf 0-1-1',
-              key: '0-1-1'
-            }]
-          }, {
-            name: 'pNode 03',
-            key: '0-2',
-            isLeaf: true
-          }, ],
-        });
-      }, 100);
     }
+
+    componentDidMount() {
+        setTimeout(() => {
+            this.setState({
+                treeData: [{
+                    name: 'pNode 01',
+                    key: '0-0',
+                    children: [{
+                        name: 'leaf 0-0-0',
+                        key: '0-0-0'
+                    }, {
+                        name: 'leaf 0-0-1',
+                        key: '0-0-1'
+                    }]
+                }, {
+                    name: 'pNode 02',
+                    key: '0-1',
+                    children: [{
+                        name: 'leaf 0-1-0',
+                        key: '0-1-0'
+                    }, {
+                        name: 'leaf 0-1-1',
+                        key: '0-1-1'
+                    }]
+                }, {
+                    name: 'pNode 03',
+                    key: '0-2',
+                    isLeaf: true
+                },],
+            });
+        }, 100);
+    }
+
     /**
      * 增加节点
-     * @param string prKey    [父节点key]
+     * @param prKey string    [父节点key]
-     * @param object nodeItem [子节点信息]
+     * @param nodeItem obiect [子节点信息]
      */
-  addNode(prKey, nodeItem) {
+    addNode = (prKey, nodeItem) => {
-    const data = this.state.treeData;
+        let { treeData } = this.state;
-    let parNode;
+        let parNode;
-    if (prKey) {
+        if (prKey) {
-      // 如果prKey存在则搜索父节点进行添加
+            // 如果prKey存在则搜索父节点进行添加
-      parNode = this.getNodeByKey(data, prKey);
+            parNode = this.getNodeByKey(treeData, prKey);
-      //如果父节点存在的话，添加到父节点上
+            //如果父节点存在的话，添加到父节点上
-      if (parNode) {
+            if (parNode) {
-        if (!parNode.children) {
+                if (!parNode.children) {
-          parNode.children = [];
+                    parNode.children = [];
+                }
+                // 如果key不存在就动态生成一个
+                if (!nodeItem.key) {
+                    nodeItem.key = prKey + parNode.children.length + 1;
+                }
+                nodeItem.name = (
+                    <div>
+                        <FormControl
+                            value={ this.state.editValue }
+                            onChange={ this.handleValueChange }
+                        />
+                        <Icon
+                            type="uf-correct"
+                            onClick={ this.handleEnsure(nodeItem.key) }
+                        />
+                    </div>
+                )
+                parNode.children.push(nodeItem);
+            }
+        } else {
+            // 没有穿prKey添加到根下成为一级节点
+            if (!nodeItem.key) {
+                nodeItem.key = "0-" + treeData.length + 1;
+            }
+            nodeItem.name = (
+                <div>
+                    <FormControl
+                        value={ this.state.editValue }
+                        onChange={ this.handleValueChange }
+                    />
+                    <Icon
+                        type="uf-correct"
+                        onClick={ this.handleEnsure(nodeItem.key) }
+                    />
+                </div>
+            )
+            treeData.push(nodeItem);
         }
-        // 如果key不存在就动态生成一个
+
-        if (!nodeItem.key) {
+        this.setState({
-          nodeItem.key = prKey + parNode.children.length + 1;
+            treeData
-        }
+        });
-        parNode.children.push(nodeItem);
-      }
-    } else {
-      // 没有穿prKey添加到根下成为一级节点
-      if (!nodeItem.key) {
-        nodeItem.key = "0-" + data.length + 1;
-      }
-      data.push(nodeItem);
     }
 
-    this.setState({
+    getNodeByKey = (data, key) => {
-      data
+        if (!this.parentNode) {
-    });
+            data.find(item => {
-  }
+                if (item.key === key) {
-
+                    console.log('item.name---' + item.name)
-  getNodeByKey(data, key) {
+                    this.parentNode = item;
-    if (!this.parentNode) {
+                    return (true);
-      data.find(item => {
+                } else if (item.children) {
-        if (item.key === key) {
+                    return this.getNodeByKey(item.children, key);
-          console.log('item.name---' + item.name)
-          this.parentNode = item;
-          return (true);
-        } else if (item.children) {
-          return this.getNodeByKey(item.children, key);
 
+                }
+            })
         }
-      })
+        return this.parentNode;
     }
-    return this.parentNode;
-  }
 
 
-
+    onSelect = (info) => {
-  onSelect(info) {
+        console.log('selected', info);
-      console.log('selected', info);
     }
     /**
      * 点击button事件
      */
-  clickFun() {
+    clickFun = () => {
-    let prKey, nodeItem;
+        let prKey, nodeItem;
-    prKey = '0-1';
+        prKey = '0-1';
-    nodeItem = {
+        nodeItem = {}
-      name: 'leaf 0-0-4'
+        this.addNode(prKey, nodeItem);
     }
-    this.addNode(prKey, nodeItem);
-  }
 
-  render() {
+    handleValueChange = (value) => {
-    const loop = data => data.map((item) => {
+        this.setState({
-      if (item.children) {
+            editValue: value
-        return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
+        })
-      }
+    }
-      return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
+
-    });
+    handleEnsure = (key) => () => {
-    const treeNodes = loop(this.state.treeData);
+        let { treeData, editValue } = this.state;
-    console.log('defaultKeys--' + this.state.defaultExpandedKeys);
+
-    return (
+        const loop = data => data.forEach((item) => {
-      <div>
+            if(item.children){
-        <Tree onSelect={this.onSelect} defaultExpandedKeys={this.state.defaultExpandedKeys}>
+                loop(item.children)
-          {treeNodes}
+            }
-        </Tree>
+            if(item.key === key){
-        <Button colors="success" onClick={this.clickFun}>
+                return item.name = editValue;
-        增加节点
+            }
-        </Button>
+        });
-      </div>
+        loop(treeData);
-    );
+
-  }
+
-};
+        this.setState({
+            treeData,
+            editValue: ''
+        })
+    }
+
+    render() {
+        const loop = data => data.map((item) => {
+            if (item.children) {
+                return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
+            }
+            return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'}/>;
+        });
+        const treeNodes = loop(this.state.treeData);
+        console.log('defaultKeys--' + this.state.defaultExpandedKeys);
+        return (
+            <div>
+                <Tree onSelect={this.onSelect} defaultExpandedKeys={this.state.defaultExpandedKeys}>
+                    {treeNodes}
+                </Tree>
+                <Button colors="success" onClick={this.clickFun}>
+                    增加节点
+                </Button>
+            </div>
+        );
+    }
+}
+;
 
 export default Demo7

demo/index-demo-base.js

@@ -69,14 +69,9 @@ class Demo extends Component {
         );
         const header = (
             <Row>
-                <Col md={11}>
+                <Col md={12}>
                 { example }
                 </Col>
-                <Col md={1}>
-                <Button shape="icon" onClick={ this.handleClick }>
-                    { caret }
-                </Button>
-                </Col>
             </Row>
         );
         return (