react-split-pane 0.1.83 → 0.1.84

package/dist/index.cjs.js

@@ -439,7 +439,12 @@ var SplitPane = function (_React$Component) {
       active: false,
       resized: false,
       pane1Size: primary === 'first' ? initialSize : undefined,
-      pane2Size: primary === 'second' ? initialSize : undefined
+      pane2Size: primary === 'second' ? initialSize : undefined,
+
+      // these are props that are needed in static functions. ie: gDSFP
+      instanceProps: {
+        size: size
+      }
     };
     return _this;
   }
@@ -450,7 +455,7 @@ var SplitPane = function (_React$Component) {
       document.addEventListener('mouseup', this.onMouseUp);
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('touchmove', this.onTouchMove);
-      this.setState(SplitPane.setSize(this.props, this.state));
+      this.setState(SplitPane.getSizeUpdate(this.props, this.state));
     }
   }, {
     key: 'componentWillUnmount',
@@ -593,8 +598,7 @@ var SplitPane = function (_React$Component) {
       }
     }
 
-    // TODO: find a more elegant way to fix this. memoize calls to setSize?
-    // we have to check values since gDSFP is called on every render
+    // we have to check values since gDSFP is called on every render and more in StrictMode
 
   }, {
     key: 'render',
@@ -718,12 +722,18 @@ var SplitPane = function (_React$Component) {
   }], [{
     key: 'getDerivedStateFromProps',
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      return SplitPane.setSize(nextProps, prevState);
+      return SplitPane.getSizeUpdate(nextProps, prevState);
     }
   }, {
-    key: 'setSize',
-    value: function setSize(props, state) {
+    key: 'getSizeUpdate',
+    value: function getSizeUpdate(props, state) {
       var newState = {};
+      var instanceProps = state.instanceProps;
+
+
+      if (instanceProps.size === props.size && props.size !== undefined) {
+        return {};
+      }
 
       var newSize = props.size !== undefined ? props.size : getDefaultSize(props.defaultSize, props.minSize, props.maxSize, state.draggedSize);
 
@@ -736,6 +746,8 @@ var SplitPane = function (_React$Component) {
       newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
       newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
 
+      newState.instanceProps = { size: props.size };
+
       return newState;
     }
   }]);

package/dist/index.esm.js

@@ -435,7 +435,12 @@ var SplitPane = function (_React$Component) {
       active: false,
       resized: false,
       pane1Size: primary === 'first' ? initialSize : undefined,
-      pane2Size: primary === 'second' ? initialSize : undefined
+      pane2Size: primary === 'second' ? initialSize : undefined,
+
+      // these are props that are needed in static functions. ie: gDSFP
+      instanceProps: {
+        size: size
+      }
     };
     return _this;
   }
@@ -446,7 +451,7 @@ var SplitPane = function (_React$Component) {
       document.addEventListener('mouseup', this.onMouseUp);
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('touchmove', this.onTouchMove);
-      this.setState(SplitPane.setSize(this.props, this.state));
+      this.setState(SplitPane.getSizeUpdate(this.props, this.state));
     }
   }, {
     key: 'componentWillUnmount',
@@ -589,8 +594,7 @@ var SplitPane = function (_React$Component) {
       }
     }
 
-    // TODO: find a more elegant way to fix this. memoize calls to setSize?
-    // we have to check values since gDSFP is called on every render
+    // we have to check values since gDSFP is called on every render and more in StrictMode
 
   }, {
     key: 'render',
@@ -714,12 +718,18 @@ var SplitPane = function (_React$Component) {
   }], [{
     key: 'getDerivedStateFromProps',
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      return SplitPane.setSize(nextProps, prevState);
+      return SplitPane.getSizeUpdate(nextProps, prevState);
     }
   }, {
-    key: 'setSize',
-    value: function setSize(props, state) {
+    key: 'getSizeUpdate',
+    value: function getSizeUpdate(props, state) {
       var newState = {};
+      var instanceProps = state.instanceProps;
+
+
+      if (instanceProps.size === props.size && props.size !== undefined) {
+        return {};
+      }
 
       var newSize = props.size !== undefined ? props.size : getDefaultSize(props.defaultSize, props.minSize, props.maxSize, state.draggedSize);
 
@@ -732,6 +742,8 @@ var SplitPane = function (_React$Component) {
       newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
       newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
 
+      newState.instanceProps = { size: props.size };
+
       return newState;
     }
   }]);

package/index.d.ts

@@ -3,51 +3,53 @@ import * as React from 'react';
 
 export type Size = string | number;
 
+type Partial<T> = { [P in keyof T]?: T[P] };
+
 export interface Props {
-    allowResize?: boolean;
-    className?: string;
-    primary?: 'first' | 'second';
-    minSize?: Size;
-    maxSize?: Size;
-    defaultSize?: Size;
-    size?: Size;
-    split?: 'vertical' | 'horizontal';
-    onDragStarted?: () => void;
-    onDragFinished?: (newSize: number) => void;
-    onChange?: (newSize: number) => void;
-    onResizerClick?: (event: MouseEvent) => void;
-    onResizerDoubleClick?: (event: MouseEvent) => void;
-    prefixer?: Prefixer;
-    style?: React.CSSProperties;
-    resizerStyle?: React.CSSProperties;
-    paneStyle?: React.CSSProperties;
-    pane1Style?: React.CSSProperties;
-    pane2Style?: React.CSSProperties;
-    resizerClassName?: string;
-    step?: number;
+  allowResize?: boolean;
+  className?: string;
+  primary?: 'first' | 'second';
+  minSize?: Size;
+  maxSize?: Size;
+  defaultSize?: Size;
+  size?: Size;
+  split?: 'vertical' | 'horizontal';
+  onDragStarted?: () => void;
+  onDragFinished?: (newSize: number) => void;
+  onChange?: (newSize: number) => void;
+  onResizerClick?: (event: MouseEvent) => void;
+  onResizerDoubleClick?: (event: MouseEvent) => void;
+  prefixer?: Prefixer;
+  style?: React.CSSProperties;
+  resizerStyle?: React.CSSProperties;
+  paneStyle?: React.CSSProperties;
+  pane1Style?: React.CSSProperties;
+  pane2Style?: React.CSSProperties;
+  resizerClassName?: string;
+  step?: number;
 }
 
 export interface State {
-    active: boolean;
-    resized: boolean;
+  active: boolean;
+  resized: boolean;
 }
 
 declare class SplitPane extends React.Component<Props, State> {
-    constructor();
+  constructor();
+
+  onMouseDown(event: MouseEvent): void;
 
-    onMouseDown(event: MouseEvent): void;
-    
-    onTouchStart(event: TouchEvent): void;
+  onTouchStart(event: TouchEvent): void;
 
-    onMouseMove(event: MouseEvent): void;
+  onMouseMove(event: MouseEvent): void;
 
-    onTouchMove(event: TouchEvent): void;
+  onTouchMove(event: TouchEvent): void;
 
-    onMouseUp(): void;
+  onMouseUp(): void;
 
-    setSize(props: Props, state: State): void;
+  static getSizeUpdate(props: Props, state: State): Partial<State>;
 
-    static defaultProps: Props;
+  static defaultProps: Props;
 }
 
 export default SplitPane;

package/package.json

@@ -9,7 +9,7 @@
     "dist",
     "index.d.ts"
   ],
-  "version": "0.1.83",
+  "version": "0.1.84",
   "repository": {
     "type": "git",
     "url": "https://github.com/tomkp/react-split-pane"