Merge branch 'hotfix/41-prevent-render-blocking'

Author: bkrem

.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
     "react/jsx-no-target-blank": 0,
     "react/require-extension": 0,
     "react/self-closing-comp": 0,
+    "react/sort-comp": 0,
     "require-jsdoc": "warn"
   },
 };

package.json

@@ -12,6 +12,7 @@
     "test": "yarn lint && jest --coverage --verbose",
     "test:clean": "rimraf ./coverage",
     "test:watch": "jest --watchAll",
+    "test:cov": "jest --coverage --verbose",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "show:cov": "open coverage/lcov-report/index.html",
     "docs:react": "react-docgen src -e src/**/*.test.js$|scripts/buildDocs.sh",
@@ -39,10 +40,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 95,
+        "statements": 94,
         "branches": 84,
         "functions": 90,
-        "lines": 95
+        "lines": 94
       }
     },
     "moduleNameMapper": {

src/Link/index.js

@@ -15,21 +15,24 @@ export default class Link extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.applyOpacity(1);
+    this.applyOpacity(1, this.props.transitionDuration);
   }
 
   componentWillLeave(done) {
-    this.applyOpacity(0, done);
+    this.applyOpacity(0, this.props.transitionDuration, done);
   }
 
-  applyOpacity(opacity, done = () => {}) {
-    const { transitionDuration } = this.props;
-
-    select(this.link)
-      .transition()
-      .duration(transitionDuration)
-      .style('opacity', opacity)
-      .each('end', done);
+  applyOpacity(opacity, transitionDuration, done = () => {}) {
+    if (transitionDuration === 0) {
+      select(this.link).style('opacity', opacity);
+      done();
+    } else {
+      select(this.link)
+        .transition()
+        .duration(transitionDuration)
+        .style('opacity', opacity)
+        .each('end', done);
+    }
   }
 
   diagonalPath(linkData, orientation) {

src/Link/tests/index.test.js

@@ -96,6 +96,7 @@ describe('<Link />', () => {
 
     expect(renderedComponent.instance().applyOpacity).toHaveBeenCalledWith(
       fixture,
+      mockProps.transitionDuration,
     );
   });
 });

src/Node/index.js

@@ -8,12 +8,12 @@ import './style.css';
 export default class Node extends React.Component {
   constructor(props) {
     super(props);
-    const { parent } = props.nodeData;
+    const { nodeData: { parent }, orientation } = props;
     const originX = parent ? parent.x : 0;
     const originY = parent ? parent.y : 0;
 
     this.state = {
-      transform: this.setTransformOrientation(originX, originY),
+      transform: this.setTransformOrientation(originX, originY, orientation),
       initialStyle: {
         opacity: 0,
       },
@@ -23,48 +23,73 @@ export default class Node extends React.Component {
   }
 
   componentDidMount() {
-    const { x, y } = this.props.nodeData;
-    const transform = this.setTransformOrientation(x, y);
+    const { nodeData: { x, y }, orientation, transitionDuration } = this.props;
+    const transform = this.setTransformOrientation(x, y, orientation);
 
-    this.applyTransform(transform);
+    this.applyTransform(transform, transitionDuration);
   }
 
   componentWillUpdate(nextProps) {
-    const transform = this.setTransformOrientation(
-      nextProps.nodeData.x,
-      nextProps.nodeData.y,
+    const shouldTransform = this.shouldNodeTransform(this.props, nextProps);
+    if (shouldTransform) {
+      const transform = this.setTransformOrientation(
+        nextProps.nodeData.x,
+        nextProps.nodeData.y,
+        nextProps.orientation,
+      );
+      this.applyTransform(transform, nextProps.transitionDuration);
+    }
+  }
+
+  shouldNodeTransform(ownProps, nextProps) {
+    return (
+      nextProps.nodeData.x !== ownProps.nodeData.x ||
+      nextProps.nodeData.y !== ownProps.nodeData.y ||
+      nextProps.orientation !== ownProps.orientation
     );
-    this.applyTransform(transform);
   }
 
-  setTransformOrientation(x, y) {
-    return this.props.orientation === 'horizontal'
+  setTransformOrientation(x, y, orientation) {
+    return orientation === 'horizontal'
       ? `translate(${y},${x})`
       : `translate(${x},${y})`;
   }
 
-  applyTransform(transform, opacity = 1, done = () => {}) {
-    const { transitionDuration } = this.props;
-
-    select(this.node)
-      .transition()
-      .duration(transitionDuration)
-      .attr('transform', transform)
-      .style('opacity', opacity)
-      .each('end', done);
+  applyTransform(transform, transitionDuration, opacity = 1, done = () => {}) {
+    if (transitionDuration === 0) {
+      select(this.node)
+        .attr('transform', transform)
+        .style('opacity', opacity);
+      done();
+    } else {
+      select(this.node)
+        .transition()
+        .duration(transitionDuration)
+        .attr('transform', transform)
+        .style('opacity', opacity)
+        .each('end', done);
+    }
   }
 
   handleClick() {
     this.props.onClick(this.props.nodeData.id);
   }
 
   componentWillLeave(done) {
-    const { parent } = this.props.nodeData;
+    const {
+      nodeData: { parent },
+      orientation,
+      transitionDuration,
+    } = this.props;
     const originX = parent ? parent.x : 0;
     const originY = parent ? parent.y : 0;
-    const transform = this.setTransformOrientation(originX, originY);
+    const transform = this.setTransformOrientation(
+      originX,
+      originY,
+      orientation,
+    );
 
-    this.applyTransform(transform, 0, done);
+    this.applyTransform(transform, transitionDuration, 0, done);
   }
 
   render() {

src/Node/tests/index.test.js

@@ -215,11 +215,11 @@ describe('<Node />', () => {
 
     expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(
       fixture,
+      mockProps.transitionDuration,
     );
   });
 
-  it('applies updated transform if either the `x` or `y` prop changes', () => {
-    // jest.spyOn(Node.prototype, 'applyTransform');
+  it('updates its position if `nodeData.x` or `nodeData.y` changes', () => {
     const updatedProps = {
       ...mockProps,
       nodeData: {
@@ -236,15 +236,28 @@ describe('<Node />', () => {
 
     expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(
       initialTransform,
+      mockProps.transitionDuration,
     );
 
     renderedComponent.setProps(updatedProps);
 
     expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(
       updatedTransform,
+      mockProps.transitionDuration,
     );
   });
 
+  it('updates its position if `orientation` changes', () => {
+    const renderedComponent = mount(<Node {...mockProps} />);
+    const nextProps = { ...mockProps, orientation: 'vertical' };
+
+    expect(
+      renderedComponent
+        .instance()
+        .shouldNodeTransform(renderedComponent.props(), nextProps),
+    ).toBe(true);
+  });
+
   it('allows passing SVG shape elements + shapeProps to be used as the node element', () => {
     const fixture = { shape: 'ellipse', shapeProps: { rx: 20, ry: 10 } };
     const props = { ...mockProps, nodeSvgShape: fixture };