Implements nodeData param for onClick hook; closes #21

Author: bkrem

README.md

@@ -80,7 +80,7 @@ class MyComponent extends React.Component {
 | Property             | Type            | Options                               | Required? | Default                         | Description                                                                                                                                                                     |
 |:---------------------|:----------------|:--------------------------------------|:----------|:--------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `data`               | `array`         |                                       | required  | `undefined`                     | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys.                                              |
-| `onClick`            | `func`          |                                       |           | `undefined`                     | Callback function to be called whenever a node is clicked.                                                                                                                      |
+| `onClick`            | `func`          |                                       |           | `(nodeData) => {}`              | Callback function to be called whenever a node is clicked. <br /><br /> The clicked node's data object is passed to the callback function as the first parameter.               |
 | `orientation`        | `string` (enum) | `horizontal` `vertical`               |           | `horizontal`                    | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom.                                                                                |
 | `translate`          | `object`        |                                       |           | `{x: 0, y: 0}`                  | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner).                                         |
 | `pathFunc`           | `string` (enum) | `diagonal` `elbow`                    |           | `diagonal`                      | `diagonal` - Renders smooth, curved edges between parent-child nodes. <br /><br /> `elbow` - Renders sharp edges at right angles between parent-child nodes.                    |

src/Tree/index.js

@@ -176,6 +176,7 @@ export default class Tree extends React.Component {
    * handleNodeToggle - Finds the node matching `nodeId` and
    * expands/collapses it, depending on the current state of
    * its `_collapsed` property.
+   * Passes a copy of the target node to the top-level onClick handler.
    *
    * @param {string} nodeId A node object's `id` field.
    *
@@ -189,7 +190,9 @@ export default class Tree extends React.Component {
       targetNode._collapsed
         ? this.expandNode(targetNode)
         : this.collapseNode(targetNode);
-      this.setState({ data }, this.props.onClick);
+      this.setState({ data }, () => {
+        this.props.onClick(clone(targetNode));
+      });
     }
   }
 
@@ -291,7 +294,7 @@ export default class Tree extends React.Component {
 }
 
 Tree.defaultProps = {
-  onClick: undefined,
+  onClick: () => {},
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',

src/Tree/tests/index.test.js

@@ -209,4 +209,19 @@ describe('<Tree />', () => {
 
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
+
+
+  it('passes the clicked node\'s data to the onClick callback', () => {
+    const onClickSpy = jest.fn();
+    const renderedComponent = mount(
+      <Tree
+        data={mockData}
+        onClick={onClickSpy}
+      />
+    );
+
+    renderedComponent.find(Node).first().simulate('click');
+
+    expect(onClickSpy).toHaveBeenCalledWith(renderedComponent.find(Node).first().prop('nodeData'));
+  });
 });