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

@@ -11,7 +11,8 @@ import React, {
 } 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;
 
 
@@ -21,14 +22,12 @@ class Demo7 extends Component {
         this.state = {
             treeData: [],
             defaultExpandedKeys: ['0-0', '0-1', '0-2'],
-      parentNode: {}
+            parentNode: {},
+            editValue: ''
         };
-    this.onSelect = this.onSelect.bind(this);
-    this.addNode = this.addNode.bind(this);
-    this.clickFun = this.clickFun.bind(this);
-    this.getNodeByKey = this.getNodeByKey.bind(this);
         this.parentNode = null
     }
+
     componentDidMount() {
         setTimeout(() => {
             this.setState({
@@ -56,21 +55,22 @@ class Demo7 extends Component {
                     name: 'pNode 03',
                     key: '0-2',
                     isLeaf: true
-          }, ],
+                },],
             });
         }, 100);
     }
+
     /**
      * 增加节点
-     * @param string prKey    [父节点key]
-     * @param object nodeItem [子节点信息]
+     * @param prKey string    [父节点key]
+     * @param nodeItem obiect [子节点信息]
      */
-  addNode(prKey, nodeItem) {
-    const data = this.state.treeData;
+    addNode = (prKey, nodeItem) => {
+        let { treeData } = this.state;
         let parNode;
         if (prKey) {
             // 如果prKey存在则搜索父节点进行添加
-      parNode = this.getNodeByKey(data, prKey);
+            parNode = this.getNodeByKey(treeData, prKey);
             //如果父节点存在的话，添加到父节点上
             if (parNode) {
                 if (!parNode.children) {
@@ -80,22 +80,46 @@ class Demo7 extends Component {
                 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-" + data.length + 1;
+                nodeItem.key = "0-" + treeData.length + 1;
             }
-      data.push(nodeItem);
+            nodeItem.name = (
+                <div>
+                    <FormControl
+                        value={ this.state.editValue }
+                        onChange={ this.handleValueChange }
+                    />
+                    <Icon
+                        type="uf-correct"
+                        onClick={ this.handleEnsure(nodeItem.key) }
+                    />
+                </div>
+            )
+            treeData.push(nodeItem);
         }
 
         this.setState({
-      data
+            treeData
         });
     }
 
-  getNodeByKey(data, key) {
+    getNodeByKey = (data, key) => {
         if (!this.parentNode) {
             data.find(item => {
                 if (item.key === key) {
@@ -112,28 +136,51 @@ class Demo7 extends Component {
     }
 
 
-
-  onSelect(info) {
+    onSelect = (info) => {
         console.log('selected', info);
     }
     /**
      * 点击button事件
      */
-  clickFun() {
+    clickFun = () => {
         let prKey, nodeItem;
         prKey = '0-1';
-    nodeItem = {
-      name: 'leaf 0-0-4'
-    }
+        nodeItem = {}
         this.addNode(prKey, nodeItem);
     }
 
+    handleValueChange = (value) => {
+        this.setState({
+            editValue: value
+        })
+    }
+
+    handleEnsure = (key) => () => {
+        let { treeData, editValue } = this.state;
+
+        const loop = data => data.forEach((item) => {
+            if(item.children){
+                loop(item.children)
+            }
+            if(item.key === key){
+                return item.name = editValue;
+            }
+        });
+        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'} />;
+            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);
@@ -148,6 +195,7 @@ class Demo7 extends Component {
             </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 (