Sets defaultProps for transitions, stabilises unmounting

Author: bkrem

src/Node/index.js

@@ -42,12 +42,17 @@ export default class Node extends React.Component {
     return transform;
   }
 
-  applyTransform(transform, done) {
-    select(this.node)
-    .transition()
-    .duration(500)
-    .attr('transform', transform)
-    .each('end', done);
+  applyTransform(transform, done = () => {}) {
+    const { enabled, duration } = this.props.transitions;
+    if (enabled) {
+      select(this.node)
+      .transition()
+      .duration(duration)
+      .attr('transform', transform)
+      .each('end', done);
+    } else {
+      done();
+    }
   }
 
   componentWillLeave(done) {
@@ -64,7 +69,11 @@ export default class Node extends React.Component {
   }
 
   render() {
-    const { nodeData, depthFactor } = this.props;
+    const { nodeData, depthFactor, transitions } = this.props;
+    const transform = transitions.enabled ?
+      this.state.transform :
+      this.setTransformOrientation(nodeData.x, nodeData.y);
+
 
     if (depthFactor) {
       nodeData.y = nodeData.depth * depthFactor;
@@ -74,7 +83,7 @@ export default class Node extends React.Component {
         id={nodeData.id}
         ref={(n) => { this.node = n; }}
         className={nodeData._children ? 'nodeBase' : 'leafNodeBase'}
-        transform={this.state.transform}
+        transform={transform}
         onClick={this.handleClick}
       >
         <text
@@ -111,6 +120,7 @@ export default class Node extends React.Component {
 }
 
 Node.defaultProps = {
+  depthFactor: undefined,
   circleRadius: 10,
   circleStyle: {
     stroke: '#000',
@@ -124,14 +134,15 @@ Node.defaultProps = {
   },
 };
 
-/* eslint-disable*/
+/* eslint-disable */
 Node.propTypes = {
   nodeData: PropTypes.object.isRequired,
   orientation: PropTypes.oneOf([
     'horizontal',
     'vertical',
   ]).isRequired,
-  onClick: PropTypes.func,
+  transitions: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired,
   depthFactor: PropTypes.number,
   primaryLabel: PropTypes.string,
   primaryLabelStyle: PropTypes.object,

src/Tree/index.js

@@ -210,7 +210,7 @@ export default class Tree extends React.Component {
   }
 
   render() {
-    const { orientation, translate, pathFunc, depthFactor } = this.props;
+    const { orientation, translate, pathFunc, depthFactor, transitions } = this.props;
     const { nodes, links } = this.generateTree();
     return (
       <div className="treeContainer">
@@ -224,6 +224,7 @@ export default class Tree extends React.Component {
                 key={nodeData.id}
                 orientation={orientation}
                 depthFactor={depthFactor}
+                transitions={transitions}
                 textAnchor="start"
                 nodeData={nodeData}
                 primaryLabel={nodeData.name}
@@ -251,6 +252,10 @@ Tree.defaultProps = {
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
+  transitions: {
+    enabled: false,
+    duration: 500,
+  },
   depthFactor: undefined,
   collapsible: true,
   initialDepth: undefined,
@@ -272,6 +277,10 @@ Tree.propTypes = {
     'diagonal',
     'elbow',
   ]),
+  transitions: PropTypes.shape({
+    enabled: PropTypes.bool.isRequired,
+    duration: PropTypes.number,
+  }),
   depthFactor: PropTypes.number,
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,