Merge branch 'develop'

Author: bkrem

.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,

.travis.yml

@@ -17,6 +17,6 @@ notifications:
 
 after_success: 'npm run coveralls'
 
-cache:
-  directories:
-    - node_modules
+#cache:
+  #  directories:
+    #    - node_modules

README.md

@@ -0,0 +1,6 @@
+// eslint-disable-next-line
+const raf = global.requestAnimationFrame = cb => {
+  setTimeout(cb, 0)
+}
+
+export default raf

jest/polyfills/raf.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import raf from './polyfills/raf'
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });

jest/setup.js

@@ -8,7 +8,7 @@
     "precommit": "lint-staged",
     "build": "yarn clean:lib && webpack --progress --colors --env build",
     "dev": "yarn clean:lib && webpack --progress --colors --watch --env dev",
-    "lint": "eslint .",
+    "lint": "eslint src/**/*.js",
     "test": "yarn lint && jest --coverage --verbose",
     "test:clean": "rimraf ./coverage",
     "test:watch": "jest --watchAll",
@@ -46,6 +46,7 @@
         "lines": 94
       }
     },
+    "setupTestFrameworkScriptFile": "<rootDir>/jest/setup.js",
     "moduleNameMapper": {
       ".*\\.(css|less|styl|scss|sass)$": "<rootDir>/jest/mocks/cssModule.js",
       ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/mocks/image.js"
@@ -59,6 +60,9 @@
     "react-transition-group": "^1.1.3",
     "uuid": "^3.0.1"
   },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0"
+  },
   "devDependencies": {
     "babel-cli": "6.24.1",
     "babel-core": "6.24.1",
@@ -71,7 +75,8 @@
     "babel-preset-stage-0": "^6.5.0",
     "coveralls": "^2.13.1",
     "css-loader": "^0.28.1",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-prettier": "^2.5.0",
@@ -86,10 +91,10 @@
     "np": "^2.16.0",
     "postcss-loader": "^1.3.3",
     "prettier": "^1.6.1",
-    "react": "^15.6.0",
+    "react": "^16.1.1",
     "react-docgen": "^2.16.0",
-    "react-dom": "^15.6.0",
-    "react-test-renderer": "^15.5.4",
+    "react-dom": "^16.1.1",
+    "react-test-renderer": "^16.1.1",
     "regenerator-runtime": "^0.10.5",
     "rimraf": "^2.6.1",
     "style-loader": "^0.17.0",

package.json

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

src/Node/index.js

@@ -32,6 +32,8 @@ describe('<Node />', () => {
     orientation: 'horizontal',
     transitionDuration: 500,
     onClick: () => {},
+    onMouseOver: () => {},
+    onMouseOut: () => {},
     textLayout: {
       textAnchor: 'start',
       x: 10,
@@ -127,20 +129,33 @@ 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('handles onMouseOut events and passes its nodeId to onMouseOut handler', () => {
+    const onMouseOutSpy = jest.fn();
+    const renderedComponent = shallow(<Node {...mockProps} onMouseOut={onMouseOutSpy} />);
+
+    renderedComponent.simulate('mouseout');
+    expect(onMouseOutSpy).toHaveBeenCalledTimes(1);
+    expect(onMouseOutSpy).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,8 @@ 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);
+    this.handleOnMouseOutCb = this.handleOnMouseOutCb.bind(this);
   }
 
   componentDidMount() {
@@ -203,6 +205,40 @@ 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));
+    }
+  }
+
+  /**
+   * handleOnMouseOutCb - Handles the user-defined `onMouseOut` function
+   * 
+   * @param {string} nodeId 
+   * 
+   * @return {void}
+   */
+  handleOnMouseOutCb(nodeId) {
+    const { onMouseOut } = this.props;
+    if (onMouseOut && typeof onMouseOut === 'function') {
+      const data = clone(this.state.data);
+      const matches = this.findNodesById(nodeId, data, []);
+      const targetNode = matches[0];
+      onMouseOut(clone(targetNode));
+    }
+  }
+
   /**
    * generateTree - Generates tree elements (`nodes` and `links`) by
    * grabbing the rootNode from `this.state.data[0]`.
@@ -218,7 +254,7 @@ export default class Tree extends React.Component {
       .tree()
       .nodeSize(orientation === 'horizontal' ? [nodeSize.y, nodeSize.x] : [nodeSize.x, nodeSize.y])
       .separation(
-        (a, b) => (deepEqual(a.parent, b.parent) ? separation.siblings : separation.nonSiblings),
+        (a, b) => (a.parent.id === b.parent.id ? separation.siblings : separation.nonSiblings),
       )
       .children(d => (d._collapsed ? null : d._children));
 
@@ -289,6 +325,8 @@ export default class Tree extends React.Component {
                 name={nodeData.name}
                 attributes={nodeData.attributes}
                 onClick={this.handleNodeToggle}
+                onMouseOver={this.handleOnMouseOverCb}
+                onMouseOut={this.handleOnMouseOutCb}
                 textLayout={textLayout}
                 circleRadius={circleRadius}
                 subscriptions={subscriptions}
@@ -310,6 +348,8 @@ Tree.defaultProps = {
     },
   },
   onClick: undefined,
+  onMouseOver: undefined,
+  onMouseOut: undefined,
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
@@ -338,6 +378,8 @@ Tree.propTypes = {
     shapeProps: PropTypes.object,
   }),
   onClick: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   translate: PropTypes.shape({
     x: PropTypes.number,