danfessler / react-panelgroup Goto Github PK

--- index.js
+++ index.js
@@ -1,28 +1,58 @@
 // @flow
-import React from 'react';
+// @flow-ignore
+import React, { MouseEvent } from 'react';
 import ReactDOM from 'react-dom';

-/**
- * From https://github.com/DanFessler/react-panelgroup
- */
-var PanelGroup = React.createClass({
-
-  // Default props
-  getDefaultProps: function() {
-    return {
-      spacing: 1,
-      direction: "row",
-      panelWidths: []
-    };
-  },
+type PanelProp =
+  { snap?: number[],
+    size: number,
+    resize?: 'stretch' | 'dynamic',
+    minSize: number
+  }
+
+type PanelT =
+  { snap: number[],
+    size: number,
+    resize: 'stretch' | 'dynamic',
+    minSize: number
+  }
+
+type PanelGroupState =
+  { panels: PanelT[] }
+
+type Direction =
+  | 'row'
+  | 'column'
+
+type Delta =
+  { x: number,
+    y: number }
+
+type PanelGroupProps =
+  { panelWidths: PanelProp[],
+    children?: any, //React.ReactChildren
+    borderColor?: string,
+    spacing: number,
+    direction: Direction,
+    onUpdate?: PanelT[] => void,
+    onWindowResize?: (/* panel id */ number, Delta, ?(void => void)) => void,
+    panelColor?: string,
+    showHandles: boolean
+  }
+
+class PanelGroup extends React.Component {
+  state: PanelGroupState
+  props: PanelGroupProps
+
+  static defaultProps = {
+    spacing: 1,
+    direction: "row",
+    panelWidths: [],
+    showHandles: false
+  }

   // Load initial panel configuration from props
-  getInitialState: function() {
-    return this.loadPanels(this.props)
-  },
+  constructor () {
+    super(...arguments);
+
+    this.state = this.loadPanels(this.props)
+  }

   // reload panel configuration if props update
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps (nextProps: PanelGroupProps) {

     var nextPanels = nextProps.panelWidths;

@@ -49,13 +79,15 @@ var PanelGroup = React.createClass({

     }

-  },
+  }

-  // load provided props into state
-  loadPanels: function(props) {
+  /**
+   * Load provided props into state
+   */
+  loadPanels = (props: PanelGroupProps) => {
     var panels = []

-    if (props.children) {
+    if (props.children != null) {

       // Default values if none were provided
       var defaultSize = 256;
@@ -69,15 +101,16 @@ var PanelGroup = React.createClass({

         if (i < props.panelWidths.length && props.panelWidths[i]) {
           var widthObj = {
-            size:    props.panelWidths[i].size !== null ? props.panelWidths[i].size : defaultSize,
-            minSize: props.panelWidths[i].minSize !== null ? props.panelWidths[i].minSize : defaultMinSize,
+            size:    props.panelWidths[i].size != null ? props.panelWidths[i].size : defaultSize,
+            minSize: props.panelWidths[i].minSize != null ? props.panelWidths[i].minSize : defaultMinSize,
             resize:  props.panelWidths[i].resize? props.panelWidths[i].resize :
                      props.panelWidths[i].size? "dynamic" : defaultResize,
+            snap:    props.panelWidths[i].snap != null ? props.panelWidths[i].snap : []
           }
           panels.push(widthObj);
         } else {
           // default values if no props are given
-          panels.push({size: defaultSize, resize: defaultResize, minSize: defaultMinSize})
+          panels.push({size: defaultSize, resize: defaultResize, minSize: defaultMinSize, snap:[]})
         }

         // if none of the panels included was stretchy, make the last one stretchy
@@ -86,29 +119,28 @@ var PanelGroup = React.createClass({
       }
     }

-    return {
-      panels: panels
-    }
-  },
+    return { panels }
+  };

   // Pass internal state out if there's a callback for it
   // Useful for saving panel configuration
-  onUpdate: function(panels) {
-    if (this.props.onUpdate) {
-      this.props.onUpdate(panels.slice())
+  onUpdate = (panels: PanelT[]) => {
+    const fn = this.props.onUpdate;
+    if (fn != null) {
+      fn(panels.slice());
     }
-  },
+  };

   // For styling, track which direction to apply sizing to
-  getSizeDirection: function(caps) {
+  getSizeDirection = (caps: boolean = false) => {
     if (caps)
       return this.props.direction === "column" ? "Height" : "Width";
     else
       return this.props.direction === "column" ? "height" : "width";
-  },
+  };

   // Render component
-  render: function() {
+  render () {

     var style = {
       container: {
@@ -144,10 +176,10 @@ var PanelGroup = React.createClass({
         display: "flex",
         overflow: "hidden",
         position: "relative",
+        backgroundColor: '#555555'
       }

       // patch in the background color if it was supplied as a prop
-      // @flow-ignore CSS
       Object.assign(panelStyle, {backgroundColor: this.props.panelColor});

       // give position info to children
@@ -176,22 +208,22 @@ var PanelGroup = React.createClass({
     }

     return <div className="panel-group" style={style.container}>{newChildren}</div>
-  },
+  }

   // Entry point for resizing panels.
   // We clone the panel array and perform operations on it so we can
   // setState after the recursive operations are finished
-  handleResize: function(i, delta) {
+  handleResize = (i: number, delta: Delta) => {
     var tempPanels = this.state.panels.slice();
     var returnDelta = this.resizePanel(i, this.props.direction === "row" ? delta.x : delta.y, tempPanels);
     this.setState({panels: tempPanels});
     this.onUpdate(tempPanels)
     return returnDelta;
-  },
+  };

   // Recursive panel resizing so we can push other panels out of the way
   // if we've exceeded the target panel's extents
-  resizePanel: function(panelIndex, delta, panels) {
+  resizePanel = (panelIndex: number, delta: number, panels: PanelT[]) => {

     var minsize; var maxsize;

@@ -209,22 +241,22 @@ var PanelGroup = React.createClass({

     // if we made the left panel too small
     if (panels[panelIndex].size < minsize) {
-      delta = minsize - panels[panelIndex].size;
+      let delta = minsize - panels[panelIndex].size;

       if (panelIndex === 0)
-        resultDelta += this.resizePanel(panelIndex, delta, panels);
+        resultDelta = this.resizePanel(panelIndex, delta, panels);
       else
-        resultDelta += this.resizePanel(panelIndex-1, -delta, panels);
+        resultDelta = this.resizePanel(panelIndex-1, -delta, panels);
     };

     // if we made the left panel too big
     if (maxsize !== 0 && panels[panelIndex].size > maxsize) {
-      delta = panels[panelIndex].size - maxsize;
+      let delta = panels[panelIndex].size - maxsize;

       if (panelIndex === 0)
-        resultDelta += this.resizePanel(panelIndex, -delta, panels);
+        resultDelta = this.resizePanel(panelIndex, -delta, panels);
       else
-        resultDelta += this.resizePanel(panelIndex-1, delta, panels);
+        resultDelta = this.resizePanel(panelIndex-1, delta, panels);
     };


@@ -234,30 +266,60 @@ var PanelGroup = React.createClass({

     // if we made the right panel too small
     if (panels[panelIndex+1].size < minsize) {
-      delta = minsize - panels[panelIndex+1].size;
+      let delta = minsize - panels[panelIndex+1].size;

       if (panelIndex+1 === panels.length-1)
-        resultDelta += this.resizePanel(panelIndex, -delta, panels);
+        resultDelta = this.resizePanel(panelIndex, -delta, panels);
       else
-        resultDelta += this.resizePanel(panelIndex+1, delta, panels);
+        resultDelta = this.resizePanel(panelIndex+1, delta, panels);
     };

     // if we made the right panel too big
     if (maxsize !== 0 && panels[panelIndex+1].size > maxsize) {
-      delta = panels[panelIndex+1].size - maxsize;
+      let delta = panels[panelIndex+1].size - maxsize;

       if (panelIndex+1 === panels.length-1)
-        resultDelta += this.resizePanel(panelIndex, delta, panels);
+        resultDelta = this.resizePanel(panelIndex, delta, panels);
       else
-        resultDelta += this.resizePanel(panelIndex+1, -delta, panels);
+        resultDelta = this.resizePanel(panelIndex+1, -delta, panels);
     };

+    // Iterate through left panel's snap positions
+    for (let i=0; i<panels[panelIndex].snap.length; i++) {
+      if (Math.abs(panels[panelIndex].snap[i] - panels[panelIndex].size) < 20) {
+
+        let delta = panels[panelIndex].snap[i] - panels[panelIndex].size;
+
+        if (
+          delta !== 0 &&
+          panels[panelIndex].size  +  delta >= this.getPanelMinSize(panelIndex, panels) &&
+          panels[panelIndex+1].size - delta >= this.getPanelMinSize(panelIndex+1, panels)
+        )
+          resultDelta = this.resizePanel(panelIndex, delta, panels);
+      }
+    }
+
+    // Iterate through right panel's snap positions
+    for (let i=0; i<panels[panelIndex+1].snap.length; i++) {
+      if (Math.abs(panels[panelIndex+1].snap[i] - panels[panelIndex+1].size) < 20) {
+
+        let delta = panels[panelIndex+1].snap[i] - panels[panelIndex+1].size;
+
+        if (
+          delta !== 0 &&
+          panels[panelIndex].size  +  delta >= this.getPanelMinSize(panelIndex, panels) &&
+          panels[panelIndex+1].size - delta >= this.getPanelMinSize(panelIndex+1, panels)
+        )
+          resultDelta = this.resizePanel(panelIndex, -delta, panels);
+      }
+    }
+
     // return how much this panel actually resized
     return resultDelta;
-  },
+  };

   // Utility function for getting min pixel size of panel
-  getPanelMinSize: function(panelIndex: number, panels: any[]) {
+  getPanelMinSize = (panelIndex: number, panels: PanelT[]) => {
     if (panels[panelIndex].resize === "fixed") {
       if (!panels[panelIndex].fixedSize) {
         panels[panelIndex].fixedSize = panels[panelIndex].size;
@@ -265,10 +327,10 @@ var PanelGroup = React.createClass({
       return panels[panelIndex].fixedSize;
     }
     return panels[panelIndex].minSize;
-  },
+  };

   // Utility function for getting max pixel size of panel
-  getPanelMaxSize: function(panelIndex, panels) {
+  getPanelMaxSize = (panelIndex: number, panels: PanelT[]) => {
     if (panels[panelIndex].resize === "fixed") {
       if (!panels[panelIndex].fixedSize) {
         panels[panelIndex].fixedSize = panels[panelIndex].size;
@@ -276,21 +338,21 @@ var PanelGroup = React.createClass({
       return panels[panelIndex].fixedSize;
     }
     return 0;
-  },
+  };

   // Utility function for getting min pixel size of the entire panel group
-  getPanelGroupMinSize: function(spacing) {
+  getPanelGroupMinSize = (spacing: number) => {
     var size = 0;
     for (var i = 0; i < this.state.panels.length; i++) {
       size += this.getPanelMinSize(i, this.state.panels);
     }
     return size + ((this.state.panels.length-1) * spacing)
-  },
+  };

   // Hard-set a panel's size
   // Used to recalculate a stretchy panel when the window is resized
-  setPanelSize: function(panelIndex, size, callback) {
-    size = this.props.direction === "column"? size.y : size.x;
+  setPanelSize = (panelIndex: number, sizeXY: Delta, callback: void => void = () => {}) => {
+    const size = this.props.direction === "column"? sizeXY.y : sizeXY.x;

     if (size !== this.state.panels[panelIndex].size){
       var tempPanels = this.state.panels;
@@ -308,56 +370,56 @@ var PanelGroup = React.createClass({
         callback();
       }
     }
-  },
-})
-
+  };
+}

-var Panel = React.createClass({
+class Panel extends React.Component {

   // Find the resizeObject if it has one
-  componentDidMount: function() {
+  componentDidMount () {
     if (this.props.resize === "stretch") {
       this.refs.resizeObject.addEventListener("load", () => this.onResizeObjectLoad());
       this.refs.resizeObject.data = "about:blank";
       this.calculateStretchWidth();
     }
-  },
+  }

   // Attach resize event listener to resizeObject
-  onResizeObjectLoad() {
+  onResizeObjectLoad = () => {
     this.refs.resizeObject.contentDocument.defaultView.addEventListener(
     "resize", () => this.calculateStretchWidth());
-  },
+  };

   // Utility function to wait for next render before executing a function
-  onNextFrame: function(callback) {
+  onNextFrame = (callback) => {
     setTimeout(function () {
         window.requestAnimationFrame(callback)
     }, 0)
-  },
+  };

   // Recalculate the stretchy panel if it's container has been resized
-  calculateStretchWidth: function() {
-    if (this.props.onWindowResize !== null) {
-      var node = ReactDOM.findDOMNode(this)
-      if (node === null) { throw new Error("Couldn't find Panel DOM node"); }
-      if (node instanceof Text) { throw new Error("Expected DOM node to be of type Element"); }
-      var rect = node.getBoundingClientRect();
-
-      this.props.onWindowResize(
+  calculateStretchWidth = () => {
+    const onResize = this.props.onWindowResize;
+    if (onResize != null) {
+      const node = ReactDOM.findDOMNode(this);
+      if (node == null) { throw new Error('ReactDOM.findDOMNode(this) => null') }
+      if (node instanceof Text) { throw new Error("Node was of Text type, but it should've been Element"); }
+      const rect = node.getBoundingClientRect();
+
+      onResize(
         this.props.panelID,
         {x:rect.width, y:rect.height},

         // recalcalculate again if the width is below minimum
         // Kinda hacky, but for large resizes like fullscreen/Restore
         // it can't solve it in one pass.
-        function() {this.onNextFrame(this.calculateStretchWidth)}.bind(this)
+        // function() {this.onNextFrame(this.calculateStretchWidth)}.bind(this)
       );
     }
-  },
+  };

   // Render component
-  render: function() {
+  render () {

     var style = {
       resizeObject: {
@@ -381,42 +443,51 @@ var Panel = React.createClass({
       </div>
     )
   }
-})
-
-
-var Divider = React.createClass({
+}
+
+type DividerProps =
+  { dividerWidth: number,
+    handleBleed: number,
+    panelID: number,
+    handleResize: (panelId: number, delta: Delta) => number,
+    borderColor?: string,
+    showHandles: boolean }
+
+type DividerState =
+  { dragging: boolean,
+    initPos: Delta }
+
+class Divider extends React.Component {
+  props: DividerProps
+  state: DividerState
+
+  static defaultProps = {
+    dividerWidth: 1,
+    handleBleed: 4,
+  }

-  getDefaultProps: function() {
-    return {
-      dividerWidth: 1,
-      handleBleed: 4,
-    };
-  },
+  constructor () {
+    super(...arguments);

-  getInitialState: function () {
-    return {
+    this.state = {
       dragging: false,
-      initPos: {x:null,y:null},
-    }
-  },
+      initPos: {x:0,y:0},
+    };
+  }

   // Add/remove event listeners based on drag state
-  componentDidUpdate: function (props, state) {
+  componentDidUpdate (props: DividerProps, state: DividerState) {
     if (this.state.dragging && !state.dragging) {
-      // @flow-ignore
       document.addEventListener('mousemove', this.onMouseMove)
-      // @flow-ignore
       document.addEventListener('mouseup', this.onMouseUp)
     } else if (!this.state.dragging && state.dragging) {
-      // @flow-ignore
       document.removeEventListener('mousemove', this.onMouseMove)
-      // @flow-ignore
       document.removeEventListener('mouseup', this.onMouseUp)
     }
-  },
+  }

   // Start drag state and set initial position
-  onMouseDown: function (e) {
+  onMouseDown = (e) => {

     // only left mouse button
     if (e.button !== 0) return
@@ -431,54 +502,72 @@ var Divider = React.createClass({

     e.stopPropagation()
     e.preventDefault()
-  },
+  };

   // End drag state
-  onMouseUp: function (e) {
+  onMouseUp = (e: MouseEvent) => {
     this.setState({dragging: false})
     e.stopPropagation()
     e.preventDefault()
-  },
+  };

   // Call resize handler if we're dragging
-  onMouseMove: function (e) {
+  onMouseMove = (e: MouseEvent) => {
     if (!this.state.dragging) return

+    let initDelta = {
+      x: e.pageX - this.state.initPos.x,
+      y: e.pageY - this.state.initPos.y
+    }
+
+    let flowMask = {
+      x: (this.props.direction === "row"    ? 1 : 0),
+      y: (this.props.direction === "column" ? 1 : 0)
+    }
+
+    let flowDelta = (initDelta.x * flowMask.x) + (initDelta.y * flowMask.y);
+
+    // Resize the panels
     var resultDelta = this.handleResize(
       this.props.panelID,
-      {x: e.pageX - this.state.initPos.x, y: e.pageY - this.state.initPos.y}
+      initDelta
     );

-    // if we've resized the panel like intended, reset the initPos
-    if (resultDelta !== 0) {
+    // if the divider moved, reset the initPos
+    if (resultDelta + flowDelta !== 0) {
+
+      // Did we move the expected amount? (snapping will result in a larger delta)
+      let expectedDelta = (resultDelta === flowDelta);
+
       this.setState({
         initPos: {
-          x: e.pageX,
-          y: e.pageY
+          // if we moved more than expected, add the difference to the Position
+          x: e.pageX + (expectedDelta? 0 : resultDelta * flowMask.x),
+          y: e.pageY + (expectedDelta? 0 : resultDelta * flowMask.y)
         },
       })
     }

     e.stopPropagation()
     e.preventDefault()
-  },
+  };

   // Handle resizing
-  handleResize(i, delta) {
+  handleResize =(i, delta) => {
     return this.props.handleResize(i, delta);
-  },
+  };

   // Utility functions for handle size provided how much bleed
   // we want outside of the actual divider div
-  getHandleWidth: function() {
+  getHandleWidth = () => {
     return (this.props.dividerWidth + (this.props.handleBleed * 2));
-  },
-  getHandleOffset: function() {
+  };
+  getHandleOffset = () => {
     return (this.props.dividerWidth/2) - (this.getHandleWidth()/2);
-  },
+  };

   // Render component
-  render: function() {
+  render () {
     var style = {
       divider: {
         width:    this.props.direction === "row" ? this.props.dividerWidth : "auto",
@@ -489,6 +578,7 @@ var Divider = React.createClass({
         maxHeight: this.props.direction === "column" ? this.props.dividerWidth : "auto",
         flexGrow: 0,
         position: "relative",
+        backgroundColor: "#cccccc"
       },
       handle: {
         position: "absolute",
@@ -496,12 +586,12 @@ var Divider = React.createClass({
         height: this.props.direction === "column" ? this.getHandleWidth() : "100%",
         left:   this.props.direction === "row"    ? this.getHandleOffset() : 0,
         top:    this.props.direction === "column" ? this.getHandleOffset() : 0,
-        backgroundColor: this.props.showHandles? "rgba(0,128,255,0.25)" : "auto",
-        cursor: this.props.direction === "row" ? "ew-resize" : "ns-resize",
+        backgroundColor: this.props.showHandles ? "rgba(0,128,255,0.25)" : "auto",
+        cursor: this.props.direction === "row" ? "col-resize" : "row-resize",
         zIndex: 100,
       }
     }
-    // @flow-ignore CSS
+
     Object.assign(style.divider, {backgroundColor: this.props.borderColor});

     return (
@@ -510,7 +600,7 @@ var Divider = React.createClass({
       </div>
     );
   }
-})
+}


-export default PanelGroup;
\ No newline at end of file
+export default PanelGroup;