rc-tree - npm Package Compare versions

Comparing version 1.2.0-beta.1 to 1.2.0-beta.2

HISTORY.md

 # History
 ---
 
+## 1.2.0 / 2016-04-03
+- improve performance.
+- add `checkStrictly` api.
+
 ## 1.1.0 / 2016-01-25
@@ -5,0 +9,0 @@ - change `onDrop` params (from `originExpandedKeys` to `rawExpandedKeys`)

lib/Tree.js

@@ -50,2 +50,3 @@ 'use strict';
     this.contextmenuKeys = [];
+    this.checkedKeysChange = true;
 
@@ -73,2 +74,7 @@ this.state = {
       if (checkedKeys) {
+        if (checkedKeys === this.props.checkedKeys) {
+          this.checkedKeysChange = false;
+        } else {
+          this.checkedKeysChange = true;
+        }
         st.checkedKeys = checkedKeys;
@@ -223,2 +229,4 @@ }
     value: function onCheck(treeNode) {
+      var _this3 = this;
+
       var checked = !treeNode.props.checked;
@@ -231,5 +239,2 @@ if (treeNode.props.checkPart) {
       var index = checkedKeys.indexOf(key);
-      if (checked && index === -1) {
-        checkedKeys.push(key);
-      }
 
@@ -244,2 +249,5 @@ var newSt = {
       if (this.props.checkStrictly && 'checkedKeys' in this.props) {
+        if (checked && index === -1) {
+          checkedKeys.push(key);
+        }
         if (!checked && index > -1) {
@@ -251,3 +259,2 @@ checkedKeys.splice(index, 1);
           if (checkedKeys.indexOf(keyOrPos) !== -1) {
-            checked = true;
             newSt.checkedNodes.push(item);
@@ -257,7 +264,25 @@ }
       } else {
-        var checkKeys = (0, _util.getTreeNodesStates)(this.props.children, checkedKeys, checked, key);
+        if (checked && index === -1) {
+          (function () {
+            _this3.treeNodesStates[treeNode.props.pos].checked = true;
+            var checkedPositions = [];
+            Object.keys(_this3.treeNodesStates).forEach(function (i) {
+              if (_this3.treeNodesStates[i].checked) {
+                checkedPositions.push(i);
+              }
+            });
+            (0, _util.handleCheckState)(_this3.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
+          })();
+        }
+        if (!checked) {
+          this.treeNodesStates[treeNode.props.pos].checked = false;
+          this.treeNodesStates[treeNode.props.pos].checkPart = false;
+          (0, _util.handleCheckState)(this.treeNodesStates, [treeNode.props.pos], false);
+        }
+        var checkKeys = (0, _util.getCheckKeys)(this.treeNodesStates);
         newSt.checkedNodes = checkKeys.checkedNodes;
         newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
+        this.checkKeys = checkKeys;
 
-        checkedKeys = checkKeys.checkedKeys;
+        this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
         if (!('checkedKeys' in this.props)) {
@@ -489,3 +514,2 @@ this.setState({
         showIcon: props.showIcon,
-        checkable: props.checkable,
         draggable: props.draggable,
@@ -497,4 +521,2 @@ dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
         selected: state.selectedKeys.indexOf(key) !== -1,
-        checked: (props.checkStrictly ? state.checkedKeys : this.checkedKeys).indexOf(key) !== -1,
-        checkPart: props.checkStrictly ? false : this.checkPartKeys.indexOf(key) !== -1,
         openTransitionName: this.getOpenTransitionName(),
@@ -504,4 +526,9 @@ openAnimation: props.openAnimation,
       };
-      if (this.treeNodesStates[pos]) {
-        (0, _objectAssign2['default'])(cloneProps, this.treeNodesStates[pos].siblingPosition);
+      if (props.checkable) {
+        cloneProps.checkable = props.checkable;
+        cloneProps.checked = (props.checkStrictly ? state.checkedKeys : this.checkedKeys).indexOf(key) !== -1;
+        cloneProps.checkPart = props.checkStrictly ? false : this.checkPartKeys.indexOf(key) !== -1;
+        if (this.treeNodesStates[pos]) {
+          (0, _objectAssign2['default'])(cloneProps, this.treeNodesStates[pos].siblingPosition);
+        }
       }
@@ -513,2 +540,4 @@ return _react2['default'].cloneElement(child, cloneProps);
     value: function render() {
+      var _this4 = this;
+
       var props = this.props;
@@ -524,6 +553,46 @@ var domProps = {
       // console.log(this.state.expandedKeys, this._rawExpandedKeys, props.children);
-      var checkKeys = (0, _util.getTreeNodesStates)(props.children, this.state.checkedKeys, true);
-      this.checkPartKeys = checkKeys.checkPartKeys;
-      this.checkedKeys = checkKeys.checkedKeys;
-      this.treeNodesStates = checkKeys.treeNodesStates;
+      if (props.checkable && this.checkedKeysChange) {
+        if (props.checkStrictly) {
+          this.treeNodesStates = {};
+          (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
+            _this4.treeNodesStates[pos] = {
+              siblingPosition: siblingPosition
+            };
+          });
+        } else {
+          (function () {
+            var checkedKeys = _this4.state.checkedKeys;
+            var checkKeys = undefined;
+            if (_this4.checkKeys && _this4._checkedKeys && _this4._checkedKeys.every(function (i, index) {
+              return checkedKeys[index] === i;
+            })) {
+              // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
+              checkKeys = _this4.checkKeys;
+            } else {
+              (function () {
+                var checkedPositions = [];
+                _this4.treeNodesStates = {};
+                (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
+                  _this4.treeNodesStates[pos] = {
+                    node: item,
+                    key: keyOrPos,
+                    checked: false,
+                    checkPart: false,
+                    siblingPosition: siblingPosition
+                  };
+                  if (checkedKeys.indexOf(keyOrPos) !== -1) {
+                    _this4.treeNodesStates[pos].checked = true;
+                    checkedPositions.push(pos);
+                  }
+                });
+                // if the parent node's key exists, it all children node will be checked
+                (0, _util.handleCheckState)(_this4.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
+                checkKeys = (0, _util.getCheckKeys)(_this4.treeNodesStates);
+              })();
+            }
+            _this4.checkPartKeys = checkKeys.checkPartKeys;
+            _this4.checkedKeys = checkKeys.checkedKeys;
+          })();
+        }
+      }
 
@@ -530,0 +599,0 @@ return _react2['default'].createElement(

lib/util.js

@@ -0,1 +1,3 @@
+/* eslint no-loop-func: 0*/
+
 'use strict';
@@ -11,3 +13,4 @@
 exports.filterParentPosition = filterParentPosition;
-exports.getTreeNodesStates = getTreeNodesStates;
+exports.handleCheckState = handleCheckState;
+exports.getCheckKeys = getCheckKeys;
 
@@ -121,56 +124,92 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function uniqueArray(arr) {
-  var obj = {};
+// arr.length === 628, use time: ~20ms
+
+function filterParentPosition(arr) {
+  var levelObj = {};
   arr.forEach(function (item) {
-    if (!obj[item]) {
-      obj[item] = true;
+    var posLen = item.split('-').length;
+    if (!levelObj[posLen]) {
+      levelObj[posLen] = [];
     }
+    levelObj[posLen].push(item);
   });
-  return Object.keys(obj);
-}
-// console.log(uniqueArray(['11', '2', '2']));
+  var levelArr = Object.keys(levelObj).sort();
 
-function filterParentPosition(arr) {
-  var a = [].concat(arr);
-  arr.forEach(function (item) {
-    var itemArr = item.split('-');
-    a.forEach(function (ii, index) {
-      var iiArr = ii.split('-');
-      if (itemArr.length <= iiArr.length && isInclude(itemArr, iiArr)) {
-        a[index] = item;
-      }
-      if (itemArr.length > iiArr.length && isInclude(iiArr, itemArr)) {
-        a[index] = ii;
-      }
-    });
+  var _loop = function (i) {
+    if (levelArr[i + 1]) {
+      levelObj[levelArr[i]].forEach(function (ii) {
+        var _loop2 = function (j) {
+          levelObj[levelArr[j]].forEach(function (_i, index) {
+            if (isInclude(ii.split('-'), _i.split('-'))) {
+              levelObj[levelArr[j]][index] = null;
+            }
+          });
+          levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(function (p) {
+            return p;
+          });
+        };
+
+        for (var j = i + 1; j < levelArr.length; j++) {
+          _loop2(j);
+        }
+      });
+    }
+  };
+
+  for (var i = 0; i < levelArr.length; i++) {
+    _loop(i);
+  }
+  var nArr = [];
+  levelArr.forEach(function (i) {
+    nArr = nArr.concat(levelObj[i]);
   });
-  return uniqueArray(a);
+  return nArr;
 }
 
-// console.log(filterParentPosition(['0-2', '0-10', '0-0-1', '0-1-1', '0-0','0-1', '0-10-0']));
+// console.log(filterParentPosition(['0-2', '0-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']));
 
-// TODO 效率差, 需要缓存优化
+var stripTail = function stripTail(str) {
+  var arr = str.match(/(.+)(-[^-]+)$/);
+  var st = '';
+  if (arr && arr.length === 3) {
+    st = arr[1];
+  }
+  return st;
+};
+var splitPosition = function splitPosition(pos) {
+  return pos.split('-');
+};
+
+// TODO 再优化
+
 function handleCheckState(obj, checkedPositionArr, checkIt) {
-  var stripTail = function stripTail(str) {
-    var arr = str.match(/(.+)(-[^-]+)$/);
-    var st = '';
-    if (arr && arr.length === 3) {
-      st = arr[1];
-    }
-    return st;
-  };
   // console.log(stripTail('0-101-000'));
-  var splitPosition = function splitPosition(pos) {
-    return pos.split('-');
-  };
-  checkedPositionArr.forEach(function (_pos) {
-    // 设置子节点，全选或全不选
-    var _posArr = splitPosition(_pos);
-    Object.keys(obj).forEach(function (i) {
-      var iArr = splitPosition(i);
+  // let s = Date.now();
+  var objKeys = Object.keys(obj);
+
+  objKeys.forEach(function (i, index) {
+    var iArr = splitPosition(i);
+    var saved = false;
+    checkedPositionArr.forEach(function (_pos) {
+      // 设置子节点，全选或全不选
+      var _posArr = splitPosition(_pos);
       if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
         obj[i].checkPart = false;
         obj[i].checked = checkIt;
+        objKeys[index] = null;
       }
+      if (iArr[0] === _posArr[0] && iArr[1] === _posArr[1]) {
+        // 如果
+        saved = true;
+      }
     });
+    if (!saved) {
+      objKeys[index] = null;
+    }
+  });
+  objKeys = objKeys.filter(function (i) {
+    return i;
+  }); // filter non null;
+
+  var _loop3 = function (_pIndex) {
     // 循环设置父节点的 选中 或 半选状态
@@ -186,3 +225,3 @@ var loop = function loop(__pos) {
       var parentPosition = stripTail(__pos);
-      Object.keys(obj).forEach(function (i) {
+      objKeys.forEach(function (i /* , index*/) {
         var iArr = splitPosition(i);
@@ -193,7 +232,16 @@ if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
             siblingChecked++;
+            var _i = checkedPositionArr.indexOf(i);
+            if (_i > -1) {
+              checkedPositionArr.splice(_i, 1);
+              if (_i <= _pIndex) {
+                _pIndex--;
+              }
+            }
           } else if (obj[i].checkPart) {
             siblingChecked += 0.5;
           }
+          // objKeys[index] = null;
         }
       });
+      // objKeys = objKeys.filter(i => i); // filter non null;
       var parent = obj[parentPosition];
@@ -214,4 +262,10 @@ // sibling 不会等于0
     };
-    loop(_pos);
-  });
+    loop(checkedPositionArr[_pIndex], _pIndex);
+    pIndex = _pIndex;
+  };
+
+  for (var pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
+    _loop3(pIndex);
+  }
+  // console.log(Date.now()-s, objKeys.length, checkIt);
 }
@@ -237,39 +291,2 @@
   };
-}
-
-function getTreeNodesStates(children, checkedKeys, checkIt, unCheckKey) {
-  var checkedPosition = [];
-  var treeNodesStates = {};
-  loopAllChildren(children, function (item, index, pos, keyOrPos, siblingPosition) {
-    var checked = false;
-    if (checkedKeys.indexOf(keyOrPos) !== -1) {
-      checked = true;
-      checkedPosition.push(pos);
-    }
-    treeNodesStates[pos] = {
-      node: item,
-      key: keyOrPos,
-      checked: checked,
-      checkPart: false,
-      siblingPosition: siblingPosition
-    };
-  });
-
-  // debugger
-  handleCheckState(treeNodesStates, filterParentPosition(checkedPosition.sort()), true);
-
-  if (!checkIt && unCheckKey) {
-    var pos = undefined;
-    Object.keys(treeNodesStates).forEach(function (item) {
-      var itemObj = treeNodesStates[item];
-      if (itemObj.key === unCheckKey) {
-        pos = item;
-        itemObj.checked = checkIt;
-        itemObj.checkPart = false;
-      }
-    });
-    handleCheckState(treeNodesStates, [pos], checkIt);
-  }
-
-  return getCheckKeys(treeNodesStates);
 }

package.json

 {
   "name": "rc-tree",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.2",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60515

increased by5.75%

Lines of code

1435

increased by5.83%

No dependency changes