diff --git a/package.json b/package.json index a285a970..fd1349ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-d3-tree", - "version": "3.2.0", + "name": "react-d3-tree_callback-ref-prop", + "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 e5457a55..d0681ab3 100644 --- a/src/Node/index.tsx +++ b/src/Node/index.tsx @@ -28,6 +28,7 @@ type NodeProps = { onNodeClick: NodeEventHandler; onNodeMouseOver: NodeEventHandler; onNodeMouseOut: NodeEventHandler; + callbackRefForNode: (context: TreeNodeDatum, element: SVGGElement) => void; subscriptions: object; }; @@ -158,11 +159,14 @@ export default class Node extends React.Component { } render() { - const { data, nodeClassName } = this.props; + const { data, nodeClassName, callbackRefForNode } = this.props; return ( { + if (callbackRefForNode) { + callbackRefForNode(data, n); + } this.nodeRef = n; }} style={this.state.initialStyle} diff --git a/src/Tree/index.tsx b/src/Tree/index.tsx index 265183e6..41069c10 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, + callbackRefForNode: 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} + 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 dbabebbf..9d99bb3a 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 + */ + callbackRefForNode?: (context: TreeNodeDatum, element: SVGGElement) => void; }