Remove pixel size constraints

bvaughn · Dec 10, 2023 · bdd6e52 · bdd6e52
1 parent 1133472
commit bdd6e52
Show file tree

Hide file tree

Showing 67 changed files with 736 additions and 2,661 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,10 @@ Supported input methods include mouse, touch, and keyboard (via [Window Splitter
 
 ## FAQ
 
+### Can panel sizes be specified in pixels?
+
+No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.
+
 ### How can I fix layout/sizing problems with conditionally rendered panels?
 
 The `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
@@ -27,13 +31,13 @@ The `Panel` API doesn't _require_ `id` and `order` props because they aren't nec
 <PanelGroup direction="horizontal">
   {renderSideBar && (
     <>
-      <Panel id="sidebar" minSizePercentage={25} order={1}>
+      <Panel id="sidebar" minSize={25} order={1}>
         <Sidebar />
       </Panel>
       <PanelResizeHandle />
     </>
   )}
-  <Panel minSizePercentage={25} order={2}>
+  <Panel minSize={25} order={2}>
     <Main />
   </Panel>
 </PanelGroup>
@@ -79,9 +83,9 @@ export function ClientComponent({
 
   return (
     <PanelGroup direction="horizontal" onLayout={onLayout}>
-      <Panel defaultSizePercentage={defaultLayout[0]}>{/* ... */}</Panel>
+      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
       <PanelResizeHandle className="w-2 bg-blue-800" />
-      <Panel defaultSizePercentage={defaultLayout[1]}>{/* ... */}</Panel>
+      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
     </PanelGroup>
   );
 }

diff --git a/packages/react-resizable-panels-website/index.tsx b/packages/react-resizable-panels-website/index.tsx
@@ -4,7 +4,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import HomeRoute from "./src/routes/Home";
 import ConditionalExampleRoute from "./src/routes/examples/Conditional";
-import PixelBasedLayoutsRoute from "./src/routes/examples/PixelBasedLayouts";
 import ExternalPersistenceExampleRoute from "./src/routes/examples/ExternalPersistence";
 import HorizontalExampleRoute from "./src/routes/examples/Horizontal";
 import ImperativePanelApiExampleRoute from "./src/routes/examples/ImperativePanelApi";
@@ -25,10 +24,6 @@ const router = createBrowserRouter([
     path: "/examples/conditional",
     element: <ConditionalExampleRoute />,
   },
-  {
-    path: "/examples/pixel-based-layouts",
-    element: <PixelBasedLayoutsRoute />,
-  },
   {
     path: "/examples/external-persistence",
     element: <ExternalPersistenceExampleRoute />,

diff --git a/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx b/packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx
@@ -54,10 +54,7 @@ function EndToEndTesting() {
   const [panelIds, setPanelIds] = useState<string[]>([]);
   const [panelGroupId, setPanelGroupId] = useState("");
   const [panelGroupIds, setPanelGroupIds] = useState<string[]>([]);
-  const [sizePercentage, setSizePercentage] = useState<number | undefined>(
-    undefined
-  );
-  const [sizePixels, setSizePixels] = useState<number | undefined>(undefined);
+  const [size, setSize] = useState<number>(0);
   const [layoutString, setLayoutString] = useState("");
 
   const debugLogRef = useRef<ImperativeDebugLogHandle>(null);
@@ -110,11 +107,9 @@ function EndToEndTesting() {
             panelId
           ) as ImperativePanelHandle;
           if (panel != null) {
-            const { sizePercentage, sizePixels } = panel.getSize();
+            const size = panel.getSize();
 
-            panelElement.textContent = `${sizePercentage.toFixed(
-              1
-            )}%\n${sizePixels.toFixed(1)}px`;
+            panelElement.textContent = `${size.toFixed(1)}%`;
           }
         }
       }, 0);
@@ -171,15 +166,7 @@ function EndToEndTesting() {
   const onSizeInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.value;
 
-    if (value.endsWith("%")) {
-      setSizePercentage(parseFloat(value));
-      setSizePixels(undefined);
-    } else if (value.endsWith("px")) {
-      setSizePercentage(undefined);
-      setSizePixels(parseFloat(value));
-    } else {
-      throw Error(`Invalid size: ${value}`);
-    }
+    setSize(parseFloat(value));
   };
 
   const onCollapseButtonClick = () => {
@@ -202,7 +189,7 @@ function EndToEndTesting() {
     const idToRefMap = idToRefMapRef.current;
     const panel = idToRefMap.get(panelId);
     if (panel && assertImperativePanelHandle(panel)) {
-      panel.resize({ sizePercentage, sizePixels });
+      panel.resize(size);
     }
   };
 
@@ -214,15 +201,9 @@ function EndToEndTesting() {
         1,
         layoutString.length - 1
       );
-      const layout = trimmedLayoutString.split(",").map((text) => {
-        if (text.endsWith("%")) {
-          return { sizePercentage: parseFloat(text) };
-        } else if (text.endsWith("px")) {
-          return { sizePixels: parseFloat(text) };
-        } else {
-          throw Error(`Invalid layout: ${layoutString}`);
-        }
-      }) satisfies Partial<MixedSizes>[];
+      const layout = trimmedLayoutString
+        .split(",")
+        .map((text) => parseFloat(text));
       panelGroup.setLayout(layout);
     }
   };

diff --git a/packages/react-resizable-panels-website/src/routes/Home/index.tsx b/packages/react-resizable-panels-website/src/routes/Home/index.tsx
@@ -13,7 +13,6 @@ const LINKS = [
   { path: "overflow", title: "Overflow content" },
   { path: "collapsible", title: "Collapsible panels" },
   { path: "conditional", title: "Conditional panels" },
-  { path: "pixel-based-layouts", title: "Pixel based layouts" },
   { path: "external-persistence", title: "External persistence" },
   { path: "imperative-panel-api", title: "Imperative Panel API" },
   { path: "imperative-panel-group-api", title: "Imperative PanelGroup API" },

diff --git a/packages/react-resizable-panels-website/src/routes/examples/Collapsible.tsx b/packages/react-resizable-panels-website/src/routes/examples/Collapsible.tsx
@@ -74,11 +74,11 @@ function Content() {
         </div>
         <Panel
           className={sharedStyles.PanelColumn}
-          collapsedSizePixels={36}
+          collapsedSize={5}
           collapsible={true}
-          defaultSizePixels={150}
-          maxSizePixels={150}
-          minSizePixels={60}
+          defaultSize={15}
+          maxSize={20}
+          minSize={15}
           onCollapse={onCollapse}
           onExpand={onExpand}
         >
@@ -109,7 +109,7 @@ function Content() {
               : styles.ResizeHandle
           }
         />
-        <Panel className={sharedStyles.PanelColumn} minSizePercentage={50}>
+        <Panel className={sharedStyles.PanelColumn} minSize={50}>
           <div className={styles.SourceTabs}>
             {Array.from(openFiles).map((file) => (
               <div
@@ -175,7 +175,7 @@ const FILES: File[] = FILE_PATHS.map(([path, code]) => {
 const CODE = `
 <PanelGroup direction="horizontal">
   <SideTabBar />
-  <Panel collapsible={true} collapsedSizePixels={35} minSizePercentage={10}>
+  <Panel collapsible={true} collapsedSizePixels={35} minSize={10}>
     <SourceBrowser />
   </Panel>
   <PanelResizeHandle />

diff --git a/packages/react-resizable-panels-website/src/routes/examples/Conditional.tsx b/packages/react-resizable-panels-website/src/routes/examples/Conditional.tsx
@@ -66,34 +66,19 @@ function Content({
       >
         {showLeftPanel && (
           <>
-            <Panel
-              className={styles.Panel}
-              id="left"
-              minSizePercentage={10}
-              order={1}
-            >
+            <Panel className={styles.Panel} id="left" minSize={10} order={1}>
               <div className={styles.Centered}>left</div>
             </Panel>
             <ResizeHandle className={styles.ResizeHandle} />
           </>
         )}
-        <Panel
-          className={styles.Panel}
-          id="center"
-          minSizePercentage={10}
-          order={2}
-        >
+        <Panel className={styles.Panel} id="center" minSize={10} order={2}>
           <div className={styles.Centered}>middle</div>
         </Panel>
         {showRightPanel && (
           <>
             <ResizeHandle className={styles.ResizeHandle} />
-            <Panel
-              className={styles.Panel}
-              id="right"
-              minSizePercentage={10}
-              order={3}
-            >
+            <Panel className={styles.Panel} id="right" minSize={10} order={3}>
               <div className={styles.Centered}>right</div>
             </Panel>
           </>

diff --git a/packages/react-resizable-panels-website/src/routes/examples/ExternalPersistence.tsx b/packages/react-resizable-panels-website/src/routes/examples/ExternalPersistence.tsx
@@ -81,23 +81,15 @@ function Content() {
         direction="horizontal"
         storage={urlStorage}
       >
-        <Panel
-          className={styles.PanelRow}
-          collapsible={true}
-          minSizePercentage={10}
-        >
+        <Panel className={styles.PanelRow} collapsible={true} minSize={10}>
           <div className={styles.Centered}>left</div>
         </Panel>
         <ResizeHandle className={styles.ResizeHandle} />
-        <Panel className={styles.PanelRow} minSizePercentage={10}>
+        <Panel className={styles.PanelRow} minSize={10}>
           <div className={styles.Centered}>middle</div>
         </Panel>
         <ResizeHandle className={styles.ResizeHandle} />
-        <Panel
-          className={styles.PanelRow}
-          collapsible={true}
-          minSizePercentage={10}
-        >
+        <Panel className={styles.PanelRow} collapsible={true} minSize={10}>
           <div className={styles.Centered}>right</div>
         </Panel>
       </PanelGroup>

diff --git a/packages/react-resizable-panels-website/src/routes/examples/Horizontal.tsx b/packages/react-resizable-panels-website/src/routes/examples/Horizontal.tsx
@@ -33,23 +33,15 @@ function Content() {
   return (
     <div className={styles.PanelGroupWrapper}>
       <PanelGroup className={styles.PanelGroup} direction="horizontal">
-        <Panel
-          className={styles.PanelRow}
-          defaultSizePercentage={30}
-          minSizePercentage={20}
-        >
+        <Panel className={styles.PanelRow} defaultSize={30} minSize={20}>
           <div className={styles.Centered}>left</div>
         </Panel>
         <ResizeHandle className={styles.ResizeHandle} />
-        <Panel className={styles.PanelRow} minSizePercentage={30}>
+        <Panel className={styles.PanelRow} minSize={30}>
           <div className={styles.Centered}>middle</div>
         </Panel>
         <ResizeHandle className={styles.ResizeHandle} />
-        <Panel
-          className={styles.PanelRow}
-          defaultSizePercentage={30}
-          minSizePercentage={20}
-        >
+        <Panel className={styles.PanelRow} defaultSize={30} minSize={20}>
           <div className={styles.Centered}>right</div>
         </Panel>
       </PanelGroup>
@@ -59,15 +51,15 @@ function Content() {
 
 const CODE = `
 <PanelGroup direction="horizontal">
-  <Panel defaultSizePercentage={30} minSizePercentage={20}>
+  <Panel defaultSize={30} minSize={20}>
     left
   </Panel>
   <PanelResizeHandle />
-  <Panel minSizePercentage={30}>
+  <Panel minSize={30}>
     middle
   </Panel>
   <PanelResizeHandle />
-  <Panel defaultSizePercentage={30} minSizePercentage={20}>
+  <Panel defaultSize={30} minSize={20}>
     right
   </Panel>
 </PanelGroup>