react-checkbox-tree - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

CHANGELOG.md

 # CHANGELOG
 
+## [v0.6.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.6.1...v0.6.2) (2017-05-25)
+
+### New Features
+
+* [#34]: Add `noCascade` option to decouple parent check state from children
+
 ## [v0.6.1](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.6.0...v0.6.1) (2017-05-09)
@@ -4,0 +10,0 @@

package.json

 {
   "name": "react-checkbox-tree",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A simple and elegant checkbox tree for React.",
@@ -23,3 +23,3 @@ "author": "Jake Zatecky",
     "gh-deploy": "git subtree push --prefix examples/dist origin gh-pages",
-    "prepublish": "in-publish && gulp build",
+    "prepublishOnly": "gulp build",
     "test": "gulp test"
@@ -41,9 +41,9 @@ },
     "eslint": "^3.15.0",
-    "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-airbnb": "^15.0.0",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-react": "^7.0.1",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-eslint": "^3.0.1",
@@ -54,4 +54,3 @@ "gulp-header": "^1.8.8",
     "gulp-scss-lint": "^0.4.0",
-    "in-publish": "^2.0.0",
-    "jsdom": "^9.11.0",
+    "jsdom": "^11.0.0",
     "mocha": "^3.0.2",
@@ -58,0 +57,0 @@ "react": "^15.4.2",

README.md

@@ -99,2 +99,3 @@ # react-checkbox-tree
 | `nameAsArray`      | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |
+| `noCascade`        | bool     | If true, the toggling a parent will **not** cascade its check state to its children.             | `false`     |
 | `optimisticToggle` | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true`      |
@@ -101,0 +102,0 @@ | `showNodeIcon`     | bool     | If true, each node will show a parent or leaf icon.                                              | `true`      |

src/js/CheckboxTree.js

@@ -17,2 +17,3 @@ import { isEqual } from 'lodash';
 		nameAsArray: PropTypes.bool,
+		noCascade: PropTypes.bool,
 		optimisticToggle: PropTypes.bool,
@@ -29,3 +30,3 @@ showNodeIcon: PropTypes.bool,
 		nameAsArray: false,
-		nodes: [],
+		noCascade: false,
 		optimisticToggle: true,
@@ -62,5 +63,5 @@ showNodeIcon: true,
 	onCheck(node) {
-		const { onCheck } = this.props;
+		const { noCascade, onCheck } = this.props;
 
-		this.toggleChecked(node, node.checked);
+		this.toggleChecked(node, node.checked, noCascade);
 		onCheck(this.serializeList('checked'));
@@ -93,4 +94,4 @@ }
 
-	getCheckState(node) {
-		if (node.children === null) {
+	getCheckState(node, noCascade) {
+		if (node.children === null || noCascade) {
 			return node.checked ? 1 : 0;
@@ -110,4 +111,7 @@ }
 
-	toggleChecked(node, isChecked) {
-		if (node.children !== null) {
+	toggleChecked(node, isChecked, noCascade) {
+		if (node.children === null || noCascade) {
+			// Set the check status of a leaf node or an uncoupled parent
+			this.toggleNode('checked', node, isChecked);
+		} else {
 			// Percolate check status down to all children
@@ -117,5 +121,2 @@ node.children.forEach((child) => {
 			});
-		} else {
-			// Set leaf to check/unchecked state
-			this.toggleNode('checked', node, isChecked);
 		}
@@ -188,5 +189,6 @@ }
 	renderTreeNodes(nodes) {
+		const { noCascade, optimisticToggle, showNodeIcon } = this.props;
 		const treeNodes = nodes.map((node) => {
 			const key = `${node.value}`;
-			const checked = this.getCheckState(node);
+			const checked = this.getCheckState(node, noCascade);
 			const children = this.renderChildNodes(node);
@@ -202,5 +204,5 @@
 					label={node.label}
-					optimisticToggle={this.props.optimisticToggle}
+					optimisticToggle={optimisticToggle}
 					rawChildren={node.children}
-					showNodeIcon={this.props.showNodeIcon}
+					showNodeIcon={showNodeIcon}
 					treeId={this.id}
@@ -207,0 +209,0 @@ value={node.value}

src/js/TreeNode.js

@@ -47,3 +47,3 @@ import classNames from 'classnames';
 
-		// Toggle partial state based on model
+		// Toggle partial state based on cascade model
 		if (this.props.checked === 2) {
@@ -50,0 +50,0 @@ isChecked = this.props.optimisticToggle;

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

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

Improved metrics

Total package byte prevSize

702198

increased by0.32%

Dev dependency count

30

decreased by-3.23%

Lines of code

18584

increased by0.28%

Number of lines in readme file

116

increased by0.87%

Number of medium supply chain risk alerts

4

decreased by-20%

No dependency changes