Relaxed minSize required prop constraint

bvaughn · Aug 12, 2023 · 5fe5700 · 5fe5700
1 parent 85bea2f
commit 5fe5700
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/packages/react-resizable-panels-website/src/utils/UrlData.ts b/packages/react-resizable-panels-website/src/utils/UrlData.ts
@@ -30,7 +30,7 @@ type UrlPanel = {
   defaultSize?: number | null;
   id?: string | null;
   maxSize?: number | null;
-  minSize: number;
+  minSize?: number;
   order?: number | null;
   style?: CSSProperties;
   type: "UrlPanel";

diff --git a/packages/react-resizable-panels/CHANGELOG.md b/packages/react-resizable-panels/CHANGELOG.md
@@ -2,7 +2,32 @@
 
 ## 0.0.55
 * New `units` prop added to `PanelGroup` to support pixel-based panel size constraints.
-* `Panel` prop `minSize` is now required to simplify upgrade path.
+
+This prop defaults to "percentage" but can be set to "pixels" for static, pixel based layout constraints.
+
+This can be used to add enable pixel-based min/max and default size values, e.g.:
+```tsx
+ <PanelGroup direction="horizontal" units="pixels">
+   {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
+   <Panel minSize={100} maxSize={200} />
+   <PanelResizeHandle />
+   <Panel />
+   <PanelResizeHandle />
+   <Panel />
+ </PanelGroup>
+```
+
+Imperative API methods are also able to work with either pixels or percentages now. They default to whatever units the group has been configured to use, but can be overridden with an additional, optional parameter, e.g.
+```ts
+panelRef.resize(100, "pixels");
+panelGroupRef.setLayout([25, 50, 25], "percentages");
+
+// Works for getters too, e.g.
+const percentage = panelRef.getSize("percentages");
+const pixels = panelRef.getSize("pixels");
+
+const layout = panelGroupRef.getLayout("pixels");
+```
 
 ## 0.0.54
 * [172](https://github.com/bvaughn/react-resizable-panels/issues/172): Development warning added to `PanelGroup` for conditionally-rendered `Panel`(s) that don't have `id` and `order` props

diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
@@ -31,7 +31,7 @@ export type PanelProps = {
   defaultSize?: number | null;
   id?: string | null;
   maxSize?: number | null;
-  minSize: number;
+  minSize?: number;
   onCollapse?: PanelOnCollapse | null;
   onResize?: PanelOnResize | null;
   order?: number | null;
@@ -80,13 +80,22 @@ function PanelWithForwardedRef({
     expandPanel,
     getPanelSize,
     getPanelStyle,
-    groupId,
     registerPanel,
     resizePanel,
     units,
     unregisterPanel,
   } = context;
 
+  if (minSize == null) {
+    if (units === "percentages") {
+      // Mimics legacy default value for percentage based panel groups
+      minSize = 10;
+    } else {
+      // There is no meaningful minimum pixel default we can provide
+      minSize = 0;
+    }
+  }
+
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef<{
     onCollapse: PanelOnCollapse | null;
@@ -137,7 +146,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.id = panelId;
     panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
-    panelDataRef.current.minSize = minSize;
+    panelDataRef.current.minSize = minSize as number;
     panelDataRef.current.order = order;
   });