Merge branch 'refactor/node-evt-handlers-with-parent'

bkrem · bkrem · commit e4ceda1eff19 · 2021-06-24T23:08:28.000+07:00
diff --git a/src/Node/index.test.js b/src/Node/index.test.js
@@ -11,8 +11,18 @@ describe('<Node />', () => {
     },
   };
 
+  const hierarchyPointNode = {
+    data,
+    depth: 1,
+    height: 0,
+    parent: null,
+    x: -200,
+    y: 200,
+  };
+
   const mockProps = {
     data,
+    hierarchyPointNode,
     nodeSize: {
       x: 123,
       y: 321,
@@ -123,7 +133,7 @@ describe('<Node />', () => {
       expect(onNodeToggleSpy).toHaveBeenCalledWith(data.__rd3t.id);
     });
 
-    it('handles onNodeClick events and passes its nodeId & event object to handler', () => {
+    it('handles onNodeClick events and passes its `hierarchyPointNode` representation & event object to handler', () => {
       const onClickSpy = jest.fn();
       const mockEvt = { mock: 'event' };
       const renderedComponent = shallow(
@@ -132,27 +142,36 @@ describe('<Node />', () => {
 
       renderedComponent.find('circle').simulate('click', mockEvt);
       expect(onClickSpy).toHaveBeenCalledTimes(1);
-      expect(onClickSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
+      expect(onClickSpy).toHaveBeenCalledWith(
+        mockProps.hierarchyPointNode,
+        expect.objectContaining(mockEvt)
+      );
     });
 
-    it('handles onNodeMouseOver events and passes its nodeId & event object to handler', () => {
+    it('handles onNodeMouseOver events and passes its `hierarchyPointNode` representation & event object to handler', () => {
       const onMouseOverSpy = jest.fn();
       const mockEvt = { mock: 'event' };
       const renderedComponent = shallow(<Node {...mockProps} onNodeMouseOver={onMouseOverSpy} />);
 
       renderedComponent.find('circle').simulate('mouseover', mockEvt);
       expect(onMouseOverSpy).toHaveBeenCalledTimes(1);
-      expect(onMouseOverSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
+      expect(onMouseOverSpy).toHaveBeenCalledWith(
+        mockProps.hierarchyPointNode,
+        expect.objectContaining(mockEvt)
+      );
     });
 
-    it('handles onNodeMouseOut events and passes its nodeId & event object to handler', () => {
+    it('handles onNodeMouseOut events and passes its `hierarchyPointNode` representation & event object to handler', () => {
       const onMouseOutSpy = jest.fn();
       const mockEvt = { mock: 'event' };
       const renderedComponent = shallow(<Node {...mockProps} onNodeMouseOut={onMouseOutSpy} />);
 
       renderedComponent.find('circle').simulate('mouseout', mockEvt);
       expect(onMouseOutSpy).toHaveBeenCalledTimes(1);
-      expect(onMouseOutSpy).toHaveBeenCalledWith(data.__rd3t.id, expect.objectContaining(mockEvt));
+      expect(onMouseOutSpy).toHaveBeenCalledWith(
+        mockProps.hierarchyPointNode,
+        expect.objectContaining(mockEvt)
+      );
     });
   });
 
diff --git a/src/Node/index.tsx b/src/Node/index.tsx
@@ -5,11 +5,15 @@ import { select } from 'd3-selection';
 import { Orientation, Point, TreeNodeDatum, RenderCustomNodeElementFn } from '../types/common';
 import DefaultNodeElement from './DefaultNodeElement';
 
-type NodeEventHandler = (id: string, evt: SyntheticEvent) => void;
+type NodeEventHandler = (
+  hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>,
+  evt: SyntheticEvent
+) => void;
 
 type NodeProps = {
   data: TreeNodeDatum;
   position: Point;
+  hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>;
   parent: HierarchyPointNode<TreeNodeDatum> | null;
   nodeClassName: string;
   nodeSize: {
@@ -131,15 +135,15 @@ export default class Node extends React.Component<NodeProps, NodeState> {
   handleNodeToggle = () => this.props.onNodeToggle(this.props.data.__rd3t.id);
 
   handleOnClick = evt => {
-    this.props.onNodeClick(this.props.data.__rd3t.id, evt);
+    this.props.onNodeClick(this.props.hierarchyPointNode, evt);
   };
 
   handleOnMouseOver = evt => {
-    this.props.onNodeMouseOver(this.props.data.__rd3t.id, evt);
+    this.props.onNodeMouseOver(this.props.hierarchyPointNode, evt);
   };
 
   handleOnMouseOut = evt => {
-    this.props.onNodeMouseOut(this.props.data.__rd3t.id, evt);
+    this.props.onNodeMouseOut(this.props.hierarchyPointNode, evt);
   };
 
   componentWillLeave(done) {
diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx
@@ -10,7 +10,7 @@ import TransitionGroupWrapper from './TransitionGroupWrapper';
 import Node from '../Node';
 import Link from '../Link';
 import { TreeNodeDatum, Point, RawNodeDatum } from '../types/common';
-import { TreeLinkEventCallback, TreeProps } from './types';
+import { TreeLinkEventCallback, TreeNodeEventCallback, TreeProps } from './types';
 import globalCss from '../globalCss';
 
 type TreeState = {
@@ -303,15 +303,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
   /**
    * Handles the user-defined `onNodeClick` function.
    */
-  handleOnNodeClickCb = (nodeId: string, evt: SyntheticEvent) => {
+  handleOnNodeClickCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
     const { onNodeClick } = this.props;
     if (onNodeClick && typeof onNodeClick === 'function') {
-      const data = clone(this.state.data);
-      const matches = this.findNodesById(nodeId, data, []);
-      const targetNode = matches[0];
       // Persist the SyntheticEvent for downstream handling by users.
       evt.persist();
-      onNodeClick(clone(targetNode), evt);
+      onNodeClick(clone(hierarchyPointNode), evt);
     }
   };
 
@@ -330,15 +327,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
   /**
    * Handles the user-defined `onNodeMouseOver` function.
    */
-  handleOnNodeMouseOverCb = (nodeId: string, evt: SyntheticEvent) => {
+  handleOnNodeMouseOverCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
     const { onNodeMouseOver } = this.props;
     if (onNodeMouseOver && typeof onNodeMouseOver === 'function') {
-      const data = clone(this.state.data);
-      const matches = this.findNodesById(nodeId, data, []);
-      const targetNode = matches[0];
       // Persist the SyntheticEvent for downstream handling by users.
       evt.persist();
-      onNodeMouseOver(clone(targetNode), evt);
+      onNodeMouseOver(clone(hierarchyPointNode), evt);
     }
   };
 
@@ -357,15 +351,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
   /**
    * Handles the user-defined `onNodeMouseOut` function.
    */
-  handleOnNodeMouseOutCb = (nodeId: string, evt: SyntheticEvent) => {
+  handleOnNodeMouseOutCb: TreeNodeEventCallback = (hierarchyPointNode, evt) => {
     const { onNodeMouseOut } = this.props;
     if (onNodeMouseOut && typeof onNodeMouseOut === 'function') {
-      const data = clone(this.state.data);
-      const matches = this.findNodesById(nodeId, data, []);
-      const targetNode = matches[0];
       // Persist the SyntheticEvent for downstream handling by users.
       evt.persist();
-      onNodeMouseOut(clone(targetNode), evt);
+      onNodeMouseOut(clone(hierarchyPointNode), evt);
     }
   };
 
@@ -509,12 +500,14 @@ class Tree extends React.Component<TreeProps, TreeState> {
               );
             })}
 
-            {nodes.map(({ data, x, y, parent, ...rest }, i) => {
+            {nodes.map((hierarchyPointNode, i) => {
+              const { data, x, y, parent } = hierarchyPointNode;
               return (
                 <Node
                   key={'node-' + i}
                   data={data}
                   position={{ x, y }}
+                  hierarchyPointNode={hierarchyPointNode}
                   parent={parent}
                   nodeClassName={this.getNodeClassName(parent, data)}
                   renderCustomNodeElement={renderCustomNodeElement}
diff --git a/src/Tree/tests/index.test.js b/src/Tree/tests/index.test.js
@@ -353,11 +353,15 @@ describe('<Tree />', () => {
         expect(onClickSpy).toHaveBeenCalledTimes(1);
       });
 
-      // TODO: Fix expected vs received treeData state
-      it.skip("clones the clicked node's data & passes it to the onNodeClick callback if defined", () => {
+      it('clones the `hierarchyPointNode` representation & passes it to the onNodeClick callback if defined', () => {
         const onClickSpy = jest.fn();
         const mockEvt = { mock: 'event' };
-        const renderedComponent = mount(<Tree data={mockData} onNodeClick={onClickSpy} />);
+
+        const renderedComponent = mount(
+          // Disable `collapsible` here to avoid side-effects on the underlying tree structure,
+          // i.e. node's expanding/collapsing onClick.
+          <Tree data={mockData} onNodeClick={onClickSpy} collapsible={false} />
+        );
 
         renderedComponent
           .find(Node)
@@ -369,7 +373,7 @@ describe('<Tree />', () => {
           renderedComponent
             .find(Node)
             .first()
-            .prop('data'),
+            .prop('hierarchyPointNode'),
           expect.objectContaining(mockEvt)
         );
       });
@@ -416,7 +420,7 @@ describe('<Tree />', () => {
         expect(onMouseOverSpy).toHaveBeenCalledTimes(0);
       });
 
-      it("clones the hovered node's data & passes it to the onNodeMouseOver callback if defined", () => {
+      it('clones the `hierarchyPointNode` representation & passes it to the onNodeMouseOver callback if defined', () => {
         const onMouseOverSpy = jest.fn();
         const mockEvt = { mock: 'event' };
         const renderedComponent = mount(<Tree data={mockData} onNodeMouseOver={onMouseOverSpy} />);
@@ -431,7 +435,7 @@ describe('<Tree />', () => {
           renderedComponent
             .find(Node)
             .first()
-            .prop('data'),
+            .prop('hierarchyPointNode'),
           expect.objectContaining(mockEvt)
         );
       });
@@ -478,7 +482,7 @@ describe('<Tree />', () => {
         expect(onMouseOutSpy).toHaveBeenCalledTimes(0);
       });
 
-      it("clones the hovered node's data & passes it to the onNodeMouseOut callback if defined", () => {
+      it('clones the `hierarchyPointNode` representation & passes it to the onNodeMouseOut callback if defined', () => {
         const onMouseOutSpy = jest.fn();
         const mockEvt = { mock: 'event' };
         const renderedComponent = mount(<Tree data={mockData} onNodeMouseOut={onMouseOutSpy} />);
@@ -493,7 +497,7 @@ describe('<Tree />', () => {
           renderedComponent
             .find(Node)
             .first()
-            .prop('data'),
+            .prop('hierarchyPointNode'),
           expect.objectContaining(mockEvt)
         );
       });
diff --git a/src/Tree/types.ts b/src/Tree/types.ts
@@ -11,7 +11,10 @@ import {
   TreeNodeDatum,
 } from '../types/common';
 
-export type TreeNodeEventCallback = (node: TreeNodeDatum, event: SyntheticEvent) => any;
+export type TreeNodeEventCallback = (
+  node: HierarchyPointNode<TreeNodeDatum>,
+  event: SyntheticEvent
+) => any;
 
 export type TreeLinkEventCallback = (
   sourceNode: HierarchyPointNode<TreeNodeDatum>,
