rc-tree - npm Package Compare versions

Comparing version 0.11.0 to 0.12.1

lib/Tree.js

@@ -28,2 +28,12 @@ 'use strict';
 
+  _createClass(Tree, null, [{
+    key: 'statics',
+    value: function statics() {
+      return {
+        treeNodesState: {},
+        trees: []
+      };
+    }
+  }]);
+
   function Tree(props) {
@@ -41,24 +51,26 @@ var _this = this;
   _createClass(Tree, [{
-    key: 'handleChecked',
-    value: function handleChecked(isChk, c, e) {
-      if (this.props.onChecked) {
-        this.props.onChecked(isChk, c, e);
-      }
+    key: 'renderTreeNode',
+    value: function renderTreeNode(child, index) {
+      var props = this.props;
+      var pos = (props._pos || 0) + '-' + index;
+      var cloneProps = {
+        ref: 'treeNode',
+        _level: props._level || 0,
+        _pos: pos,
+        _isChildTree: props._isChildTree || false,
+        _index: index,
+        _len: this.childrenLength,
+        _checked: props._checked,
+        _checkPart: props._checkPart,
+        prefixCls: props.prefixCls,
+        showLine: props.showLine,
+        showIcon: props.showIcon,
+        expandAll: props.expandAll,
+        checkable: props.checkable,
+        onChecked: this.handleChecked,
+        onSelect: this.handleSelect
+      };
+      return _react2['default'].cloneElement(child, cloneProps);
     }
   }, {
-    key: 'handleSelect',
-    value: function handleSelect(isSel, c, e) {
-      if (this.props.onSelect) {
-        this.props.onSelect(isSel, c, e);
-      }
-    }
-
-    // all keyboard events callbacks run from here at first
-  }, {
-    key: 'handleKeyDown',
-    value: function handleKeyDown(e) {
-      console.log(_rcUtil.KeyCode);
-      e.preventDefault();
-    }
-  }, {
     key: 'render',
@@ -90,32 +102,22 @@ value: function render() {
   }, {
-    key: 'renderTreeNode',
-    value: function renderTreeNode(child, index) {
-      var props = this.props;
-      var pos = (props._pos || 0) + '-' + index;
-      var cloneProps = {
-        ref: 'treeNode',
-        _level: props._level || 0,
-        _pos: pos,
-        _isChildTree: props._isChildTree || false,
-        _index: index,
-        _len: this.childrenLength,
-        _checked: props._checked,
-        _checkPart: props._checkPart,
-        prefixCls: props.prefixCls,
-        showLine: props.showLine,
-        expandAll: props.expandAll,
-        checkable: props.checkable,
-        onChecked: this.handleChecked,
-        onSelect: this.handleSelect
-      };
-      return _react2['default'].cloneElement(child, cloneProps);
+    key: 'handleChecked',
+    value: function handleChecked(isChk, c, e) {
+      if (this.props.onChecked) {
+        this.props.onChecked(isChk, c, e);
+      }
     }
-  }], [{
-    key: 'statics',
-    value: function statics() {
-      return {
-        treeNodesState: {},
-        trees: []
-      };
+  }, {
+    key: 'handleSelect',
+    value: function handleSelect(isSel, c, e) {
+      if (this.props.onSelect) {
+        this.props.onSelect(isSel, c, e);
+      }
     }
+
+    // all keyboard events callbacks run from here at first
+  }, {
+    key: 'handleKeyDown',
+    value: function handleKeyDown(e) {
+      e.preventDefault();
+    }
   }]);
@@ -130,2 +132,3 @@
   showLine: _react2['default'].PropTypes.bool,
+  showIcon: _react2['default'].PropTypes.bool,
   expandAll: _react2['default'].PropTypes.bool,
@@ -140,2 +143,3 @@ onChecked: _react2['default'].PropTypes.func,
   showLine: true,
+  showIcon: true,
   expandAll: false
@@ -142,0 +146,0 @@ };

lib/TreeNode.js

@@ -54,6 +54,11 @@ 'use strict';
   _createClass(TreeNode, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.componentDidUpdate();
+    }
+  }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
       this.setState({
-        //selected: nextProps.selected,
+        // selected: nextProps.selected,
         checkPart: nextProps._checkPart,
@@ -64,116 +69,17 @@ checked: nextProps._checked
   }, {
-    key: 'switchExpandedState',
-    value: function switchExpandedState(newState, onStateChangeComplete) {
-      this.setState({
-        expanded: newState
-      }, onStateChangeComplete);
-    }
-
-    // keyboard event support
-  }, {
-    key: 'handleKeyDown',
-    value: function handleKeyDown(e) {
-      e.preventDefault();
-    }
-  }, {
-    key: 'handleExpandedState',
-    value: function handleExpandedState() {
-      this.switchExpandedState(!this.state.expanded);
-    }
-  }, {
-    key: 'handleSelect',
-    value: function handleSelect() {
-      this.setState({
-        selected: !this.state.selected
-      });
-      if (this.props.onSelect) {
-        this.props.onSelect(!this.state.selected, this);
-      }
-    }
-  }, {
-    key: 'handleChecked',
-    value: function handleChecked() {
-      var _pos = this.props._pos;
-      var checked = !this.state.checked;
-
-      if (this.state.checkPart) {
-        checked = false;
-      }
-
-      var nSt = {
-        checkPart: false,
-        checked: checked
-      };
-
-      this.setState(nSt);
-
-      var sortedTree = _Tree2['default'].statics.trees.sort(function (a, b) {
-        return b.props._pos.length - a.props._pos.length;
-      });
-
-      sortedTree.forEach(function (c) {
-        var cPos = c.props._pos;
-        if (_pos.indexOf(cPos) === 0 && _pos !== cPos) {
-          var childArr = _rcUtil2['default'].Children.toArray(c.props.children),
-              len = childArr.length;
-
-          var checkedNumbers = 0;
-
-          //先计算已经选中的节点数
-          for (var i = 0; i < len; i++) {
-            var checkSt = _Tree2['default'].statics.treeNodesState[cPos + '-' + i];
-            if (checkSt.checked) {
-              checkedNumbers++;
-            } else if (checkSt.checkPart) {
-              checkedNumbers += 0.5;
-            }
-          }
-
-          //点击节点的 直接父级
-          if (_pos.length - cPos.length <= 2) {
-            //如果原来是半选
-            if (_Tree2['default'].statics.treeNodesState[_pos].checkPart) {
-              // checked ? checkedNumbers += 0.5 : checkedNumbers -= 0.5;
-              if (checked) {
-                checkedNumbers += 0.5;
-              } else {
-                checkedNumbers -= 0.5;
-              }
-            } else if (checked) {
-              checkedNumbers++;
-            } else {
-              checkedNumbers--;
-            }
-          }
-
-          var newSt;
-          if (checkedNumbers <= 0) {
-            //都不选
-            newSt = {
-              checkPart: false,
-              checked: false
-            };
-          } else if (checkedNumbers === len) {
-            //全选
-            newSt = {
-              checkPart: false,
-              checked: true
-            };
-          } else {
-            //部分选择
-            newSt = {
-              checkPart: true,
-              checked: false
-            };
-          }
-          c.setState(newSt);
-          _Tree2['default'].statics.treeNodesState[cPos] = newSt;
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var checkbox = this.refs.checkbox;
+      if (checkbox) {
+        var cls = checkbox.getDOMNode().className;
+        var checkSt = _Tree2['default'].statics.treeNodesState[this.props._pos] || {};
+        checkSt.checkPart = nextState.checkPart;
+        checkSt.checked = nextState.checked;
+        if (nextState.checkPart) {
+          checkbox.getDOMNode().className = cls.indexOf('checkbox_true_part') > -1 ? cls : cls + ' checkbox_true_part';
+          return false;
         }
-      });
-
-      _Tree2['default'].statics.treeNodesState[_pos] = nSt;
-
-      if (this.props.onChecked) {
-        this.props.onChecked(checked, this);
+        checkbox.getDOMNode().className = cls.replace(/checkbox_true_part/g, '');
       }
+      return true;
     }
@@ -192,3 +98,3 @@ }, {
       }
-      //add treeNodes checked state
+      // add treeNodes checked state
       _Tree2['default'].statics.treeNodesState[this.props._pos] = {
@@ -200,23 +106,41 @@ checked: this.state.checked,
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.componentDidUpdate();
-    }
-  }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var checkbox = this.refs.checkbox;
-      if (checkbox) {
-        var cls = checkbox.getDOMNode().className;
-        var checkSt = _Tree2['default'].statics.treeNodesState[this.props._pos] || {};
-        checkSt.checkPart = nextState.checkPart;
-        checkSt.checked = nextState.checked;
-        if (nextState.checkPart) {
-          checkbox.getDOMNode().className = cls.indexOf('checkbox_true_part') > -1 ? cls : cls + ' checkbox_true_part';
-          return false;
-        } else {
-          checkbox.getDOMNode().className = cls.replace(/checkbox_true_part/g, '');
+    key: 'renderChildren',
+    value: function renderChildren(children) {
+      var newChildren = null;
+      if (children.type === TreeNode || Array.isArray(children) && children.every(function chEvery(item) {
+        return item.type === TreeNode;
+      })) {
+        var cls = {};
+        cls[this.props.prefixCls + '-child-tree'] = true;
+        if (this.props.showLine && this.props._index !== this.props._len - 1) {
+          cls.line = true;
         }
+
+        var treeProps = {
+          _level: this.props._level + 1,
+          _pos: this.props._pos,
+          _isChildTree: true,
+          _checked: this.state.checked,
+          _checkPart: this.state.checkPart,
+          className: (0, _rcUtil.classSet)(cls),
+          prefixCls: this.props.prefixCls,
+          showLine: this.props.showLine,
+          showIcon: this.props.showIcon,
+          expanded: this.state.expanded,
+          expandAll: this.props.expandAll,
+          // selected: this.state.checked,
+          checkable: this.props.checkable, // 只是为了传递根节点上的checkable设置,是否有更好做法?
+          onChecked: this.props.onChecked,
+          onSelect: this.props.onSelect
+        };
+        newChildren = this.newChildren = _react2['default'].createElement(
+          _Tree2['default'],
+          treeProps,
+          children
+        );
+      } else {
+        newChildren = children;
       }
-      return true;
+
+      return newChildren;
     }
@@ -293,3 +217,3 @@ }, {
             onClick: this.handleSelect },
-          _react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(iconEleCls) }),
+          props.showIcon ? _react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(iconEleCls) }) : null,
           _react2['default'].createElement(
@@ -305,40 +229,116 @@ 'span',
   }, {
-    key: 'renderChildren',
-    value: function renderChildren(children) {
-      var newChildren = null;
-      if (children.type === TreeNode || Array.isArray(children) && children.every(function (item) {
-        return item.type === TreeNode;
-      })) {
+    key: 'switchExpandedState',
+    value: function switchExpandedState(newState, onStateChangeComplete) {
+      this.setState({
+        expanded: newState
+      }, onStateChangeComplete);
+    }
 
-        var cls = {};
-        cls[this.props.prefixCls + '-child-tree'] = true;
-        if (this.props.showLine && this.props._index !== this.props._len - 1) {
-          cls.line = true;
+    // keyboard event support
+  }, {
+    key: 'handleKeyDown',
+    value: function handleKeyDown(e) {
+      e.preventDefault();
+    }
+  }, {
+    key: 'handleExpandedState',
+    value: function handleExpandedState() {
+      this.switchExpandedState(!this.state.expanded);
+    }
+  }, {
+    key: 'handleSelect',
+    value: function handleSelect() {
+      this.setState({
+        selected: !this.state.selected
+      });
+      if (this.props.onSelect) {
+        this.props.onSelect(!this.state.selected, this);
+      }
+    }
+  }, {
+    key: 'handleChecked',
+    value: function handleChecked() {
+      var _pos = this.props._pos;
+      var checked = !this.state.checked;
+
+      if (this.state.checkPart) {
+        checked = false;
+      }
+
+      var nSt = {
+        checkPart: false,
+        checked: checked
+      };
+
+      this.setState(nSt);
+
+      var sortedTree = _Tree2['default'].statics.trees.sort(function sortTree(a, b) {
+        return b.props._pos.length - a.props._pos.length;
+      });
+
+      sortedTree.forEach(function forofTree(c) {
+        var cPos = c.props._pos;
+        if (_pos.indexOf(cPos) === 0 && _pos !== cPos) {
+          var childArr = _rcUtil2['default'].Children.toArray(c.props.children);
+          var len = childArr.length;
+
+          var checkedNumbers = 0;
+
+          // 先计算已经选中的节点数
+          for (var i = 0; i < len; i++) {
+            var checkSt = _Tree2['default'].statics.treeNodesState[cPos + '-' + i];
+            if (checkSt.checked) {
+              checkedNumbers++;
+            } else if (checkSt.checkPart) {
+              checkedNumbers += 0.5;
+            }
+          }
+
+          // 点击节点的 直接父级
+          if (_pos.length - cPos.length <= 2) {
+            // 如果原来是半选
+            if (_Tree2['default'].statics.treeNodesState[_pos].checkPart) {
+              // checked ? checkedNumbers += 0.5 : checkedNumbers -= 0.5;
+              if (checked) {
+                checkedNumbers += 0.5;
+              } else {
+                checkedNumbers -= 0.5;
+              }
+            } else if (checked) {
+              checkedNumbers++;
+            } else {
+              checkedNumbers--;
+            }
+          }
+
+          var newSt = undefined;
+          if (checkedNumbers <= 0) {
+            // 都不选
+            newSt = {
+              checkPart: false,
+              checked: false
+            };
+          } else if (checkedNumbers === len) {
+            // 全选
+            newSt = {
+              checkPart: false,
+              checked: true
+            };
+          } else {
+            // 部分选择
+            newSt = {
+              checkPart: true,
+              checked: false
+            };
+          }
+          c.setState(newSt);
+          _Tree2['default'].statics.treeNodesState[cPos] = newSt;
         }
+      });
 
-        var treeProps = {
-          _level: this.props._level + 1,
-          _pos: this.props._pos,
-          _isChildTree: true,
-          _checked: this.state.checked,
-          _checkPart: this.state.checkPart,
-          className: (0, _rcUtil.classSet)(cls),
-          showLine: this.props.showLine,
-          expanded: this.state.expanded,
-          expandAll: this.props.expandAll,
-          //selected: this.state.checked,
-          checkable: this.props.checkable, //只是为了传递根节点上的checkable设置,是否有更好做法?
-          onChecked: this.props.onChecked,
-          onSelect: this.props.onSelect
-        };
-        newChildren = this.newChildren = _react2['default'].createElement(
-          _Tree2['default'],
-          treeProps,
-          children
-        );
-      } else {
-        newChildren = children;
+      _Tree2['default'].statics.treeNodesState[_pos] = nSt;
+
+      if (this.props.onChecked) {
+        this.props.onChecked(checked, this);
       }
-
-      return newChildren;
     }
@@ -351,5 +351,16 @@ }]);
 TreeNode.propTypes = {
+  _pos: _react2['default'].PropTypes.string,
+  _index: _react2['default'].PropTypes.number,
+  _len: _react2['default'].PropTypes.number,
+  _level: _react2['default'].PropTypes.number,
+  prefixCls: _react2['default'].PropTypes.string,
+  showLine: _react2['default'].PropTypes.bool,
+  showIcon: _react2['default'].PropTypes.bool,
+  expandAll: _react2['default'].PropTypes.bool,
+  defaultExpanded: _react2['default'].PropTypes.bool,
+  expanded: _react2['default'].PropTypes.bool,
   selected: _react2['default'].PropTypes.bool,
-  defaultExpanded: _react2['default'].PropTypes.bool,
-  expanded: _react2['default'].PropTypes.bool
+  checkable: _react2['default'].PropTypes.bool,
+  onSelect: _react2['default'].PropTypes.func,
+  onChecked: _react2['default'].PropTypes.func
 };
@@ -356,0 +367,0 @@ TreeNode.defaultProps = {

package.json

 {
   "name": "rc-tree",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "tree ui component for react",
@@ -28,9 +28,7 @@ "keywords": [
     "build": "rc-tools run build",
-    "precommit": "rc-tools run precommit",
-    "less": "rc-tools run less",
     "gh-pages": "rc-tools run gh-pages",
-    "history": "rc-tools run history",
     "start": "node --harmony node_modules/.bin/rc-server",
-    "publish": "rc-tools run tag",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
     "saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
@@ -44,7 +42,7 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
+    "rc-tools": "4.x",
     "react": "~0.13.0"
   },
   "precommit": [
-    "precommit"
+    "lint"
   ],
@@ -51,0 +49,0 @@ "dependencies": {

README.md

@@ -72,6 +72,7 @@ # rc-tree
 |showLine | whether show line | bool | true |
+|showIcon | whether show icon | bool | true |
 |checkable | whether support checked | bool | false |
 |expandAll | expand all treeNodes | bool | false |
 |onSelect | click the TreeNode to fire(auto switch selected state)  | function | - |
-|onChecked | click the TreeNode to checked(auto switch checked state)  | function | - |
+|onChecked | click the TreeNode's checkbox to checked(auto switch checked state)  | function | - |
 
@@ -78,0 +79,0 @@ ### TreeNode props

No alert changes

Improved metrics

Total package byte prevSize

27334

increased by2.68%

Lines of code

591

increased by2.6%

Number of lines in readme file

110

increased by0.92%

No dependency changes