rc-tree-select - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2-beta

HISTORY.md

 # History
 ---
 
+## 1.5.2 / 2016-04-02
+- `skipHandleInitValue` is deprecated, use `treeCheckStrictly` instead.
+
 ## 1.4.0 / 2016-03-14
@@ -5,0 +8,0 @@ - change `showAllChecked`/`showParentChecked` to `showCheckedStrategy`.

lib/Select.js

@@ -115,3 +115,4 @@ 'use strict';
     showCheckedStrategy: _react.PropTypes.oneOf([SHOW_ALL, SHOW_PARENT, SHOW_CHILD]),
-    skipHandleInitValue: _react.PropTypes.bool,
+    // skipHandleInitValue: PropTypes.bool, // Deprecated (use treeCheckStrictly)
+    treeCheckStrictly: _react.PropTypes.bool,
     treeIcon: _react.PropTypes.bool,
@@ -147,3 +148,4 @@ treeLine: _react.PropTypes.bool,
       showCheckedStrategy: SHOW_CHILD,
-      skipHandleInitValue: false,
+      // skipHandleInitValue: false, // Deprecated (use treeCheckStrictly)
+      treeCheckStrictly: false,
       treeIcon: false,
@@ -166,5 +168,6 @@ treeLine: false,
     }
+    // save parsed treeData, for performance (treeData may be very big)
+    this.renderedTreeData = this.renderTreeData(props);
     value = this.addLabelToValue(props, value);
     value = this.getValue(props, value);
-    // const label = this.getLabelFromProps(props, value, 1);
     var inputValue = '';
@@ -181,2 +184,4 @@ if (props.combobox) {
       var value = (0, _util.toArray)(nextProps.value);
+      // save parsed treeData, for performance (treeData may be very big)
+      this.renderedTreeData = this.renderTreeData(nextProps);
       value = this.addLabelToValue(nextProps, value);
@@ -370,3 +375,3 @@ value = this.getValue(nextProps, value);
       extraInfo.checked = info.checked;
-      extraInfo.allCheckedNodes = (0, _util.flatToHierarchy)(info.checkedNodesPositions);
+      extraInfo.allCheckedNodes = props.treeCheckStrictly ? info.checkedNodes : (0, _util.flatToHierarchy)(info.checkedNodesPositions);
     } else {
@@ -442,12 +447,4 @@ extraInfo.selected = info.selected;
 
-  getLabelFromProps: function getLabelFromProps(props, value, init) {
-    var label = [];
-    if ('label' in props) {
-      label = (0, _util.toArray)(props.label);
-    } else if (init && 'defaultLabel' in props) {
-      label = (0, _util.toArray)(props.defaultLabel);
-    } else {
-      label = this.getLabelByValue(this.renderTreeData(props) || props.children, (0, _util.toArray)(value))[0];
-    }
-    return label;
+  getLabelFromProps: function getLabelFromProps(props, value) {
+    return this.getLabelByValue(this.renderedTreeData || props.children, value);
   },
@@ -468,12 +465,8 @@
 
-  getLabelByValue: function getLabelByValue(children, values) {
-    var _this4 = this;
-
-    return values.map(function (value) {
-      var label = _this4.getLabelBySingleValue(children, value);
-      if (label === null) {
-        return value;
-      }
-      return label;
-    });
+  getLabelByValue: function getLabelByValue(children, value) {
+    var label = this.getLabelBySingleValue(children, value);
+    if (label === null) {
+      return value;
+    }
+    return label;
   },
@@ -542,6 +535,6 @@
   getValue: function getValue(_props, value) {
-    if (!(_props.treeCheckable && !_props.skipHandleInitValue)) {
+    if (!(_props.treeCheckable && !_props.treeCheckStrictly)) {
       return value;
     }
-    var checkedTreeNodes = (0, _util.getTreeNodesStates)(this.renderTreeData(_props) || _props.children, value.map(function (item) {
+    var checkedTreeNodes = (0, _util.getTreeNodesStates)(this.renderedTreeData || _props.children, value.map(function (item) {
       return item.value;
@@ -583,2 +576,5 @@ })).checkedTreeNodes;
 
+    if (props.treeCheckStrictly) {
+      return checkedNodes;
+    }
     var checkedNodesPositions = info.checkedNodesPositions;
@@ -631,3 +627,3 @@ if (props.showCheckedStrategy === SHOW_ALL) {
   setOpenState: function setOpenState(open, needFocus) {
-    var _this5 = this;
+    var _this4 = this;
 
@@ -647,3 +643,3 @@ this.clearDelayTimer();
         if (open || (0, _util.isMultipleOrTagsOrCombobox)(props)) {
-          var input = _this5.getInputDOMNode();
+          var input = _this4.getInputDOMNode();
           if (input && document.activeElement !== input) {
@@ -660,3 +656,3 @@ input.focus();
   addLabelToValue: function addLabelToValue(props, value_) {
-    var _this6 = this;
+    var _this5 = this;
 
@@ -666,3 +662,3 @@ var value = value_;
       value.forEach(function (v) {
-        v.label = v.label || _this6.getLabelFromProps(props, v.value);
+        v.label = v.label || _this5.getLabelFromProps(props, v.value);
       });
@@ -673,3 +669,3 @@ } else {
           value: v,
-          label: _this6.getLabelFromProps(props, v)
+          label: _this5.getLabelFromProps(props, v)
         };
@@ -693,3 +689,3 @@ });
     }
-    if ((props.showCheckedStrategy === SHOW_ALL || props.showCheckedStrategy === SHOW_PARENT) && !props.skipHandleInitValue) {
+    if ((props.showCheckedStrategy === SHOW_ALL || props.showCheckedStrategy === SHOW_PARENT) && !props.treeCheckStrictly) {
       this.getDeselectedValue(selectedKey);
@@ -755,3 +751,3 @@ return;
   renderTopControlNode: function renderTopControlNode() {
-    var _this7 = this;
+    var _this6 = this;
 
@@ -814,3 +810,3 @@ var value = this.state.value;
             className: prefixCls + '-selection__choice__remove',
-            onClick: _this7.removeSelected.bind(_this7, singleValue.value)
+            onClick: _this6.removeSelected.bind(_this6, singleValue.value)
           })
@@ -884,3 +880,3 @@ );
         treeNodes: props.children,
-        treeData: this.renderTreeData(),
+        treeData: this.renderedTreeData,
         multiple: multiple,
@@ -887,0 +883,0 @@ disabled: disabled,

lib/SelectTrigger.js

@@ -25,6 +25,2 @@ 'use strict';
 
-var _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _rcTrigger = require('rc-trigger');
@@ -40,2 +36,6 @@
 
+var _rcUtil = require('rc-util');
+
+var _rcUtil2 = _interopRequireDefault(_rcUtil);
+
 var BUILT_IN_PLACEMENTS = {
@@ -127,39 +127,5 @@ bottomLeft: {
 
-  renderFilterTreeNodes: function renderFilterTreeNodes(children) {
-    var _this = this;
-
+  renderTree: function renderTree(keys, newTreeNodes, multiple) {
     var props = this.props;
-    var inputValue = props.inputValue;
-    var filterNodesPositions = [];
 
-    (0, _util.loopAllChildren)(children, function (child, index, pos) {
-      if (_this.filterTreeNode(inputValue, child)) {
-        filterNodesPositions.push({ node: child, pos: pos });
-      }
-    });
-
-    return (0, _util.flatToHierarchy)(filterNodesPositions);
-  },
-
-  renderTree: function renderTree(treeNodes, newTreeNodes, multiple) {
-    var props = this.props;
-
-    var loop = function loop(data) {
-      return data.map(function (item) {
-        var tProps = { key: item.node.key };
-        (0, _objectAssign2['default'])(tProps, item.node.props);
-        if (tProps.children) {
-          delete tProps.children;
-        }
-        if (item.children) {
-          return _react2['default'].createElement(
-            _rcTree.TreeNode,
-            tProps,
-            loop(item.children)
-          );
-        }
-        return _react2['default'].createElement(_rcTree.TreeNode, tProps);
-      });
-    };
-
     var trProps = {
@@ -172,12 +138,6 @@ multiple: multiple,
       checkable: props.treeCheckable,
+      checkStrictly: props.treeCheckStrictly,
       filterTreeNode: this.filterTree
     };
-    var keys = [];
-    (0, _util.loopAllChildren)(treeNodes, function (child) {
-      if (props.value.some(function (item) {
-        return item.value === (0, _util.getValuePropValue)(child);
-      })) {
-        keys.push(child.key);
-      }
-    });
+
     // 为避免混乱，checkable 模式下，select 失效
@@ -204,7 +164,8 @@ if (trProps.checkable) {
       _extends({ ref: this.savePopupElement }, trProps),
-      loop(newTreeNodes)
+      newTreeNodes
     );
   },
   render: function render() {
-    var _popupClassName;
+    var _popupClassName,
+        _this = this;
 
@@ -221,3 +182,63 @@ var props = this.props;
     );
-    var treeNodes = this.renderFilterTreeNodes(props.treeData || props.treeNodes);
+
+    var recursive = function recursive(children) {
+      // 注意: 如果用 React.Children.map 遍历，key 会被修改掉。
+      return _rcUtil2['default'].Children.toArray(children).map(function (child) {
+        if (child && child.props.children) {
+          // null or String has no Prop
+          return _react2['default'].createElement(
+            _rcTree.TreeNode,
+            _extends({}, child.props, { key: child.key }),
+            recursive(child.props.children)
+          );
+        }
+        return _react2['default'].createElement(_rcTree.TreeNode, _extends({}, child.props, { key: child.key }));
+      });
+    };
+    var treeNodes = recursive(props.treeData || props.treeNodes);
+
+    var recursive1 = function recursive1(children) {
+      var cb = arguments.length <= 1 || arguments[1] === undefined ? function (ch) {
+        return ch;
+      } : arguments[1];
+      var cb1 = arguments.length <= 2 || arguments[2] === undefined ? function (childs) {
+        return childs;
+      } : arguments[2];
+
+      return children.map(function (child) {
+        if (child && child.props.children) {
+          return _react2['default'].cloneElement(child, {}, recursive1(cb1(child.props.children), cb, cb1));
+        }
+        return cb(child);
+      });
+    };
+
+    if (props.inputValue) {
+      treeNodes = recursive1(treeNodes, function (child) {
+        if (_this.filterTreeNode(props.inputValue, child)) {
+          return child;
+        }
+        return null;
+      });
+      treeNodes = recursive1(treeNodes, undefined, function (childs) {
+        // 过滤掉 children array 里的 null
+        // ref: https://github.com/facebook/react/issues/4867
+        // 可以用 React.Children.toArray(childs)，但会把 key 修改掉
+        return Array.from(childs).filter(function (i) {
+          return i;
+        });
+      }).filter(function (i) {
+        return i;
+      });
+    }
+
+    var keys = [];
+    (0, _util.loopAllChildren)(treeNodes, function (child) {
+      if (props.value.some(function (item) {
+        return item.value === (0, _util.getValuePropValue)(child);
+      })) {
+        keys.push(child.key);
+      }
+    });
+
     var notFoundContent = undefined;
@@ -240,3 +261,3 @@ if (!treeNodes.length) {
       search,
-      notFoundContent ? notFoundContent : this.renderTree(props.treeData || props.treeNodes, treeNodes, multiple)
+      notFoundContent ? notFoundContent : this.renderTree(keys, treeNodes, multiple)
     );
@@ -243,0 +264,0 @@

lib/util.js

@@ -0,1 +1,2 @@
+/* eslint no-loop-func: 0*/
 'use strict';
@@ -24,2 +25,3 @@
 exports.filterParentPosition = filterParentPosition;
+exports.handleCheckState = handleCheckState;
 exports.getTreeNodesStates = getTreeNodesStates;
@@ -155,6 +157,8 @@
       var pos = level + '-' + index;
-      if (item.props.children) {
+      if (item && item.props.children) {
         loop(item.props.children, pos);
       }
-      callback(item, index, pos, getValuePropValue(item));
+      if (item) {
+        callback(item, index, pos, getValuePropValue(item));
+      }
     });
@@ -181,2 +185,4 @@ };
   });
+  // const s = Date.now();
+  // todo: 数据量大时，下边函数性能差，能否是o1时间复杂度？
   levelArr.reduce(function (pre, cur) {
@@ -202,33 +208,52 @@ if (cur && cur !== pre) {
   });
+  // console.log(Date.now() - s);
   return levelObj[levelArr[levelArr.length - 1]].concat(hierarchyNodes);
 }
 
-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-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']));
+
 var stripTail = function stripTail(str) {
@@ -242,21 +267,41 @@ var arr = str.match(/(.+)(-[^-]+)$/);
 };
+var splitPosition = function splitPosition(pos) {
+  return pos.split('-');
+};
 
-function handleCheckState(obj, checkedPosArr, checkIt) {
-  // stripTail('x-xx-sss-xx')
-  var splitPos = function splitPos(pos) {
-    return pos.split('-');
-  };
-  checkedPosArr.forEach(function (_pos) {
-    var posPath = splitPos(_pos);
-    // 设置子节点，全选或全不选
-    Object.keys(obj).forEach(function (i) {
-      var iPath = splitPos(i);
-      if (iPath.length > posPath.length && isInclude(posPath, iPath)) {
+// TODO 再优化
+
+function handleCheckState(obj, checkedPositionArr, checkIt) {
+  // console.log(stripTail('0-101-000'));
+  // 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) {
     // 循环设置父节点的 选中 或 半选状态
     var loop = function loop(__pos) {
-      var _posLen = splitPos(__pos).length;
+      var _posLen = splitPosition(__pos).length;
       if (_posLen <= 2) {
@@ -268,16 +313,24 @@ // e.g. '0-0', '0-1'
       var siblingChecked = 0;
-      var parentPos = stripTail(__pos);
-      var parentPosPath = splitPos(parentPos);
-      Object.keys(obj).forEach(function (i) {
-        var iPath = splitPos(i);
-        if (iPath.length === _posLen && isInclude(parentPosPath, iPath)) {
+      var parentPosition = stripTail(__pos);
+      objKeys.forEach(function (i /* , index*/) {
+        var iArr = splitPosition(i);
+        if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
           sibling++;
           if (obj[i].checked) {
             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;
         }
       });
-      var parent = obj[parentPos];
+      // objKeys = objKeys.filter(i => i); // filter non null;
+      var parent = obj[parentPosition];
       // sibling 不会等于0
@@ -295,6 +348,12 @@ // 全不选 - 全选 - 半选
       }
-      loop(parentPos);
+      loop(parentPosition);
     };
-    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);
 }
@@ -301,0 +360,0 @@

package.json

 {
   "name": "rc-tree-select",
-  "version": "1.5.1",
+  "version": "1.5.2-beta",
   "description": "tree-select ui component for react",
@@ -60,3 +60,3 @@ "keywords": [
     "rc-animate": "^2.0.2",
-    "rc-tree": "^1.1.0",
+    "rc-tree": "^1.2.0-beta.2",
     "rc-trigger": "^1.0.6",
@@ -63,0 +63,0 @@ "rc-util": "^3.1.2"

README.md

@@ -72,4 +72,4 @@ # rc-tree-select
 |disabled | whether disabled select | bool | false |
-|defaultValue | initial selected option(s) | String/Array<String> | - |
-|value | current selected option(s) | String/Array<String> | - |
+|defaultValue | initial selected treeNode(s) | String/Array<String> | - |
+|value | current selected treeNode(s) | String/Array<String> | - |
 |labelInValue| whether to embed label in value, see above value type | Bool | false |
@@ -84,2 +84,4 @@ |onChange | called when select treeNode or input value change(combobox) | function(value, label) | - |
 |treeCheckable | whether tree show checkbox (select callback will not fire) | bool | false |
+|treeCheckStrictly | check node precisely, parent and children nodes are not associated| bool | false |
+|skipHandleInitValue | skip handle init value when enable treeCheckable | bool | false |
 |filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - |
@@ -86,0 +88,0 @@ |treeNodeFilterProp | which prop value of treeNode will be used for filter if filterTreeNode return true | String | 'value' |

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

98327

increased by3.12%

Lines of code

2866

increased by2.39%

Number of lines in readme file

114

increased by1.79%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updatedrc-tree@^1.2.0-beta.2