fix typing. Adding check for size (#319)

Author: wuweiweiwu

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;

src/SplitPane.js

@@ -65,18 +65,23 @@ class SplitPane extends React.Component {
       resized: false,
       pane1Size: primary === 'first' ? initialSize : undefined,
       pane2Size: primary === 'second' ? initialSize : undefined,
+
+      // these are props that are needed in static functions. ie: gDSFP
+      instanceProps: {
+        size,
+      },
     };
   }
 
   componentDidMount() {
     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));
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    return SplitPane.setSize(nextProps, prevState);
+    return SplitPane.getSizeUpdate(nextProps, prevState);
   }
 
   componentWillUnmount() {
@@ -202,10 +207,14 @@ class SplitPane extends 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
-  static setSize(props, state) {
+  // we have to check values since gDSFP is called on every render and more in StrictMode
+  static getSizeUpdate(props, state) {
     const newState = {};
+    const { instanceProps } = state;
+
+    if (instanceProps.size === props.size && props.size !== undefined) {
+      return {};
+    }
 
     const newSize =
       props.size !== undefined
@@ -226,6 +235,8 @@ class SplitPane extends React.Component {
     newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
     newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
 
+    newState.instanceProps = { size: props.size };
+
     return newState;
   }
 

website/src/components/Sidebar.js

@@ -82,7 +82,7 @@ export default class Sidebar extends React.Component {
           </a>
         </TitleArea>
         <Description>
-          A component that makes creating draggable and resizable UI a breeze 🤣
+          A component that makes creating draggable and resizable UI a breeze
         </Description>
         {sections.map(section => (
           <React.Fragment>