Skip to content

Commit 5802a9b

Browse files
committed
Only clone targetNode if onClick defined
1 parent d5fe463 commit 5802a9b

File tree

3 files changed

+22
-7
lines changed

3 files changed

+22
-7
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ class MyComponent extends React.Component {
8181
| Property | Type | Options | Required? | Default | Description |
8282
|:---------------------|:----------------|:--------------------------------------|:----------|:--------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
8383
| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys. |
84-
| `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. |
84+
| `onClick` | `func` | | | `undefined` | 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. |
8585
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
8686
| `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). |
8787
| `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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default class Tree extends React.Component {
2121
this.findNodesById = this.findNodesById.bind(this);
2222
this.collapseNode = this.collapseNode.bind(this);
2323
this.handleNodeToggle = this.handleNodeToggle.bind(this);
24+
this.handleOnClickCb = this.handleOnClickCb.bind(this);
2425
}
2526

2627

@@ -176,7 +177,8 @@ export default class Tree extends React.Component {
176177
* handleNodeToggle - Finds the node matching `nodeId` and
177178
* expands/collapses it, depending on the current state of
178179
* its `_collapsed` property.
179-
* Passes a copy of the target node to the top-level onClick handler.
180+
* `setState` callback receives targetNode and handles
181+
* `props.onClick` if defined.
180182
*
181183
* @param {string} nodeId A node object's `id` field.
182184
*
@@ -190,9 +192,22 @@ export default class Tree extends React.Component {
190192
targetNode._collapsed
191193
? this.expandNode(targetNode)
192194
: this.collapseNode(targetNode);
193-
this.setState({ data }, () => {
194-
this.props.onClick(clone(targetNode));
195-
});
195+
this.setState({ data }, () => this.handleOnClickCb(targetNode));
196+
}
197+
}
198+
199+
200+
/**
201+
* handleOnClickCb - Handles the user-defined `onClick` function
202+
*
203+
* @param {object} targetNode Description
204+
*
205+
* @return {void}
206+
*/
207+
handleOnClickCb(targetNode) {
208+
const { onClick } = this.props;
209+
if (onClick && typeof onClick === 'function') {
210+
onClick(clone(targetNode));
196211
}
197212
}
198213

@@ -294,7 +309,7 @@ export default class Tree extends React.Component {
294309
}
295310

296311
Tree.defaultProps = {
297-
onClick: () => {},
312+
onClick: undefined,
298313
orientation: 'horizontal',
299314
translate: { x: 0, y: 0 },
300315
pathFunc: 'diagonal',

src/Tree/tests/index.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ describe('<Tree />', () => {
211211
});
212212

213213

214-
it('passes the clicked node\'s data to the onClick callback', () => {
214+
it('clones the clicked node\'s data & passes it to the onClick callback if defined', () => {
215215
const onClickSpy = jest.fn();
216216
const renderedComponent = mount(
217217
<Tree

0 commit comments

Comments
 (0)