Simplify transitions API by only exposing transitionDuration

Author: bkrem

src/Link/index.js

@@ -5,6 +5,15 @@ import './style.css';
 
 export default class Link extends React.PureComponent {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      initialStyle: {
+        opacity: 0,
+      },
+    };
+  }
+
   componentDidMount() {
     this.applyOpacity(1);
   }
@@ -14,16 +23,13 @@ export default class Link extends React.PureComponent {
   }
 
   applyOpacity(opacity, done = () => {}) {
-    const { enabled, duration } = this.props.transitions;
-    if (enabled) {
-      select(this.link)
-      .transition()
-      .duration(duration)
-      .style('opacity', opacity)
-      .each('end', done);
-    } else {
-      done();
-    }
+    const { transitionDuration } = this.props;
+
+    select(this.link)
+    .transition()
+    .duration(transitionDuration)
+    .style('opacity', opacity)
+    .each('end', done);
   }
 
   diagonalPath(linkData, orientation) {
@@ -59,6 +65,7 @@ export default class Link extends React.PureComponent {
     return (
       <path
         ref={(l) => { this.link = l; }}
+        style={this.state.initialStyle}
         className="linkBase"
         d={this.expandPath()}
       />
@@ -76,5 +83,5 @@ Link.propTypes = {
     'diagonal',
     'elbow',
   ]).isRequired,
-  transitions: PropTypes.object.isRequired,
+  transitionDuration: PropTypes.number.isRequired,
 };

src/Node/index.js

@@ -47,17 +47,14 @@ export default class Node extends React.Component {
   }
 
   applyTransform(transform, opacity = 1, done = () => {}) {
-    const { enabled, duration } = this.props.transitions;
-    if (enabled) {
-      select(this.node)
-      .transition()
-      .duration(duration)
-      .attr('transform', transform)
-      .style('opacity', opacity)
-      .each('end', done);
-    } else {
-      done();
-    }
+    const { transitionDuration } = this.props;
+
+    select(this.node)
+    .transition()
+    .duration(transitionDuration)
+    .attr('transform', transform)
+    .style('opacity', opacity)
+    .each('end', done);
   }
 
   handleClick() {
@@ -71,13 +68,12 @@ export default class Node extends React.Component {
     const transform = this.setTransformOrientation(originX, originY);
 
     this.applyTransform(transform, 0, done);
-    // this.applyOpacity(0, done);
   }
 
   render() {
-    const { nodeData, transitions } = this.props;
+    const { nodeData, transitionDuration } = this.props;
 
-    const transform = transitions.enabled && this.state.transform ?
+    const transform = transitionDuration && transitionDuration > 0 ?
       this.state.transform :
       this.setTransformOrientation(nodeData.x, nodeData.y);
 
@@ -144,7 +140,7 @@ Node.propTypes = {
     'horizontal',
     'vertical',
   ]).isRequired,
-  transitions: PropTypes.object.isRequired,
+  transitionDuration: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
   depthFactor: PropTypes.number,
   primaryLabel: PropTypes.string,

src/Tree/index.js

@@ -210,7 +210,7 @@ export default class Tree extends React.Component {
   }
 
   render() {
-    const { orientation, translate, pathFunc, depthFactor, transitions } = this.props;
+    const { orientation, translate, pathFunc, depthFactor, transitionDuration } = this.props;
     const { nodes, links } = this.generateTree();
 
     return (
@@ -225,7 +225,7 @@ export default class Tree extends React.Component {
                 key={nodeData.id}
                 orientation={orientation}
                 depthFactor={depthFactor}
-                transitions={transitions}
+                transitionDuration={transitionDuration}
                 textAnchor="start"
                 nodeData={nodeData}
                 primaryLabel={nodeData.name}
@@ -240,7 +240,7 @@ export default class Tree extends React.Component {
                 orientation={orientation}
                 pathFunc={pathFunc}
                 linkData={linkData}
-                transitions={transitions}
+                transitionDuration={transitionDuration}
               />
             )}
           </TransitionGroup>
@@ -254,10 +254,7 @@ Tree.defaultProps = {
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
-  transitions: {
-    enabled: false,
-    duration: 500,
-  },
+  transitionDuration: 500,
   depthFactor: undefined,
   collapsible: true,
   initialDepth: undefined,
@@ -279,10 +276,7 @@ Tree.propTypes = {
     'diagonal',
     'elbow',
   ]),
-  transitions: PropTypes.shape({
-    enabled: PropTypes.bool.isRequired,
-    duration: PropTypes.number,
-  }),
+  transitionDuration: PropTypes.number,
   depthFactor: PropTypes.number,
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,