react-resizable-panels 0.0.26 → 0.0.28

package/src/PanelGroup.ts

@@ -5,7 +5,6 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -22,8 +21,9 @@ import {
   getResizeHandlePanelIds,
   panelsMapToSortedArray,
 } from "./utils/group";
-import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
+import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 
 export type CommittedValues = {
@@ -74,7 +74,7 @@ export default function PanelGroup({
     sizes,
   });
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
     committedValuesRef.current.panels = panels;
     committedValuesRef.current.sizes = sizes;
@@ -91,7 +91,7 @@ export default function PanelGroup({
   // 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)!
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const sizes = committedValuesRef.current.sizes;
     if (sizes.length === panels.size) {
       // Only compute (or restore) default sizes once per panel configuration.
@@ -168,6 +168,20 @@ export default function PanelGroup({
     (id: string): CSSProperties => {
       const { panels } = committedValuesRef.current;
 
+      // Before mounting, Panels will not yet have registered themselves.
+      // This includes server rendering.
+      // At this point the best we can do is render everything with the same size.
+      if (panels.size === 0) {
+        return {
+          flexBasis: "auto",
+          flexGrow: 1,
+          flexShrink: 1,
+
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden",
+        };
+      }
+
       const flexGrow = getFlexGrow(panels, id, sizes);
 
       return {
@@ -221,7 +235,9 @@ export default function PanelGroup({
           event,
           groupId,
           handleId,
+          panelsArray,
           direction,
+          prevSizes,
           dragOffsetRef.current
         );
         if (movement === 0) {
@@ -262,10 +278,19 @@ export default function PanelGroup({
           nextSizes.forEach((nextSize, index) => {
             const prevSize = prevSizes[index];
             if (prevSize !== nextSize) {
-              const onResize = panelsArray[index].onResizeRef.current;
+              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);
+                }
+              }
             }
           });
 

package/src/hooks/useIsomorphicEffect.ts

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

package/src/types.ts

@@ -2,14 +2,19 @@ import { RefObject } from "react";
 
 export type Direction = "horizontal" | "vertical";
 
+export type PanelOnCollapse = (collapsed: boolean) => void;
 export type PanelOnResize = (size: number) => void;
 
 export type PanelData = {
+  callbacksRef: RefObject<{
+    onCollapse: PanelOnCollapse | null;
+    onResize: PanelOnResize | null;
+  }>;
+  collapsible: boolean;
   defaultSize: number;
   id: string;
   maxSize: number;
   minSize: number;
-  onResizeRef: RefObject<PanelOnResize | null>;
   order: number | null;
 };
 

package/src/utils/coordinates.ts

@@ -1,5 +1,10 @@
-import { Direction, ResizeEvent } from "../types";
-import { getPanelGroup, getResizeHandle } from "./group";
+import { PRECISION } from "../constants";
+import { Direction, PanelData, ResizeEvent } from "../types";
+import {
+  getPanelGroup,
+  getResizeHandle,
+  getResizeHandlePanelIds,
+} from "./group";
 
 export type Coordinates = {
   movement: number;
@@ -41,33 +46,72 @@ export function getMovement(
   event: ResizeEvent,
   groupId: string,
   handleId: string,
+  panelsArray: PanelData[],
   direction: Direction,
+  sizes: number[],
   initialOffset: number
 ): number {
-  const isHorizontal = direction === "horizontal";
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
 
-  const groupElement = getPanelGroup(groupId);
-  const rect = groupElement.getBoundingClientRect();
-  const size = isHorizontal ? rect.width : rect.height;
+    const groupElement = getPanelGroup(groupId);
+    const rect = groupElement.getBoundingClientRect();
+    const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
 
-  if (isKeyDown(event)) {
     const denominator = event.shiftKey ? 10 : 100;
-    const delta = size / denominator;
+    const delta = groupSizeInPixels / denominator;
 
+    let movement = 0;
     switch (event.key) {
       case "ArrowDown":
-        return isHorizontal ? 0 : delta;
+        movement = isHorizontal ? 0 : delta;
+        break;
       case "ArrowLeft":
-        return isHorizontal ? -delta : 0;
+        movement = isHorizontal ? -delta : 0;
+        break;
       case "ArrowRight":
-        return isHorizontal ? delta : 0;
+        movement = isHorizontal ? delta : 0;
+        break;
       case "ArrowUp":
-        return isHorizontal ? 0 : -delta;
+        movement = isHorizontal ? 0 : -delta;
+        break;
       case "End":
-        return size;
+        movement = groupSizeInPixels;
+        break;
       case "Home":
-        return -size;
+        movement = -groupSizeInPixels;
+        break;
     }
+
+    // If the Panel being resized is collapsible,
+    // we need to special case resizing around the minSize boundary.
+    // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
+    // If expanding from collapsed, they should snap back to their minSize.
+    const [idBefore, idAfter] = getResizeHandlePanelIds(
+      groupId,
+      handleId,
+      panelsArray
+    );
+    const targetPanelId = movement < 0 ? idBefore : idAfter;
+    const targetPanelIndex = panelsArray.findIndex(
+      (panel) => panel.id === targetPanelId
+    );
+    const targetPanel = panelsArray[targetPanelIndex];
+    if (targetPanel.collapsible) {
+      const prevSize = sizes[targetPanelIndex];
+      if (
+        prevSize === 0 ||
+        prevSize.toPrecision(PRECISION) ===
+          targetPanel.minSize.toPrecision(PRECISION)
+      ) {
+        movement =
+          movement < 0
+            ? -targetPanel.minSize * groupSizeInPixels
+            : targetPanel.minSize * groupSizeInPixels;
+      }
+    }
+
+    return movement;
   } else {
     return getDragOffset(event, handleId, direction, initialOffset);
   }

package/src/utils/group.ts

@@ -178,9 +178,17 @@ function safeResizePanel(
   prevSize: number
 ): number {
   const nextSizeUnsafe = prevSize + delta;
+
+  if (panel.collapsible) {
+    if (nextSizeUnsafe <= 0) {
+      return 0;
+    }
+  }
+
   const nextSize = Math.min(
     panel.maxSize,
     Math.max(panel.minSize, nextSizeUnsafe)
   );
+
   return nextSize;
 }