checkbox-tree-react - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

es/CheckboxTree.js

@@ -27,15 +27,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
     _this.checked = {};
-    // Handle all the children nodes here
-    _this.childCheckboxItems = [];
 
     // Bind methods
     _this.onUpdateTree = _this.onUpdateTree.bind(_this);
-    _this.pushChildToRef = _this.pushChildToRef.bind(_this);
     return _this;
   }
 
-  CheckboxTree.prototype.pushChildToRef = function pushChildToRef(ref) {
-    this.childCheckboxItems.push(ref);
-  };
-
   CheckboxTree.prototype.onUpdateTree = function onUpdateTree() {
@@ -56,10 +49,6 @@ var _this2 = this;
     // Get all data from child and insert into the checked status
-    var values = _.map(this.childCheckboxItems, function (c) {
-      return c.getValues();
+    var values = this.refs.root.getValues();
+    _.map(accessors, function (a) {
+      if (values[a.type]) _this2.checked[a.type] = values[a.type];
     });
-    _.map(values, function (v) {
-      return _.map(accessors, function (a) {
-        if (v[a.type]) _this2.checked[a.type] = v[a.type];
-      });
-    });
 
@@ -74,5 +63,3 @@ // Debug all values selected in the tree
 
-  CheckboxTree.prototype.renderItems = function renderItems() {
-    var _this3 = this;
-
+  CheckboxTree.prototype.render = function render() {
     var _props2 = this.props,
@@ -82,22 +69,25 @@ data = _props2.data,
 
-    console.log('Creating a checkbox tree with data: ', data, ' and accessors: ', accessors);
+    var foldedData = {
+      label: 'root',
+      value: 'root',
+      children: data
+    };
+    var foldedAccessors = [{
+      label: 'label',
+      value: 'value',
+      leaves: 'children',
+      type: 'root'
+    }].concat(accessors);
+    var foldedParameters = constructItemProperties(foldedData, foldedAccessors, 0, 'unchecked');
 
-    return _.map(data, function (d, key) {
-      return React.createElement(CheckboxTreeItem, _extends({
-        key: key,
-        ref: _this3.pushChildToRef,
-        onUpdateTree: _this3.onUpdateTree,
-        checkboxPlusIcon: _this3.props.checkboxPlusIcon,
-        checkboxMinusIcon: _this3.props.checkboxMinusIcon
-      }, constructItemProperties(d, accessors, 0, 'unchecked')));
-    });
-  };
-
-  CheckboxTree.prototype.render = function render() {
     return React.createElement(
       'div',
       { className: 'checkbox-tree' },
-      ' ',
-      this.renderItems(),
-      ' '
+      React.createElement(CheckboxTreeItem, _extends({
+        id: 0,
+        ref: 'root',
+        onUpdateTree: this.onUpdateTree,
+        checkboxPlusIcon: this.props.checkboxPlusIcon,
+        checkboxMinusIcon: this.props.checkboxMinusIcon
+      }, foldedParameters))
     );
@@ -104,0 +94,0 @@ };

es/CheckboxTreeItem.js

@@ -17,3 +17,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var style = function style(depth) {
-  return { marginLeft: depth * 15 + 'px' };
+  return { marginLeft: (depth - 1) * 15 + 'px' };
 };
@@ -35,3 +35,3 @@
       checkedState: props.checked ? props.checked : 'unchecked',
-      isExpanded: false
+      isExpanded: _this.props.type === 'root'
 
@@ -63,3 +63,3 @@ // Set if this is a leaf
 
-    if (checkedState === 'checked') {
+    if (checkedState === 'checked' && type !== 'root') {
       values[type] = [value];
@@ -118,12 +118,11 @@ } else {
 
-    // Change state in the parent only if current state is different than before
-    if (newState !== this.state.checkedState) {
-      this.setState(_extends({}, this.state, { checkedState: newState }),
-      // Go to parent and set parent child checked
-      function () {
-        return _this2.setItemCheckedStateInParent(_this2.props.id, newState, callback);
-      });
-    } else if (callback) {
-      callback();
-    }
+    // if (newState === 'unchecked' || newState !== this.state.checkedState) {
+    this.setState(_extends({}, this.state, { checkedState: newState }),
+    // Go to parent and set parent child checked
+    function () {
+      return _this2.setItemCheckedStateInParent(_this2.props.id, newState, callback);
+    });
+    // } else if (callback) {
+    //   callback()
+    // }
   };
@@ -134,2 +133,3 @@
 
+    var isExpanded = this.state.isExpanded;
     var children = this.props.children;
@@ -153,3 +153,3 @@
     // Object can only be in epanded state if it has children
-    if (children) {
+    if (isExpanded && children && this.childCheckboxItems) {
       // isExpanded
@@ -218,3 +218,6 @@ _.map(this.childCheckboxItems, function (c) {
 
-    if (!isExpanded) return '';
+    if (!isExpanded) {
+      this.childCheckboxItems = [];
+      return '';
+    }
 
@@ -245,4 +248,8 @@ // Render all the children
 
+
+    if (this.props.type === 'root') {
+      return this.renderChildren();
+    }
+
     // Render current item and all children
-
     return React.createElement(
@@ -249,0 +256,0 @@ 'div',

lib/CheckboxTree.js

@@ -43,15 +43,8 @@ 'use strict';
     _this.checked = {};
-    // Handle all the children nodes here
-    _this.childCheckboxItems = [];
 
     // Bind methods
     _this.onUpdateTree = _this.onUpdateTree.bind(_this);
-    _this.pushChildToRef = _this.pushChildToRef.bind(_this);
     return _this;
   }
 
-  CheckboxTree.prototype.pushChildToRef = function pushChildToRef(ref) {
-    this.childCheckboxItems.push(ref);
-  };
-
   CheckboxTree.prototype.onUpdateTree = function onUpdateTree() {
@@ -72,10 +65,6 @@ var _this2 = this;
     // Get all data from child and insert into the checked status
-    var values = _lodash2.default.map(this.childCheckboxItems, function (c) {
-      return c.getValues();
+    var values = this.refs.root.getValues();
+    _lodash2.default.map(accessors, function (a) {
+      if (values[a.type]) _this2.checked[a.type] = values[a.type];
     });
-    _lodash2.default.map(values, function (v) {
-      return _lodash2.default.map(accessors, function (a) {
-        if (v[a.type]) _this2.checked[a.type] = v[a.type];
-      });
-    });
 
@@ -90,5 +79,3 @@ // Debug all values selected in the tree
 
-  CheckboxTree.prototype.renderItems = function renderItems() {
-    var _this3 = this;
-
+  CheckboxTree.prototype.render = function render() {
     var _props2 = this.props,
@@ -98,22 +85,25 @@ data = _props2.data,
 
-    console.log('Creating a checkbox tree with data: ', data, ' and accessors: ', accessors);
+    var foldedData = {
+      label: 'root',
+      value: 'root',
+      children: data
+    };
+    var foldedAccessors = [{
+      label: 'label',
+      value: 'value',
+      leaves: 'children',
+      type: 'root'
+    }].concat(accessors);
+    var foldedParameters = (0, _helperFunctions.constructItemProperties)(foldedData, foldedAccessors, 0, 'unchecked');
 
-    return _lodash2.default.map(data, function (d, key) {
-      return _react2.default.createElement(_CheckboxTreeItem.CheckboxTreeItem, _extends({
-        key: key,
-        ref: _this3.pushChildToRef,
-        onUpdateTree: _this3.onUpdateTree,
-        checkboxPlusIcon: _this3.props.checkboxPlusIcon,
-        checkboxMinusIcon: _this3.props.checkboxMinusIcon
-      }, (0, _helperFunctions.constructItemProperties)(d, accessors, 0, 'unchecked')));
-    });
-  };
-
-  CheckboxTree.prototype.render = function render() {
     return _react2.default.createElement(
       'div',
       { className: 'checkbox-tree' },
-      ' ',
-      this.renderItems(),
-      ' '
+      _react2.default.createElement(_CheckboxTreeItem.CheckboxTreeItem, _extends({
+        id: 0,
+        ref: 'root',
+        onUpdateTree: this.onUpdateTree,
+        checkboxPlusIcon: this.props.checkboxPlusIcon,
+        checkboxMinusIcon: this.props.checkboxMinusIcon
+      }, foldedParameters))
     );
@@ -120,0 +110,0 @@ };

lib/CheckboxTreeItem.js

@@ -33,3 +33,3 @@ 'use strict';
 var style = function style(depth) {
-  return { marginLeft: depth * 15 + 'px' };
+  return { marginLeft: (depth - 1) * 15 + 'px' };
 };
@@ -51,3 +51,3 @@
       checkedState: props.checked ? props.checked : 'unchecked',
-      isExpanded: false
+      isExpanded: _this.props.type === 'root'
 
@@ -79,3 +79,3 @@ // Set if this is a leaf
 
-    if (checkedState === 'checked') {
+    if (checkedState === 'checked' && type !== 'root') {
       values[type] = [value];
@@ -134,12 +134,11 @@ } else {
 
-    // Change state in the parent only if current state is different than before
-    if (newState !== this.state.checkedState) {
-      this.setState(_extends({}, this.state, { checkedState: newState }),
-      // Go to parent and set parent child checked
-      function () {
-        return _this2.setItemCheckedStateInParent(_this2.props.id, newState, callback);
-      });
-    } else if (callback) {
-      callback();
-    }
+    // if (newState === 'unchecked' || newState !== this.state.checkedState) {
+    this.setState(_extends({}, this.state, { checkedState: newState }),
+    // Go to parent and set parent child checked
+    function () {
+      return _this2.setItemCheckedStateInParent(_this2.props.id, newState, callback);
+    });
+    // } else if (callback) {
+    //   callback()
+    // }
   };
@@ -150,2 +149,3 @@
 
+    var isExpanded = this.state.isExpanded;
     var children = this.props.children;
@@ -169,3 +169,3 @@
     // Object can only be in epanded state if it has children
-    if (children) {
+    if (isExpanded && children && this.childCheckboxItems) {
       // isExpanded
@@ -234,3 +234,6 @@ _lodash2.default.map(this.childCheckboxItems, function (c) {
 
-    if (!isExpanded) return '';
+    if (!isExpanded) {
+      this.childCheckboxItems = [];
+      return '';
+    }
 
@@ -261,4 +264,8 @@ // Render all the children
 
+
+    if (this.props.type === 'root') {
+      return this.renderChildren();
+    }
+
     // Render current item and all children
-
     return _react2.default.createElement(
@@ -265,0 +272,0 @@ 'div',

package.json

 {
   "name": "checkbox-tree-react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "Markiian Benovskyi",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/MarkusBansky/react-checkbox-tree",

No alert changes

Worsened metrics

Total package byte prevSize

35972

decreased by-1.03%

Lines of code

681

decreased by-0.29%

No dependency changes