react-resizable-panels 0.0.28 → 0.0.30

package/src/PanelGroup.ts

@@ -11,11 +11,13 @@ import {
 } from "react";
 
 import { PanelGroupContext } from "./PanelContexts";
-import { Direction, PanelData, ResizeEvent } from "./types";
+import { Direction, PanelData, PanelGroupOnLayout, ResizeEvent } from "./types";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 import { getDragOffset, getMovement } from "./utils/coordinates";
 import {
   adjustByDelta,
+  callPanelCallbacks,
+  getBeforeAndAfterIds,
   getFlexGrow,
   getPanelGroup,
   getResizeHandlePanelIds,
@@ -25,6 +27,10 @@ import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
+import debounce from "./utils/debounce";
+
+// Limit the frequency of localStorage updates.
+const savePanelGroupLayoutDebounced = debounce(savePanelGroupLayout, 100);
 
 export type CommittedValues = {
   direction: Direction;
@@ -44,16 +50,18 @@ export type PanelGroupProps = {
   className?: string;
   direction: Direction;
   id?: string | null;
+  onLayout?: PanelGroupOnLayout;
   style?: CSSProperties;
   tagName?: ElementType;
 };
 
-export default function PanelGroup({
+export function PanelGroup({
   autoSaveId,
   children = null,
   className: classNameFromProps = "",
   direction,
   id: idFromProps = null,
+  onLayout = null,
   style: styleFromProps = {},
   tagName: Type = "div",
 }: PanelGroupProps) {
@@ -62,11 +70,22 @@ export default function PanelGroup({
   const [activeHandleId, setActiveHandleId] = useState<string | null>(null);
   const [panels, setPanels] = useState<PanelDataMap>(new Map());
 
+  // Use a ref to guard against users passing inline props
+  const callbacksRef = useRef<{
+    onLayout: PanelGroupOnLayout | null;
+  }>({ onLayout });
+  useEffect(() => {
+    callbacksRef.current.onLayout = onLayout;
+  });
+
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState<number[]>([]);
 
   const dragOffsetRef = useRef<number>(0);
 
+  // Used to support imperative collapse/expand API.
+  const panelSizeBeforeCollapse = useRef<Map<string, number>>(new Map());
+
   // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef<CommittedValues>({
     direction,
@@ -88,6 +107,15 @@ export default function PanelGroup({
     sizes,
   });
 
+  // Notify external code when sizes have changed.
+  useEffect(() => {
+    const { onLayout } = callbacksRef.current;
+    if (onLayout) {
+      const { sizes } = committedValuesRef.current;
+      onLayout(sizes);
+    }
+  }, [sizes]);
+
   // Once all panels have registered themselves,
   // Compute the initial sizes based on default weights.
   // This assumes that panels register during initial mount (no conditional rendering)!
@@ -160,7 +188,8 @@ export default function PanelGroup({
       }
 
       const panelsArray = panelsMapToSortedArray(panels);
-      savePanelGroupLayout(autoSaveId, panelsArray, sizes);
+
+      savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes);
     }
   }, [autoSaveId, panels, sizes]);
 
@@ -191,9 +220,13 @@ export default function PanelGroup({
 
         // Without this, Panel sizes may be unintentionally overridden by their content.
         overflow: "hidden",
+
+        // Disable pointer events inside of a panel during resize.
+        // This avoid edge cases like nested iframes.
+        pointerEvents: activeHandleId !== null ? "none" : undefined,
       };
     },
-    [direction, sizes]
+    [activeHandleId, direction, sizes]
   );
 
   const registerPanel = useCallback((id: string, panel: PanelData) => {
@@ -275,24 +308,7 @@ export default function PanelGroup({
           setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
 
           // If resize change handlers have been declared, this is the time to call them.
-          nextSizes.forEach((nextSize, index) => {
-            const prevSize = prevSizes[index];
-            if (prevSize !== nextSize) {
-              const { onCollapse, onResize } =
-                panelsArray[index].callbacksRef.current;
-              if (onResize) {
-                onResize(nextSize);
-              }
-
-              if (onCollapse) {
-                if (prevSize === 0 && nextSize !== 0) {
-                  onCollapse(false);
-                } else if (prevSize !== 0 && nextSize === 0) {
-                  onCollapse(true);
-                }
-              }
-            }
-          });
+          callPanelCallbacks(panelsArray, prevSizes, nextSizes);
 
           setSizes(nextSizes);
         }
@@ -316,14 +332,156 @@ export default function PanelGroup({
     });
   }, []);
 
+  const collapsePanel = useCallback((id: string) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null || !panel.collapsible) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize === 0) {
+      // Panel is already collapsed.
+      return;
+    }
+
+    panelSizeBeforeCollapse.current.set(id, currentSize);
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? currentSize : 0 - currentSize;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
+  const expandPanel = useCallback((id: string) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null) {
+      return;
+    }
+
+    const sizeBeforeCollapse =
+      panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+    if (!sizeBeforeCollapse) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize !== 0) {
+      // Panel is already expanded.
+      return;
+    }
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
+  const resizePanel = useCallback((id: string, nextSize: number) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize === nextSize) {
+      return;
+    }
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
   const context = useMemo(
     () => ({
       activeHandleId,
+      collapsePanel,
       direction,
+      expandPanel,
       getPanelStyle,
       groupId,
       registerPanel,
       registerResizeHandle,
+      resizePanel,
       startDragging: (id: string, event: ResizeEvent) => {
         setActiveHandleId(id);
 
@@ -337,11 +495,14 @@ export default function PanelGroup({
     }),
     [
       activeHandleId,
+      collapsePanel,
       direction,
+      expandPanel,
       getPanelStyle,
       groupId,
       registerPanel,
       registerResizeHandle,
+      resizePanel,
       unregisterPanel,
     ]
   );

package/src/PanelResizeHandle.ts

@@ -27,7 +27,7 @@ export type PanelResizeHandleProps = {
   tagName?: ElementType;
 };
 
-export default function PanelResizeHandle({
+export function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
   disabled = false,

package/src/hooks/useIsomorphicEffect.ts

@@ -1,6 +1,13 @@
 import { useEffect, useLayoutEffect } from "react";
 
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const canUseEffectHooks = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);
+
+const useIsomorphicLayoutEffect = canUseEffectHooks
+  ? useLayoutEffect
+  : () => {};
 
 export default useIsomorphicLayoutEffect;

package/src/index.ts

@@ -1,5 +1,19 @@
-import Panel from "./Panel";
-import PanelGroup from "./PanelGroup";
-import PanelResizeHandle from "./PanelResizeHandle";
+import { Panel } from "./Panel";
+import { PanelGroup } from "./PanelGroup";
+import { PanelResizeHandle } from "./PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+import type { ImperativePanelHandle, PanelProps } from "./Panel";
+import type { PanelGroupProps } from "./PanelGroup";
+import type { PanelResizeHandleProps } from "./PanelResizeHandle";
+
+export {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+
+  // TypeScript types
+  ImperativePanelHandle,
+  PanelGroupProps,
+  PanelProps,
+  PanelResizeHandleProps,
+};

package/src/types.ts

@@ -2,6 +2,7 @@ import { RefObject } from "react";
 
 export type Direction = "horizontal" | "vertical";
 
+export type PanelGroupOnLayout = (sizes: number[]) => void;
 export type PanelOnCollapse = (collapsed: boolean) => void;
 export type PanelOnResize = (size: number) => void;
 

package/src/utils/debounce.ts

@@ -0,0 +1,16 @@
+export default function debounce<T extends Function>(
+  callback: T,
+  durationMs: number = 10
+) {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  let callable = (...args: any) => {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      callback(...args);
+    }, durationMs);
+  };
+
+  return callable as unknown as T;
+}

package/src/utils/group.ts

@@ -83,6 +83,52 @@ export function adjustByDelta(
   return nextSizes;
 }
 
+export function callPanelCallbacks(
+  panelsArray: PanelData[],
+  prevSizes: number[],
+  nextSizes: number[]
+) {
+  nextSizes.forEach((nextSize, index) => {
+    const prevSize = prevSizes[index];
+    if (prevSize !== nextSize) {
+      const { callbacksRef } = panelsArray[index];
+      const { onCollapse, onResize } = callbacksRef.current;
+
+      if (onResize) {
+        onResize(nextSize);
+      }
+
+      if (onCollapse) {
+        if (prevSize === 0 && nextSize !== 0) {
+          onCollapse(false);
+        } else if (prevSize !== 0 && nextSize === 0) {
+          onCollapse(true);
+        }
+      }
+    }
+  });
+}
+
+export function getBeforeAndAfterIds(
+  id: string,
+  panelsArray: PanelData[]
+): [idBefore: string | null, idAFter: string | null] {
+  if (panelsArray.length < 2) {
+    return [null, null];
+  }
+
+  const index = panelsArray.findIndex((panel) => panel.id === id);
+  if (index < 0) {
+    return [null, null];
+  }
+
+  const isLastPanel = index === panelsArray.length - 1;
+  const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
+  const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+
+  return [idBefore, idAfter];
+}
+
 // This method returns a number between 1 and 100 representing
 // the % of the group's overall space this panel should occupy.
 export function getFlexGrow(