Make collapsed panel have flexGrow: 0; call onSaveSizes when collapsing a pane; add units to flex style for resizers

package.json

@@ -2,7 +2,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "name": "react-collapse-pane",
-  "repository": "https://github.com/b-zurg/react-collapse-pane",
+  "repository": "https://github.com/godsamit/react-collapse-pane",
   "homepage": "https://collapse-pane.zurg.dev",
   "bugs": "https://github.com/b-zurg/react-collapse-pane/issues",
   "description": "The splittable, draggable and collapsible react layout library.",

src/components/Pane/index.tsx

@@ -119,7 +119,7 @@ const UnMemoizedPane = ({
       $timeout={timeout}
       className={classes}
       ref={forwardRef}
-      style={{ flexBasis: size }}
+      style={{ flexBasis: size, flexGrow: isCollapsed ? 0 : 1 }}
     >
       <CollapseOverlay $isCollapsed={isCollapsed} $timeout={timeout} style={collapseOverlayCss} />
       <WidthPreserver $isCollapsed={isCollapsed} style={widthPreserverStyle}>

src/components/Resizer/index.tsx

@@ -112,7 +112,7 @@ export const Resizer = ({
   const isTransition = collapseOptions?.buttonTransition !== 'none';
   const collapseButton = collapseOptions ? (
     <ButtonContainer $isVertical={isVertical} $grabberSize={grabberSizeWithUnit} $isLtr={isLtr}>
-      <div style={{ flex: `1 1 ${preButtonFlex}` }} />
+      <div style={{ flex: `1 1 ${preButtonFlex}px` }} />
       <Transition
         in={isTransition ? isHovered : true}
         timeout={isTransition ? collapseOptions.buttonTransitionTimeout : 0}
@@ -126,7 +126,7 @@ export const Resizer = ({
           {isCollapsed ? collapseOptions.afterToggleButton : collapseOptions.beforeToggleButton}
         </ButtonWrapper>
       </Transition>
-      <div style={{ flex: `1 1 ${postButtonFlex}` }} />
+      <div style={{ flex: `1 1 ${postButtonFlex}px` }} />
     </ButtonContainer>
   ) : null;
 

src/components/SplitPane/helpers.tsx

@@ -180,3 +180,28 @@ export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: nu
 
   return debounced as (...args: Parameters<F>) => ReturnType<F>;
 };
+
+/*
+ * Deep comparison function.
+*/
+export const deepEqual = (a: any,b: any) => {
+  if ((typeof a == 'object' && a != null) && (typeof b == 'object' && b != null)) {
+    var count = [0,0];
+    for (var key in a) count[0]++;
+    for (var key in b) count[1]++;
+    if (count[0]-count[1] != 0) {return false;}
+    for (var key in a) {
+      if (!(key in b) || !deepEqual(a[key],b[key])) {
+        return false;
+      }
+    }
+    for (var key in b){
+      if (!(key in a) || !deepEqual(b[key],a[key])) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    return a === b;
+  }
+};

src/components/SplitPane/hooks/callbacks/useUncollapseSize.ts

@@ -21,7 +21,7 @@ export const useUncollapseSize = ({
 }) =>
   useCallback(
     ({ size, idx }: { size: number; idx: number }) => {
-      const offset = isReversed ? -(size - 50) : size - 50;
+      const offset = isReversed ? -(size - collapsedSize) : size - collapsedSize;
       const index = isReversed ? idx - 1 : idx;
       const newSizes = [...movedSizes];
       moveSizes({ sizes: newSizes, index, offset, minSizes, collapsedSize, collapsedIndices });

src/components/SplitPane/hooks/useSplitPaneResize.ts

@@ -13,9 +13,10 @@ import { useCollapseSize } from './callbacks/useCollapseSize';
 import { useUncollapseSize } from './callbacks/useUncollapseSize';
 import { useUpdateCollapsedSizes } from './callbacks/useUpdateCollapsedSizes';
 import { useCollapsedSize } from './memos/useCollapsedSize';
-import { debounce } from '../helpers';
+import { debounce, deepEqual } from '../helpers';
 import { useRecalculateSizes } from './callbacks/useRecalculateSizes';
 import { useEventListener } from '../../../hooks/useEventListener';
+import { usePrevious } from '../../../hooks/usePrevious';
 import { Nullable } from '../../../types/utilities';
 
 export interface ChildPane {
@@ -77,6 +78,7 @@ export const useSplitPaneResize = (options: SplitPaneResizeOptions): SplitPaneRe
   // STATE: a map keeping track of all of the pane sizes
   const [sizes, setSizes] = useState<number[]>(initialSizes);
   const [movedSizes, setMovedSizes] = useState<number[]>(sizes);
+  const prevMovedSizes = usePrevious(movedSizes);
   const [collapsedSizes, setCollapsedSizes] = useState<Nullable<number>[]>(
     originalCollapsedSizes ?? new Array(children.length).fill(null)
   );
@@ -142,7 +144,10 @@ export const useSplitPaneResize = (options: SplitPaneResizeOptions): SplitPaneRe
   }, [dragState, movedSizes, hooks]);
   useEffect(() => {
     hooks?.onCollapse?.(collapsedSizes);
-  }, [collapsedSizes, hooks]);
+    if (!deepEqual(prevMovedSizes, movedSizes)){
+      hooks?.onSaveSizes?.(movedSizes);
+    }
+  }, [collapsedSizes, movedSizes, prevMovedSizes, hooks]);
   useEffect(() => {
     updateCollapsedSizes(collapsedIndices);
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/hooks/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from "react";
+
+export function usePrevious(value: any) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};