Skip to content

Commit 6c5ede2

Browse files
bkrembkrem
committed
Merge branch 'feature/19-on-click-hook' into develop
2 parents dd23a6e + e898574 commit 6c5ede2

File tree

4 files changed

+90
-67
lines changed

4 files changed

+90
-67
lines changed

‎README.md

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -77,22 +77,23 @@ class MyComponent extends React.Component {
7777

7878

7979
## Props
80-
| Property | Type | Options | Required? | Default | Description |
81-
|-----------------------|-----------------|---------------------------------------|-----------|---------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
82-
| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys. |
83-
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
84-
| `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). |
85-
| `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. |
86-
| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
87-
| `initialDepth` | `number` | `0..n` | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted. |
88-
| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |
89-
| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
90-
| `scaleExtent` | `object` | `{min: 0..n, max: 0..n}` | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
91-
| `nodeSize` | `object` | `{x: 0..n, y: 0..n}` | | `{x: 140, y: 140}` | Sets a fixed size for each node. <br /><br /> This does not affect node circle sizes, circle sizes are handled by the `circleRadius` prop. |
92-
| `separation` | `object` | `{siblings: 0..n, nonSiblings: 0..n}` | | `{siblings: 1, nonSiblings: 2}` | Sets separation between neighbouring nodes, differentiating between siblings (same parent) and non-siblings. |
93-
| `circleRadius` | `number` | `0..n` | | `10` | Sets the radius of each node's `<circle>` element. |
94-
| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely. |
95-
| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
80+
| Property | Type | Options | Required? | Default | Description |
81+
|:---------------------|:----------------|:--------------------------------------|:----------|:--------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
82+
| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys. |
83+
| `onClick` | `func` | | | `undefined` | Callback function to be called whenever a node is clicked. |
84+
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
85+
| `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). |
86+
| `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. |
87+
| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
88+
| `initialDepth` | `number` | `0..n` | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted. |
89+
| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |
90+
| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
91+
| `scaleExtent` | `object` | `{min: 0..n, max: 0..n}` | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
92+
| `nodeSize` | `object` | `{x: 0..n, y: 0..n}` | | `{x: 140, y: 140}` | Sets a fixed size for each node. <br /><br /> This does not affect node circle sizes, circle sizes are handled by the `circleRadius` prop. |
93+
| `separation` | `object` | `{siblings: 0..n, nonSiblings: 0..n}` | | `{siblings: 1, nonSiblings: 2}` | Sets separation between neighbouring nodes, differentiating between siblings (same parent) and non-siblings. |
94+
| `circleRadius` | `number` | `0..n` | | `10` | Sets the radius of each node's `<circle>` element. |
95+
| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely. |
96+
| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
9697

9798

9899
## Styling

‎src/Tree/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export default class Tree extends React.Component {
189189
targetNode._collapsed
190190
? this.expandNode(targetNode)
191191
: this.collapseNode(targetNode);
192-
this.setState({ data });
192+
this.setState({ data }, this.props.onClick);
193193
}
194194
}
195195

@@ -291,6 +291,7 @@ export default class Tree extends React.Component {
291291
}
292292

293293
Tree.defaultProps = {
294+
onClick: undefined,
294295
orientation: 'horizontal',
295296
translate: { x: 0, y: 0 },
296297
pathFunc: 'diagonal',
@@ -322,6 +323,7 @@ Tree.defaultProps = {
322323

323324
Tree.propTypes = {
324325
data: PropTypes.array.isRequired,
326+
onClick: PropTypes.func,
325327
orientation: PropTypes.oneOf([
326328
'horizontal',
327329
'vertical',

‎src/Tree/tests/index.test.js

Lines changed: 16 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,9 @@ import { shallow, mount } from 'enzyme';
55
import Node from '../../Node';
66
import Link from '../../Link';
77
import Tree from '../index';
8+
import { mockData, mockData2 } from './mockData';
89

910
describe('<Tree />', () => {
10-
const mockData = [
11-
{
12-
name: 'Top Level',
13-
parent: 'null',
14-
attributes: {
15-
keyA: 'val A',
16-
keyB: 'val B',
17-
keyC: 'val C',
18-
},
19-
children: [
20-
{
21-
name: 'Level 2: A',
22-
parent: 'Top Level',
23-
attributes: {
24-
keyA: 'val A',
25-
keyB: 'val B',
26-
keyC: 'val C',
27-
},
28-
},
29-
{
30-
name: 'Level 2: B',
31-
parent: 'Top Level',
32-
},
33-
],
34-
},
35-
];
36-
37-
const mockData2 = [
38-
{
39-
name: 'Top Level',
40-
parent: 'null',
41-
attributes: {
42-
keyA: 'val A',
43-
keyB: 'val B',
44-
keyC: 'val C',
45-
},
46-
children: [
47-
{
48-
name: 'Level 2: A',
49-
parent: 'Top Level',
50-
attributes: {
51-
keyA: 'val A',
52-
keyB: 'val B',
53-
keyC: 'val C',
54-
},
55-
},
56-
],
57-
},
58-
];
59-
6011
jest.spyOn(Tree.prototype, 'generateTree');
6112
jest.spyOn(Tree.prototype, 'assignInternalProperties');
6213
jest.spyOn(Tree.prototype, 'handleNodeToggle');
@@ -243,4 +194,19 @@ describe('<Tree />', () => {
243194
expect(zoomableComponent.find('.rd3t-tree-container').hasClass('rd3t-grabbable')).toBe(true);
244195
expect(nonZoomableComponent.find('.rd3t-tree-container').hasClass('rd3t-grabbable')).toBe(false);
245196
});
197+
198+
199+
it('calls the onClick callback when a node is toggled', () => {
200+
const onClickSpy = jest.fn();
201+
const renderedComponent = mount(
202+
<Tree
203+
data={mockData}
204+
onClick={onClickSpy}
205+
/>
206+
);
207+
208+
renderedComponent.find(Node).first().simulate('click');
209+
210+
expect(onClickSpy).toHaveBeenCalledTimes(1);
211+
});
246212
});

‎src/Tree/tests/mockData.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const mockData = [
2+
{
3+
name: 'Top Level',
4+
parent: 'null',
5+
attributes: {
6+
keyA: 'val A',
7+
keyB: 'val B',
8+
keyC: 'val C',
9+
},
10+
children: [
11+
{
12+
name: 'Level 2: A',
13+
parent: 'Top Level',
14+
attributes: {
15+
keyA: 'val A',
16+
keyB: 'val B',
17+
keyC: 'val C',
18+
},
19+
},
20+
{
21+
name: 'Level 2: B',
22+
parent: 'Top Level',
23+
},
24+
],
25+
},
26+
];
27+
28+
const mockData2 = [
29+
{
30+
name: 'Top Level',
31+
parent: 'null',
32+
attributes: {
33+
keyA: 'val A',
34+
keyB: 'val B',
35+
keyC: 'val C',
36+
},
37+
children: [
38+
{
39+
name: 'Level 2: A',
40+
parent: 'Top Level',
41+
attributes: {
42+
keyA: 'val A',
43+
keyB: 'val B',
44+
keyC: 'val C',
45+
},
46+
},
47+
],
48+
},
49+
];
50+
51+
export {
52+
mockData,
53+
mockData2,
54+
};

0 commit comments

Comments
 (0)