Add optional collapsedSize prop to Panel

bvaughn · Jun 24, 2023 · a87cdb6 · a87cdb6 · vercel · Jun 24, 2023
1 parent bcf641f
commit a87cdb6
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 60 deletions.
diff --git a/packages/react-resizable-panels-website/playwright.config.ts b/packages/react-resizable-panels-website/playwright.config.ts
@@ -1,5 +1,7 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
 
+const { DEBUG } = process.env;
+
 const config: PlaywrightTestConfig = {
   use: {
     headless: true,
@@ -20,10 +22,9 @@ if (process.env.DEBUG) {
     browserName: "chromium",
     headless: false,
 
-    // Uncomment to slow down interactions if needed for visual debugging.
-    // launchOptions: {
-    //   slowMo: 100,
-    // },
+    launchOptions: {
+      slowMo: DEBUG ? 250 : undefined,
+    },
   };
 }
 

diff --git a/packages/react-resizable-panels-website/src/routes/examples/Collapsible.tsx b/packages/react-resizable-panels-website/src/routes/examples/Collapsible.tsx
@@ -23,9 +23,12 @@ export default function CollapsibleRoute() {
       headerNode={
         <>
           <p>
-            The example below uses the <code>collapsible</code> and{" "}
-            <code>onCollapse</code> props to mimic the UX of apps like VS Code
-            by configuring a panel to be <em>collapsible</em>.
+            The example below uses the <code>collapsedSize</code>,{" "}
+            <code>collapsible</code>, and <code>onCollapse</code> props to mimic
+            the UX of apps like VS Code by configuring a panel to be{" "}
+            <em>collapsible</em>. Panels can be collapsed all the way (to size
+            0) but in this example, the panel is configured to collapse to a
+            size that allows the file icons to remain visible.
           </p>
           <p>
             Drag the bar between the file browser and the source viewer to
@@ -66,6 +69,7 @@ function Content() {
         </div>
         <Panel
           className={sharedStyles.PanelColumn}
+          collapsedSize={4}
           collapsible={true}
           defaultSize={20}
           maxSize={25}
@@ -165,7 +169,7 @@ const FILES: File[] = FILE_PATHS.map(([path, code]) => {
 const CODE = `
 <PanelGroup direction="horizontal">
   <SideTabBar />
-  <Panel collapsible={true}>
+  <Panel collapsedSize={5} collapsible={true} minSize={10}>
     <SourceBrowser />
   </Panel>
   <PanelResizeHandle />

diff --git a/packages/react-resizable-panels-website/src/utils/UrlData.ts b/packages/react-resizable-panels-website/src/utils/UrlData.ts
@@ -24,6 +24,7 @@ import { ImperativeDebugLogHandle } from "../routes/examples/DebugLog";
 
 type UrlPanel = {
   children: Array<string | UrlPanelGroup>;
+  collapsedSize?: number;
   collapsible?: boolean;
   defaultSize?: number | null;
   id?: string | null;
@@ -100,6 +101,7 @@ function UrlPanelToData(urlPanel: ReactElement<PanelProps>): UrlPanel {
         return child;
       }
     }),
+    collapsedSize: urlPanel.props.collapsedSize,
     collapsible: urlPanel.props.collapsible,
     defaultSize: urlPanel.props.defaultSize,
     id: urlPanel.props.id,
@@ -193,6 +195,7 @@ function urlPanelToPanel(
     Panel,
     {
       className: "Panel",
+      collapsedSize: urlPanel.collapsedSize,
       collapsible: urlPanel.collapsible,
       defaultSize: urlPanel.defaultSize,
       id: urlPanel.id,

diff --git a/packages/react-resizable-panels-website/tests/Collapsing.spec.ts b/packages/react-resizable-panels-website/tests/Collapsing.spec.ts
@@ -67,4 +67,50 @@ test.describe("collapsible prop", () => {
     await page.keyboard.press("ArrowLeft");
     await verifyPanelSize(lastPanel, 20);
   });
+
+  test("should support custom collapsedSize values", async ({ page }) => {
+    await goToUrl(
+      page,
+      createElement(
+        PanelGroup,
+        { direction: "horizontal" },
+        createElement(Panel, {
+          collapsedSize: 2,
+          collapsible: true,
+          defaultSize: 35,
+          minSize: 10,
+        }),
+        createElement(PanelResizeHandle, { style: { height: 10, width: 10 } }),
+        createElement(Panel)
+      )
+    );
+
+    const resizeHandle = page.locator("[data-panel-resize-handle-id]");
+
+    const panels = page.locator("[data-panel]");
+    const firstPanel = panels.first();
+    const lastPanel = panels.last();
+
+    await verifyPanelSize(firstPanel, 35);
+    await verifyPanelSize(lastPanel, 65);
+
+    await resizeHandle.focus();
+    await page.keyboard.press("Shift+ArrowLeft");
+    await verifyPanelSize(firstPanel, 25);
+    await page.keyboard.press("Shift+ArrowLeft");
+    await verifyPanelSize(firstPanel, 15);
+    // Once it drops below half, it will collapse
+    await page.keyboard.press("Shift+ArrowLeft");
+    await verifyPanelSize(firstPanel, 2);
+    await page.keyboard.press("Shift+ArrowRight");
+    await verifyPanelSize(firstPanel, 12);
+    await page.keyboard.press("ArrowLeft");
+    await verifyPanelSize(firstPanel, 11);
+    await page.keyboard.press("ArrowLeft");
+    await verifyPanelSize(firstPanel, 10);
+    await page.keyboard.press("ArrowLeft");
+    await verifyPanelSize(firstPanel, 2);
+    await page.keyboard.press("ArrowRight");
+    await verifyPanelSize(firstPanel, 10);
+  });
 });
diff --git a/packages/react-resizable-panels/README.md b/packages/react-resizable-panels/README.md
@@ -49,20 +49,21 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
 
 ### `Panel`
-| prop          | type                            | description
-| :------------ | :------------------------------ | :---
-| `children`    | `ReactNode`                     | Arbitrary React element(s)
-| `className`   | `?string`                       | Class name to attach to root element
-| `collapsible` | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`
-| `defaultSize` | `?number`                       | Initial size of panel (numeric value between 1-100)
-| `id`          | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided
-| `maxSize`     | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
-| `minSize`     | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
-| `onCollapse`  | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
-| `onResize`    | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup>
-| `order`       | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels
-| `style`       | `?CSSProperties`                | CSS style to attach to root element
-| `tagName`     | `?string = "div"`               | HTML element tag name for root element
+| prop            | type                            | description
+| :-------------- | :------------------------------ | :---
+| `children`      | `ReactNode`                     | Arbitrary React element(s)
+| `className`     | `?string`                       | Class name to attach to root element
+| `collapsedSize` | `?number=0`                     | Panel should collapse to this size
+| `collapsible`   | `?boolean=false`                | Panel should collapse when resized beyond its `minSize`
+| `defaultSize`   | `?number`                       | Initial size of panel (numeric value between 1-100)
+| `id`            | `?string`                       | Panel id (unique within group); falls back to `useId` when not provided
+| `maxSize`       | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
+| `minSize`       | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
+| `onCollapse`    | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
+| `onResize`      | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup>
+| `order`         | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels
+| `style`         | `?CSSProperties`                | CSS style to attach to root element
+| `tagName`       | `?string = "div"`               | HTML element tag name for root element
 
 <sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
 

diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
@@ -24,6 +24,7 @@ import {
 export type PanelProps = {
   children?: ReactNode;
   className?: string;
+  collapsedSize?: number;
   collapsible?: boolean;
   defaultSize?: number | null;
   id?: string | null;
@@ -47,6 +48,7 @@ export type ImperativePanelHandle = {
 function PanelWithForwardedRef({
   children = null,
   className: classNameFromProps = "",
+  collapsedSize = 0,
   collapsible = false,
   defaultSize = null,
   forwardedRef,
@@ -119,6 +121,7 @@ function PanelWithForwardedRef({
   });
   const panelDataRef = useRef<{
     callbacksRef: PanelCallbackRef;
+    collapsedSize: number;
     collapsible: boolean;
     defaultSize: number | null;
     id: string;
@@ -127,6 +130,7 @@ function PanelWithForwardedRef({
     order: number | null;
   }>({
     callbacksRef,
+    collapsedSize,
     collapsible,
     defaultSize,
     id: panelId,
@@ -138,6 +142,7 @@ function PanelWithForwardedRef({
     committedValuesRef.current.size = parseSizeFromStyle(style);
 
     panelDataRef.current.callbacksRef = callbacksRef;
+    panelDataRef.current.collapsedSize = collapsedSize;
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -206,9 +206,9 @@ function PanelGroupWithForwardedRef({
           panelIdToLastNotifiedSizeMapRef.current;
         const panelsArray = panelsMapToSortedArray(panels);
 
-        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
-
         setSizes(sizes);
+
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       },
     }),
     []
@@ -487,14 +487,15 @@ function PanelGroupWithForwardedRef({
           const panelIdToLastNotifiedSizeMap =
             panelIdToLastNotifiedSizeMapRef.current;
 
+          setSizes(nextSizes);
+
           // If resize change handlers have been declared, this is the time to call them.
+          // Trigger user callbacks after updating state, so that user code can override the sizes.
           callPanelCallbacks(
             panelsArray,
             nextSizes,
             panelIdToLastNotifiedSizeMap
           );
-
-          setSizes(nextSizes);
         }
 
         prevDeltaRef.current = delta;
@@ -522,7 +523,12 @@ function PanelGroupWithForwardedRef({
     const { panels, sizes: prevSizes } = committedValuesRef.current;
 
     const panel = panels.get(id);
-    if (panel == null || !panel.current.collapsible) {
+    if (panel == null) {
+      return;
+    }
+
+    const { collapsedSize, collapsible } = panel.current;
+    if (!collapsible) {
       return;
     }
 
@@ -534,7 +540,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const currentSize = prevSizes[index];
-    if (currentSize === 0) {
+    if (currentSize === collapsedSize) {
       // Panel is already collapsed.
       return;
     }
@@ -547,7 +553,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? currentSize : 0 - currentSize;
+    const delta = isLastPanel ? currentSize : collapsedSize - currentSize;
 
     const nextSizes = adjustByDelta(
       null,
@@ -563,10 +569,11 @@ function PanelGroupWithForwardedRef({
       const panelIdToLastNotifiedSizeMap =
         panelIdToLastNotifiedSizeMapRef.current;
 
+      setSizes(nextSizes);
+
       // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
       callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-
-      setSizes(nextSizes);
     }
   }, []);
 
@@ -578,8 +585,10 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
+    const { collapsedSize, minSize } = panel.current;
+
     const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
+      panelSizeBeforeCollapse.current.get(id) || minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -592,7 +601,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const currentSize = prevSizes[index];
-    if (currentSize !== 0) {
+    if (currentSize !== collapsedSize) {
       // Panel is already expanded.
       return;
     }
@@ -603,7 +612,9 @@ function PanelGroupWithForwardedRef({
     }
 
     const isLastPanel = index === panelsArray.length - 1;
-    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+    const delta = isLastPanel
+      ? collapsedSize - sizeBeforeCollapse
+      : sizeBeforeCollapse;
 
     const nextSizes = adjustByDelta(
       null,
@@ -619,10 +630,11 @@ function PanelGroupWithForwardedRef({
       const panelIdToLastNotifiedSizeMap =
         panelIdToLastNotifiedSizeMapRef.current;
 
+      setSizes(nextSizes);
+
       // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
       callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-
-      setSizes(nextSizes);
     }
   }, []);
 
@@ -634,6 +646,8 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
+    const { collapsedSize, collapsible, maxSize, minSize } = panel.current;
+
     const panelsArray = panelsMapToSortedArray(panels);
 
     const index = panelsArray.indexOf(panel);
@@ -646,13 +660,10 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
-    if (panel.current.collapsible && nextSize === 0) {
+    if (collapsible && nextSize === collapsedSize) {
       // This is a valid resize state.
     } else {
-      nextSize = Math.min(
-        panel.current.maxSize,
-        Math.max(panel.current.minSize, nextSize)
-      );
+      nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
     }
 
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
@@ -677,10 +688,11 @@ function PanelGroupWithForwardedRef({
       const panelIdToLastNotifiedSizeMap =
         panelIdToLastNotifiedSizeMapRef.current;
 
+      setSizes(nextSizes);
+
       // If resize change handlers have been declared, this is the time to call them.
+      // Trigger user callbacks after updating state, so that user code can override the sizes.
       callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
-
-      setSizes(nextSizes);
     }
   }, []);
 

diff --git a/packages/react-resizable-panels/src/types.ts b/packages/react-resizable-panels/src/types.ts
@@ -9,7 +9,7 @@ export type PanelGroupStorage = {
 
 export type PanelGroupOnLayout = (sizes: number[]) => void;
 export type PanelOnCollapse = (collapsed: boolean) => void;
-export type PanelOnResize = (size: number) => void;
+export type PanelOnResize = (size: number, prevSize: number) => void;
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
 export type PanelCallbackRef = RefObject<{
@@ -20,6 +20,7 @@ export type PanelCallbackRef = RefObject<{
 export type PanelData = {
   current: {
     callbacksRef: PanelCallbackRef;
+    collapsedSize: number;
     collapsible: boolean;
     defaultSize: number | null;
     id: string;