changelog

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### build
 
+* **changelog集成:** changelog集成 ([39483f0](https://github.com/tinper-bee/bee-tree/commit/39483f0))
 * **组件依赖清理:** 组件依赖清理 ([0871a43](https://github.com/tinper-bee/bee-tree/commit/0871a43))
 
 
@@ -14,6 +15,7 @@
 
 ### BREAKING CHANGES
 
+* **changelog集成:** changelog集成完毕，具体使用方式参考文档。
 * **文档补充:** 文档补充
 * **组件依赖清理:** 组件依赖清理
 

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/Demo4.js

@@ -1,12 +1,14 @@
 /**
-*
+ *
-* @title Tree可搜索事例
+ * @title Tree可搜索事例
-* @description
+ * @description
-*
+ *
-*/
+ */
 
 
-import React, { Component } from 'react';
+import React, {
+  Component
+} from 'react';
 import FormControl from 'bee-form-control';
 import Tree from '../../src';
 
@@ -16,25 +18,28 @@ const z = 1;
 const gData = [];
 
 const generateData = (_level, _preKey, _tns) => {
-    const preKey = _preKey || '0';
+  const preKey = _preKey || '0';
-    const tns = _tns || gData;
+  const tns = _tns || gData;
 
-    const children = [];
+  const children = [];
-    for (let i = 0; i < x; i++) {
+  for (let i = 0; i < x; i++) {
-        const key = `${preKey}-${i}`;
+    const key = `${preKey}-${i}`;
-        tns.push({ title: key, key });
+    tns.push({
-        if (i < y) {
+      title: key,
-            children.push(key);
+      key
-        }
-    }
-    if (_level < 0) {
-        return tns;
-    }
-    const level = _level - 1;
-    children.forEach((key, index) => {
-        tns[index].children = [];
-        return generateData(level, key, tns[index].children);
     });
+    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);
 
@@ -45,7 +50,10 @@ const generateList = (data) => {
   for (let i = 0; i < data.length; i++) {
     const node = data[i];
     const key = node.key;
-    dataList.push({ key, title: key });
+    dataList.push({
+      key,
+      title: key
+    });
     if (node.children) {
       generateList(node.children, node.key);
     }
@@ -84,8 +92,8 @@ class Demo4 extends Component {
       autoExpandParent: false,
     });
   }
-  onChange = (e) => {
+  onChange = (value) => {
-    const value = e.target.value;
+    // const value = e.target.value;
     const expandedKeys = [];
     dataList.forEach((item) => {
       if (item.key.indexOf(value) > -1) {
@@ -105,7 +113,11 @@ class Demo4 extends Component {
     });
   }
   render() {
-    const { searchValue, expandedKeys, autoExpandParent } = this.state;
+    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);

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

@@ -0,0 +1,153 @@
+/**
+ *
+ * @title Tree增加节点
+ * @description 
+ *
+ */
+
+
+import React, {
+  Component
+} from 'react';
+import Tree from '../../src';
+import Button from 'bee-button';
+
+const TreeNode = Tree.TreeNode;
+
+
+class Demo7 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      treeData: [],
+      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(() => {
+        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 object nodeItem [子节点信息]
+     */
+  addNode(prKey, nodeItem) {
+    const data = this.state.treeData;
+    let parNode;
+    if (prKey) {
+      // 如果prKey存在则搜索父节点进行添加
+      parNode = this.getNodeByKey(data, prKey);
+      //如果父节点存在的话，添加到父节点上
+      if (parNode) {
+        if (!parNode.children) {
+          parNode.children = [];
+        }
+        // 如果key不存在就动态生成一个
+        if (!nodeItem.key) {
+          nodeItem.key = prKey + parNode.children.length + 1;
+        }
+        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);
+    }
+    /**
+     * 点击button事件
+     */
+  clickFun() {
+    let prKey, nodeItem;
+    prKey = '0-1';
+    nodeItem = {
+      name: 'leaf 0-0-4'
+    }
+    this.addNode(prKey, nodeItem);
+  }
+
+  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/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

@@ -20,10 +20,14 @@
   "license": "MIT",
   "main": "./build/index.js",
   "config": {
+<<<<<<< HEAD
     "port": 3000,
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+=======
+    "port": 3000
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
   },
   "scripts": {
     "dev": "bee-tools run start",
@@ -33,6 +37,7 @@
     "chrome": "bee-tools run chrome",
     "coveralls": "bee-tools run coverage",
     "browsers": "bee-tools run browsers",
+<<<<<<< HEAD
     "pub": "bee-tools run pub",
     "changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
@@ -42,6 +47,18 @@
     "classnames": "^2.2.5",
     "object-assign": "latest",
     "babel-runtime": "^6.23.0",
+=======
+    "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",
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
     "tinper-bee-core": "latest"
   },
   "peerDependencies": {
@@ -50,6 +67,7 @@
     "prop-types": "15.6.0"
   },
   "devDependencies": {
+<<<<<<< HEAD
     "bee-form-control": "latest",
     "bee-button": "latest",
     "bee-layout": "latest",
@@ -62,5 +80,17 @@
     "react": "15.3.2",
     "react-addons-test-utils": "15.3.2",
     "react-dom": "15.3.2"
+=======
+    "chai": "^3.5.0",
+    "enzyme": "^2.4.1",
+    "react": "15.3.2",
+    "react-addons-test-utils": "15.3.2",
+    "react-dom": "15.3.2",
+    "console-polyfill": "~0.2.1",
+    "es5-shim": "~4.1.10",
+    "bee-panel": "latest",
+    "bee-layout": "latest",
+    "bee-button": "latest"
+>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
   }
 }

src/Tree.js

@@ -594,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 {
+.u-tree li span.u-tree-switcher.icon-none {
-  font-size: 14px;
+  
   &: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,
+  openIcon: PropTypes.element,
-  closeIcon: PropTypes.string
+  closeIcon: PropTypes.element
 };
 
 TreeNode.defaultProps = {