rsuite-check-tree - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2-beta.1

lib/CheckTree.js

@@ -23,14 +23,22 @@ 'use strict';
 
-var _cloneDeep = require('lodash/cloneDeep');
+var _reactDom = require('react-dom');
 
-var _cloneDeep2 = _interopRequireDefault(_cloneDeep);
+var _classnames = require('classnames');
 
-var _Tree = require('./Tree');
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Tree2 = _interopRequireDefault(_Tree);
+var _domLib = require('dom-lib');
 
+var _TreeCheckNode = require('./TreeCheckNode');
+
+var _TreeCheckNode2 = _interopRequireDefault(_TreeCheckNode);
+
+var _InternalNode = require('./InternalNode');
+
+var _InternalNode2 = _interopRequireDefault(_InternalNode);
+
+var _constants = require('./constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -46,5 +54,5 @@
   /**
-   * 是否关系检查
+   * 是否级联选择
    */
-  relation: _propTypes2.default.bool,
+  cascade: _propTypes2.default.bool,
   defaultValue: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
@@ -66,3 +74,3 @@ value: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
 var defaultProps = {
-  relation: true,
+  cascade: true,
   valueKey: 'value',
@@ -81,8 +89,39 @@ labelKey: 'label',
 
-    _this.getActiveNode = function (nodes, value) {
+    _this.getFocusableMenuItems = function () {
       var _this$props = _this.props,
-          relation = _this$props.relation,
-          valueKey = _this$props.valueKey,
+          data = _this$props.data,
           childrenKey = _this$props.childrenKey;
 
+
+      var items = [];
+      var loop = function loop(treeNodes) {
+        treeNodes.forEach(function (node) {
+          if (!_this.getDisabledState(node)) {
+            items.push(node);
+            var nodeData = _extends({}, node, _this.nodes[node.refKey]);
+            if (!_this.getExpandState(nodeData)) {
+              return;
+            }
+            if (node[childrenKey]) {
+              loop(node[childrenKey]);
+            }
+          }
+        });
+      };
+
+      loop(data);
+      return items;
+    };
+
+    _this.getElementByDataKey = function (dataKey) {
+      var ele = (0, _reactDom.findDOMNode)(_this);
+      return ele.querySelector('[data-key="' + dataKey + '"]');
+    };
+
+    _this.getActiveNode = function (nodes, value) {
+      var _this$props2 = _this.props,
+          cascade = _this$props2.cascade,
+          valueKey = _this$props2.valueKey,
+          childrenKey = _this$props2.childrenKey;
+
       for (var i = 0; i < nodes.length; i += 1) {
@@ -95,3 +134,3 @@ if ((0, _isEqual2.default)(nodes[i][valueKey], value)) {
           if (activeNode) {
-            if (relation) {
+            if (cascade) {
               var checkedNodes = nodes[i][childrenKey].filter(function (node) {
@@ -110,5 +149,5 @@ return node.checkState === 'checked' || node.checkState === 'halfChecked';
     _this.getSelectedValues = function (nextData) {
-      var _this$props2 = _this.props,
-          valueKey = _this$props2.valueKey,
-          childrenKey = _this$props2.childrenKey;
+      var _this$props3 = _this.props,
+          valueKey = _this$props3.valueKey,
+          childrenKey = _this$props3.childrenKey;
 
@@ -132,89 +171,31 @@ var selectedValues = [];
 
-    _this.initCheckedState = function (value) {
-      var selectedValues = value || _this.state.selectedValues;
-      var _this$props3 = _this.props,
-          valueKey = _this$props3.valueKey,
-          childrenKey = _this$props3.childrenKey;
+    _this.selectActiveItem = function (event) {
+      var _this$getActiveItem = _this.getActiveItem(),
+          nodeData = _this$getActiveItem.nodeData,
+          layer = _this$getActiveItem.layer;
 
-      var level = 0;
-      var loop = function loop(nodes, ref) {
-        nodes.forEach(function (node, index) {
-          node.refKey = ref + '-' + index;
-          node.checkState = 'unchecked';
-          selectedValues.forEach(function (selected) {
-            if ((0, _isEqual2.default)(selected, node[valueKey])) {
-              node.checkState = 'checked';
-            }
-          });
-          node.expand = _this.getExpandState(node);
-          if (node[childrenKey]) {
-            loop(node[childrenKey], node.refKey);
-          }
-        });
-      };
-      loop(_this.tempNode, level);
+      _this.handleSelect(nodeData, +layer, event);
     };
 
-    _this.createParentNode = function (value) {
-      var selectedValues = value || _this.state.selectedValues;
+    _this.handleSelect = function (activeNode, layer, event) {
       var _this$props4 = _this.props,
-          valueKey = _this$props4.valueKey,
-          childrenKey = _this$props4.childrenKey;
+          onChange = _this$props4.onChange,
+          onSelect = _this$props4.onSelect,
+          cascade = _this$props4.cascade,
+          data = _this$props4.data;
 
-      var level = 0;
-      var loop = function loop(nodes, parentNode, ref) {
-        nodes.forEach(function (node, index) {
-          node.refKey = ref + '-' + index;
-          node.expand = _this.getExpandState(node);
-          node.parentNode = parentNode;
-          // 同时加上 checkState 属性
-          node.checkState = 'unchecked';
-          selectedValues.forEach(function (selected) {
-            if ((0, _isEqual2.default)(selected, node[valueKey])) {
-              node.checkState = 'checked';
-            }
-          });
-          if (node[childrenKey]) {
-            loop(node[childrenKey], node, node.refKey);
-          }
-        });
-      };
-      loop(_this.tempNode, null, level);
-    };
-
-    _this.checkChildren = function (nodes, checkState) {
-      var childrenKey = _this.props.childrenKey;
-
-      if (!nodes) {
-        return;
-      }
-      for (var i = 0; i < nodes.length; i += 1) {
-        nodes[i].checkState = checkState;
-        if (nodes[i][childrenKey]) {
-          _this.checkChildren(nodes[i][childrenKey], checkState);
-        }
-      }
-    };
-
-    _this.handleSelect = function (activeNodeData, layer) {
-      var _this$props5 = _this.props,
-          valueKey = _this$props5.valueKey,
-          childrenKey = _this$props5.childrenKey,
-          onChange = _this$props5.onChange,
-          onSelect = _this$props5.onSelect,
-          relation = _this$props5.relation;
-
-      var nextData = _this.state.data;
-
-      if ('defaultValue' in _this.props || _this.isControlled && onChange) {
-        var activeNode = _this.getActiveNode(nextData, activeNodeData[valueKey]);
-        relation && _this.checkChildren(activeNode[childrenKey], activeNode.checkState);
-        var selectedValues = _this.getSelectedValues(nextData);
-        activeNode.check = activeNode.checkState === 'checked';
+      _this.toggleChecked(activeNode, activeNode.check, cascade);
+      var formattedNodes = _this.getFormattedNodes(data);
+      _this.setCheckState(formattedNodes);
+      var selectedValues = _this.serializeList('check');
+      if (_this.isControlled) {
+        onChange && onChange(selectedValues);
+        onSelect && onSelect(activeNode, layer, event);
+      } else {
         _this.setState({
-          data: nextData,
+          formattedNodes: formattedNodes,
           selectedValues: selectedValues
         }, function () {
           onChange && onChange(selectedValues);
-          onSelect && onSelect(activeNode, layer);
+          onSelect && onSelect(activeNode, layer, event);
         });
@@ -227,18 +208,45 @@ }
 
-      nodeData.check = nodeData.checkState === 'checked';
-      var nextData = _this.state.data;
-      _this.setState({
-        data: nextData
-      }, function () {
-        onExpand && onExpand(nodeData, layer);
-      });
+      (0, _domLib.toggleClass)((0, _reactDom.findDOMNode)(_this.refs[nodeData.refKey]), 'open');
+      nodeData.expand = (0, _domLib.hasClass)((0, _reactDom.findDOMNode)(_this.refs[nodeData.refKey]), 'open');
+      _this.toggleExpand(nodeData, nodeData.expand);
+      onExpand && onExpand(nodeData, layer);
     };
 
+    _this.handleKeyDown = function (event) {
+      switch (event.keyCode) {
+        // down
+        case 40:
+          _this.focusNextItem();
+          event.preventDefault();
+          break;
+        // up
+        case 38:
+          _this.focusPreviousItem();
+          event.preventDefault();
+          break;
+        // enter
+        case 13:
+          _this.selectActiveItem(event);
+          event.preventDefault();
+          break;
+        default:
+      }
+
+      event.preventDefault();
+    };
+
+    _this.nodes = {};
     _this.tempNode = null;
     _this.isControlled = 'value' in props;
     var nextValue = props.value || props.defaultValue || [];
+
+    _this.flattenNodes(_this.props.data);
+    _this.unserializeLists({
+      check: nextValue
+    });
+
     _this.state = {
+      formattedNodes: [],
       data: [],
-      selectedValues: nextValue,
-      defaultExpandAll: props.defaultExpandAll
+      selectedValues: nextValue
     };
@@ -249,15 +257,6 @@ return _this;
   _createClass(CheckTree, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.setState({
-        data: this.getInitialTreeData()
-      });
-    }
-  }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
       if (!(0, _isEqual2.default)(this.props.data, nextProps.data)) {
-        this.setState({
-          data: this.getInitialTreeData(nextProps.data)
-        });
+        this.flattenNodes(nextProps.data);
       }
@@ -267,27 +266,30 @@
         this.setState({
-          selectedValues: nextProps.value,
-          data: this.getInitialTreeData(nextProps.data, nextProps.value)
+          selectedValues: nextProps.value
         });
       }
+      this.unserializeLists({
+        check: nextProps.value
+      });
     }
-    /**
-      * 初始化 TreeData
-      */
-
   }, {
-    key: 'getInitialTreeData',
-    value: function getInitialTreeData(data, value) {
-      var relation = this.props.relation;
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {}
+  }, {
+    key: 'getNodeCheckState',
+    value: function getNodeCheckState(node, cascade) {
+      var childrenKey = this.props.childrenKey;
 
-      this.tempNode = (0, _cloneDeep2.default)(data || this.props.data);
+      if (!node[childrenKey] || !node[childrenKey].length || !cascade) {
+        return node.check ? _constants.CHECK_STATE.CHECK : _constants.CHECK_STATE.UNCHECK;
+      }
 
-      if (relation) {
-        this.createParentNode(value);
-        var leafNodes = this.initChildrenNodeCheckState();
-        this.initParentNodeCheckState(leafNodes);
-      } else {
-        this.initCheckedState(value);
+      if (this.isEveryChildChecked(node)) {
+        return _constants.CHECK_STATE.CHECK;
       }
 
-      return this.tempNode;
+      if (this.isSomeChildChecked(node)) {
+        return _constants.CHECK_STATE.HALFCHECK;
+      }
+
+      return _constants.CHECK_STATE.UNCHECK;
     }
@@ -323,3 +325,48 @@ }, {
     }
+  }, {
+    key: 'getActiveElementOption',
+    value: function getActiveElementOption(options, refKey) {
+      for (var i = 0; i < options.length; i += 1) {
+        if (options[i].refKey === refKey) {
+          return options[i];
+        } else if (options[i].children && options[i].children.length) {
+          var active = this.getActiveElementOption(options[i].children, refKey);
+          if (active) {
+            return active;
+          }
+        }
+      }
+      return false;
+    }
+  }, {
+    key: 'getItemsAndActiveIndex',
+    value: function getItemsAndActiveIndex() {
+      var items = this.getFocusableMenuItems();
 
+      var activeIndex = 0;
+      items.forEach(function (item, index) {
+        if (item.refKey === document.activeElement.getAttribute('data-key')) {
+          activeIndex = index;
+        }
+      });
+      return { items: items, activeIndex: activeIndex };
+    }
+  }, {
+    key: 'getActiveItem',
+    value: function getActiveItem() {
+      var data = this.props.data;
+
+      var activeItem = document.activeElement;
+      var _activeItem$dataset = activeItem.dataset,
+          key = _activeItem$dataset.key,
+          layer = _activeItem$dataset.layer;
+
+      var nodeData = this.getActiveElementOption(data, key);
+      nodeData.check = !this.nodes[nodeData.refKey].check;
+      return {
+        nodeData: nodeData,
+        layer: layer
+      };
+    }
+
     /**
@@ -332,75 +379,210 @@ * 当前找到当前选中的节点
 
+  }, {
+    key: 'getDisabledState',
+    value: function getDisabledState(node) {
+      var _this2 = this;
 
-    /**
-     * 初始化选中的状态
-     */
+      var _props2 = this.props,
+          disabledItems = _props2.disabledItems,
+          valueKey = _props2.valueKey;
 
+      return disabledItems.some(function (value) {
+        return (0, _isEqual2.default)(_this2.nodes[node.refKey][valueKey], value);
+      });
+    }
   }, {
-    key: 'initChildrenNodeCheckState',
+    key: 'getFormattedNodes',
+    value: function getFormattedNodes(nodes) {
+      var _this3 = this;
 
+      return nodes.map(function (node) {
+        var formatted = _extends({}, node);
+        formatted.check = _this3.nodes[node.refKey].check;
+        formatted.expand = _this3.nodes[node.refKey].expand;
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          formatted.children = _this3.getFormattedNodes(formatted.children);
+        }
 
+        return formatted;
+      });
+    }
+  }, {
+    key: 'flattenNodes',
+
+
     /**
-     * 初始化子节点的 CheckState
+     * 拍平数组，将tree 转换为一维数组
+     * @param {*} nodes tree data
+     * @param {*} ref 当前层级
      */
-    value: function initChildrenNodeCheckState() {
-      var _props2 = this.props,
-          valueKey = _props2.valueKey,
-          childrenKey = _props2.childrenKey;
+    value: function flattenNodes(nodes) {
+      var _this4 = this;
 
-      var leafNodes = [];
-      var loop = function loop(nodes) {
-        nodes.forEach(function (node) {
-          if (node[childrenKey]) {
-            if ((0, _isEqual2.default)(node, node[valueKey]) || node.checkState === 'checked') {
-              node[childrenKey].map(function (v) {
-                v.checkState = 'checked';
-              });
+      var ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var _props3 = this.props,
+          labelKey = _props3.labelKey,
+          valueKey = _props3.valueKey,
+          childrenKey = _props3.childrenKey;
+
+
+      if (!Array.isArray(nodes) || nodes.length === 0) {
+        return;
+      }
+      nodes.forEach(function (node, index) {
+        var refKey = ref + '-' + index;
+        node.refKey = refKey;
+        _this4.nodes[refKey] = {
+          label: node[labelKey],
+          value: node[valueKey],
+          expand: _this4.getExpandState(node)
+        };
+        _this4.flattenNodes(node[childrenKey], refKey);
+      });
+    }
+  }, {
+    key: 'unserializeLists',
+    value: function unserializeLists(lists) {
+      var _this5 = this;
+
+      var valueKey = this.props.valueKey;
+      // Reset values to false
+
+      Object.keys(this.nodes).forEach(function (refKey) {
+        Object.keys(lists).forEach(function (listKey) {
+          _this5.nodes[refKey][listKey] = false;
+          lists[listKey].forEach(function (value) {
+            if ((0, _isEqual2.default)(_this5.nodes[refKey][valueKey], value)) {
+              _this5.nodes[refKey][listKey] = true;
             }
-            loop(node[childrenKey]);
-          } else {
-            leafNodes.push(node);
-          }
+          });
         });
-      };
-      loop(this.tempNode);
-      return leafNodes;
+      });
     }
+  }, {
+    key: 'serializeList',
+    value: function serializeList(key) {
+      var _this6 = this;
 
-    /**
-     * 初始化父节点的 CheckState
-     * @param {array} leafNodes  所有的叶子节点
-     */
+      var valueKey = this.props.valueKey;
 
+      var list = [];
+
+      Object.keys(this.nodes).forEach(function (refKey) {
+        if (_this6.nodes[refKey][key]) {
+          list.push(_this6.nodes[refKey][valueKey]);
+        }
+      });
+      return list;
+    }
   }, {
-    key: 'initParentNodeCheckState',
-    value: function initParentNodeCheckState(leafNodes) {
-      var _this2 = this;
+    key: 'isEveryChildChecked',
+    value: function isEveryChildChecked(node) {
+      var _this7 = this;
 
+      return node.children.every(function (child) {
+        if (child.children) {
+          return _this7.isEveryChildChecked(child);
+        }
+
+        return child.check;
+      });
+    }
+  }, {
+    key: 'isSomeChildChecked',
+    value: function isSomeChildChecked(node) {
+      var _this8 = this;
+
+      return node.children.some(function (child) {
+        if (child.children) {
+          return _this8.isSomeChildChecked(child);
+        }
+
+        return child.check;
+      });
+    }
+  }, {
+    key: 'toggleChecked',
+    value: function toggleChecked(node, isChecked, cascade) {
+      var _this9 = this;
+
       var childrenKey = this.props.childrenKey;
 
-      var upLoop = function upLoop(leafNode) {
-        var parentNode = leafNode.parentNode;
-        if (parentNode) {
-          var checkedNodes = parentNode[childrenKey].filter(function (node) {
-            return node.checkState === 'checked' || node.checkState === 'halfChecked';
-          });
-          parentNode.checkState = _this2.getCheckState(checkedNodes, parentNode);
-          upLoop(parentNode);
+      if (!node[childrenKey] || !node[childrenKey].length || !cascade) {
+        this.toggleNode('check', node, isChecked);
+      } else {
+        this.toggleNode('check', node, isChecked);
+        node.children.forEach(function (child) {
+          _this9.toggleChecked(child, isChecked, cascade);
+        });
+      }
+    }
+  }, {
+    key: 'toggleNode',
+    value: function toggleNode(key, node, toggleValue) {
+      this.nodes[node.refKey][key] = toggleValue;
+    }
+  }, {
+    key: 'toggleExpand',
+    value: function toggleExpand(node, isExpand) {
+      this.nodes[node.refKey].expand = isExpand;
+    }
+  }, {
+    key: 'setCheckState',
+    value: function setCheckState(nodes) {
+      var _this10 = this;
+
+      var cascade = this.props.cascade;
+
+      nodes.forEach(function (node) {
+        var checkState = _this10.getNodeCheckState(node, cascade);
+        var isChecked = false;
+        if (checkState === _constants.CHECK_STATE.UNCHECK || checkState === _constants.CHECK_STATE.HALFCHECK) {
+          isChecked = false;
         }
-      };
-      for (var i = 0; i < leafNodes.length; i += 1) {
-        upLoop(leafNodes[i]);
+        if (checkState === _constants.CHECK_STATE.CHECK) {
+          isChecked = true;
+        }
+        _this10.toggleNode('check', node, isChecked);
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          _this10.setCheckState(node.children);
+        }
+      });
+    }
+  }, {
+    key: 'focusNextItem',
+    value: function focusNextItem() {
+      var _getItemsAndActiveInd = this.getItemsAndActiveIndex(),
+          items = _getItemsAndActiveInd.items,
+          activeIndex = _getItemsAndActiveInd.activeIndex;
+
+      if (items.length === 0) {
+        return;
       }
+      var nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+      this.getElementByDataKey(items[nextIndex].refKey).focus();
     }
+  }, {
+    key: 'focusPreviousItem',
+    value: function focusPreviousItem() {
+      var _getItemsAndActiveInd2 = this.getItemsAndActiveIndex(),
+          items = _getItemsAndActiveInd2.items,
+          activeIndex = _getItemsAndActiveInd2.activeIndex;
 
+      if (items.length === 0) {
+        return;
+      }
+
+      var prevIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
+      this.getElementByDataKey(items[prevIndex].refKey).focus();
+    }
+
     /**
-    * 给所有的节点，创建一个 parentNode 属性
-    */
+     * 选择某个节点后的回调函数
+     * @param {object} activeNodeData   节点的数据
+     * @param {number} layer            节点的层级
+     */
 
 
     /**
-     * 递归查找子节点，
-     * 并根据 checkState 参数改变所有字节点的 checkState 状态
-     * @param {*} nodes
-     * @param {*} checkState
+     * 展开、收起节点
      */
@@ -410,21 +592,120 @@
     /**
-     * 选择某个节点后的回调函数
-     * @param {object} activeNodeData   节点的数据
-     * @param {number} layer            节点的层级
+     * 处理键盘方向键移动
      */
 
   }, {
+    key: 'renderNode',
+    value: function renderNode(node, index, layer) {
+      var _this11 = this;
+
+      var _props4 = this.props,
+          defaultExpandAll = _props4.defaultExpandAll,
+          valueKey = _props4.valueKey,
+          labelKey = _props4.labelKey,
+          childrenKey = _props4.childrenKey,
+          renderTreeNode = _props4.renderTreeNode,
+          renderTreeIcon = _props4.renderTreeIcon,
+          cascade = _props4.cascade;
+
+
+      var key = '' + node.refKey;
+      var checkState = this.getNodeCheckState(node, cascade);
+      var isChecked = false;
+      if (checkState === _constants.CHECK_STATE.UNCHECK || checkState === _constants.CHECK_STATE.HALFCHECK) {
+        isChecked = false;
+      }
+      if (checkState === _constants.CHECK_STATE.CHECK) {
+        isChecked = true;
+      }
+      // this.toggleNode('check', node, isChecked);
+      var children = node[childrenKey];
+      var disabled = this.getDisabledState(node);
+      var hasNotEmptyChildren = children && Array.isArray(children) && children.length > 0;
+
+      var props = {
+        value: node[valueKey],
+        label: node[labelKey],
+        nodeData: node,
+        onTreeToggle: this.handleToggle,
+        onRenderTreeNode: renderTreeNode,
+        onRenderTreeIcon: renderTreeIcon,
+        onSelect: this.handleSelect,
+        onKeyDown: this.handleKeyDown,
+        // active: this.state.activeNode === value,
+        hasChildren: !!children,
+        disabled: disabled,
+        children: children,
+        index: index,
+        layer: layer,
+        checkState: checkState,
+        defaultExpandAll: defaultExpandAll
+      };
+
+      if (props.hasChildren) {
+        layer += 1;
+
+        // 是否展开树节点且子节点不为空
+        var childrenClasses = (0, _classnames2.default)('node-children', {
+          open: defaultExpandAll && hasNotEmptyChildren
+        });
+
+        var nodes = children || [];
+        return _react2.default.createElement(
+          _InternalNode2.default,
+          _extends({
+            className: childrenClasses,
+            key: key,
+            ref: key,
+            multiple: true
+          }, props),
+          nodes.map(function (child, i) {
+            return _this11.renderNode(child, i, layer, node);
+          })
+        );
+      }
+
+      return _react2.default.createElement(_TreeCheckNode2.default, _extends({
+        key: key,
+        ref: key
+      }, props));
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _props3 = this.props,
-          onChange = _props3.onChange,
-          props = _objectWithoutProperties(_props3, ['onChange']);
+      var _this12 = this;
 
-      return _react2.default.createElement(_Tree2.default, _extends({}, props, {
-        multiple: true,
-        data: this.state.data,
-        defaultExpandAll: this.state.defaultExpandAll,
-        onChange: this.handleSelect,
-        onExpand: this.handleToggle
-      }));
+      var onScroll = this.props.onScroll;
+      // 树节点的层级
+
+      var layer = 0;
+      var _props5 = this.props,
+          _props5$data = _props5.data,
+          data = _props5$data === undefined ? [] : _props5$data,
+          className = _props5.className,
+          height = _props5.height;
+
+      var classes = (0, _classnames2.default)('tree-view', className, {
+        checktree: true
+      });
+
+      var formattedNodes = this.state.formattedNodes.length ? this.state.formattedNodes : this.getFormattedNodes(data);
+      var nodes = formattedNodes.map(function (node, index) {
+        return _this12.renderNode(node, index, layer);
+      });
+      var styles = {
+        height: height
+      };
+
+      return _react2.default.createElement(
+        'div',
+        {
+          ref: function ref(_ref) {
+            _this12.treeView = _ref;
+          },
+          className: classes,
+          style: styles,
+          onScroll: onScroll
+        },
+        nodes
+      );
     }
@@ -431,0 +712,0 @@ }]);

lib/TreeCheckNode.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,8 +35,6 @@
 var propTypes = {
-  id: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
-  title: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
+  label: _propTypes2.default.any, // eslint-disable-line react/forbid-prop-types
   nodeData: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
   active: _propTypes2.default.bool,
-
-  checkState: _propTypes2.default.oneOf(['checked', 'halfChecked', 'unchecked']),
+  checkState: _propTypes2.default.oneOf([_constants.CHECK_STATE.CHECK, _constants.CHECK_STATE.HALFCHECK, _constants.CHECK_STATE.UNCHECK]),
   hasChildren: _propTypes2.default.bool,
@@ -84,3 +84,4 @@ labelClickableExpand: _propTypes2.default.bool,
           disabled = _this$props2.disabled,
-          nodeData = _this$props2.nodeData;
+          nodeData = _this$props2.nodeData,
+          checkState = _this$props2.checkState;
 
@@ -99,2 +100,12 @@
       labelClickableExpand && hasChildren && onTreeToggle(nodeData, layer, event);
+
+      var isChecked = false;
+      if (checkState === _constants.CHECK_STATE.UNCHECK || checkState === _constants.CHECK_STATE.HALFCHECK) {
+        isChecked = true;
+      }
+
+      if (checkState === _constants.CHECK_STATE.CHECK) {
+        isChecked = false;
+      }
+      nodeData.check = isChecked;
       onSelect(nodeData, layer, event);
@@ -123,9 +134,9 @@ }, _this.renderIcon = function () {
           onRenderTreeNode = _this$props4.onRenderTreeNode,
-          title = _this$props4.title;
+          label = _this$props4.label;
 
-      var label = typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : title;
+      var custom = typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label;
       return _react2.default.createElement(
         'label',
         { className: 'checknode-label', title: label },
-        label
+        custom
       );
@@ -143,3 +154,2 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
       var _props = this.props,
-          id = _props.id,
           active = _props.active,
@@ -155,7 +165,6 @@ layer = _props.layer,
         'text-muted': disabled,
-        'half-checked': checkState === 'halfChecked',
-        checked: checkState === 'checked',
+        'half-checked': checkState === _constants.CHECK_STATE.HALFCHECK,
+        checked: checkState === _constants.CHECK_STATE.CHECK,
         disabled: disabled,
         active: active
-
       });
@@ -175,3 +184,3 @@
           ref: 'node',
-          'data-value': id,
+          'data-layer': layer,
           'data-key': nodeData.refKey,
@@ -178,0 +187,0 @@ style: styles,

package.json

 {
   "name": "rsuite-check-tree",
-  "version": "0.2.1",
+  "version": "0.2.2-beta.1",
   "description": "A react check tree component",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

39981

decreased by-11.13%

Lines of code

813

decreased by-9.16%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes