ver. 1.0.1

build/Tree.js

@@ -569,10 +569,15 @@ var Tree = function (_React$Component) {
     var _this4 = this;
 
     var props = this.props;
+    var showLineCls = "";
+    if (props.showLine) {
+      showLineCls = props.prefixCls + '-show-line';
+    }
     var domProps = {
-      className: (0, _classnames2["default"])(props.className, props.prefixCls),
+      className: (0, _classnames2["default"])(props.className, props.prefixCls, showLineCls),
       role: 'tree-node'
     };
+
     if (props.focusable) {
       domProps.tabIndex = '0';
       domProps.onKeyDown = this.onKeyDown;
@@ -628,7 +633,7 @@ var Tree = function (_React$Component) {
 
     return _react2["default"].createElement(
       'ul',
-      _extends({}, domProps, { unselectable: true, ref: 'tree' }),
+      _extends({}, domProps, { unselectable: 'true', ref: 'tree' }),
       _react2["default"].Children.map(props.children, this.renderTreeNode, this)
     );
   };

build/TreeNode.js

@@ -55,16 +55,16 @@ var TreeNode = function (_React$Component) {
   function TreeNode(props) {
     _classCallCheck(this, TreeNode);
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+    var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
     ['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd'].forEach(function (m) {
-      _this[m] = _this[m].bind(_this);
+      _this2[m] = _this2[m].bind(_this2);
     });
-    _this.state = {
+    _this2.state = {
       dataLoading: false,
       dragNodeHighlight: false
     };
-    return _this;
+    return _this2;
   }
 
   TreeNode.prototype.componentDidMount = function componentDidMount() {
@@ -157,12 +157,12 @@ var TreeNode = function (_React$Component) {
   };
 
   TreeNode.prototype.onExpand = function onExpand() {
-    var _this2 = this;
+    var _this3 = this;
 
     var callbackPromise = this.props.root.onExpand(this);
     if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') {
       var setLoading = function setLoading(dataLoading) {
-        _this2.setState({
+        _this3.setState({
           dataLoading: dataLoading
         });
       };
@@ -196,18 +196,28 @@ var TreeNode = function (_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 _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls) });
+      return _react2["default"].createElement(
+        'span',
+        { className: (0, _classnames2["default"])(switcherCls) },
+        stateIcon
+      );
     }
-    return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand });
+    return _react2["default"].createElement(
+      'span',
+      { className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand },
+      stateIcon
+    );
   };
 
   TreeNode.prototype.renderCheckbox = function renderCheckbox(props) {
@@ -288,7 +298,7 @@ var TreeNode = function (_React$Component) {
 
   TreeNode.prototype.render = function render() {
     var _iconEleCls,
-        _this3 = this;
+        _this4 = this;
 
     var props = this.props;
     var prefixCls = props.prefixCls;
@@ -300,6 +310,12 @@ var TreeNode = function (_React$Component) {
     var newChildren = this.renderChildren(props);
     var openIconCls = false,
         closeIconCls = false;
+
+    //以下变量控制是否鼠标单机双击方法中的变量
+    var timer = 0;
+    var delay = 500;
+    var prevent = false;
+
     if (!newChildren || newChildren === props.children) {
       // content = newChildren;
       newChildren = null;
@@ -315,7 +331,7 @@ var TreeNode = function (_React$Component) {
 
     var iconEleCls = (_iconEleCls = {}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon_loading', this.state.dataLoading), _defineProperty(_iconEleCls, prefixCls + '-icon__' + iconState, true), _iconEleCls);
     var selectHandle = function selectHandle() {
-      var icon = props.showIcon || props.loadData && _this3.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
+      var icon = props.showIcon || props.loadData && _this4.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
       var title = _react2["default"].createElement(
         'span',
         { className: prefixCls + '-title' },
@@ -326,28 +342,32 @@ var TreeNode = function (_React$Component) {
         className: wrap + ' ' + wrap + '-' + (iconState === expandedState ? iconState : 'normal')
       };
       if (!props.disabled) {
-        if (props.selected || !props._dropTrigger && _this3.state.dragNodeHighlight) {
+        if (props.selected || !props._dropTrigger && _this4.state.dragNodeHighlight) {
           domProps.className += ' ' + prefixCls + '-node-selected';
         }
         domProps.onClick = function (e) {
+          var _this = _this4;
           e.preventDefault();
           if (props.selectable) {
-            _this3.onSelect();
+            _this.onSelect();
           }
+
           // not fire check event
           // if (props.checkable) {
           //   this.onCheck();
           // }
         };
+
         if (props.onRightClick) {
-          domProps.onContextMenu = _this3.onContextMenu;
+          domProps.onContextMenu = _this4.onContextMenu;
         }
         if (props.onMouseEnter) {
-          domProps.onMouseEnter = _this3.onMouseEnter;
+          domProps.onMouseEnter = _this4.onMouseEnter;
         }
         if (props.onMouseLeave) {
-          domProps.onMouseLeave = _this3.onMouseLeave;
+          domProps.onMouseLeave = _this4.onMouseLeave;
         }
+
         if (props.draggable) {
           domProps.className += ' draggable';
           if (ieOrEdge) {
@@ -356,7 +376,7 @@ var TreeNode = function (_React$Component) {
           }
           domProps.draggable = true;
           domProps['aria-grabbed'] = true;
-          domProps.onDragStart = _this3.onDragStart;
+          domProps.onDragStart = _this4.onDragStart;
         }
       }
       return _react2["default"].createElement(
@@ -395,6 +415,7 @@ var TreeNode = function (_React$Component) {
 
       var cls = (_cls2 = {}, _defineProperty(_cls2, prefixCls + '-switcher', true), _defineProperty(_cls2, prefixCls + '-switcher-noop', true), _cls2);
       if (props.showLine) {
+        console.log('line---------');
         cls[prefixCls + '-center_docu'] = !props.last;
         cls[prefixCls + '-bottom_docu'] = props.last;
       } else {
@@ -428,8 +449,8 @@ TreeNode.propTypes = {
   isLeaf: _propTypes2["default"].bool,
   root: _propTypes2["default"].object,
   onSelect: _propTypes2["default"].func,
-  openIcon: _propTypes2["default"].string,
-  closeIcon: _propTypes2["default"].string
+  openIcon: _propTypes2["default"].element,
+  closeIcon: _propTypes2["default"].element
 };
 
 TreeNode.defaultProps = {

demo/Demo1.js

@@ -0,0 +1,61 @@
+/**
+ *
+ * @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

@@ -0,0 +1,160 @@
+/**
+ *
+ * @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/Demo1.js

@@ -6,7 +6,9 @@
  */
 
 
-import React, { Component } from 'react';
+import React, {
+	Component
+} from 'react';
 import Tree from '../../src';
 
 const TreeNode = Tree.TreeNode;

demo/demolist/Demo4.js

@@ -93,7 +93,7 @@ class Demo4 extends Component {
     });
   }
   onChange = (value) => {
-    // const value = e.target.value;
+
     const expandedKeys = [];
     dataList.forEach((item) => {
       if (item.key.indexOf(value) > -1) {

demo/demolist/Demo5.js

@@ -6,7 +6,9 @@
  */
 
 
-import React, { Component } from 'react';
+import React, {
+  Component
+} from 'react';
 import Tree from '../../src';
 
 const x = 3;
@@ -21,7 +23,10 @@ const generateData = (_level, _preKey, _tns) => {
   const children = [];
   for (let i = 0; i < x; i++) {
     const key = `${preKey}-${i}`;
-        tns.push({ title: key, key });
+    tns.push({
+      title: key,
+      key
+    });
     if (i < y) {
       children.push(key);
     }
@@ -43,7 +48,10 @@ function generateTreeNodes(treeNode) {
   const arr = [];
   const key = treeNode.props.eventKey;
   for (let i = 0; i < 3; i++) {
-    arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
+    arr.push({
+      name: `leaf ${key}-${i}`,
+      key: `${key}-${i}`
+    });
   }
   return arr;
 }
@@ -95,11 +103,17 @@ class Demo5 extends Component{
   componentDidMount() {
     setTimeout(() => {
       this.setState({
-        treeData: [
-          { name: 'pNode 01', key: '0-0' },
-          { name: 'pNode 02', key: '0-1' },
-          { name: 'pNode 03', key: '0-2', isLeaf: true },
-        ],
+        treeData: [{
+          name: 'pNode 01',
+          key: '0-0'
+        }, {
+          name: 'pNode 02',
+          key: '0-1'
+        }, {
+          name: 'pNode 03',
+          key: '0-2',
+          isLeaf: true
+        }, ],
       });
     }, 100);
   }
@@ -111,7 +125,9 @@ class Demo5 extends Component{
       setTimeout(() => {
         const treeData = [...this.state.treeData];
         getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
-        this.setState({ treeData });
+        this.setState({
+          treeData
+        });
         resolve();
       }, 1000);
     });

demo/demolist/Demo9.js

@@ -0,0 +1,42 @@
+/**
+ *
+ * @title 连接线Tree
+ * @description 
+ *
+ */
+
+
+import React, {
+	Component
+} from 'react';
+import Tree from '../../src';
+
+const TreeNode = Tree.TreeNode;
+class Demo9 extends Component {
+	constructor(props) {
+		super(props);
+		const keys = this.props.keys;
+		this.state = {
+			defaultExpandedKeys: keys
+		};
+
+	}
+
+	render() {
+		return (
+			<Tree className="myCls" showLine checkable  defaultExpandAll={true}>
+	        <TreeNode title="parent 1" key="0-0">
+	          <TreeNode title="parent 1-0" key="0-0-0" >
+	            <TreeNode title="leaf" key="0-0-0-0"  />
+	            <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>
+		);
+	}
+}
+
+export default Demo9;

docs/api.md

@@ -18,6 +18,7 @@
 |checkStrictly|精细的检查每个节点|bool|false
 |defaultSelectedKeys|指定选中的节点key|String[]|[]
 |selectedKeys|指定选中的节点keys(controlled)|String[]|-
+|showLine|是否显示连接线|bool|false
 |openIcon|自定义展开节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
 |closeIcon|自定义关闭节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
 |onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-tree",
-  "version": "1.0.0",
+ "version": "1.0.1",
  "description": "Tree ui component for react",
  "keywords": [
   "react",

src/Tree.js

@@ -535,10 +535,15 @@ class Tree extends React.Component {
 
   render() {
     const props = this.props;
+    let showLineCls = "";
+    if (props.showLine) {
+      showLineCls = `${props.prefixCls}-show-line`;
+    }
     const domProps = {
-      className: classNames(props.className, props.prefixCls),
+      className: classNames(props.className, props.prefixCls, showLineCls),
       role: 'tree-node',
     };
+
     if (props.focusable) {
       domProps.tabIndex = '0';
       domProps.onKeyDown = this.onKeyDown;

src/TreeNode.js

@@ -371,6 +371,7 @@ class TreeNode extends React.Component {
         [`${prefixCls}-switcher-noop`]: true,
       };
       if (props.showLine) {
+        console.log('line---------');
         cls[`${prefixCls}-center_docu`] = !props.last;
         cls[`${prefixCls}-bottom_docu`] = props.last;
       } else {