react-checkbox-tree - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

 # CHANGELOG
 
+## [v1.1.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.0.2...v1.1.0) (2018-03-31)
+
+### New Features
+
+* [#53]: Add `nativeCheckboxes` property to allow use of native browser checkboxes instead of pseudo-checkbox icons
+* [#72]: Add the node that triggers `onCheck` or `onExpand` as a second parameter to the callback functions
+* [#80]: Add `onlyLeafCheckboxes` property and support `showCheckbox` on the node-level
+
 ## [v1.0.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.0.1...v1.0.2) (2017-10-24)
 
+### Bug Fixes
+
 * [#57]: Fix an issue where node values with spaces in them would cause validation errors
@@ -6,0 +16,0 @@

package.json

 {
   "name": "react-checkbox-tree",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A simple and elegant checkbox tree for React.",
@@ -42,15 +42,15 @@ "author": "Jake Zatecky",
     "eslint-config-takiyon-react": "^0.3.0",
-    "eslint-import-resolver-webpack": "^0.8.1",
+    "eslint-import-resolver-webpack": "^0.9.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react": "7.4.0",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^4.0.0",
+    "gulp-autoprefixer": "^5.0.0",
     "gulp-eslint": "^4.0.0",
     "gulp-header": "^1.8.8",
-    "gulp-mocha": "^4.0.1",
+    "gulp-mocha": "^5.0.0",
     "gulp-sass": "^3.0.0",
-    "gulp-scss-lint": "^0.5.0",
+    "gulp-scss-lint": "^0.6.1",
     "jsdom": "^11.0.0",
-    "mocha": "^4.0.1",
+    "mocha": "^5.0.5",
     "react": "^16.0.0",
@@ -65,5 +65,5 @@ "react-dom": "^16.0.0",
     "lodash": "^4.17.4",
-    "prop-types": "^15.5.8",
-    "shortid": "^2.2.6"
+    "nanoid": "^1.0.1",
+    "prop-types": "^15.5.8"
   }
 }

README.md

@@ -92,16 +92,18 @@ # react-checkbox-tree
 
-| Property           | Type     | Description                                                                                      | Default     |
-| ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
-| `nodes`            | array    | **Required**. Specifies the tree nodes and their children.                                       |             |
-| `checked`          | array    | An array of checked node values.                                                                 | `[]`        |
-| `disabled`         | bool     | If true, the component will be disabled and nodes cannot be checked.                             | `false`     |
-| `expandDisabled`   | bool     | If true, the ability to expand nodes will be disabled.                                           | `false`     |
-| `expanded`         | array    | An array of expanded node values.                                                                | `[]`        |
-| `name`             | string   | Optional name for the hidden `<input>` element.                                                  | `undefined` |
-| `nameAsArray`      | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |
-| `noCascade`        | bool     | If true, toggling a parent node 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`      |
-| `showNodeIcon`     | bool     | If true, each node will show a parent or leaf icon.                                              | `true`      |
-| `onCheck`          | function | onCheck handler: `function(checked) {}`                                                          | `() => {}`  |
-| `onExpand`         | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}`  |
+| Property             | Type     | Description                                                                                      | Default     |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
+| `nodes`              | array    | **Required**. Specifies the tree nodes and their children.                                       |             |
+| `checked`            | array    | An array of checked node values.                                                                 | `[]`        |
+| `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                             | `false`     |
+| `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                           | `false`     |
+| `expanded`           | array    | An array of expanded node values.                                                                | `[]`        |
+| `name`               | string   | Optional name for the hidden `<input>` element.                                                  | `undefined` |
+| `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |
+| `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons.                | `false`     |
+| `noCascade`          | bool     | If true, toggling a parent node will **not** cascade its check state to its children.            | `false`     |
+| `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes.                                           | `false`     |
+| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true`      |
+| `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                              | `true`      |
+| `onCheck`            | function | onCheck handler: `function(checked) {}`                                                          | `() => {}`  |
+| `onExpand`           | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}`  |
 
@@ -112,9 +114,10 @@ #### Node Properties
 
-| Property    | Type   | Description                          |
-| ----------- | ------ | ------------------------------------ |
-| `label`     | mixed  | **Required**. The node's label.      |
-| `value`     | mixed  | **Required**. The node's value.      |
-| `children`  | array  | An array of child nodes.             |
-| `className` | string | A className to add to the node.      |
-| `disabled`  | bool   | Whether the node should be disabled. |
-| `icon`      | mixed  | A custom icon for the node.          |
+| Property       | Type   | Description                              | Default |
+| -------------- | ------ | ---------------------------------------- | ------- |
+| `label`        | mixed  | **Required**. The node's label.          |         |
+| `value`        | mixed  | **Required**. The node's value.          |         |
+| `children`     | array  | An array of child nodes.                 | `null`  |
+| `className`    | string | A className to add to the node.          | `null`  |
+| `disabled`     | bool   | Whether the node should be disabled.     | `false` |
+| `icon`         | mixed  | A custom icon for the node.              | `null`  |
+| `showCheckbox` | bool   | Whether the node should show a checkbox. | `true`  |

src/js/CheckboxTree.js

@@ -5,3 +5,3 @@ import classNames from 'classnames';
 import React from 'react';
-import shortid from 'shortid';
+import nanoid from 'nanoid';
 
@@ -21,3 +21,5 @@ import TreeNode from './TreeNode';
         nameAsArray: PropTypes.bool,
+        nativeCheckboxes: PropTypes.bool,
         noCascade: PropTypes.bool,
+        onlyLeafCheckboxes: PropTypes.bool,
         optimisticToggle: PropTypes.bool,
@@ -36,3 +38,5 @@ showNodeIcon: PropTypes.bool,
         nameAsArray: false,
+        nativeCheckboxes: false,
         noCascade: false,
+        onlyLeafCheckboxes: false,
         optimisticToggle: true,
@@ -47,3 +51,3 @@ showNodeIcon: true,
 
-        this.id = `rct-${shortid.generate()}`;
+        this.id = `rct-${nanoid(7)}`;
         this.nodes = {};
@@ -73,3 +77,3 @@
         this.toggleChecked(node, node.checked, noCascade);
-        onCheck(this.serializeList('checked'));
+        onCheck(this.serializeList('checked'), node);
     }
@@ -81,3 +85,3 @@
         this.toggleNode('expanded', node, node.expanded);
-        onExpand(this.serializeList('expanded'));
+        onExpand(this.serializeList('expanded'), node);
     }
@@ -91,2 +95,3 @@
             formatted.expanded = this.nodes[node.value].expanded;
+            formatted.showCheckbox = node.showCheckbox !== undefined ? node.showCheckbox : true;
 
@@ -211,2 +216,3 @@ if (Array.isArray(node.children) && node.children.length > 0) {
             noCascade,
+            onlyLeafCheckboxes,
             optimisticToggle,
@@ -218,4 +224,7 @@ showNodeIcon,
             const checked = this.getCheckState(node, noCascade);
+            const isLeaf = node.children === null;
             const children = this.renderChildNodes(node);
             const nodeDisabled = this.getDisabledState(node, parent, disabled, noCascade);
+            // Show checkbox only if this is a leaf node or showCheckbox is true
+            const showCheckbox = onlyLeafCheckboxes ? isLeaf : node.showCheckbox;
 
@@ -234,2 +243,3 @@ return (
                     rawChildren={node.children}
+                    showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
@@ -293,2 +303,3 @@ treeId={this.id}
             'rct-disabled': this.props.disabled,
+            'rct-native-display': this.props.nativeCheckboxes,
         });
@@ -295,0 +306,0 @@

src/js/nodeShape.js

@@ -11,2 +11,3 @@ import PropTypes from 'prop-types';
     icon: PropTypes.node,
+    showCheckbox: PropTypes.bool,
 };
@@ -13,0 +14,0 @@

src/js/TreeNode.js

@@ -5,2 +5,3 @@ import classNames from 'classnames';
 
+import NativeCheckbox from './NativeCheckbox';
 import nodeShape from './nodeShape';
@@ -26,2 +27,3 @@
         rawChildren: PropTypes.arrayOf(nodeShape),
+        showCheckbox: PropTypes.bool,
     };
@@ -34,2 +36,3 @@
         rawChildren: null,
+        showCheckbox: true,
     };
@@ -136,21 +139,69 @@
 
-    renderChildren() {
-        if (!this.props.expanded) {
-            return null;
-        }
-
-        return this.props.children;
+    renderBareLabel(children) {
+        return (
+            <span className="rct-bare-label">
+                {children}
+            </span>
+        );
     }
 
-    render() {
+    renderCheckboxLabel(children) {
         const {
             checked,
-            className,
             disabled,
             label,
-            showNodeIcon,
             treeId,
             value,
         } = this.props;
+
         const inputId = `${treeId}-${value.split(' ').join('_')}`;
+
+        return (
+            <label htmlFor={inputId}>
+                <NativeCheckbox
+                    checked={checked === 1}
+                    disabled={disabled}
+                    id={inputId}
+                    indeterminate={checked === 2}
+                    onChange={this.onCheck}
+                />
+                <span className="rct-checkbox">
+                    {this.renderCheckboxIcon()}
+                </span>
+                {children}
+            </label>
+        );
+    }
+
+    renderLabel() {
+        const { label, showCheckbox, showNodeIcon } = this.props;
+
+        const labelChildren = [
+            showNodeIcon ? (
+                <span key={0} className="rct-node-icon">
+                    {this.renderNodeIcon()}
+                </span>
+            ) : null,
+            <span key={1} className="rct-title">
+                {label}
+            </span>,
+        ];
+
+        if (!showCheckbox) {
+            return this.renderBareLabel(labelChildren);
+        }
+
+        return this.renderCheckboxLabel(labelChildren);
+    }
+
+    renderChildren() {
+        if (!this.props.expanded) {
+            return null;
+        }
+
+        return this.props.children;
+    }
+
+    render() {
+        const { className, disabled } = this.props;
         const nodeClass = classNames({
@@ -167,22 +218,3 @@ 'rct-node': true,
                     {this.renderCollapseButton()}
-                    <label htmlFor={inputId}>
-                        <input
-                            checked={checked === 1}
-                            disabled={disabled}
-                            id={inputId}
-                            type="checkbox"
-                            onChange={this.onCheck}
-                        />
-                        <span className="rct-checkbox">
-                            {this.renderCheckboxIcon()}
-                        </span>
-                        {showNodeIcon ? (
-                            <span className="rct-node-icon">
-                                {this.renderNodeIcon()}
-                            </span>
-                        ) : null}
-                        <span className="rct-title">
-                            {label}
-                        </span>
-                    </label>
+                    {this.renderLabel()}
                 </span>
@@ -189,0 +221,0 @@ {this.renderChildren()}

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

504782

increased by5.59%

Number of lines in readme file

122

increased by2.52%

Worsened metrics

Lines of code

4946

decreased by-1.34%

Dependency changes

• + Addednanoid@^1.0.1

• + Addednanoid@1.3.4(transitive)

• - Removedshortid@^2.2.6

• - Removednanoid@2.1.11(transitive)

• - Removedshortid@2.2.16(transitive)