Fixes possible orphan nodes when toggling (#8)

Author: bkrem

src/Tree/index.js

@@ -19,6 +19,7 @@ export default class Tree extends React.Component {
     this.internalState = {
       initialRender: true,
       targetNode: null,
+      isTransitioning: false,
       d3: {
         scale: this.props.zoom,
         translate: this.props.translate,
@@ -226,9 +227,15 @@ export default class Tree extends React.Component {
     const matches = this.findNodesById(nodeId, data, []);
     const targetNode = matches[0];
 
-    if (this.props.collapsible) {
+    if (this.props.collapsible && !this.state.isTransitioning) {
       targetNode._collapsed ? this.expandNode(targetNode) : this.collapseNode(targetNode);
-      this.setState({ data }, () => this.handleOnClickCb(targetNode, evt));
+      // Lock node toggling while transition takes place
+      this.setState({ data, isTransitioning: true }, () => this.handleOnClickCb(targetNode, evt));
+      // Await transitionDuration + 10 ms before unlocking node toggling again
+      setTimeout(
+        () => this.setState({ isTransitioning: false }),
+        this.props.transitionDuration + 10,
+      );
       this.internalState.targetNode = targetNode;
     } else {
       this.handleOnClickCb(targetNode, evt);

src/Tree/tests/index.test.js

@@ -165,11 +165,15 @@ describe('<Tree />', () => {
     });
 
     it("expands a node's children when it is clicked in a collapsed state", () => {
+      jest.useFakeTimers();
       const renderedComponent = mount(<Tree data={mockData} />);
       renderedComponent
         .find(Node)
         .first()
         .simulate('click'); // collapse
+
+      jest.runAllTimers();
+
       renderedComponent
         .find(Node)
         .first()
@@ -190,6 +194,43 @@ describe('<Tree />', () => {
       expect(Tree.prototype.handleNodeToggle).toHaveBeenCalledTimes(1);
       expect(Tree.prototype.collapseNode).toHaveBeenCalledTimes(0);
     });
+
+    it('does not toggle any nodes again until `transitionDuration` has completed', () => {
+      const renderedComponent = mount(<Tree data={mockData} />);
+      renderedComponent
+        .find(Node)
+        .first()
+        .simulate('click');
+
+      renderedComponent
+        .find(Node)
+        .first()
+        .simulate('click');
+
+      expect(Tree.prototype.handleNodeToggle).toHaveBeenCalledTimes(2);
+      expect(Tree.prototype.collapseNode).toHaveBeenCalled();
+      expect(Tree.prototype.expandNode).not.toHaveBeenCalled();
+    });
+
+    it('allows toggling nodes again after `transitionDuration` + 10ms has expired', () => {
+      jest.useFakeTimers();
+      const renderedComponent = mount(<Tree data={mockData} />);
+      renderedComponent
+        .find(Node)
+        .first()
+        .simulate('click');
+
+      jest.runAllTimers();
+
+      renderedComponent
+        .find(Node)
+        .first()
+        .simulate('click');
+
+      expect(Tree.prototype.handleNodeToggle).toHaveBeenCalledTimes(2);
+      expect(Tree.prototype.collapseNode).toHaveBeenCalled();
+      expect(Tree.prototype.expandNode).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('initialDepth', () => {
@@ -384,12 +425,8 @@ describe('<Tree />', () => {
         .find(Node)
         .first()
         .simulate('click'); // collapse
-      renderedComponent
-        .find(Node)
-        .first()
-        .simulate('click'); // re-expand
 
-      expect(onUpdateSpy).toHaveBeenCalledTimes(2);
+      expect(onUpdateSpy).toHaveBeenCalledTimes(1);
       expect(onUpdateSpy).toHaveBeenCalledWith({
         node: expect.any(Object),
         zoom: 1,