Supporting additional parameters for arbitrary event handlers

README.md

@@ -15,6 +15,7 @@ Check out the [examples](https://jpb12.github.io/react-tree-graph) and the [demo
 
 Older Versions
 --------------
+[3.X](https://github.com/jpb12/react-tree-graph/tree/v3.3.0)
 [2.X](https://github.com/jpb12/react-tree-graph/tree/v2.0.0)
 [1.X](https://github.com/jpb12/react-tree-graph/tree/v1.7.2)
 
@@ -73,12 +74,33 @@ Configuration
 | `nodeOffset` | number | | 3.5 | The height offset for the label of a node. May need to be adjusted depending on radius and font size. |
 | `nodeRadius` | number | | 5 | The radius of the rendered node. |
 | `circleProps` | object | | `{}` | Props to be added to the `<circle>` element. |
-| `gProps` | object | | `{ className: 'node' }` | Props to be added to the `<g>` element. `onClick` and `onContextMenu` events configured here will have the node passed as a parameter. |
-| `pathProps` | object | | `{ className: 'link' }` | Props to be added to the `<path>` element. `onClick` and `onContextMenu` events configured here will have the source and target nodes passed as parameters. |
+| `gProps` | object | | `{ className: 'node' }` | Props to be added to the `<g>` element. |
+| `pathProps` | object | | `{ className: 'link' }` | Props to be added to the `<path>` element. |
 | `svgProps` | object | | `{}` | Props to be added to the `<svg>` element. |
 | `textProps` | object | | `{}` | Props to be added to the `<text>` element. |
 
-The following properties can also be set individually on each node.  They will combine with the properties above:
+### Events
+
+Event handlers in `circleProps`, `gProp` and `textProps` will be called with the node ID as an additional parameter.
+
+`function(event, nodeId) { ... }`
+
+Event handlers in `pathProps` will be called with the source and node IDs as additional parameters.
+
+`function(event, sourceNodeId, targetNodeId) { ... }`
+
+### Overriding props
+
+The following properties can also be overridden by setting then for individual nodes.
+
+| Prop |
+|:---|
+| `keyProp` |
+| `labelProp` |
+| `nodeOffset` |
+| `nodeRadius` |
+
+The following object properties, if set on individual nodes, will be combined with the object properties set on the tree. If a property exists in both objects, the value from the node will be taken.
 
 | Prop | Description |
 |:---|:---|

__tests__/Components/__snapshots__/animatedTests.js.snap

@@ -205,8 +205,6 @@ exports[`<Animated> does nothing when not enabled 1`] = `
       >
         <path
           d="M2,1C26,1 26,100 50,100"
-          onClick={[Function]}
-          onContextMenu={[Function]}
         />
       </Link>
       <Node
@@ -223,8 +221,6 @@ exports[`<Animated> does nothing when not enabled 1`] = `
         y={2}
       >
         <g
-          onClick={[Function]}
-          onContextMenu={[Function]}
           transform="translate(2, 1)"
         >
           <circle
@@ -252,8 +248,6 @@ exports[`<Animated> does nothing when not enabled 1`] = `
         y={80}
       >
         <g
-          onClick={[Function]}
-          onContextMenu={[Function]}
           transform="translate(80, 120)"
         >
           <circle

__tests__/Components/__snapshots__/linkTests.js.snap

@@ -4,7 +4,5 @@ exports[`<Link> renders correctly 1`] = `
 <path
   className="Link"
   d="M2,1C5.5,1 5.5,5 9,5"
-  onClick={[Function]}
-  onContextMenu={[Function]}
 />
 `;

__tests__/Components/__snapshots__/nodeTests.js.snap

@@ -3,8 +3,6 @@
 exports[`<Node> htmlProps applied to all elements 1`] = `
 <g
   className="g"
-  onClick={[Function]}
-  onContextMenu={[Function]}
   transform="translate(2, 1)"
 >
   <circle
@@ -24,8 +22,6 @@ exports[`<Node> htmlProps applied to all elements 1`] = `
 exports[`<Node> renders correctly 1`] = `
 <g
   className="test"
-  onClick={[Function]}
-  onContextMenu={[Function]}
   transform="translate(2, 1)"
 >
   <circle

__tests__/Components/animatedTests.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import { easeQuadOut } from 'd3-ease';
-import Animated from '../../Components/animated';
+import Animated from '../../src/components/animated';
 
 jest.useFakeTimers();
 

__tests__/Components/containerTests.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Container from '../../Components/container';
-import Link from '../../Components/link';
-import Node from '../../Components/node';
+import Container from '../../src/components/container';
+import Link from '../../src/components/link';
+import Node from '../../src/components/node';
 
 const nodes = [
 	{

__tests__/Components/linkTests.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Link from '../../Components/link';
+import Link from '../../src/components/link';
 
 const defaultProps = {
-	source: {},
-	target: {},
-	keyProp: '',
+	source: {
+		data: {
+			id: 'origin'
+		}
+	},
+	target: {
+		data: {
+			id: 'target'
+		}
+	},
+	keyProp: 'id',
 	pathProps: {
 		className: 'Link'
 	},
@@ -27,17 +35,6 @@ describe('<Link>', () => {
 		const event = {};
 
 		const props = {
-			source: {
-				data: {
-					id: 'origin'
-				}
-			},
-			target: {
-				data: {
-					id: 'target'
-				}
-			},
-			keyProp: 'id',
 			pathProps: {
 				onClick: clickMock
 			}
@@ -47,51 +44,28 @@ describe('<Link>', () => {
 		tree.find('path').simulate('click', event);
 
 		expect(clickMock).toHaveBeenCalledTimes(1);
-		expect(clickMock).toHaveBeenCalledWith('origin', 'target', event);
+		expect(clickMock).toHaveBeenCalledWith(event, 'origin', 'target');
 	});
+
 	test('right click event has correct parameters', () => {
-		const clickMock = jest.fn();
+		const rightClickMock = jest.fn();
 		const event = {};
 
 		const props = {
-			source: {
-				data: {
-					id: 'origin'
-				}
-			},
-			target: {
-				data: {
-					id: 'target'
-				}
-			},
-			keyProp: 'id',
 			pathProps: {
-				onContextMenu: clickMock
+				onContextMenu: rightClickMock
 			}
 		};
 
 		const tree = shallow(<Link {...defaultProps} {...props}/>);
 		tree.find('path').simulate('contextmenu', event);
 
-		expect(clickMock).toHaveBeenCalledTimes(1);
-		expect(clickMock).toHaveBeenCalledWith('origin', 'target', event);
+		expect(rightClickMock).toHaveBeenCalledTimes(1);
+		expect(rightClickMock).toHaveBeenCalledWith(event, 'origin', 'target');
 	});
-	test('clicking with no prop handler does nothing', () => {
-		const props = {
-			source: {
-				data: {
-					id: 'origin'
-				}
-			},
-			target: {
-				data: {
-					id: 'target'
-				}
-			},
-			keyProp: 'id'
-		};
 
-		const tree = shallow(<Link {...defaultProps} {...props}/>);
+	test('clicking with no prop handler does nothing', () => {
+		const tree = shallow(<Link {...defaultProps}/>);
 		tree.find('path').simulate('click');
 	});
 });

__tests__/Components/nodeTests.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Node from '../../Components/node';
+import Node from '../../src/components/node';
 
 const defaultProps = {
 	x: 1,
@@ -40,26 +40,26 @@ describe('<Node>', () => {
 		tree.find('g').simulate('click', event);
 
 		expect(clickMock).toHaveBeenCalledTimes(1);
-		expect(clickMock).toHaveBeenCalledWith('testKey', event);
+		expect(clickMock).toHaveBeenCalledWith(event, 'testKey');
 	});
 
 	test('right click event has correct parameters', () => {
-		const clickMock = jest.fn();
+		const rightClickMock = jest.fn();
 		const event = {};
 
 		const props = {
 			keyProp: 'id',
 			gProps: {
-				onContextMenu: clickMock
+				onContextMenu: rightClickMock
 			},
 			id: 'testKey'
 		};
 
 		const tree = shallow(<Node {...defaultProps} {...props}/>);
 		tree.find('g').simulate('contextmenu', event);
 
-		expect(clickMock).toHaveBeenCalledTimes(1);
-		expect(clickMock).toHaveBeenCalledWith('testKey', event);
+		expect(rightClickMock).toHaveBeenCalledTimes(1);
+		expect(rightClickMock).toHaveBeenCalledWith(event, 'testKey');
 	});
 
 

__tests__/Components/treeTests.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Tree from '../../Components/tree';
+import Tree from '../../src/components/tree';
 
 describe('<Tree>', () => {
 	test('renders correctly', () => {

__tests__/wrapHandlersTests.js

@@ -0,0 +1,18 @@
+import wrapHandlers from '../src/wrapHandlers';
+
+describe('wrapHandlers', () => {
+	test('does nothing if no events', () => {
+		const result = wrapHandlers({ x: 5 }, 1, 2);
+		expect(result).toMatchObject({ x: 5 });
+	});
+
+	test.each(['onBlur', 'onClick', 'onContextMenu', 'onFocus'])(
+		'wraps %s',
+		name => {
+			const handlerMock = jest.fn();
+			const result = wrapHandlers({ [name]: handlerMock }, 1, 2);
+			result[name](0);
+			expect(handlerMock).toBeCalledWith(0, 1, 2);
+		}
+	);
+});