fix: Multiple pane collapse initial size calculation incorrect

b-zurg · Jun 19, 2020 · 5e20411 · 5e20411
1 parent 073a790
commit 5e20411
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 49 deletions.
diff --git a/src/components/Pane.tsx b/src/components/Pane.tsx
@@ -44,55 +44,55 @@ export interface PaneProps {
   children: React.ReactNode;
   transitionTimeout: number | undefined;
 }
-export const Pane = React.memo(
-  ({
-    size,
-    minSize,
-    isCollapsed,
-    collapseOverlayCss = { background: 'rgba(220,220,220, 0.1)' },
-    split,
-    className,
-    children,
-    forwardRef,
-    collapsedIndices,
+const UnMemoizedPane = ({
+  size,
+  minSize,
+  isCollapsed,
+  collapseOverlayCss = { background: 'rgba(220,220,220, 0.1)' },
+  split,
+  className,
+  children,
+  forwardRef,
+  collapsedIndices,
+  transitionTimeout,
+}: PaneProps) => {
+  const classes = useMergeClasses(['Pane', split, className]);
+  const timeout = useMemo(() => transitionTimeout ?? DEFAULT_COLLAPSE_TRANSITION_TIMEOUT, [
     transitionTimeout,
-  }: PaneProps) => {
-    const classes = useMergeClasses(['Pane', split, className]);
-    const timeout = useMemo(() => transitionTimeout ?? DEFAULT_COLLAPSE_TRANSITION_TIMEOUT, [
-      transitionTimeout,
-    ]);
-    const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
+  ]);
+  const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
 
-    const didMount = useRef(false);
+  const didMount = useRef(false);
 
-    useEffect(() => {
-      if (didMount.current) {
-        if (timeout !== 0) {
-          setShouldAnimate(true);
-          setTimeout(() => setShouldAnimate(false), 500);
-        }
-      } else {
-        didMount.current = true;
+  useEffect(() => {
+    if (didMount.current) {
+      if (timeout !== 0) {
+        setShouldAnimate(true);
+        setTimeout(() => setShouldAnimate(false), 500);
       }
-    }, [setShouldAnimate, collapsedIndices, timeout]);
+    } else {
+      didMount.current = true;
+    }
+  }, [setShouldAnimate, collapsedIndices, timeout]);
 
-    const minStyle = useMemo(
-      () => (split === 'vertical' ? { minWidth: minSize } : { minHeight: minSize }),
-      [minSize, split]
-    );
-    const collapseOverlayStyle = isCollapsed ? { ...collapseOverlayCss, ...minStyle } : minStyle;
-    return (
-      <StyledDiv
-        isVertical={split === 'vertical'}
-        className={classes}
-        ref={forwardRef}
-        style={{ flexBasis: size }}
-        shouldAnimate={timeout !== 0 && shouldAnimate}
-        timeout={timeout}
-      >
-        <CollapseOverlay style={collapseOverlayStyle}>{children}</CollapseOverlay>
-      </StyledDiv>
-    );
-  }
-);
-Pane.displayName = 'Pane';
+  const minStyle = useMemo(
+    () => (split === 'vertical' ? { minWidth: minSize } : { minHeight: minSize }),
+    [minSize, split]
+  );
+  const collapseOverlayStyle = isCollapsed ? { ...collapseOverlayCss, ...minStyle } : minStyle;
+  return (
+    <StyledDiv
+      isVertical={split === 'vertical'}
+      className={classes}
+      ref={forwardRef}
+      style={{ flexBasis: size }}
+      shouldAnimate={timeout !== 0 && shouldAnimate}
+      timeout={timeout}
+    >
+      <CollapseOverlay style={collapseOverlayStyle}>{children}</CollapseOverlay>
+    </StyledDiv>
+  );
+};
+
+UnMemoizedPane.displayName = 'Pane';
+export const Pane = React.memo(UnMemoizedPane);
diff --git a/src/components/SplitPane/hooks/callbacks/useRecalculateSizes.ts b/src/components/SplitPane/hooks/callbacks/useRecalculateSizes.ts
@@ -29,7 +29,12 @@ export function useRecalculateSizes({
           return collapsedSize;
         }
         if (collapsedIndices.includes(idx - 1)) {
-          return size + curSizes[idx - 1] - collapsedSize;
+          const totalPrevSizeToAdd = addArray(
+            collapsedIndices
+              .filter((_collapsedIdx, index) => index <= idx)
+              .map((_i, index) => initialRatioSizes[index] - collapsedSize)
+          );
+          return size + totalPrevSizeToAdd;
         }
         return size;
       });

diff --git a/src/components/SplitPane/index.tsx b/src/components/SplitPane/index.tsx
@@ -118,7 +118,7 @@ export const SplitPane = ({ className = '', ...props }: SplitPaneProps) => {
   });
 
   return (
-    <Wrapper className={splitPaneClass} split={props.split}>
+    <Wrapper key="splitpanewrapper" className={splitPaneClass} split={props.split}>
       {entries}
     </Wrapper>
   );

diff --git a/stories/InitialState.stories.tsx b/stories/InitialState.stories.tsx
@@ -51,6 +51,35 @@ storiesOf('Initial States', module)
       </VerticalSplitPane>
     );
   })
+  .add('Ltr, First Two Panes Collapsed', () => {
+    const verticalCollapseDirection = select(
+      'Vertical Direction',
+      { left: 'left', right: 'right' },
+      'left'
+    );
+    const shouldCollapse = boolean('Collapsable?', true);
+    const verticalCollapseOptions = shouldCollapse
+      ? {
+          beforeToggleButton: <Button>{verticalCollapseDirection === 'left' ? '⬅' : '➡'}</Button>,
+          afterToggleButton: <Button>{verticalCollapseDirection === 'left' ? '➡' : '⬅'}</Button>,
+          collapsedSize: 40,
+          collapseDirection: verticalCollapseDirection,
+        }
+      : undefined;
+    const VerticalSplitPane = (props: Omit<SplitPaneProps, 'split'>) => (
+      <SplitPane split={'vertical'} collapseOptions={verticalCollapseOptions} {...props}>
+        {props.children}
+      </SplitPane>
+    );
+
+    return (
+      <VerticalSplitPane collapsedSizes={[200, 200, null]}>
+        <div>This is a div</div>
+        <div>This is a second div</div>
+        <div>This is a third div</div>
+      </VerticalSplitPane>
+    );
+  })
   .add('Initial Sizes as Flex-Basis proportions', () => {
     return (
       <SplitPane split="vertical" initialSizes={[1, 2, 1]}>