Merge branch 'refactor' of https://github.com/worthlutz/react-checkbox-tree into worthlutz-refactor

# Conflicts:
#	examples/dist/index.js
#	src/js/TreeNode.js

Author: jakezatecky

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 package-lock.json
 yarn.lock
+package-lock.json

examples/dist/index.js

@@ -51,7 +51,7 @@ class CheckboxTree extends React.Component {
         super(props);
 
         this.id = `rct-${nanoid(7)}`;
-        this.nodes = {};
+        this.flatNodes = {};
 
         this.flattenNodes(props.nodes);
         this.unserializeLists({
@@ -72,54 +72,42 @@ class CheckboxTree extends React.Component {
     }
 
     onCheck(node) {
+        // node is object from TreeNode
         const { noCascade, onCheck } = this.props;
 
         this.toggleChecked(node, node.checked, noCascade);
         onCheck(this.serializeList('checked'), node);
     }
 
     onExpand(node) {
+        // node is object from TreeNode
         const { onExpand } = this.props;
 
         this.toggleNode('expanded', node, node.expanded);
         onExpand(this.serializeList('expanded'), node);
     }
 
-    getFormattedNodes(nodes) {
-        return nodes.map((node) => {
-            const formatted = { ...node };
+    getShallowCheckState(node, noCascade) {
+        // node is from props.nodes
+        const flatNode = this.flatNodes[node.value];
 
-            formatted.checked = this.nodes[node.value].checked;
-            formatted.expanded = this.nodes[node.value].expanded;
-            formatted.showCheckbox = node.showCheckbox !== undefined ? node.showCheckbox : true;
-
-            if (Array.isArray(node.children) && node.children.length > 0) {
-                formatted.children = this.getFormattedNodes(formatted.children);
-            } else {
-                formatted.children = null;
-            }
-
-            return formatted;
-        });
-    }
-
-    getCheckState(node, noCascade) {
-        if (node.children === null || noCascade) {
-            return node.checked ? 1 : 0;
+        if (flatNode.isLeaf || noCascade) {
+            return flatNode.checked ? 1 : 0;
         }
 
-        if (this.isEveryChildChecked(node)) {
+        if (node.children.every(child => (this.flatNodes[child.value].checkState === 1))) {
             return 1;
         }
 
-        if (this.isSomeChildChecked(node)) {
+        if (node.children.some(child => (this.flatNodes[child.value].checkState > 0))) {
             return 2;
         }
 
         return 0;
     }
 
     getDisabledState(node, parent, disabledProp, noCascade) {
+        // node is from props.nodes
         if (disabledProp) {
             return true;
         }
@@ -132,45 +120,56 @@ class CheckboxTree extends React.Component {
     }
 
     toggleChecked(node, isChecked, noCascade) {
-        if (node.children === null || noCascade) {
+        // node is object from TreeNode
+        const flatNode = this.flatNodes[node.value];
+
+        if (flatNode.isLeaf || noCascade) {
             // Set the check status of a leaf node or an uncoupled parent
             this.toggleNode('checked', node, isChecked);
         } else {
+            const { children } = flatNode.self;
             // Percolate check status down to all children
-            node.children.forEach((child) => {
-                this.toggleChecked(child, isChecked);
+            children.forEach((child) => {
+                this.toggleChecked(child, isChecked, noCascade);
             });
         }
     }
 
     toggleNode(key, node, toggleValue) {
-        this.nodes[node.value][key] = toggleValue;
+        this.flatNodes[node.value][key] = toggleValue;
     }
 
-    flattenNodes(nodes) {
+    flattenNodes(nodes, parentNode = {}) {
+        // nodes are from props.nodes
         if (!Array.isArray(nodes) || nodes.length === 0) {
             return;
         }
 
         nodes.forEach((node) => {
-            this.nodes[node.value] = {};
-            this.flattenNodes(node.children);
+            // set defaults, calculated values and tree references
+            this.flatNodes[node.value] = {
+                parent: parentNode,
+                self: node,
+                isLeaf: !Array.isArray(node.children) || node.children.length === 0,
+                showCheckbox: node.showCheckbox !== undefined ? node.showCheckbox : true,
+            };
+            this.flattenNodes(node.children, node);
         });
     }
 
     unserializeLists(lists) {
         // Reset values to false
-        Object.keys(this.nodes).forEach((value) => {
+        Object.keys(this.flatNodes).forEach((value) => {
             Object.keys(lists).forEach((listKey) => {
-                this.nodes[value][listKey] = false;
+                this.flatNodes[value][listKey] = false;
             });
         });
 
         // Unserialize values and set their nodes to true
         Object.keys(lists).forEach((listKey) => {
             lists[listKey].forEach((value) => {
-                if (this.nodes[value] !== undefined) {
-                    this.nodes[value][listKey] = true;
+                if (this.flatNodes[value] !== undefined) {
+                    this.flatNodes[value][listKey] = true;
                 }
             });
         });
@@ -179,36 +178,17 @@ class CheckboxTree extends React.Component {
     serializeList(key) {
         const list = [];
 
-        Object.keys(this.nodes).forEach((value) => {
-            if (this.nodes[value][key]) {
+        Object.keys(this.flatNodes).forEach((value) => {
+            if (this.flatNodes[value][key]) {
                 list.push(value);
             }
         });
 
         return list;
     }
 
-    isEveryChildChecked(node) {
-        return node.children.every((child) => {
-            if (child.children !== null) {
-                return this.isEveryChildChecked(child);
-            }
-
-            return child.checked;
-        });
-    }
-
-    isSomeChildChecked(node) {
-        return node.children.some((child) => {
-            if (child.children !== null) {
-                return this.isSomeChildChecked(child);
-            }
-
-            return child.checked;
-        });
-    }
-
     renderTreeNodes(nodes, parent = {}) {
+        // nodes are props.nodes
         const {
             disabled,
             expandDisabled,
@@ -219,39 +199,57 @@ class CheckboxTree extends React.Component {
             showNodeIcon,
             onClick,
         } = this.props;
+
         const treeNodes = nodes.map((node) => {
             const key = `${node.value}`;
-            const checked = this.getCheckState(node, noCascade);
-            const isLeaf = node.children === null;
-            const children = this.renderChildNodes(node);
+
+            const flatNode = this.flatNodes[node.value];
+
+            let children = null;
+            if (!flatNode.isLeaf) {
+                children = this.renderTreeNodes(node.children, node);
+            }
+
+            // set checkState here
+            // this can be "shallow" because checkState is updated for all
+            // nested children in the recursive call to renderTreeNodes above
+            flatNode.checkState = this.getShallowCheckState(node, noCascade);
+
             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;
-
-            return (
-                <TreeNode
-                    key={key}
-                    checked={checked}
-                    className={node.className}
-                    disabled={nodeDisabled}
-                    expandDisabled={expandDisabled}
-                    expandOnClick={expandOnClick}
-                    expanded={node.expanded}
-                    icon={node.icon}
-                    label={node.label}
-                    optimisticToggle={optimisticToggle}
-                    rawChildren={node.children}
-                    showCheckbox={showCheckbox}
-                    showNodeIcon={showNodeIcon}
-                    treeId={this.id}
-                    value={node.value}
-                    onCheck={this.onCheck}
-                    onClick={onClick}
-                    onExpand={this.onExpand}
-                >
-                    {children}
-                </TreeNode>
-            );
+            const showCheckbox = onlyLeafCheckboxes ? flatNode.isLeaf : flatNode.showCheckbox;
+
+            // root of tree has no parent value and is expanded by default
+            const parentExpanded = parent.value ? this.flatNodes[parent.value].expanded : true;
+            if (parentExpanded) {
+                return (
+                    <TreeNode
+                        key={key}
+                        checked={flatNode.checkState}
+                        className={node.className}
+                        disabled={nodeDisabled}
+                        expandDisabled={expandDisabled}
+                        expandOnClick={expandOnClick}
+                        expanded={flatNode.expanded}
+                        icon={node.icon}
+                        label={node.label}
+                        optimisticToggle={optimisticToggle}
+                        isLeaf={flatNode.isLeaf}
+                        showCheckbox={showCheckbox}
+                        showNodeIcon={showNodeIcon}
+                        treeId={this.id}
+                        value={node.value}
+                        onCheck={this.onCheck}
+                        onClick={onClick}
+                        onExpand={this.onExpand}
+                    >
+                        {children}
+                    </TreeNode>
+                );
+            }
+
+            return null;
         });
 
         return (
@@ -261,14 +259,6 @@ class CheckboxTree extends React.Component {
         );
     }
 
-    renderChildNodes(node) {
-        if (node.children !== null && node.expanded) {
-            return this.renderTreeNodes(node.children, node);
-        }
-
-        return null;
-    }
-
     renderHiddenInput() {
         if (this.props.name === undefined) {
             return null;
@@ -296,8 +286,8 @@ class CheckboxTree extends React.Component {
     }
 
     render() {
-        const nodes = this.getFormattedNodes(this.props.nodes);
-        const treeNodes = this.renderTreeNodes(nodes);
+        const treeNodes = this.renderTreeNodes(this.props.nodes);
+
         const className = classNames({
             'react-checkbox-tree': true,
             'rct-disabled': this.props.disabled,

src/js/CheckboxTree.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import NativeCheckbox from './NativeCheckbox';
-import nodeShape from './nodeShape';
 
 class TreeNode extends React.Component {
     static propTypes = {
         checked: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
         expanded: PropTypes.bool.isRequired,
+        isLeaf: PropTypes.bool.isRequired,
         label: PropTypes.node.isRequired,
         optimisticToggle: PropTypes.bool.isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
@@ -26,7 +26,6 @@ class TreeNode extends React.Component {
         className: PropTypes.string,
         expandOnClick: PropTypes.bool,
         icon: PropTypes.node,
-        rawChildren: PropTypes.arrayOf(nodeShape),
         showCheckbox: PropTypes.bool,
         onClick: PropTypes.func,
     };
@@ -36,7 +35,6 @@ class TreeNode extends React.Component {
         className: null,
         expandOnClick: false,
         icon: null,
-        rawChildren: null,
         showCheckbox: true,
         onClick: () => {},
     };
@@ -65,7 +63,6 @@ class TreeNode extends React.Component {
         this.props.onCheck({
             value: this.props.value,
             checked: isChecked,
-            children: this.props.rawChildren,
         });
     }
 
@@ -82,14 +79,13 @@ class TreeNode extends React.Component {
         }
 
         // Auto expand if enabled
-        if (this.hasChildren() && this.props.expandOnClick) {
+        if (!this.props.isLeaf && this.props.expandOnClick) {
             this.onExpand();
         }
 
         this.props.onClick({
             value: this.props.value,
             checked: isChecked,
-            children: this.props.rawChildren,
         });
     }
 
@@ -100,14 +96,10 @@ class TreeNode extends React.Component {
         });
     }
 
-    hasChildren() {
-        return this.props.rawChildren !== null;
-    }
-
     renderCollapseButton() {
         const { expandDisabled } = this.props;
 
-        if (!this.hasChildren()) {
+        if (this.props.isLeaf) {
             return (
                 <span className="rct-collapse">
                     <span className="rct-icon" />
@@ -154,7 +146,7 @@ class TreeNode extends React.Component {
             return this.props.icon;
         }
 
-        if (!this.hasChildren()) {
+        if (this.props.isLeaf) {
             return <span className="rct-icon rct-icon-leaf" />;
         }
 
@@ -267,8 +259,8 @@ class TreeNode extends React.Component {
         const { className, disabled } = this.props;
         const nodeClass = classNames({
             'rct-node': true,
-            'rct-node-parent': this.hasChildren(),
-            'rct-node-leaf': !this.hasChildren(),
+            'rct-node-parent': !this.props.isLeaf,
+            'rct-node-leaf': this.props.isLeaf,
             'rct-disabled': disabled,
         }, className);