fix: adds centeringTransitionDuration prop (#385)

Author: bkrem

demo/src/App.js

@@ -82,6 +82,7 @@ class App extends Component {
       totalNodeCount: countNodes(0, Array.isArray(orgChartJson) ? orgChartJson[0] : orgChartJson),
       orientation: 'horizontal',
       dimensions: undefined,
+      centeringTransitionDuration: 800,
       translateX: 200,
       translateY: 300,
       collapsible: true,
@@ -623,6 +624,18 @@ class App extends Component {
                   onChange={this.handleChange}
                 />
               </div>
+              <div className="prop-container">
+                <label className="prop" htmlFor="centeringTransitionDuration">
+                  Centering Transition Duration
+                </label>
+                <input
+                  className="form-control"
+                  name="centeringTransitionDuration"
+                  type="number"
+                  value={this.state.centeringTransitionDuration}
+                  onChange={this.handleChange}
+                />
+              </div>
             </div>
           </div>
 
@@ -643,6 +656,7 @@ class App extends Component {
                 branchNodeClassName="demo-node"
                 orientation={this.state.orientation}
                 dimensions={this.state.dimensions}
+                centeringTransitionDuration={this.state.centeringTransitionDuration}
                 translate={{ x: this.state.translateX, y: this.state.translateY }}
                 pathFunc={this.state.pathFunc}
                 collapsible={this.state.collapsible}

src/Tree/index.tsx

@@ -52,6 +52,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     enableLegacyTransitions: false,
     hasInteractiveNodes: false,
     dimensions: undefined,
+    centeringTransitionDuration: 800,
   };
 
   state: TreeState = {
@@ -391,7 +392,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
    * Link: http://bl.ocks.org/robschmuecker/7880033
    */
   centerNode = (hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>) => {
-    const { dimensions, orientation, zoom } = this.props;
+    const { dimensions, orientation, zoom, centeringTransitionDuration } = this.props;
     if (dimensions) {
       const g = select(`.${this.gInstanceRef}`);
       const svg = select(`.${this.svgInstanceRef}`);
@@ -410,7 +411,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
       }
       //@ts-ignore
       g.transition()
-        .duration(800)
+        .duration(centeringTransitionDuration)
         .attr('transform', 'translate(' + x + ',' + y + ')scale(' + scale + ')');
       // Sets the viewport to the new center so that it does not jump back to original
       // coordinates when dragged/zoomed

src/Tree/types.ts

@@ -133,6 +133,13 @@ export interface TreeProps {
     height: number;
   };
 
+  /**
+   * Sets the time (in milliseconds) for the transition to center a node once clicked.
+   *
+   * {@link Tree.defaultProps.centeringTransitionDuration | Default value}
+   */
+  centeringTransitionDuration?: number;
+
   /**
    * The draw function (or `d`) used to render `path`/`link` elements. Accepts a predefined
    * `PathFunctionOption` or a user-defined `PathFunction`.