Add dragging and size changing events

zesik · Oct 5, 2017 · 9e99019 · 9e99019
1 parent 2e1ec2e
commit 9e99019
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/src/components/SplitterLayout.jsx b/src/components/SplitterLayout.jsx
@@ -55,6 +55,21 @@ class SplitterLayout extends React.Component {
     this.setState({ secondaryPaneSize });
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange) {
+      this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize);
+    }
+    if (prevState.resizing !== this.state.resizing) {
+      if (this.state.resizing) {
+        if (this.props.onDragStart) {
+          this.props.onDragStart();
+        }
+      } else if (this.props.onDragEnd) {
+        this.props.onDragEnd();
+      }
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
     document.removeEventListener('mouseup', this.handleMouseUp);
@@ -197,6 +212,9 @@ SplitterLayout.propTypes = {
   primaryMinSize: PropTypes.number,
   secondaryInitialSize: PropTypes.number,
   secondaryMinSize: PropTypes.number,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  onSecondaryPaneSizeChange: PropTypes.func,
   children: PropTypes.arrayOf(PropTypes.node)
 };
 
@@ -208,6 +226,9 @@ SplitterLayout.defaultProps = {
   primaryMinSize: 0,
   secondaryInitialSize: undefined,
   secondaryMinSize: 0,
+  onDragStart: null,
+  onDragEnd: null,
+  onSecondaryPaneSizeChange: null,
   children: []
 };
 

diff --git a/test/SplitterLayout.spec.jsx b/test/SplitterLayout.spec.jsx
@@ -437,6 +437,34 @@ describe('SplitterLayout', () => {
       window.getSelection = null;
     });
 
+    it('should trigger drag events when dragging starts and finishes', () => {
+      const startFn = jest.fn();
+      const endFn = jest.fn();
+      const component = renderIntoDocument(2, { onDragStart: startFn, onDragEnd: endFn });
+      expect(startFn).not.toHaveBeenCalled();
+      expect(endFn).not.toHaveBeenCalled();
+      ReactTestUtils.Simulate.mouseDown(component.splitter);
+      expect(startFn).toHaveBeenCalledTimes(1);
+      expect(endFn).not.toHaveBeenCalled();
+      document.simulateMouseUp();
+      expect(startFn).toHaveBeenCalledTimes(1);
+      expect(endFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger size change events when secondary pane size has been changed', () => {
+      const fn = jest.fn();
+      const component = renderIntoDocument(2, { secondaryInitialSize: 20, onSecondaryPaneSizeChange: fn });
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith(20);
+      const rectFn = component.container.getBoundingClientRect;
+      component.container.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 300 });
+      ReactTestUtils.Simulate.mouseDown(component.splitter);
+      document.simulateMouseMove(25, 30);
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(fn).toHaveBeenCalledWith(175);
+      component.container.getBoundingClientRect = rectFn;
+    });
+
     it('should initialize horizontal secondary size if requested even when splitter is not rendered', () => {
       const component = renderIntoDocument(2, { secondaryInitialSize: 20 });
       expect(component.state.secondaryPaneSize).toBe(20);