rc-tree-select - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

lib/Select.js

@@ -115,2 +115,5 @@ 'use strict';
     }
+    if (this.props.treeCheckable) {
+      value = (0, _util.getTreeNodesStates)(this.props.children, value).checkedKeys;
+    }
     var label = this.getLabelFromProps(props, value, 1);
@@ -128,2 +131,5 @@ var inputValue = '';
       var value = (0, _util.toArray)(nextProps.value);
+      if (nextProps.treeCheckable) {
+        value = (0, _util.getTreeNodesStates)(nextProps.children, value).checkedKeys;
+      }
       var label = this.getLabelFromProps(nextProps, value);
@@ -236,5 +242,6 @@ this.setState({
 
-  onSelect: function onSelect(info, check) {
+  onSelect: function onSelect(info) {
     var _this = this;
 
+    var check = info.event === 'check';
     if (!check && !info.selected) {
@@ -250,7 +257,7 @@ this.onDeselect(info);
     var selectedLabel = this.getLabelFromOption(item);
+
     if (check) {
-      props.onSelect(selectedValue, item, info.checkedKeys);
-    } else {
-      props.onSelect(selectedValue, item, info.selectedKeys);
+      info.filterAllCheckedKeys = (0, _util.getCheckedKeys)(info.node, info.checkedKeys, info.allCheckedNodesKeys);
     }
+    props.onSelect(selectedValue, info);
 
@@ -262,4 +269,4 @@ if ((0, _util.isMultipleOrTags)(props)) {
       value = !check ? value.concat([selectedValue]) : [].concat(_toConsumableArray(info.checkedKeys));
-      label = !check ? label.concat([selectedLabel]) : info.allCheckedNodes.map(function (item) {
-        return _this.getLabelFromOption(item);
+      label = !check ? label.concat([selectedLabel]) : info.allCheckedNodesKeys.map(function (item) {
+        return _this.getLabelFromOption(item.node);
       });
@@ -331,3 +338,3 @@ } else {
     var loop = function loop(children, level) {
-      _react2['default'].Children.forEach(children, function (item, index) {
+      _react2['default'].Children.forEach(children, function (item) {
         if (item.props.children) {
@@ -334,0 +341,0 @@ loop(item.props.children);

lib/SelectTrigger.js

@@ -123,15 +123,2 @@ 'use strict';
 
-  loopAllChildren: function loopAllChildren(childs, callback) {
-    var loop = function loop(children, level) {
-      _react2['default'].Children.forEach(children, function (item, index) {
-        var pos = level + '-' + index;
-        if (item.props.children) {
-          loop(item.props.children, pos);
-        }
-        callback(item, index, pos);
-      });
-    };
-    loop(childs, 0);
-  },
-
   renderFilterOptionsFromChildren: function renderFilterOptionsFromChildren(children) {
@@ -145,3 +132,3 @@ var _this = this;
 
-    this.loopAllChildren(children, function (child, index, pos) {
+    (0, _util.loopAllChildren)(children, function (child, index, pos) {
       if (_this.filterTreeNode(inputValue, child)) {
@@ -151,6 +138,6 @@ posArr.push(pos);
     });
-    posArr = (0, _util.filterMin)(posArr);
+    posArr = (0, _util.filterMinPos)(posArr);
 
     var filterChildren = {};
-    this.loopAllChildren(children, function (child, index, pos) {
+    (0, _util.loopAllChildren)(children, function (child, index, pos) {
       posArr.forEach(function (item) {
@@ -243,6 +230,2 @@ if (item.indexOf(pos) === 0 && filterPos.indexOf(pos) === -1) {
       checkable: props.treeCheckable,
-      onSelect: props.onSelect,
-      onCheck: function onCheck(info) {
-        props.onSelect(info, 'check');
-      },
       filterTreeNode: this.filterTree
@@ -252,3 +235,3 @@ };
     var keys = [];
-    this.loopAllChildren(props.treeNodes, function (child, index, pos) {
+    (0, _util.loopAllChildren)(props.treeNodes, function (child, index, pos) {
       if (vals.indexOf(child.props.value) > -1) {
@@ -258,6 +241,9 @@ keys.push(child.key);
     });
+    // 为避免混乱，checkable 模式下，select 失效
     if (trProps.checkable) {
       trProps.checkedKeys = keys;
+      trProps.onCheck = props.onSelect;
     } else {
       trProps.selectedKeys = keys;
+      trProps.onSelect = props.onSelect;
     }
@@ -264,0 +250,0 @@

lib/util.js

@@ -13,4 +13,15 @@ 'use strict';
 exports.toArray = toArray;
-exports.filterMin = filterMin;
+exports.getCheckedKeys = getCheckedKeys;
+exports.loopAllChildren = loopAllChildren;
+exports.filterMinPos = filterMinPos;
+exports.getTreeNodesStates = getTreeNodesStates;
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 function getValuePropValue(child) {
@@ -60,3 +71,53 @@ var props = child.props;
 
-function filterMin(arr) {
+function isInclude(smallArray, bigArray) {
+  // attention: [0,0,1] [0,0,10]
+  return smallArray.every(function (ii, i) {
+    return ii === bigArray[i];
+  });
+}
+
+function getCheckedKeys(node, checkedKeys, allCheckedNodesKeys) {
+  var nodeKey = node.props.eventKey;
+  var newCks = [].concat(_toConsumableArray(checkedKeys));
+  var nodePos = undefined;
+  var unCheck = allCheckedNodesKeys.some(function (item) {
+    if (item.key === nodeKey) {
+      nodePos = item.pos;
+      return true;
+    }
+  });
+  if (unCheck) {
+    (function () {
+      var nArr = nodePos.split('-');
+      newCks = [];
+      allCheckedNodesKeys.forEach(function (item) {
+        var iArr = item.pos.split('-');
+        if (item.pos === nodePos || nArr.length > iArr.length && isInclude(iArr, nArr) || nArr.length < iArr.length && isInclude(nArr, iArr)) {
+          // 过滤掉 非父级节点 和 所有子节点。
+          // 因为 node节点 不选时，其 非父级节点 和 所有子节点 都不选。
+          return;
+        }
+        newCks.push(item.key);
+      });
+    })();
+  } else {
+    newCks.push(nodeKey);
+  }
+  return newCks;
+}
+
+function loopAllChildren(childs, callback) {
+  var loop = function loop(children, level) {
+    _react2['default'].Children.forEach(children, function (item, index) {
+      var pos = level + '-' + index;
+      if (item.props.children) {
+        loop(item.props.children, pos);
+      }
+      callback(item, index, pos, item.key || pos);
+    });
+  };
+  loop(childs, 0);
+}
+
+function filterMinPos(arr) {
   var a = [];
@@ -74,2 +135,104 @@ arr.forEach(function (item) {
 
-// console.log(filterMin(['0-0','0-1', '0-10', '0-0-1', '0-1-1', '0-10-0']));
+// console.log(filterMinPos(['0-0','0-1', '0-10', '0-0-1', '0-1-1', '0-10-0']));
+
+function handleCheckState(obj, checkedPosArr, checkIt) {
+  var stripTail = function stripTail(str) {
+    var arr = str.match(/(.+)(-[^-]+)$/);
+    var st = '';
+    if (arr && arr.length === 3) {
+      st = arr[1];
+    }
+    return st;
+  };
+  // stripTail('x-xx-sss-xx')
+  var splitPos = function splitPos(pos) {
+    return pos.split('-');
+  };
+  checkedPosArr.forEach(function (_pos) {
+    // 设置子节点，全选或全不选
+    Object.keys(obj).forEach(function (i) {
+      if (splitPos(i).length > splitPos(_pos).length && i.indexOf(_pos) === 0) {
+        obj[i].checkPart = false;
+        obj[i].checked = checkIt;
+      }
+    });
+    // 循环设置父节点的 选中 或 半选状态
+    var loop = function loop(__pos) {
+      var _posLen = splitPos(__pos).length;
+      if (_posLen <= 2) {
+        // e.g. '0-0', '0-1'
+        return;
+      }
+      var sibling = 0;
+      var siblingChecked = 0;
+      var parentPos = stripTail(__pos);
+      Object.keys(obj).forEach(function (i) {
+        if (splitPos(i).length === _posLen && i.indexOf(parentPos) === 0) {
+          sibling++;
+          if (obj[i].checked) {
+            siblingChecked++;
+          } else if (obj[i].checkPart) {
+            siblingChecked += 0.5;
+          }
+        }
+      });
+      var parent = obj[parentPos];
+      // sibling 不会等于0
+      // 全不选 - 全选 - 半选
+      if (siblingChecked === 0) {
+        parent.checked = false;
+        parent.checkPart = false;
+      } else if (siblingChecked === sibling) {
+        parent.checked = true;
+        parent.checkPart = false;
+      } else {
+        parent.checkPart = true;
+        parent.checked = false;
+      }
+      loop(parentPos);
+    };
+    loop(_pos);
+  });
+}
+
+function getCheckKeys(treeNodesStates) {
+  var checkPartKeys = [];
+  var checkedKeys = [];
+  var checkedNodes = [];
+  var checkedNodesKeys = [];
+  Object.keys(treeNodesStates).forEach(function (item) {
+    var itemObj = treeNodesStates[item];
+    if (itemObj.checked) {
+      checkedKeys.push(itemObj.key);
+      checkedNodes.push(itemObj.node);
+      checkedNodesKeys.push({ key: itemObj.key, node: itemObj.node, pos: item });
+    } else if (itemObj.checkPart) {
+      checkPartKeys.push(itemObj.key);
+    }
+  });
+  return {
+    checkPartKeys: checkPartKeys, checkedKeys: checkedKeys, checkedNodes: checkedNodes, checkedNodesKeys: checkedNodesKeys, treeNodesStates: treeNodesStates
+  };
+}
+
+function getTreeNodesStates(children, checkedKeys) {
+  var checkedPos = [];
+  var treeNodesStates = {};
+  loopAllChildren(children, function (item, index, pos, newKey) {
+    var checked = false;
+    if (checkedKeys.indexOf(newKey) !== -1) {
+      checked = true;
+      checkedPos.push(pos);
+    }
+    treeNodesStates[pos] = {
+      node: item,
+      key: newKey,
+      checked: checked,
+      checkPart: false
+    };
+  });
+
+  handleCheckState(treeNodesStates, filterMinPos(checkedPos.sort()), true);
+
+  return getCheckKeys(treeNodesStates);
+}

package.json

 {
   "name": "rc-tree-select",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "tree-select ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -98,3 +98,4 @@ # rc-tree-select
 |value | current selected option(s) | String/Array<String> | - |
-|onChange | called when select an option or input value change(combobox) | function(value, label) | - |
+|onChange | called when select treeNode or input value change(combobox) | function(value, label) | - |
+|onSelect | called when select treeNode | function | - |
 |onSearch | called when input changed | function | - |
@@ -104,3 +105,3 @@ |treeIcon | show tree icon | bool | false |
 |treeDefaultExpandAll | default expand all treeNode | bool | false |
-|treeCheckable | whether tree show checkbox | bool | false |
+|treeCheckable | whether tree show checkbox (select callback will not fire) | bool | false |
 |filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - |
@@ -107,0 +108,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

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

84402

increased by6.32%

Lines of code

2463

increased by6.21%

Number of lines in readme file

131

increased by0.77%

No dependency changes