Add additional metadata to the targetNode of the event handlers

Resolves #122.

Author: jakezatecky

CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### New Features
 
-* [#116]: Add `id` property
+* [#116]: Add `id` property to specify the DOM ID for the generated tree nodes
+* [#122]: Add `label`, `isLeaf`, `isParent`, `parent`, `treeDepth`, and `level` metadata to the target node of `onCheck`, `onClick`, and `onExpand` handlers
 
 ### Bug Fixes
 

README.md

@@ -156,9 +156,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 | `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) {}`                                                                                | `() => {}`  |
-| `onClick`            | function | onClick handler: `function(clicked) {}`. If set, it will be called when clicked on a node label.                       | `() => {}`  |
-| `onExpand`           | function | onExpand handler: `function(expanded) {}`                                                                              | `() => {}`  |
+| `onCheck`            | function | onCheck handler: `function(checked, targetNode) {}`                                                                    | `() => {}`  |
+| `onClick`            | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `() => {}`  |
+| `onExpand`           | function | onExpand handler: `function(expanded, targetNode) {}`                                                                  | `() => {}`  |
+
+#### `onCheck` and `onExpand`
 
 #### Node Properties
 

src/js/CheckboxTree.js

@@ -94,6 +94,7 @@ class CheckboxTree extends React.Component {
 
         this.onCheck = this.onCheck.bind(this);
         this.onExpand = this.onExpand.bind(this);
+        this.onNodeClick = this.onNodeClick.bind(this);
         this.onExpandAll = this.onExpandAll.bind(this);
         this.onCollapseAll = this.onCollapseAll.bind(this);
     }
@@ -127,7 +128,7 @@ class CheckboxTree extends React.Component {
         const node = model.getNode(nodeInfo.value);
 
         model.toggleChecked(nodeInfo, nodeInfo.checked, noCascade);
-        onCheck(model.serializeList('checked'), { ...nodeInfo, children: node.self.children });
+        onCheck(model.serializeList('checked'), { ...node, ...nodeInfo });
     }
 
     onExpand(nodeInfo) {
@@ -136,7 +137,15 @@ class CheckboxTree extends React.Component {
         const node = model.getNode(nodeInfo.value);
 
         model.toggleNode(nodeInfo.value, 'expanded', nodeInfo.expanded);
-        onExpand(model.serializeList('expanded'), { ...nodeInfo, children: node.self.children });
+        onExpand(model.serializeList('expanded'), { ...node, ...nodeInfo });
+    }
+
+    onNodeClick(nodeInfo) {
+        const { onClick } = this.props;
+        const { model } = this.state;
+        const node = model.getNode(nodeInfo.value);
+
+        onClick({ ...node, ...nodeInfo });
     }
 
     onExpandAll() {
@@ -194,7 +203,6 @@ class CheckboxTree extends React.Component {
             optimisticToggle,
             showNodeTitle,
             showNodeIcon,
-            onClick,
         } = this.props;
         const { id, model } = this.state;
         const { icons: defaultIcons } = CheckboxTree.defaultProps;
@@ -239,7 +247,7 @@ class CheckboxTree extends React.Component {
                     treeId={id}
                     value={node.value}
                     onCheck={this.onCheck}
-                    onClick={onClick}
+                    onClick={this.onNodeClick}
                     onExpand={this.onExpand}
                 >
                     {children}

src/js/NodeModel.js

@@ -20,26 +20,30 @@ class NodeModel {
         return this.flatNodes[value];
     }
 
-    flattenNodes(nodes, parent = {}) {
+    flattenNodes(nodes, parent = {}, depth = 0) {
         if (!Array.isArray(nodes) || nodes.length === 0) {
             return;
         }
 
         const { disabled, noCascade } = this.props;
 
         // Flatten the `node` property for internal lookups
-        nodes.forEach((node) => {
+        nodes.forEach((node, index) => {
             const isParent = this.nodeHasChildren(node);
 
             this.flatNodes[node.value] = {
-                self: node,
+                label: node.label,
+                value: node.value,
+                children: node.children,
                 parent,
                 isParent,
                 isLeaf: !isParent,
                 showCheckbox: node.showCheckbox !== undefined ? node.showCheckbox : true,
                 disabled: this.getDisabledState(node, parent, disabled, noCascade),
+                treeDepth: depth,
+                index,
             };
-            this.flattenNodes(node.children, node);
+            this.flattenNodes(node.children, node, depth + 1);
         });
     }
 
@@ -113,7 +117,7 @@ class NodeModel {
             this.toggleNode(node.value, 'checked', isChecked);
         } else {
             // Percolate check status down to all children
-            flatNode.self.children.forEach((child) => {
+            flatNode.children.forEach((child) => {
                 this.toggleChecked(child, isChecked, noCascade);
             });
         }

test/CheckboxTree.js

@@ -593,4 +593,89 @@ describe('<CheckboxTree />', () => {
             assert.equal('jupiter', actualNode.value);
         });
     });
+
+    describe('handler.targetNode', () => {
+        it('should supply a variety of metadata relating to the target node', () => {
+            let checkNode = null;
+            let expandNode = null;
+            let clickNode = null;
+
+            const getNodeMetadata = (node) => {
+                const {
+                    value,
+                    label,
+                    isLeaf,
+                    isParent,
+                    treeDepth,
+                    index,
+                    parent: { value: parentValue },
+                } = node;
+
+                return {
+                    value,
+                    label,
+                    isLeaf,
+                    isParent,
+                    treeDepth,
+                    index,
+                    parentValue,
+                };
+            };
+            const wrapper = mount(
+                <CheckboxTree
+                    expanded={['jupiter']}
+                    checked={[]}
+                    nodes={[
+                        {
+                            value: 'jupiter',
+                            label: 'Jupiter',
+                            children: [
+                                { value: 'io', label: 'Io' },
+                                { value: 'europa', label: 'Europa' },
+                            ],
+                        },
+                    ]}
+                    onCheck={(checked, node) => {
+                        checkNode = node;
+                    }}
+                    onClick={(node) => {
+                        clickNode = node;
+                    }}
+                    onExpand={(expanded, node) => {
+                        expandNode = node;
+                    }}
+                />,
+            );
+            const expectedLeafMetadata = {
+                value: 'io',
+                label: 'Io',
+                isLeaf: true,
+                isParent: false,
+                treeDepth: 1,
+                index: 0,
+                parentValue: 'jupiter',
+            };
+            const expectedParentMetadata = {
+                value: 'jupiter',
+                label: 'Jupiter',
+                isLeaf: false,
+                isParent: true,
+                treeDepth: 0,
+                index: 0,
+                parentValue: undefined,
+            };
+
+            // onCheck
+            wrapper.find('TreeNode').at(1).find('input[type="checkbox"]').simulate('click');
+            assert.deepEqual(expectedLeafMetadata, getNodeMetadata(checkNode));
+
+            // onClick
+            wrapper.find('TreeNode').at(1).find('.rct-node-clickable').simulate('click');
+            assert.deepEqual(expectedLeafMetadata, getNodeMetadata(clickNode));
+
+            // onExpand
+            wrapper.find('TreeNode').at(0).find('Button.rct-collapse-btn').simulate('click');
+            assert.deepEqual(expectedParentMetadata, getNodeMetadata(expandNode));
+        });
+    });
 });