add： 增加节点、在线编辑

demo/TreeDemo.scss

@@ -9,3 +9,15 @@
   color: #f50;
   transition: all .3s ease;
 }
+
+.title-middle {
+	display: inline-block;
+	vertical-align: middle;
+}
+.edit-icon {
+	float:right;
+	font-size: 14px;
+}
+.title-con {
+	min-width: 150px;
+}

demo/demolist/Demo6.js

@@ -10,7 +10,7 @@ import React, {
 	Component
 } from 'react';
 import Tree from '../../src';
-
+import Icon from 'bee-icon';
 const TreeNode = Tree.TreeNode;
 
 const defaultProps = {
@@ -36,7 +36,7 @@ class Demo1 extends Component {
 	render() {
 		return (
 
-			<Tree className="myCls"  checkable openIcon="uf-minus" closeIcon="uf-plus"
+			<Tree className="myCls"  checkable openIcon={<Icon type="uf-minus" />} closeIcon={<Icon type="uf-plus" />}
 	        defaultExpandedKeys={this.state.defaultExpandedKeys}
 	        defaultSelectedKeys={this.state.defaultSelectedKeys}
 	        defaultCheckedKeys={this.state.defaultCheckedKeys}

demo/demolist/Demo7.js

@@ -14,18 +14,20 @@ import Button from 'bee-button';
 
 const TreeNode = Tree.TreeNode;
 
+
 class Demo7 extends Component {
   constructor(props) {
     super(props);
-    debugger;
-    console.log('keys--' + this.props.keys);
     this.state = {
       treeData: [],
-      defaultExpandedKeys: ['0-0', '0-1', '0-2']
+      defaultExpandedKeys: ['0-0', '0-1', '0-2'],
+      parentNode: {}
     };
     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(() => {
@@ -65,22 +67,52 @@ class Demo7 extends Component {
      */
   addNode(prKey, nodeItem) {
     const data = this.state.treeData;
-    data.forEach((item) => {
-      if (prKey === item.key) {
-        if (!item.children) {
-          item.children = [];
+    let parNode;
+    if (prKey) {
+      // 如果prKey存在则搜索父节点进行添加
+      parNode = this.getNodeByKey(data, prKey);
+      //如果父节点存在的话，添加到父节点上
+      if (parNode) {
+        if (!parNode.children) {
+          parNode.children = [];
         }
         // 如果key不存在就动态生成一个
         if (!nodeItem.key) {
-          nodeItem.key = prKey + item.children.length + 1;
+          nodeItem.key = prKey + parNode.children.length + 1;
         }
-        item.children.push(nodeItem);
+        parNode.children.push(nodeItem);
       }
-    });
+    } else {
+      // 没有穿prKey添加到根下成为一级节点
+      if (!nodeItem.key) {
+        nodeItem.key = "0-" + data.length + 1;
+      }
+      data.push(nodeItem);
+    }
+
     this.setState({
       data
     });
   }
+
+  getNodeByKey(data, key) {
+    if (!this.parentNode) {
+      data.find(item => {
+        if (item.key === 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;
+  }
+
+
+
   onSelect(info) {
       console.log('selected', info);
     }
@@ -89,9 +121,9 @@ class Demo7 extends Component {
      */
   clickFun() {
     let prKey, nodeItem;
-    prKey = '0-2';
+    prKey = '0-1';
     nodeItem = {
-      name: 'leaf 0-2-0'
+      name: 'leaf 0-0-4'
     }
     this.addNode(prKey, nodeItem);
   }

demo/demolist/Demo8.js

@@ -0,0 +1,127 @@
+/**
+ *
+ * @title Tree 节点可编辑
+ * @description 双击节点可编辑
+ *
+ */
+
+
+import React, {
+	Component
+} from 'react';
+import Tree from '../../src';
+import Button from 'bee-button';
+import Icon from 'bee-icon';
+
+const TreeNode = Tree.TreeNode;
+
+let timer = 0;
+let delay = 200;
+let prevent = false;
+
+
+
+class Demo8 extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			treeData: [],
+			isHover: "",
+			editKey: ""
+		};
+
+	}
+
+
+	onMouseEnter = (e) => {
+		this.setState({
+			isHover: e.node.props.pos
+		})
+	}
+	onMouseLeave = (e, treenode) => {
+		this.setState({
+			isHover: "",
+			editKey: ""
+		})
+
+	}
+
+	editRender = (item) => {
+		this.setState({
+			editKey: item.key
+		});
+	}
+	nodechange = (item, value) => {
+		item.name = value;
+	}
+	renderTreeTitle = (item) => {
+		let titleIcon, titleInfo;
+		//编辑时input框
+		if (this.state.editKey == item.key) {
+			titleInfo = <input type="text" id="itemKey" defaultValue={item.name} onChange={(e) => this.nodechange(item,e.target.value)}/>
+		} else {
+			titleInfo = <span className="title-middle">{item.name}</span>
+		}
+		//编辑图标
+		if (this.state.isHover == item.key) {
+			titleIcon = <Icon className="title-middle edit-icon" type="uf-pencil" onClick={(e)=>this.editRender(item)}></Icon>;
+		}
+		return (<div className="title-con">
+					
+					{titleInfo}
+					{titleIcon}
+				</div>);
+	}
+
+	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);
+	}
+	render() {
+		const loop = data => data.map((item) => {
+			if (item.children) {
+				return <TreeNode title={this.renderTreeTitle(item)} key={item.key}>{loop(item.children)}</TreeNode>;
+			}
+			return <TreeNode title={this.renderTreeTitle(item)} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
+		});
+		const treeNodes = loop(this.state.treeData);
+		return (
+			<Tree onMouseLeave={this.onMouseLeave} onMouseEnter={this.onMouseEnter}>
+				{treeNodes}
+	      	</Tree>
+
+		);
+	}
+}
+
+
+
+export default Demo8;

package.json

@@ -33,12 +33,13 @@
     "pub": "bee-tools run pub"
   },
   "dependencies": {
+    "babel-runtime": "^6.23.0",
     "bee-animate": "latest",
     "bee-checkbox": "latest",
     "bee-form-control": "latest",
+    "bee-icon": "^1.0.0",
     "classnames": "^2.2.5",
     "object-assign": "latest",
-  "babel-runtime": "^6.23.0",
     "tinper-bee-core": "latest"
   },
   "peerDependencies": {

src/Tree.js

@@ -268,7 +268,6 @@ class Tree extends React.Component {
   }
 
   onSelect(treeNode) {
-    debugger;
     const props = this.props;
     const selectedKeys = [...this.state.selectedKeys];
     const eventKey = treeNode.props.eventKey;
@@ -438,7 +437,6 @@ class Tree extends React.Component {
   }
 
   getDragNodes(treeNode) {
-    debugger;
     const dragNodesKeys = [];
     const tPArr = treeNode.props.pos.split('-');
     loopAllChildren(this.props.children, (item, index, pos, newKey) => {
@@ -596,7 +594,7 @@ class Tree extends React.Component {
     }
 
     return (
-      <ul {...domProps} unselectable ref="tree">
+      <ul {...domProps} unselectable="true" ref="tree">
         {React.Children.map(props.children, this.renderTreeNode, this)}
       </ul>
     );

src/Tree.scss

@@ -323,9 +323,14 @@
  * 自定义switcher图标
  */
 
-.u-tree li span.u-tree-switcher.uf {
-  font-size: 14px;
+.u-tree li span.u-tree-switcher.icon-none {
+  
   &:after{
     content:"";
   }
+  .uf {
+    padding: 0px;
+    font-size: 14px;
+  }
 }
+

src/TreeNode.js

@@ -165,18 +165,20 @@ class TreeNode extends React.Component {
     }
 
     if (expandedState === 'open' && props.openIcon) {
-      stateIcon = `uf ${props.openIcon}`;
+      stateIcon = props.openIcon;
+      switcherCls['icon-none'] = true;
     }
     if (expandedState === 'close' && props.closeIcon) {
-      stateIcon = [`uf ${props.closeIcon}`];
+      stateIcon = props.closeIcon;
+      switcherCls['icon-none'] = true;
     }
-    switcherCls[stateIcon] = stateIcon;
+    //switcherCls[stateIcon] = stateIcon;
 
     if (props.disabled) {
       switcherCls[`${prefixCls}-switcher-disabled`] = true;
-      return <span className={classNames(switcherCls)}></span>;
+      return <span className={classNames(switcherCls)}>{stateIcon}</span>;
     }
-    return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
+    return <span className={classNames(switcherCls)} onClick={this.onExpand}>{stateIcon}</span>;
   }
 
   renderCheckbox(props) {
@@ -263,6 +265,12 @@ class TreeNode extends React.Component {
     let newChildren = this.renderChildren(props);
     let openIconCls = false,
       closeIconCls = false;
+
+    //以下变量控制是否鼠标单机双击方法中的变量
+    let timer = 0;
+    let delay = 500;
+    let prevent = false;
+
     if (!newChildren || newChildren === props.children) {
       // content = newChildren;
       newChildren = null;
@@ -294,15 +302,18 @@ class TreeNode extends React.Component {
           domProps.className += ` ${prefixCls}-node-selected`;
         }
         domProps.onClick = (e) => {
+          var _this = this;
           e.preventDefault();
           if (props.selectable) {
-            this.onSelect();
+            _this.onSelect();
           }
+
           // not fire check event
           // if (props.checkable) {
           //   this.onCheck();
           // }
         };
+
         if (props.onRightClick) {
           domProps.onContextMenu = this.onContextMenu;
         }
@@ -312,6 +323,7 @@ class TreeNode extends React.Component {
         if (props.onMouseLeave) {
           domProps.onMouseLeave = this.onMouseLeave;
         }
+
         if (props.draggable) {
           domProps.className += ' draggable';
           if (ieOrEdge) {
@@ -390,8 +402,8 @@ TreeNode.propTypes = {
   isLeaf: PropTypes.bool,
   root: PropTypes.object,
   onSelect: PropTypes.func,
-  openIcon: PropTypes.string,
-  closeIcon: PropTypes.string
+  openIcon: PropTypes.element,
+  closeIcon: PropTypes.element
 };
 
 TreeNode.defaultProps = {