Implement onMouseOver feature (#50)

Finish implementation

Add tests

Add JSDoc

Add docs

Author: RohanDamani

.eslintrc.js

@@ -52,7 +52,7 @@ module.exports = {
     "jsx-a11y/heading-has-content": 0,
     "jsx-a11y/href-no-hash": 2,
     "jsx-a11y/label-has-for": 2,
-    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/mouse-events-have-key-events": 0,
     "jsx-a11y/role-has-required-aria-props": 2,
     "jsx-a11y/role-supports-aria-props": 2,
     "max-len": 0,

README.md

@@ -20,6 +20,7 @@ export default class Node extends React.Component {
     };
 
     this.handleClick = this.handleClick.bind(this);
+    this.handleOnMouseOver = this.handleOnMouseOver.bind(this);
   }
 
   componentDidMount() {
@@ -75,6 +76,10 @@ export default class Node extends React.Component {
     this.props.onClick(this.props.nodeData.id);
   }
 
+  handleOnMouseOver() {
+    this.props.onMouseOver(this.props.nodeData.id);
+  }
+
   componentWillLeave(done) {
     const { nodeData: { parent }, orientation, transitionDuration } = this.props;
     const originX = parent ? parent.x : 0;
@@ -97,6 +102,8 @@ export default class Node extends React.Component {
         className={nodeData._children ? 'nodeBase' : 'leafNodeBase'}
         transform={this.state.transform}
         onClick={this.handleClick}
+        onMouseOver={this.handleOnMouseOver}
+        onFocus={this.handleOnMouseOver}
       >
         {/* TODO: DEPRECATE <circle /> */}
         {this.props.circleRadius ? (
@@ -142,6 +149,7 @@ Node.defaultProps = {
   textAnchor: 'start',
   attributes: undefined,
   circleRadius: undefined,
+  onMouseOver: undefined,
   styles: {
     node: {
       circle: {},
@@ -162,6 +170,7 @@ Node.propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
   transitionDuration: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
+  onMouseOver: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   attributes: PropTypes.object,
   textLayout: PropTypes.object.isRequired,

src/Node/index.js

@@ -32,6 +32,7 @@ describe('<Node />', () => {
     orientation: 'horizontal',
     transitionDuration: 500,
     onClick: () => {},
+    onMouseOver: () => {},
     textLayout: {
       textAnchor: 'start',
       x: 10,
@@ -127,20 +128,24 @@ describe('<Node />', () => {
     expect(verticalComponent.find('g').prop('transform')).toBe(verticalTransform);
   });
 
-  it('should take an `onClick` prop', () => {
-    const renderedComponent = shallow(<Node {...mockProps} onClick={() => {}} />);
-
-    expect(renderedComponent.prop('onClick')).toBeDefined();
-  });
-
-  it('handles click events and passes its nodeId to onClick handler', () => {
+  it('handles onClick events and passes its nodeId to onClick handler', () => {
     const onClickSpy = jest.fn();
     const renderedComponent = shallow(<Node {...mockProps} onClick={onClickSpy} />);
 
     renderedComponent.simulate('click');
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
     expect(onClickSpy).toHaveBeenCalledWith(nodeData.id);
   });
 
+  it('handles onMouseOver events and passes its nodeId to onMouseOver handler', () => {
+    const onMouseOverSpy = jest.fn();
+    const renderedComponent = shallow(<Node {...mockProps} onMouseOver={onMouseOverSpy} />);
+
+    renderedComponent.simulate('mouseover');
+    expect(onMouseOverSpy).toHaveBeenCalledTimes(1);
+    expect(onMouseOverSpy).toHaveBeenCalledWith(nodeData.id);
+  });
+
   it('maps each `props.attributes` to a <tspan> element', () => {
     const fixture = { keyA: 'valA', keyB: 'valB' };
     const renderedComponent = shallow(<Node {...mockProps} attributes={fixture} />);

src/Node/tests/index.test.js

@@ -21,6 +21,7 @@ export default class Tree extends React.Component {
     this.collapseNode = this.collapseNode.bind(this);
     this.handleNodeToggle = this.handleNodeToggle.bind(this);
     this.handleOnClickCb = this.handleOnClickCb.bind(this);
+    this.handleOnMouseOverCb = this.handleOnMouseOverCb.bind(this);
   }
 
   componentDidMount() {
@@ -203,6 +204,23 @@ export default class Tree extends React.Component {
     }
   }
 
+  /**
+   * handleOnMouseOverCb - Handles the user-defined `onMouseOver` function
+   * 
+   * @param {string} nodeId 
+   * 
+   * @return {void}
+   */
+  handleOnMouseOverCb(nodeId) {
+    const { onMouseOver } = this.props;
+    if (onMouseOver && typeof onMouseOver === 'function') {
+      const data = clone(this.state.data);
+      const matches = this.findNodesById(nodeId, data, []);
+      const targetNode = matches[0];
+      onMouseOver(clone(targetNode));
+    }
+  }
+
   /**
    * generateTree - Generates tree elements (`nodes` and `links`) by
    * grabbing the rootNode from `this.state.data[0]`.
@@ -289,6 +307,7 @@ export default class Tree extends React.Component {
                 name={nodeData.name}
                 attributes={nodeData.attributes}
                 onClick={this.handleNodeToggle}
+                onMouseOver={this.handleOnMouseOverCb}
                 textLayout={textLayout}
                 circleRadius={circleRadius}
                 subscriptions={subscriptions}
@@ -310,6 +329,7 @@ Tree.defaultProps = {
     },
   },
   onClick: undefined,
+  onMouseOver: undefined,
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
@@ -338,6 +358,7 @@ Tree.propTypes = {
     shapeProps: PropTypes.object,
   }),
   onClick: PropTypes.func,
+  onMouseOver: PropTypes.func,
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   translate: PropTypes.shape({
     x: PropTypes.number,

src/Tree/index.js

@@ -165,7 +165,7 @@ describe('<Tree />', () => {
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('calls the onClick callback when `props.collapsible` is false', () => {
+  it('calls the onClick callback even when `props.collapsible` is false', () => {
     const onClickSpy = jest.fn();
     const renderedComponent = mount(
       <Tree data={mockData} collapsible={false} onClick={onClickSpy} />,
@@ -195,4 +195,33 @@ describe('<Tree />', () => {
         .prop('nodeData'),
     );
   });
+
+  it('calls the onMouseOver callback when a node is hovered over', () => {
+    const onMouseOverSpy = jest.fn();
+    const renderedComponent = mount(<Tree data={mockData} onMouseOver={onMouseOverSpy} />);
+
+    renderedComponent
+      .find(Node)
+      .first()
+      .simulate('mouseover');
+
+    expect(onMouseOverSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("clones the hovered node's data & passes it to the onMouseOver callback if defined", () => {
+    const onMouseOverSpy = jest.fn();
+    const renderedComponent = mount(<Tree data={mockData} onMouseOver={onMouseOverSpy} />);
+
+    renderedComponent
+      .find(Node)
+      .first()
+      .simulate('mouseover');
+
+    expect(onMouseOverSpy).toHaveBeenCalledWith(
+      renderedComponent
+        .find(Node)
+        .first()
+        .prop('nodeData'),
+    );
+  });
 });