From d0221d2766af863f6a849cb5a5c8dda0eec2646f Mon Sep 17 00:00:00 2001 From: Lucas Della Bella Date: Wed, 12 Jan 2022 15:04:50 -0800 Subject: [PATCH 1/5] onRefAssignment PoC --- src/Node/index.tsx | 2 ++ src/Tree/index.tsx | 9 ++++++++- src/Tree/types.ts | 5 +++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Node/index.tsx b/src/Node/index.tsx index e5457a55..38e92265 100644 --- a/src/Node/index.tsx +++ b/src/Node/index.tsx @@ -28,6 +28,7 @@ type NodeProps = { onNodeClick: NodeEventHandler; onNodeMouseOver: NodeEventHandler; onNodeMouseOut: NodeEventHandler; + onRefAssignment: (element: SVGGElement) => void; subscriptions: object; }; @@ -163,6 +164,7 @@ export default class Node extends React.Component { { + this.props.onRefAssignment(n); this.nodeRef = n; }} style={this.state.initialStyle} diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx index 265183e6..1004f448 100644 --- a/src/Tree/index.tsx +++ b/src/Tree/index.tsx @@ -29,6 +29,7 @@ class Tree extends React.Component { onLinkClick: undefined, onLinkMouseOver: undefined, onLinkMouseOut: undefined, + onRefAssignment: undefined, onUpdate: undefined, orientation: 'horizontal', translate: { x: 0, y: 0 }, @@ -151,7 +152,12 @@ class Tree extends React.Component { .scaleExtent(zoomable ? [scaleExtent.min, scaleExtent.max] : [zoom, zoom]) // TODO: break this out into a separate zoom handler fn, rather than inlining it. .filter(() => { - if (hasInteractiveNodes) return event.target.classList.contains(this.svgInstanceRef) || event.target.classList.contains(this.gInstanceRef) || event.shiftKey; + if (hasInteractiveNodes) + return ( + event.target.classList.contains(this.svgInstanceRef) || + event.target.classList.contains(this.gInstanceRef) || + event.shiftKey + ); return true; }) .on('zoom', () => { @@ -519,6 +525,7 @@ class Tree extends React.Component { nodeSize={nodeSize} orientation={orientation} enableLegacyTransitions={enableLegacyTransitions} + onRefAssignment={onRefAssignment} transitionDuration={transitionDuration} onNodeToggle={this.handleNodeToggle} onNodeClick={this.handleOnNodeClickCb} diff --git a/src/Tree/types.ts b/src/Tree/types.ts index dbabebbf..41504a2e 100644 --- a/src/Tree/types.ts +++ b/src/Tree/types.ts @@ -285,4 +285,9 @@ export interface TreeProps { * {@link Tree.defaultProps.hasInteractiveNodes | Default value} */ hasInteractiveNodes?: boolean; + + /** + * A function that is called when the ref gets assigned for each node + */ + onRefAssignment?: (element: SVGGElement) => void; } From b8cd9739e0d08458592f4a2609e8fef1f7108645 Mon Sep 17 00:00:00 2001 From: Lucas Della Bella Date: Mon, 17 Jan 2022 16:58:21 -0800 Subject: [PATCH 2/5] Fix symbol does not exist error --- src/Tree/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx index 1004f448..9b68f5df 100644 --- a/src/Tree/index.tsx +++ b/src/Tree/index.tsx @@ -525,7 +525,7 @@ class Tree extends React.Component { nodeSize={nodeSize} orientation={orientation} enableLegacyTransitions={enableLegacyTransitions} - onRefAssignment={onRefAssignment} + onRefAssignment={this.props.onRefAssignment} transitionDuration={transitionDuration} onNodeToggle={this.handleNodeToggle} onNodeClick={this.handleOnNodeClickCb} From ff2e7ddb1e9bf2d08dda1a3b5271b8f36a647f26 Mon Sep 17 00:00:00 2001 From: Lucas Della Bella Date: Mon, 17 Jan 2022 17:05:34 -0800 Subject: [PATCH 3/5] Rename onRefAssignment to callbackRef according to react docs --- package.json | 2 +- src/Node/index.tsx | 4 ++-- src/Tree/index.tsx | 4 ++-- src/Tree/types.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index a285a970..767a6b92 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-d3-tree", + "name": "react-d3-tree_callback-ref-prop", "version": "3.2.0", "description": "React component to create interactive D3 tree hierarchies", "author": "Ben Kremer", diff --git a/src/Node/index.tsx b/src/Node/index.tsx index 38e92265..c13ede5e 100644 --- a/src/Node/index.tsx +++ b/src/Node/index.tsx @@ -28,7 +28,7 @@ type NodeProps = { onNodeClick: NodeEventHandler; onNodeMouseOver: NodeEventHandler; onNodeMouseOut: NodeEventHandler; - onRefAssignment: (element: SVGGElement) => void; + callbackRef: (element: SVGGElement) => void; subscriptions: object; }; @@ -164,7 +164,7 @@ export default class Node extends React.Component { { - this.props.onRefAssignment(n); + this.props.callbackRef(n); this.nodeRef = n; }} style={this.state.initialStyle} diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx index 9b68f5df..82a52421 100644 --- a/src/Tree/index.tsx +++ b/src/Tree/index.tsx @@ -29,7 +29,7 @@ class Tree extends React.Component { onLinkClick: undefined, onLinkMouseOver: undefined, onLinkMouseOut: undefined, - onRefAssignment: undefined, + callbackRef: undefined, onUpdate: undefined, orientation: 'horizontal', translate: { x: 0, y: 0 }, @@ -525,7 +525,7 @@ class Tree extends React.Component { nodeSize={nodeSize} orientation={orientation} enableLegacyTransitions={enableLegacyTransitions} - onRefAssignment={this.props.onRefAssignment} + callbackRef={this.props.callbackRef} transitionDuration={transitionDuration} onNodeToggle={this.handleNodeToggle} onNodeClick={this.handleOnNodeClickCb} diff --git a/src/Tree/types.ts b/src/Tree/types.ts index 41504a2e..5e03d1db 100644 --- a/src/Tree/types.ts +++ b/src/Tree/types.ts @@ -289,5 +289,5 @@ export interface TreeProps { /** * A function that is called when the ref gets assigned for each node */ - onRefAssignment?: (element: SVGGElement) => void; + callbackRef?: (element: SVGGElement) => void; } From 603a6daf87a94eddde04cce3c4e4ef4bd8f5583b Mon Sep 17 00:00:00 2001 From: Lucas Della Bella Date: Mon, 17 Jan 2022 17:18:37 -0800 Subject: [PATCH 4/5] Handle undefined callbackRef prop --- src/Node/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Node/index.tsx b/src/Node/index.tsx index c13ede5e..75bf25ad 100644 --- a/src/Node/index.tsx +++ b/src/Node/index.tsx @@ -159,12 +159,14 @@ export default class Node extends React.Component { } render() { - const { data, nodeClassName } = this.props; + const { data, nodeClassName, callbackRef } = this.props; return ( { - this.props.callbackRef(n); + if (callbackRef) { + callbackRef(n); + } this.nodeRef = n; }} style={this.state.initialStyle} From e258e3e84d5db503e7068f2338ebaeec33f814eb Mon Sep 17 00:00:00 2001 From: Lucas Della Bella Date: Mon, 17 Jan 2022 17:30:38 -0800 Subject: [PATCH 5/5] Add context and additional node information to the callback ref func --- package.json | 2 +- src/Node/index.tsx | 8 ++++---- src/Tree/index.tsx | 4 ++-- src/Tree/types.ts | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 767a6b92..fd1349ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-d3-tree_callback-ref-prop", - "version": "3.2.0", + "version": "3.3.0", "description": "React component to create interactive D3 tree hierarchies", "author": "Ben Kremer", "license": "MIT", diff --git a/src/Node/index.tsx b/src/Node/index.tsx index 75bf25ad..d0681ab3 100644 --- a/src/Node/index.tsx +++ b/src/Node/index.tsx @@ -28,7 +28,7 @@ type NodeProps = { onNodeClick: NodeEventHandler; onNodeMouseOver: NodeEventHandler; onNodeMouseOut: NodeEventHandler; - callbackRef: (element: SVGGElement) => void; + callbackRefForNode: (context: TreeNodeDatum, element: SVGGElement) => void; subscriptions: object; }; @@ -159,13 +159,13 @@ export default class Node extends React.Component { } render() { - const { data, nodeClassName, callbackRef } = this.props; + const { data, nodeClassName, callbackRefForNode } = this.props; return ( { - if (callbackRef) { - callbackRef(n); + if (callbackRefForNode) { + callbackRefForNode(data, n); } this.nodeRef = n; }} diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx index 82a52421..41069c10 100644 --- a/src/Tree/index.tsx +++ b/src/Tree/index.tsx @@ -29,7 +29,7 @@ class Tree extends React.Component { onLinkClick: undefined, onLinkMouseOver: undefined, onLinkMouseOut: undefined, - callbackRef: undefined, + callbackRefForNode: undefined, onUpdate: undefined, orientation: 'horizontal', translate: { x: 0, y: 0 }, @@ -525,7 +525,7 @@ class Tree extends React.Component { nodeSize={nodeSize} orientation={orientation} enableLegacyTransitions={enableLegacyTransitions} - callbackRef={this.props.callbackRef} + callbackRefForNode={this.props.callbackRefForNode} transitionDuration={transitionDuration} onNodeToggle={this.handleNodeToggle} onNodeClick={this.handleOnNodeClickCb} diff --git a/src/Tree/types.ts b/src/Tree/types.ts index 5e03d1db..9d99bb3a 100644 --- a/src/Tree/types.ts +++ b/src/Tree/types.ts @@ -289,5 +289,5 @@ export interface TreeProps { /** * A function that is called when the ref gets assigned for each node */ - callbackRef?: (element: SVGGElement) => void; + callbackRefForNode?: (context: TreeNodeDatum, element: SVGGElement) => void; }