Add the ability to expand or collapse all nodes in the tree

jakezatecky · jakezatecky · commit 8c1aa1c59d2a · 2018-09-03T15:44:36.000-04:00
Resolves #79.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### New Features
 
+* [#79]: Add the ability to expand or collapse all nodes in the tree
 * [#102]: Add `icons` property to allow specification of icon components
 * [#103]: Add `title` node property and `showNodeTitle` tree property
 
diff --git a/README.md b/README.md
@@ -104,6 +104,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | `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`      |
+| `showExpandAll`      | bool     | If true, buttons for expanding and collapsing all parent nodes will appear in the tree.                                | `false`     |
 | `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                                                    | `true`      |
 | `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`.       | `false`     |
 | `onCheck`            | function | onCheck handler: `function(checked) {}`                                                                                | `() => {}`  |
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -73,6 +73,13 @@ <h2>Hide Checkboxes Example</h2>
       </p>
       <div id="hidden-checkboxes-example"></div>
 
+      <h2>Expand All/Collapse All Example</h2>
+      <p>
+        By passing in the <code>showExpandAll</code> property, two additional options will appear at the top of the tree
+        allow the user to easily expand or collapse all parent nodes.
+      </p>
+      <div id="expand-all-example"></div>
+
       <h2>Large Data Example</h2>
       <p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
       <div id="large-data-example"></div>
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -1,20 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import ClickableLabelsExample from './js/ClickableLabelsExample';
 import BasicExample from './js/BasicExample';
 import CustomIconsExample from './js/CustomIconsExample';
+import ClickableLabelsExample from './js/ClickableLabelsExample';
 import DisabledExample from './js/DisabledExample';
+import ExpandAllExample from './js/ExpandAllExample';
 import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
 import NoCascadeExample from './js/NoCascadeExample';
-import PessimisticToggleExample from './js/PessimisticToggleExample';
 import LargeDataExample from './js/LargeDataExample';
+import PessimisticToggleExample from './js/PessimisticToggleExample';
 
 ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
 ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
 ReactDOM.render(<DisabledExample />, document.getElementById('disabled-example'));
-ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
 ReactDOM.render(<NoCascadeExample />, document.getElementById('no-cascade-example'));
 ReactDOM.render(<PessimisticToggleExample />, document.getElementById('pessimistic-toggle-example'));
-ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
 ReactDOM.render(<ClickableLabelsExample />, document.getElementById('clickable-labels-example'));
+ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
+ReactDOM.render(<ExpandAllExample />, document.getElementById('expand-all-example'));
+ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
diff --git a/examples/src/js/ExpandAllExample.js b/examples/src/js/ExpandAllExample.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import CheckboxTree from 'react-checkbox-tree';
+
+const nodes = [
+    {
+        value: '/app',
+        label: 'app',
+        children: [
+            {
+                value: '/app/Http',
+                label: 'Http',
+                children: [
+                    {
+                        value: '/app/Http/Controllers',
+                        label: 'Controllers',
+                        children: [{
+                            value: '/app/Http/Controllers/WelcomeController.js',
+                            label: 'WelcomeController.js',
+                        }],
+                    },
+                    {
+                        value: '/app/Http/routes.js',
+                        label: 'routes.js',
+                    },
+                ],
+            },
+            {
+                value: '/app/Providers',
+                label: 'Providers',
+                children: [{
+                    value: '/app/Http/Providers/EventServiceProvider.js',
+                    label: 'EventServiceProvider.js',
+                }],
+            },
+        ],
+    },
+    {
+        value: '/config',
+        label: 'config',
+        children: [
+            {
+                value: '/config/app.js',
+                label: 'app.js',
+            },
+            {
+                value: '/config/database.js',
+                label: 'database.js',
+            },
+        ],
+    },
+    {
+        value: '/public',
+        label: 'public',
+        children: [
+            {
+                value: '/public/assets/',
+                label: 'assets',
+                children: [{
+                    value: '/public/assets/style.css',
+                    label: 'style.css',
+                }],
+            },
+            {
+                value: '/public/index.html',
+                label: 'index.html',
+            },
+        ],
+    },
+    {
+        value: '/.env',
+        label: '.env',
+    },
+    {
+        value: '/.gitignore',
+        label: '.gitignore',
+    },
+    {
+        value: '/README.md',
+        label: 'README.md',
+    },
+];
+
+class ExpandAllExample extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            checked: [
+                '/app/Http/Controllers/WelcomeController.js',
+                '/app/Http/routes.js',
+                '/public/assets/style.css',
+                '/public/index.html',
+                '/.gitignore',
+            ],
+            expanded: [
+                '/app',
+            ],
+        };
+
+        this.onCheck = this.onCheck.bind(this);
+        this.onExpand = this.onExpand.bind(this);
+    }
+
+    onCheck(checked) {
+        this.setState({ checked });
+    }
+
+    onExpand(expanded) {
+        this.setState({ expanded });
+    }
+
+    render() {
+        const { checked, expanded } = this.state;
+
+        return (
+            <div className="expand-all-container">
+                <CheckboxTree
+                    checked={checked}
+                    expanded={expanded}
+                    nodes={nodes}
+                    showExpandAll
+                    onCheck={this.onCheck}
+                    onExpand={this.onExpand}
+                />
+            </div>
+        );
+    }
+}
+
+export default ExpandAllExample;
diff --git a/examples/src/scss/style.scss b/examples/src/scss/style.scss
@@ -19,3 +19,7 @@ $rct-border-color: #ccc;
     width: 50%;
   }
 }
+
+.expand-all-container {
+  max-width: 400px;
+}
diff --git a/src/js/CheckboxTree.js b/src/js/CheckboxTree.js
@@ -25,6 +25,7 @@ class CheckboxTree extends React.Component {
         noCascade: PropTypes.bool,
         onlyLeafCheckboxes: PropTypes.bool,
         optimisticToggle: PropTypes.bool,
+        showExpandAll: PropTypes.bool,
         showNodeIcon: PropTypes.bool,
         showNodeTitle: PropTypes.bool,
         onCheck: PropTypes.func,
@@ -44,6 +45,8 @@ class CheckboxTree extends React.Component {
             halfCheck: <span className="rct-icon rct-icon-half-check" />,
             expandClose: <span className="rct-icon rct-icon-expand-close" />,
             expandOpen: <span className="rct-icon rct-icon-expand-open" />,
+            expandAll: <span className="rct-icon rct-icon-expand-all" />,
+            collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
             parentClose: <span className="rct-icon rct-icon-parent-close" />,
             parentOpen: <span className="rct-icon rct-icon-parent-open" />,
             leaf: <span className="rct-icon rct-icon-leaf" />,
@@ -54,6 +57,7 @@ class CheckboxTree extends React.Component {
         noCascade: false,
         onlyLeafCheckboxes: false,
         optimisticToggle: true,
+        showExpandAll: false,
         showNodeIcon: true,
         showNodeTitle: false,
         onCheck: () => {},
@@ -75,6 +79,8 @@ class CheckboxTree extends React.Component {
 
         this.onCheck = this.onCheck.bind(this);
         this.onExpand = this.onExpand.bind(this);
+        this.onExpandAll = this.onExpandAll.bind(this);
+        this.onCollapseAll = this.onCollapseAll.bind(this);
     }
 
     componentWillReceiveProps({ nodes, checked, expanded }) {
@@ -99,6 +105,14 @@ class CheckboxTree extends React.Component {
         onExpand(this.serializeList('expanded'), node);
     }
 
+    onExpandAll() {
+        this.expandAllNodes();
+    }
+
+    onCollapseAll() {
+        this.expandAllNodes(false);
+    }
+
     getFormattedNodes(nodes) {
         return nodes.map((node) => {
             const formatted = { ...node };
@@ -107,7 +121,7 @@ class CheckboxTree extends React.Component {
             formatted.expanded = this.nodes[node.value].expanded;
             formatted.showCheckbox = node.showCheckbox !== undefined ? node.showCheckbox : true;
 
-            if (Array.isArray(node.children) && node.children.length > 0) {
+            if (this.nodes[node.value].isParent) {
                 formatted.children = this.getFormattedNodes(formatted.children);
             } else {
                 formatted.children = null;
@@ -145,6 +159,22 @@ class CheckboxTree extends React.Component {
         return Boolean(node.disabled);
     }
 
+    nodeHasChildren(node) {
+        return Array.isArray(node.children) && node.children.length > 0;
+    }
+
+    expandAllNodes(expand = true) {
+        const { onExpand } = this.props;
+
+        Object.keys(this.nodes).forEach((value) => {
+            if (this.nodes[value].isParent) {
+                this.nodes[value].expanded = expand;
+            }
+        });
+
+        onExpand(this.serializeList('expanded', null));
+    }
+
     toggleChecked(node, isChecked, noCascade) {
         if (node.children === null || noCascade) {
             // Set the check status of a leaf node or an uncoupled parent
@@ -167,7 +197,12 @@ class CheckboxTree extends React.Component {
         }
 
         nodes.forEach((node) => {
-            this.nodes[node.value] = {};
+            const isParent = this.nodeHasChildren(node);
+
+            this.nodes[node.value] = {
+                isParent,
+                isLeaf: !isParent,
+            };
             this.flattenNodes(node.children);
         });
     }
@@ -288,12 +323,45 @@ class CheckboxTree extends React.Component {
         return null;
     }
 
+    renderExpandAll() {
+        const { icons: { expandAll, collapseAll }, showExpandAll } = this.props;
+
+        if (!showExpandAll) {
+            return null;
+        }
+
+        return (
+            <div className="rct-options">
+                <button
+                    aria-label="Expand all"
+                    className="rct-option rct-option-expand-all"
+                    title="Expand all"
+                    type="button"
+                    onClick={this.onExpandAll}
+                >
+                    {expandAll}
+                </button>
+                <button
+                    aria-label="Expand all"
+                    className="rct-option rct-option-collapse-all"
+                    title="Collapse all"
+                    type="button"
+                    onClick={this.onCollapseAll}
+                >
+                    {collapseAll}
+                </button>
+            </div>
+        );
+    }
+
     renderHiddenInput() {
-        if (this.props.name === undefined) {
+        const { name, nameAsArray } = this.props;
+
+        if (name === undefined) {
             return null;
         }
 
-        if (this.props.nameAsArray) {
+        if (nameAsArray) {
             return this.renderArrayHiddenInput();
         }
 
@@ -325,6 +393,7 @@ class CheckboxTree extends React.Component {
 
         return (
             <div className={className}>
+                {this.renderExpandAll()}
                 {this.renderHiddenInput()}
                 {treeNodes}
             </div>
diff --git a/src/less/react-checkbox-tree.less b/src/less/react-checkbox-tree.less
diff --git a/src/scss/react-checkbox-tree.scss b/src/scss/react-checkbox-tree.scss
diff --git a/test/CheckboxTree.js b/test/CheckboxTree.js

Original file line number	Diff line number	Diff line change
`@@ -19,3 +19,7 @@ $rct-border-color: #ccc;`
`19`	`19`	`width: 50%;`
`20`	`20`	`}`
`21`	`21`	`}`
	`22`	`+`
	`23`	`+.expand-all-container {`
	`24`	`+ max-width: 400px;`
	`25`	`+}`