fix(compat): re-establish React 15 support

refactor(compat): Node -  move from componentWillUpdate to componentDidUpdate

refactor(compat): removes useless state in NodeWrapper

* refactor to FunctionComponent

refactor(compat): Tree - migrate to React 16 lifecycle methods

* polyfill React 16 lifecycle methods for React 15 support

chore: remove unneeded parallel lockfile

Author: bkrem

package-lock.json

@@ -65,6 +65,7 @@
     "d3": "3.5.17",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.5.10",
+    "react-lifecycles-compat": "^3.0.4",
     "react-transition-group": "^1.1.3",
     "uuid": "^3.0.1"
   },

package.json

@@ -15,16 +15,11 @@ export default class Node extends React.Component {
   };
 
   componentDidMount() {
-    const { nodeData, orientation, transitionDuration } = this.props;
-    const transform = this.setTransform(nodeData, orientation);
-
-    this.applyTransform(transform, transitionDuration);
+    this.commitTransform();
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillUpdate(nextProps) {
-    const transform = this.setTransform(nextProps.nodeData, nextProps.orientation);
-    this.applyTransform(transform, nextProps.transitionDuration);
+  componentDidUpdate() {
+    this.commitTransform();
   }
 
   shouldComponentUpdate(nextProps) {
@@ -66,6 +61,13 @@ export default class Node extends React.Component {
     }
   }
 
+  commitTransform() {
+    const { nodeData, orientation, transitionDuration } = this.props;
+    const transform = this.setTransform(nodeData, orientation);
+
+    this.applyTransform(transform, transitionDuration);
+  }
+
   renderNodeElement = nodeStyle => {
     const { circleRadius, nodeSvgShape } = this.props;
     /* TODO: DEPRECATE <circle /> */

src/Node/index.js

@@ -2,40 +2,21 @@ import React from 'react';
 import T from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 
-export default class NodeWrapper extends React.Component {
-  state = {
-    enableTransitions: this.props.transitionDuration > 0,
-  };
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.transitionDuration !== this.props.transitionDuration) {
-      this.setState({
-        enableTransitions: nextProps.transitionDuration > 0,
-      });
-    }
-  }
-
-  render() {
-    if (this.state.enableTransitions) {
-      return (
-        <TransitionGroup
-          component={this.props.component}
-          className={this.props.className}
-          transform={this.props.transform}
-        >
-          {this.props.children}
-        </TransitionGroup>
-      );
-    }
-
-    return (
-      <g className={this.props.className} transform={this.props.transform}>
-        {this.props.children}
-      </g>
-    );
-  }
-}
+// eslint-disable-next-line
+const NodeWrapper = props =>
+  props.transitionDuration > 0 ? (
+    <TransitionGroup
+      component={props.component}
+      className={props.className}
+      transform={props.transform}
+    >
+      {props.children}
+    </TransitionGroup>
+  ) : (
+    <g className={props.className} transform={props.transform}>
+      {props.children}
+    </g>
+  );
 
 NodeWrapper.defaultProps = {
   component: 'g',
@@ -48,3 +29,5 @@ NodeWrapper.propTypes = {
   transform: T.string.isRequired,
   children: T.array.isRequired,
 };
+
+export default NodeWrapper;

src/Tree/NodeWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
 import T from 'prop-types';
 import { layout, select, behavior, event } from 'd3';
 import clone from 'clone';
@@ -10,9 +11,11 @@ import Node from '../Node';
 import Link from '../Link';
 import './style.css';
 
-export default class Tree extends React.Component {
+class Tree extends React.Component {
   state = {
-    data: this.assignInternalProperties(clone(this.props.data)),
+    // eslint-disable-next-line react/no-unused-state
+    dataRef: this.props.data,
+    data: Tree.assignInternalProperties(clone(this.props.data)),
     rd3tSvgClassName: `_${uuid.v4()}`,
     rd3tGClassName: `_${uuid.v4()}`,
   };
@@ -27,6 +30,19 @@ export default class Tree extends React.Component {
     },
   };
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    // Clone new data & assign internal properties if `data` object reference changed.
+    if (nextProps.data !== prevState.dataRef) {
+      return {
+        // eslint-disable-next-line react/no-unused-state
+        dataRef: nextProps.data,
+        data: Tree.assignInternalProperties(clone(nextProps.data)),
+      };
+    }
+
+    return null;
+  }
+
   constructor(props) {
     super(props);
     this.internalState.d3 = Tree.calculateD3Geometry(this.props);
@@ -38,8 +54,14 @@ export default class Tree extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // Rebind zoom listeners to new DOM nodes in case NodeWrapper switched <TransitionGroup> <-> <g>
-    if (prevProps.transitionDuration !== this.props.transitionDuration) {
+    // If zoom-specific props change -> rebind listener with new values
+    // Or: rebind zoom listeners to new DOM nodes in case NodeWrapper switched <TransitionGroup> <-> <g>
+    if (
+      !deepEqual(this.props.translate, prevProps.translate) ||
+      !deepEqual(this.props.scaleExtent, prevProps.scaleExtent) ||
+      this.props.zoom !== prevProps.zoom ||
+      this.props.transitionDuration !== prevProps.transitionDuration
+    ) {
       this.bindZoomListener(this.props);
     }
 
@@ -50,31 +72,11 @@ export default class Tree extends React.Component {
         translate: this.internalState.d3.translate,
       });
 
+      this.internalState.d3 = Tree.calculateD3Geometry(this.props);
       this.internalState.targetNode = null;
     }
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Clone new data & assign internal properties
-    if (this.props.data !== nextProps.data) {
-      this.setState({
-        data: this.assignInternalProperties(clone(nextProps.data)),
-      });
-    }
-
-    this.internalState.d3 = Tree.calculateD3Geometry(nextProps);
-
-    // If zoom-specific props change -> rebind listener with new values
-    if (
-      !deepEqual(this.props.translate, nextProps.translate) ||
-      !deepEqual(this.props.scaleExtent, nextProps.scaleExtent) ||
-      this.props.zoom !== nextProps.zoom
-    ) {
-      this.bindZoomListener(nextProps);
-    }
-  }
-
   /**
    * setInitialTreeDepth - Description
    *
@@ -134,11 +136,12 @@ export default class Tree extends React.Component {
    * `data` set that are required for tree manipulation and returns
    * a new `data` array.
    *
+   * @static
    * @param {array} data Hierarchical tree data
    *
    * @return {array} `data` array with internal properties added
    */
-  assignInternalProperties(data) {
+  static assignInternalProperties(data) {
     // Wrap the root node into an array for recursive transformations if it wasn't in one already.
     const d = Array.isArray(data) ? data : [data];
     return d.map(node => {
@@ -149,7 +152,7 @@ export default class Tree extends React.Component {
       }
       // If there are children, recursively assign properties to them too
       if (node.children && node.children.length > 0) {
-        node.children = this.assignInternalProperties(node.children);
+        node.children = Tree.assignInternalProperties(node.children);
         node._children = node.children;
       }
       return node;
@@ -500,7 +503,6 @@ export default class Tree extends React.Component {
     } = this.props;
     const { translate, scale } = this.internalState.d3;
     const subscriptions = { ...nodeSize, ...separation, depthFactor, initialDepth };
-
     return (
       <div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
         <svg className={rd3tSvgClassName} width="100%" height="100%">
@@ -640,3 +642,8 @@ Tree.propTypes = {
     links: T.object,
   }),
 };
+
+// Polyfill React 16 lifecycle methods for compat with React 15.
+polyfill(Tree);
+
+export default Tree;

src/Tree/index.js

@@ -1,16 +1,11 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { TransitionGroup } from 'react-transition-group';
 
 import NodeWrapper from '../NodeWrapper';
 
 describe('<NodeWrapper />', () => {
-  jest.spyOn(NodeWrapper.prototype, 'setState');
-
-  // Clear method spies on prototype after each test
-  afterEach(() => jest.clearAllMocks());
-
-  it('Renders a <g> when transitions are disabled', () => {
+  it('renders a <g> when transitions are disabled', () => {
     const fixture = {
       transform: 't',
       className: 'cls',
@@ -22,7 +17,7 @@ describe('<NodeWrapper />', () => {
     expect(renderedComponent.find('g').prop('className')).toContain(fixture.className);
   });
 
-  it('Renders a <TransitionGroup> when transitions are enabled', () => {
+  it('renders a <TransitionGroup> when transitions are enabled', () => {
     const fixture = {
       component: 'g',
       transform: 't',
@@ -35,21 +30,4 @@ describe('<NodeWrapper />', () => {
     expect(renderedComponent.find(TransitionGroup).prop('className')).toContain(fixture.className);
     expect(renderedComponent.find(TransitionGroup).prop('component')).toContain(fixture.component);
   });
-
-  it('does not do useless state updates unless transitionDuration has changed', () => {
-    const fixture = {
-      transform: 't',
-      className: 'cls',
-      transitionDuration: 1,
-    };
-
-    const renderedComponent = mount(<NodeWrapper {...fixture}>{[]}</NodeWrapper>);
-    renderedComponent.setProps(fixture);
-    expect(renderedComponent.instance().setState).toHaveBeenCalledTimes(0);
-    renderedComponent.setProps({
-      ...fixture,
-      transitionDuration: 2,
-    });
-    expect(renderedComponent.instance().setState).toHaveBeenCalledTimes(1);
-  });
 });

src/Tree/tests/NodeWrapper.test.js

@@ -10,7 +10,7 @@ import { mockData, mockData2, mockData3, mockData4 } from './mockData';
 
 describe('<Tree />', () => {
   jest.spyOn(Tree.prototype, 'generateTree');
-  jest.spyOn(Tree.prototype, 'assignInternalProperties');
+  jest.spyOn(Tree, 'assignInternalProperties');
   jest.spyOn(Tree, 'collapseNode');
   jest.spyOn(Tree, 'expandNode');
   jest.spyOn(Tree.prototype, 'setInitialTreeDepth');
@@ -86,13 +86,9 @@ describe('<Tree />', () => {
       data: mockData2,
     };
     const renderedComponent = mount(<Tree data={mockData} />);
-    expect(renderedComponent.instance().assignInternalProperties).toHaveBeenCalledTimes(
-      mockDataDepth,
-    );
+    expect(Tree.assignInternalProperties).toHaveBeenCalledTimes(mockDataDepth);
     renderedComponent.setProps(nextProps);
-    expect(renderedComponent.instance().assignInternalProperties).toHaveBeenCalledTimes(
-      mockDataDepth + mockData2Depth,
-    );
+    expect(Tree.assignInternalProperties).toHaveBeenCalledTimes(mockDataDepth + mockData2Depth);
   });
 
   it("reassigns internal props if `props.data`'s array reference changes", () => {
@@ -102,13 +98,9 @@ describe('<Tree />', () => {
     const nextData = [...mockData];
     nextData[0].children.push({ name: `${nextData[0].children.length}` });
     const renderedComponent = mount(<Tree data={mockData} />);
-    expect(renderedComponent.instance().assignInternalProperties).toHaveBeenCalledTimes(
-      mockDataDepth,
-    );
+    expect(Tree.assignInternalProperties).toHaveBeenCalledTimes(mockDataDepth);
     renderedComponent.setProps({ data: nextData });
-    expect(renderedComponent.instance().assignInternalProperties).toHaveBeenCalledTimes(
-      mockDataDepth + nextDataDepth,
-    );
+    expect(Tree.assignInternalProperties).toHaveBeenCalledTimes(mockDataDepth + nextDataDepth);
   });
 
   describe('translate', () => {

src/Tree/tests/index.test.js

@@ -1,4 +1,4 @@
-/* global __dirname, require, module*/
+/* global __dirname, require, module */
 
 const webpack = require('webpack');
 const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
@@ -33,6 +33,7 @@ const config = {
     'd3',
     'react',
     'react-transition-group',
+    'react-lifecycles-compat',
     'prop-types',
     'uuid',
     'deep-equal',

webpack.config.js

@@ -5564,6 +5564,11 @@ react-is@^16.6.1, react-is@^16.6.3:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-test-renderer@^16.0.0-0:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"