Skip to content

Commit 55f061e

Browse files
bkrembkrem
committed
Revert "refactor!: aligns onNode handler parameter signatures with onLink handlers (#349)"
This reverts commit 531f825.
1 parent 0fc32e6 commit 55f061e

File tree

5 files changed

+36
-59
lines changed

5 files changed

+36
-59
lines changed

‎src/Node/index.test.js

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,8 @@ describe('<Node />', () => {
1111
},
1212
};
1313

14-
const hierarchyPointNode = {
15-
data,
16-
depth: 1,
17-
height: 0,
18-
parent: null,
19-
x: -200,
20-
y: 200,
21-
};
22-
2314
const mockProps = {
2415
data,
25-
hierarchyPointNode,
2616
nodeSize: {
2717
x: 123,
2818
y: 321,
@@ -133,7 +123,7 @@ describe('<Node />', () => {
133123
expect(onNodeToggleSpy).toHaveBeenCalledWith(data.__rd3t.id);
134124
});
135125

136-
it('handles onNodeClick events and passes its `hierarchyPointNode` representation & event object to handler', () => {
126+
it('handles onNodeClick events and passes its nodeId & event object to handler', () => {
137127
const onClickSpy = jest.fn();
138128
const mockEvt = { mock: 'event' };
139129
const renderedComponent = shallow(
@@ -142,36 +132,27 @@ describe('<Node />', () => {
142132

143133
renderedComponent.find('circle').simulate('click', mockEvt);
144134
expect(onClickSpy).toHaveBeenCalledTimes(1);
145-
expect(onClickSpy).toHaveBeenCalledWith(
146-
mockProps.hierarchyPointNode,
147-
expect.objectContaining(mockEvt)
148-
);
135+
expect(onClickSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
149136
});
150137

151-
it('handles onNodeMouseOver events and passes its `hierarchyPointNode` representation & event object to handler', () => {
138+
it('handles onNodeMouseOver events and passes its nodeId & event object to handler', () => {
152139
const onMouseOverSpy = jest.fn();
153140
const mockEvt = { mock: 'event' };
154141
const renderedComponent = shallow(<Node {...mockProps} onNodeMouseOver={onMouseOverSpy} />);
155142

156143
renderedComponent.find('circle').simulate('mouseover', mockEvt);
157144
expect(onMouseOverSpy).toHaveBeenCalledTimes(1);
158-
expect(onMouseOverSpy).toHaveBeenCalledWith(
159-
mockProps.hierarchyPointNode,
160-
expect.objectContaining(mockEvt)
161-
);
145+
expect(onMouseOverSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
162146
});
163147

164-
it('handles onNodeMouseOut events and passes its `hierarchyPointNode` representation & event object to handler', () => {
148+
it('handles onNodeMouseOut events and passes its nodeId & event object to handler', () => {
165149
const onMouseOutSpy = jest.fn();
166150
const mockEvt = { mock: 'event' };
167151
const renderedComponent = shallow(<Node {...mockProps} onNodeMouseOut={onMouseOutSpy} />);
168152

169153
renderedComponent.find('circle').simulate('mouseout', mockEvt);
170154
expect(onMouseOutSpy).toHaveBeenCalledTimes(1);
171-
expect(onMouseOutSpy).toHaveBeenCalledWith(
172-
mockProps.hierarchyPointNode,
173-
expect.objectContaining(mockEvt)
174-
);
155+
expect(onMouseOutSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
175156
});
176157
});
177158

‎src/Node/index.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,11 @@ import { select } from 'd3-selection';
55
import { Orientation, Point, TreeNodeDatum, RenderCustomNodeElementFn } from '../types/common';
66
import DefaultNodeElement from './DefaultNodeElement';
77

8-
type NodeEventHandler = (
9-
hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>,
10-
evt: SyntheticEvent
11-
) => void;
8+
type NodeEventHandler = (id: string, evt: SyntheticEvent) => void;
129

1310
type NodeProps = {
1411
data: TreeNodeDatum;
1512
position: Point;
16-
hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>;
1713
parent: HierarchyPointNode<TreeNodeDatum> | null;
1814
nodeClassName: string;
1915
nodeSize: {
@@ -135,15 +131,15 @@ export default class Node extends React.Component<NodeProps, NodeState> {
135131
handleNodeToggle = () => this.props.onNodeToggle(this.props.data.__rd3t.id);
136132

137133
handleOnClick = evt => {
138-
this.props.onNodeClick(this.props.hierarchyPointNode, evt);
134+
this.props.onNodeClick(this.props.data.__rd3t.id, evt);
139135
};
140136

141137
handleOnMouseOver = evt => {
142-
this.props.onNodeMouseOver(this.props.hierarchyPointNode, evt);
138+
this.props.onNodeMouseOver(this.props.data.__rd3t.id, evt);
143139
};
144140

145141
handleOnMouseOut = evt => {
146-
this.props.onNodeMouseOut(this.props.hierarchyPointNode, evt);
142+
this.props.onNodeMouseOut(this.props.data.__rd3t.id, evt);
147143
};
148144

149145
componentWillLeave(done) {

‎src/Tree/index.tsx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import TransitionGroupWrapper from './TransitionGroupWrapper';
1010
import Node from '../Node';
1111
import Link from '../Link';
1212
import { TreeNodeDatum, Point, RawNodeDatum } from '../types/common';
13-
import { TreeLinkEventCallback, TreeNodeEventCallback, TreeProps } from './types';
13+
import { TreeLinkEventCallback, TreeProps } from './types';
1414
import globalCss from '../globalCss';
1515

1616
type TreeState = {
@@ -303,12 +303,15 @@ class Tree extends React.Component<TreeProps, TreeState> {
303303
/**
304304
* Handles the user-defined `onNodeClick` function.
305305
*/
306-
handleOnNodeClickCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
306+
handleOnNodeClickCb = (nodeId: string, evt: SyntheticEvent) => {
307307
const { onNodeClick } = this.props;
308308
if (onNodeClick && typeof onNodeClick === 'function') {
309+
const data = clone(this.state.data);
310+
const matches = this.findNodesById(nodeId, data, []);
311+
const targetNode = matches[0];
309312
// Persist the SyntheticEvent for downstream handling by users.
310313
evt.persist();
311-
onNodeClick(clone(hierarchyPointNode), evt);
314+
onNodeClick(clone(targetNode), evt);
312315
}
313316
};
314317

@@ -327,12 +330,15 @@ class Tree extends React.Component<TreeProps, TreeState> {
327330
/**
328331
* Handles the user-defined `onNodeMouseOver` function.
329332
*/
330-
handleOnNodeMouseOverCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
333+
handleOnNodeMouseOverCb = (nodeId: string, evt: SyntheticEvent) => {
331334
const { onNodeMouseOver } = this.props;
332335
if (onNodeMouseOver && typeof onNodeMouseOver === 'function') {
336+
const data = clone(this.state.data);
337+
const matches = this.findNodesById(nodeId, data, []);
338+
const targetNode = matches[0];
333339
// Persist the SyntheticEvent for downstream handling by users.
334340
evt.persist();
335-
onNodeMouseOver(clone(hierarchyPointNode), evt);
341+
onNodeMouseOver(clone(targetNode), evt);
336342
}
337343
};
338344

@@ -351,12 +357,15 @@ class Tree extends React.Component<TreeProps, TreeState> {
351357
/**
352358
* Handles the user-defined `onNodeMouseOut` function.
353359
*/
354-
handleOnNodeMouseOutCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
360+
handleOnNodeMouseOutCb = (nodeId: string, evt: SyntheticEvent) => {
355361
const { onNodeMouseOut } = this.props;
356362
if (onNodeMouseOut && typeof onNodeMouseOut === 'function') {
363+
const data = clone(this.state.data);
364+
const matches = this.findNodesById(nodeId, data, []);
365+
const targetNode = matches[0];
357366
// Persist the SyntheticEvent for downstream handling by users.
358367
evt.persist();
359-
onNodeMouseOut(clone(hierarchyPointNode), evt);
368+
onNodeMouseOut(clone(targetNode), evt);
360369
}
361370
};
362371

@@ -500,14 +509,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
500509
);
501510
})}
502511

503-
{nodes.map((hierarchyPointNode, i) => {
504-
const { data, x, y, parent } = hierarchyPointNode;
512+
{nodes.map(({ data, x, y, parent, ...rest }, i) => {
505513
return (
506514
<Node
507515
key={'node-' + i}
508516
data={data}
509517
position={{ x, y }}
510-
hierarchyPointNode={hierarchyPointNode}
511518
parent={parent}
512519
nodeClassName={this.getNodeClassName(parent, data)}
513520
renderCustomNodeElement={renderCustomNodeElement}

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -353,15 +353,11 @@ describe('<Tree />', () => {
353353
expect(onClickSpy).toHaveBeenCalledTimes(1);
354354
});
355355

356-
it('clones the `hierarchyPointNode` representation & passes it to the onNodeClick callback if defined', () => {
356+
// TODO: Fix expected vs received treeData state
357+
it.skip("clones the clicked node's data & passes it to the onNodeClick callback if defined", () => {
357358
const onClickSpy = jest.fn();
358359
const mockEvt = { mock: 'event' };
359-
360-
const renderedComponent = mount(
361-
// Disable `collapsible` here to avoid side-effects on the underlying tree structure,
362-
// i.e. node's expanding/collapsing onClick.
363-
<Tree data={mockData} onNodeClick={onClickSpy} collapsible={false} />
364-
);
360+
const renderedComponent = mount(<Tree data={mockData} onNodeClick={onClickSpy} />);
365361

366362
renderedComponent
367363
.find(Node)
@@ -373,7 +369,7 @@ describe('<Tree />', () => {
373369
renderedComponent
374370
.find(Node)
375371
.first()
376-
.prop('hierarchyPointNode'),
372+
.prop('data'),
377373
expect.objectContaining(mockEvt)
378374
);
379375
});
@@ -420,7 +416,7 @@ describe('<Tree />', () => {
420416
expect(onMouseOverSpy).toHaveBeenCalledTimes(0);
421417
});
422418

423-
it('clones the `hierarchyPointNode` representation & passes it to the onNodeMouseOver callback if defined', () => {
419+
it("clones the hovered node's data & passes it to the onNodeMouseOver callback if defined", () => {
424420
const onMouseOverSpy = jest.fn();
425421
const mockEvt = { mock: 'event' };
426422
const renderedComponent = mount(<Tree data={mockData} onNodeMouseOver={onMouseOverSpy} />);
@@ -435,7 +431,7 @@ describe('<Tree />', () => {
435431
renderedComponent
436432
.find(Node)
437433
.first()
438-
.prop('hierarchyPointNode'),
434+
.prop('data'),
439435
expect.objectContaining(mockEvt)
440436
);
441437
});
@@ -482,7 +478,7 @@ describe('<Tree />', () => {
482478
expect(onMouseOutSpy).toHaveBeenCalledTimes(0);
483479
});
484480

485-
it('clones the `hierarchyPointNode` representation & passes it to the onNodeMouseOut callback if defined', () => {
481+
it("clones the hovered node's data & passes it to the onNodeMouseOut callback if defined", () => {
486482
const onMouseOutSpy = jest.fn();
487483
const mockEvt = { mock: 'event' };
488484
const renderedComponent = mount(<Tree data={mockData} onNodeMouseOut={onMouseOutSpy} />);
@@ -497,7 +493,7 @@ describe('<Tree />', () => {
497493
renderedComponent
498494
.find(Node)
499495
.first()
500-
.prop('hierarchyPointNode'),
496+
.prop('data'),
501497
expect.objectContaining(mockEvt)
502498
);
503499
});

‎src/Tree/types.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ import {
1111
TreeNodeDatum,
1212
} from '../types/common';
1313

14-
export type TreeNodeEventCallback = (
15-
node: HierarchyPointNode<TreeNodeDatum>,
16-
event: SyntheticEvent
17-
) => any;
14+
export type TreeNodeEventCallback = (node: TreeNodeDatum, event: SyntheticEvent) => any;
1815

1916
export type TreeLinkEventCallback = (
2017
sourceNode: HierarchyPointNode<TreeNodeDatum>,

0 commit comments

Comments
 (0)