rc-tree - npm Package Compare versions

Comparing version 0.23.3 to 0.24.0

lib/Tree.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
 var _classnames = require('classnames');
@@ -32,25 +36,4 @@
 
-var _TreeNode = require('./TreeNode');
-
-var _TreeNode2 = _interopRequireDefault(_TreeNode);
-
 var _util = require('./util');
 
-var splitPos = function splitPos(pos) {
-  return pos.split('-');
-};
-var filterMin = function filterMin(arr) {
-  var a = [];
-  arr.forEach(function (item) {
-    var b = a.filter(function (i) {
-      return item.indexOf(i) === 0 && (item[i.length] === '-' || !item[i.length]);
-    });
-    if (!b.length) {
-      a.push(item);
-    }
-  });
-  return a;
-};
-// console.log(filterMin(['0-0','0-1', '0-10', '0-0-1', '0-1-1', '0-10-0']));
-
 function noop() {}
@@ -92,28 +75,2 @@
     }
-
-    /*
-    // ie8
-    createDragElement(treeNode) {
-      const props = this.props;
-       // copy treeNode and it's childNodes, remove data-reactid attribute.
-      let tn = treeNode.refs.selectHandle.cloneNode(true);
-      [...tn.childNodes].forEach(child => {
-        if (child.nodeType !== 1) {
-          return;
-        }
-        child.removeAttribute('data-reactid');
-      });
-      tn.removeAttribute('data-reactid');
-       // make element
-      const li = document.createElement("li");
-      li.className = treeNode.props.className || '';
-      li.appendChild(tn);
-      const ul = document.createElement("ul");
-      ul.className = `${props.prefixCls}-dragUl ${classNames(props.className, props.prefixCls)}`;
-      ul.appendChild(li);
-       ul.setAttribute('draggable', 'true');
-      this.refs.tree.parentNode.insertBefore(ul, this.refs.tree);
-      ul.focus();
-    }
-    */
   }, {
@@ -236,27 +193,28 @@ key: 'onDragStart',
 
-      var thisProps = this.props;
-      var tnProps = treeNode.props;
+      var expand = !treeNode.props.expanded;
+      var controlled = ('expandedKeys' in this.props);
       var expandedKeys = [].concat(_toConsumableArray(this.state.expandedKeys));
-      var expanded = !tnProps.expanded;
-      var index = expandedKeys.indexOf(tnProps.eventKey);
-      if (expanded) {
-        if (index === -1) {
-          expandedKeys.push(tnProps.eventKey);
-          if (thisProps.loadData) {
-            return thisProps.loadData(treeNode).then(function () {
-              _this2.setState({
-                expandedKeys: expandedKeys
-              });
-            })['catch'](function () {
-              // console.error('Something went wrong', reason);
-            });
+      var index = expandedKeys.indexOf(treeNode.props.eventKey);
+      if (!controlled) {
+        if (expand) {
+          if (index === -1) {
+            expandedKeys.push(treeNode.props.eventKey);
           }
-        }
-      } else {
+        } else {
           expandedKeys.splice(index, 1);
         }
-      if (!('expandedKeys' in this.props)) {
         this.setState({ expandedKeys: expandedKeys });
+        this.props.onExpand(treeNode, expand, expandedKeys);
+      } else {
+        this.props.onExpand(treeNode, !expand, expandedKeys);
       }
-      thisProps.onExpand(treeNode, expanded, expandedKeys);
+
+      // after data loaded, need set new expandedKeys
+      if (expand && this.props.loadData) {
+        return this.props.loadData(treeNode).then(function () {
+          if (!controlled) {
+            _this2.setState({ expandedKeys: expandedKeys });
+          }
+        });
+      }
     }
@@ -268,20 +226,13 @@ }, {
 
-      var tnProps = treeNode.props;
-      var checked = !tnProps.checked;
-      if (tnProps.checkPart) {
+      var checked = !treeNode.props.checked;
+      if (treeNode.props.checkPart) {
         checked = true;
       }
-      var pos = undefined;
-      Object.keys(this.treeNodesStates).forEach(function (item) {
-        var itemObj = _this3.treeNodesStates[item];
-        if (itemObj.key === (treeNode.key || tnProps.eventKey)) {
-          pos = item;
-          itemObj.checked = checked;
-          itemObj.checkPart = false;
-        }
-      });
-      this.handleCheckState(this.treeNodesStates, [pos], !checked);
-      var checkKeys = this.getCheckKeys();
-      this.checkPartKeys = checkKeys.checkPartKeys;
-      var checkedKeys = checkKeys.checkedKeys;
+      var key = treeNode.key || treeNode.props.eventKey;
+      var checkedKeys = [].concat(_toConsumableArray(this.state.checkedKeys));
+      if (checked && checkedKeys.indexOf(key) === -1) {
+        checkedKeys.push(key);
+      }
+      var checkKeys = (0, _util.getTreeNodesStates)(this.props.children, checkedKeys, checked, key);
+      // this.checkPartKeys = checkKeys.checkPartKeys;
       var newSt = {
@@ -294,3 +245,3 @@ event: 'check',
         this.setState({
-          checkedKeys: checkedKeys
+          checkedKeys: checkKeys.checkedKeys
         });
@@ -301,4 +252,4 @@ newSt.checked = checked;
         newSt.allCheckedNodesKeys = [];
-        Object.keys(this.treeNodesStates).forEach(function (item) {
-          var itemObj = _this3.treeNodesStates[item];
+        Object.keys(checkKeys.treeNodesStates).forEach(function (item) {
+          var itemObj = checkKeys.treeNodesStates[item];
           // 此处用 this.checkedKeys，能包含上一次所有选中的节点，
@@ -387,13 +338,31 @@ // 供用户判断点击节点，下次是否需要选中
   }, {
-    key: 'getDefaultExpandedKeys',
-    value: function getDefaultExpandedKeys(props, willReceiveProps) {
+    key: 'getFilterExpandedKeys',
+    value: function getFilterExpandedKeys(props) {
       var defaultExpandedKeys = props.defaultExpandedKeys;
-      if (props.defaultExpandAll) {
-        defaultExpandedKeys = [];
-        this.loopAllChildren(props.children, function (item, index, pos) {
-          var key = item.key || pos;
-          defaultExpandedKeys.push(key);
+      var expandedPosArr = [];
+      if (props.autoExpandParent) {
+        (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
+          if (defaultExpandedKeys.indexOf(newKey) > -1) {
+            expandedPosArr.push(pos);
+          }
         });
       }
-      var expandedKeys = willReceiveProps ? undefined : defaultExpandedKeys;
+      var filterExpandedKeys = [];
+      (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
+        if (props.defaultExpandAll) {
+          filterExpandedKeys.push(newKey);
+        } else if (props.autoExpandParent) {
+          expandedPosArr.forEach(function (p) {
+            if (pos.split('-').length < p.split('-').length && p.indexOf(pos) === 0 && filterExpandedKeys.indexOf(newKey) === -1) {
+              filterExpandedKeys.push(newKey);
+            }
+          });
+        }
+      });
+      return filterExpandedKeys.length ? filterExpandedKeys : defaultExpandedKeys;
+    }
+  }, {
+    key: 'getDefaultExpandedKeys',
+    value: function getDefaultExpandedKeys(props, willReceiveProps) {
+      var expandedKeys = willReceiveProps ? undefined : this.getFilterExpandedKeys(props);
       if ('expandedKeys' in props) {
@@ -424,25 +393,2 @@ expandedKeys = props.expandedKeys || [];
   }, {
-    key: 'getCheckKeys',
-    value: function getCheckKeys() {
-      var _this4 = this;
-
-      var checkPartKeys = [];
-      var checkedKeys = [];
-      var checkedNodes = [];
-      var checkedNodesKeys = [];
-      Object.keys(this.treeNodesStates).forEach(function (item) {
-        var itemObj = _this4.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
-      };
-    }
-  }, {
     key: 'getOriginExpandedKeys',
@@ -468,8 +414,6 @@ value: function getOriginExpandedKeys() {
     value: function getDragNodes(treeNode) {
-      var _this5 = this;
-
       var dragNodesKeys = [];
-      Object.keys(this.treeNodesStates).forEach(function (item) {
-        if (item.indexOf(treeNode.props.pos) === 0) {
-          dragNodesKeys.push(_this5.treeNodesStates[item].key);
+      (0, _util.loopAllChildren)(this.props.children, function (item, index, pos, newKey) {
+        if (pos.indexOf(treeNode.props.pos) === 0) {
+          dragNodesKeys.push(newKey);
         }
@@ -505,83 +449,2 @@ });
   }, {
-    key: 'handleCheckState',
-    value: function handleCheckState(obj, checkedArr, unCheckEvent) {
-      var evt = false;
-      if (typeof unCheckEvent === 'boolean') {
-        evt = true;
-      }
-      // stripTail('x-xx-sss-xx')
-      var stripTail = function stripTail(str) {
-        var arr = str.match(/(.+)(-[^-]+)$/);
-        var st = '';
-        if (arr && arr.length === 3) {
-          st = arr[1];
-        }
-        return st;
-      };
-      checkedArr.forEach(function (_pos) {
-        Object.keys(obj).forEach(function (i) {
-          if (splitPos(i).length > splitPos(_pos).length && i.indexOf(_pos) === 0) {
-            obj[i].checkPart = false;
-            if (evt) {
-              if (unCheckEvent) {
-                obj[i].checked = false;
-              } else {
-                obj[i].checked = true;
-              }
-            } else {
-              obj[i].checked = true;
-            }
-          }
-        });
-        var loop = function loop(__pos) {
-          var _posLen = splitPos(__pos).length;
-          if (_posLen <= 2) {
-            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);
-      });
-    }
-  }, {
-    key: 'loopAllChildren',
-    value: 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 && item.type === _TreeNode2['default']) {
-            loop(item.props.children, pos);
-          }
-          callback(item, index, pos);
-        });
-      };
-      loop(childs, 0);
-    }
-  }, {
     key: 'renderTreeNode',
@@ -620,2 +483,5 @@ value: function renderTreeNode(child, index) {
       };
+      if (this.treeNodesStates[pos]) {
+        (0, _objectAssign2['default'])(cloneProps, this.treeNodesStates[pos].siblingPos);
+      }
       return _react2['default'].cloneElement(child, cloneProps);
@@ -626,4 +492,2 @@ }
     value: function render() {
-      var _this6 = this;
-
       var props = this.props;
@@ -639,23 +503,6 @@ var domProps = {
       // console.log(this.state.expandedKeys, this._originExpandedKeys, props.children);
-      var checkedKeys = this.state.checkedKeys;
-      var checkedPos = [];
-      this.treeNodesStates = {};
-      this.loopAllChildren(props.children, function (item, index, pos) {
-        var key = item.key || pos;
-        var checked = false;
-        if (checkedKeys.indexOf(key) !== -1) {
-          checked = true;
-          checkedPos.push(pos);
-        }
-        _this6.treeNodesStates[pos] = {
-          node: item,
-          key: key,
-          checked: checked,
-          checkPart: false
-        };
-      });
-      this.handleCheckState(this.treeNodesStates, filterMin(checkedPos.sort()));
-      var checkKeys = this.getCheckKeys();
+      var checkKeys = (0, _util.getTreeNodesStates)(props.children, this.state.checkedKeys, true);
       this.checkPartKeys = checkKeys.checkPartKeys;
       this.checkedKeys = checkKeys.checkedKeys;
+      this.treeNodesStates = checkKeys.treeNodesStates;
 
@@ -675,2 +522,3 @@ return _react2['default'].createElement(
   prefixCls: _react.PropTypes.string,
+  children: _react.PropTypes.any,
   checkable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.node]),
@@ -680,3 +528,5 @@ multiple: _react.PropTypes.bool,
   showIcon: _react.PropTypes.bool,
+  autoExpandParent: _react.PropTypes.bool,
   defaultExpandAll: _react.PropTypes.bool,
+  expandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
   defaultExpandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
@@ -711,2 +561,3 @@ checkedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
   showIcon: true,
+  autoExpandParent: true,
   defaultExpandAll: false,
@@ -713,0 +564,0 @@ defaultExpandedKeys: [],

lib/TreeNode.js

@@ -146,5 +146,3 @@ 'use strict';
           var setLoading = function setLoading(dataLoading) {
-            _this2.setState({
-              dataLoading: dataLoading
-            });
+            _this2.setState({ dataLoading: dataLoading });
           };
@@ -168,22 +166,2 @@ setLoading(true);
   }, {
-    key: 'getPosition',
-    value: function getPosition(pos) {
-      var obj = {
-        last: false,
-        center: false
-      };
-      var siblings = Object.keys(this.props.root.treeNodesStates).filter(function (item) {
-        var len = pos.length;
-        return len === item.length && pos.substring(0, len - 2) === item.substring(0, len - 2);
-      });
-      var sLen = siblings.length;
-      var posIndex = Number(pos.substr(-1, 1));
-      if (sLen === 1 || posIndex === sLen - 1) {
-        obj.last = true;
-      } else {
-        obj.center = true;
-      }
-      return obj;
-    }
-  }, {
     key: 'renderSwitcher',
@@ -198,4 +176,2 @@ value: function renderSwitcher(props, expandedState) {
 
-      var posObj = this.getPosition(props.pos);
-
       if (!props.showLine) {
@@ -206,4 +182,4 @@ switcherCls[prefixCls + '-noline_' + expandedState] = true;
       } else {
-        switcherCls[prefixCls + '-center_' + expandedState] = posObj.center;
-        switcherCls[prefixCls + '-bottom_' + expandedState] = posObj.last;
+        switcherCls[prefixCls + '-center_' + expandedState] = !props.last;
+        switcherCls[prefixCls + '-bottom_' + expandedState] = props.last;
       }
@@ -251,8 +227,6 @@ return _react2['default'].createElement('span', { className: (0, _classnames2['default'])(switcherCls), onClick: this.onExpand });
       var newChildren = children;
-      if (!children) {
-        return children;
-      }
-      if (children.type === TreeNode || Array.isArray(children) && children.every(function (item) {
+      var allTreeNode = Array.isArray(children) && children.every(function (item) {
         return item.type === TreeNode;
-      })) {
+      });
+      if (children && (children.type === TreeNode || allTreeNode)) {
         var _cls;
@@ -262,3 +236,3 @@
         if (props.showLine) {
-          cls[props.prefixCls + '-line'] = this.getPosition(props.pos).center;
+          cls[props.prefixCls + '-line'] = !props.last;
         }
@@ -383,6 +357,19 @@ var animProps = {};
 
+      var noopSwitcher = function noopSwitcher() {
+        var _cls2;
+
+        var cls = (_cls2 = {}, _defineProperty(_cls2, prefixCls + '-switcher', true), _defineProperty(_cls2, prefixCls + '-switcher-noop', true), _cls2);
+        if (props.showLine) {
+          cls[prefixCls + '-center_docu'] = !props.last;
+          cls[prefixCls + '-bottom_docu'] = props.last;
+        } else {
+          cls[prefixCls + '-noline_docu'] = true;
+        }
+        return _react2['default'].createElement('span', { className: (0, _classnames2['default'])(cls) });
+      };
+
       return _react2['default'].createElement(
         'li',
         _extends({}, liProps, { ref: 'li', className: (0, _classnames2['default'])(props.className, disabledCls, dragOverCls, filterCls) }),
-        canRenderSwitcher ? this.renderSwitcher(props, expandedState) : _react2['default'].createElement('span', { className: prefixCls + '-switcher-noop' }),
+        canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),
         props.checkable ? this.renderCheckbox(props) : null,
@@ -389,0 +376,0 @@ selectHandle(),

lib/util.js

@@ -8,3 +8,16 @@ 'use strict';
 exports.getOffset = getOffset;
+exports.loopAllChildren = loopAllChildren;
+exports.filterMinPos = filterMinPos;
+exports.getTreeNodesStates = getTreeNodesStates;
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _TreeNode = require('./TreeNode');
+
+var _TreeNode2 = _interopRequireDefault(_TreeNode);
+
 function browser(ua) {
@@ -67,2 +80,167 @@ var tem = undefined;
   return { top: _y, left: _x };
+}
+
+function getChildrenlength(children) {
+  var len = 1;
+  if (Array.isArray(children)) {
+    len = children.length;
+  }
+  return len;
+}
+
+function getSiblingPos(index, len, siblingPos) {
+  if (len === 1) {
+    siblingPos.first = true;
+    siblingPos.last = true;
+  } else {
+    siblingPos.first = index === 0;
+    siblingPos.last = index === len - 1;
+  }
+  return siblingPos;
+}
+
+function loopAllChildren(childs, callback) {
+  var loop = function loop(children, level) {
+    var len = getChildrenlength(children);
+    _react2['default'].Children.forEach(children, function (item, index) {
+      var pos = level + '-' + index;
+      if (item.props.children && item.type === _TreeNode2['default']) {
+        loop(item.props.children, pos);
+      }
+      callback(item, index, pos, item.key || pos, getSiblingPos(index, len, {}));
+    });
+  };
+  loop(childs, 0);
+}
+
+function filterMinPos(arr) {
+  var a = [];
+  arr.forEach(function (item) {
+    var b = a.filter(function (i) {
+      return item.indexOf(i) === 0 && (item[i.length] === '-' || !item[i.length]);
+    });
+    if (!b.length) {
+      a.push(item);
+    }
+  });
+  return a;
+}
+
+// console.log(filterMinPos(['0-0','0-1', '0-10', '0-0-1', '0-1-1', '0-10-0']));
+
+// stripTail('x-xx-sss-xx')
+var stripTail = function stripTail(str) {
+  var arr = str.match(/(.+)(-[^-]+)$/);
+  var st = '';
+  if (arr && arr.length === 3) {
+    st = arr[1];
+  }
+  return st;
+};
+var splitPos = function splitPos(pos) {
+  return pos.split('-');
+};
+
+function handleCheckState(obj, checkedPosArr, checkIt) {
+  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, checkIt, unCheckKey) {
+  var checkedPos = [];
+  var treeNodesStates = {};
+  loopAllChildren(children, function (item, index, pos, newKey, siblingPos) {
+    var checked = false;
+    if (checkedKeys.indexOf(newKey) !== -1) {
+      checked = true;
+      checkedPos.push(pos);
+    }
+    treeNodesStates[pos] = {
+      node: item,
+      key: newKey,
+      checked: checked,
+      checkPart: false,
+      siblingPos: siblingPos
+    };
+  });
+  // debugger
+  handleCheckState(treeNodesStates, filterMinPos(checkedPos.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": "0.23.3",
+  "version": "0.24.0",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -69,2 +69,3 @@ # rc-tree
 |expandedKeys | Controlled expand specific treeNodes | String[] | - |
+|autoExpandParent | whether auto expand parent treeNodes | bool | true |
 |checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work) | String[] | [] |
@@ -71,0 +72,0 @@ |defaultCheckedKeys | default checked treeNodes | String[] | [] |

No alert changes

Improved metrics

Total package byte prevSize

60251

increased by1.31%

Lines of code

1500

increased by0.54%

Number of lines in readme file

123

increased by0.82%

No dependency changes