react-resizable-panels 0.0.63 → 1.0.0-rc.1

package/src/utils/resizePanel.test.ts

@@ -4,12 +4,11 @@ describe("resizePanel", () => {
   it("should not collapse (or expand) until a panel size dips below the halfway point between min size and collapsed size", () => {
     expect(
       resizePanel({
-        groupSizePixels: 100,
         panelConstraints: [
           {
             collapsible: true,
-            collapsedSizePercentage: 10,
-            minSizePercentage: 20,
+            collapsedSize: 10,
+            minSize: 20,
           },
         ],
         panelIndex: 0,
@@ -19,12 +18,11 @@ describe("resizePanel", () => {
 
     expect(
       resizePanel({
-        groupSizePixels: 100,
         panelConstraints: [
           {
             collapsible: true,
-            collapsedSizePercentage: 10,
-            minSizePercentage: 20,
+            collapsedSize: 10,
+            minSize: 20,
           },
         ],
         panelIndex: 0,
@@ -34,11 +32,10 @@ describe("resizePanel", () => {
 
     expect(
       resizePanel({
-        groupSizePixels: 100,
         panelConstraints: [
           {
             collapsible: true,
-            minSizePercentage: 20,
+            minSize: 20,
           },
         ],
         panelIndex: 0,
@@ -48,11 +45,10 @@ describe("resizePanel", () => {
 
     expect(
       resizePanel({
-        groupSizePixels: 100,
         panelConstraints: [
           {
             collapsible: true,
-            minSizePercentage: 20,
+            minSize: 20,
           },
         ],
         panelIndex: 0,
@@ -60,46 +56,4 @@ describe("resizePanel", () => {
       })
     ).toBe(0);
   });
-
-  // Edge case test (issues/206)
-  it("should respect percentage panel constraints if group size is negative", () => {
-    jest.spyOn(console, "warn").mockImplementation(() => {});
-
-    expect(
-      resizePanel({
-        groupSizePixels: -100,
-        panelConstraints: [
-          {
-            minSizePercentage: 25,
-            maxSizePercentage: 75,
-          },
-        ],
-        panelIndex: 0,
-        size: 50,
-      })
-    ).toBe(50);
-
-    expect(console.warn).toHaveBeenCalledTimes(0);
-  });
-
-  // Edge case test (issues/206)
-  it("should handle pixel panel constraints if group size is negative", () => {
-    jest.spyOn(console, "warn").mockImplementation(() => {});
-
-    expect(
-      resizePanel({
-        groupSizePixels: -100,
-        panelConstraints: [
-          {
-            minSizePixels: 25,
-            maxSizePixels: 75,
-          },
-        ],
-        panelIndex: 0,
-        size: 50,
-      })
-    ).toBe(0);
-
-    expect(console.warn).toHaveBeenCalledTimes(1);
-  });
 });

package/src/utils/resizePanel.ts

@@ -1,66 +1,44 @@
 import { PanelConstraints } from "../Panel";
-import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { PRECISION } from "../constants";
+import { assert } from "./assert";
 import { fuzzyCompareNumbers } from "./numbers/fuzzyCompareNumbers";
 
 // Panel size must be in percentages; pixel values should be pre-converted
 export function resizePanel({
-  groupSizePixels,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   panelIndex,
   size,
 }: {
-  groupSizePixels: number;
   panelConstraints: PanelConstraints[];
   panelIndex: number;
   size: number;
 }) {
-  const hasPixelConstraints = panelConstraints.some(
-    ({
-      collapsedSizePixels,
-      defaultSizePixels,
-      minSizePixels,
-      maxSizePixels,
-    }) =>
-      collapsedSizePixels != null ||
-      defaultSizePixels != null ||
-      minSizePixels != null ||
-      maxSizePixels != null
-  );
-
-  if (hasPixelConstraints && groupSizePixels <= 0) {
-    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
-
-    return 0;
-  }
-
-  let { collapsible } = panelConstraints[panelIndex]!;
-
-  const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
-    computePercentagePanelConstraints(
-      panelConstraints,
-      panelIndex,
-      groupSizePixels
-    );
-
-  if (minSizePercentage != null) {
-    if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
-      if (collapsible) {
-        // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-        const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
-        if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
-          size = collapsedSizePercentage;
-        } else {
-          size = minSizePercentage;
-        }
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null);
+
+  let {
+    collapsedSize = 0,
+    collapsible,
+    maxSize = 100,
+    minSize = 0,
+  } = panelConstraints;
+
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
       } else {
-        size = minSizePercentage;
+        size = minSize;
       }
+    } else {
+      size = minSize;
     }
   }
 
-  if (maxSizePercentage != null) {
-    size = Math.min(maxSizePercentage, size);
-  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
 
   return size;
 }

package/src/utils/test-utils.ts

@@ -1,4 +1,4 @@
-import { MixedSizes } from "../types";
+import { assert } from "./assert";
 
 const util = require("util");
 
@@ -11,6 +11,8 @@ export function expectToBeCloseToArray(
   try {
     actualNumbers.forEach((actualNumber, index) => {
       const expectedNumber = expectedNumbers[index];
+      assert(expectedNumber != null);
+
       expect(actualNumber).toBeCloseTo(expectedNumber, 1);
     });
   } catch (error) {
@@ -74,13 +76,10 @@ export function mockPanelGroupOffsetWidthAndHeight(
 }
 
 export function verifyExpandedPanelGroupLayout(
-  actualLayout: MixedSizes[],
-  expectedPercentages: number[]
+  actualLayout: number[],
+  expectedLayout: number[]
 ) {
-  expect(actualLayout).toHaveLength(expectedPercentages.length);
-  expect(actualLayout.map(({ sizePercentage }) => sizePercentage)).toEqual(
-    expectedPercentages
-  );
+  expect(actualLayout).toEqual(expectedLayout);
 }
 
 export function verifyExpectedWarnings(

package/src/utils/validatePanelConstraints.test.ts

@@ -5,7 +5,6 @@ describe("validatePanelConstraints", () => {
   it("should not warn if there are no validation errors", () => {
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [{}],
         panelIndex: 0,
         panelId: "test",
@@ -13,60 +12,13 @@ describe("validatePanelConstraints", () => {
     });
   });
 
-  it("should warn about conflicting percentages and pixels", () => {
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        groupSizePixels: 100_000,
-        panelConstraints: [
-          {
-            collapsedSizePercentage: 5,
-            collapsedSizePixels: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "should not specify both percentage and pixel units for: collapsed size");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        groupSizePixels: 100_000,
-        panelConstraints: [
-          {
-            maxSizePercentage: 5,
-            maxSizePixels: 10,
-            minSizePercentage: 5,
-            minSizePixels: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "should not specify both percentage and pixel units for: max size, min size");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        groupSizePixels: 100_000,
-        panelConstraints: [
-          {
-            defaultSizePercentage: 5,
-            defaultSizePixels: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "should not specify both percentage and pixel units for: default size");
-  });
-
   it("should warn about conflicting min/max sizes", () => {
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            maxSizePercentage: 5,
-            minSizePercentage: 10,
+            maxSize: 5,
+            minSize: 10,
           },
         ],
         panelIndex: 0,
@@ -78,11 +30,10 @@ describe("validatePanelConstraints", () => {
   it("should warn about conflicting collapsed and min sizes", () => {
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            collapsedSizePercentage: 15,
-            minSizePercentage: 10,
+            collapsedSize: 15,
+            minSize: 10,
           },
         ],
         panelIndex: 0,
@@ -94,11 +45,10 @@ describe("validatePanelConstraints", () => {
   it("should warn about conflicting default and min/max sizes", () => {
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            defaultSizePercentage: -1,
-            minSizePercentage: 10,
+            defaultSize: -1,
+            minSize: 10,
           },
         ],
         panelIndex: 0,
@@ -108,11 +58,10 @@ describe("validatePanelConstraints", () => {
 
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            defaultSizePercentage: 5,
-            minSizePercentage: 10,
+            defaultSize: 5,
+            minSize: 10,
           },
         ],
         panelIndex: 0,
@@ -122,11 +71,10 @@ describe("validatePanelConstraints", () => {
 
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            defaultSizePercentage: 101,
-            maxSizePercentage: 10,
+            defaultSize: 101,
+            maxSize: 10,
           },
         ],
         panelIndex: 0,
@@ -136,11 +84,10 @@ describe("validatePanelConstraints", () => {
 
     verifyExpectedWarnings(() => {
       validatePanelConstraints({
-        groupSizePixels: 100_000,
         panelConstraints: [
           {
-            defaultSizePercentage: 15,
-            maxSizePercentage: 10,
+            defaultSize: 15,
+            maxSize: 10,
           },
         ],
         panelIndex: 0,

package/src/utils/validatePanelConstraints.ts

@@ -1,14 +1,12 @@
 import { isDevelopment } from "#is-development";
 import { PanelConstraints } from "../Panel";
-import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
+import { assert } from "./assert";
 
 export function validatePanelConstraints({
-  groupSizePixels,
-  panelConstraints,
+  panelConstraints: panelConstraintsArray,
   panelId,
   panelIndex,
 }: {
-  groupSizePixels: number;
   panelConstraints: PanelConstraints[];
   panelId: string | undefined;
   panelIndex: number;
@@ -16,77 +14,38 @@ export function validatePanelConstraints({
   if (isDevelopment) {
     const warnings = [];
 
-    {
-      const {
-        collapsedSizePercentage,
-        collapsedSizePixels,
-        defaultSizePercentage,
-        defaultSizePixels,
-        maxSizePercentage,
-        maxSizePixels,
-        minSizePercentage,
-        minSizePixels,
-      } = panelConstraints[panelIndex]!;
+    const panelConstraints = panelConstraintsArray[panelIndex];
+    assert(panelConstraints);
 
-      const conflictingUnits: string[] = [];
+    const {
+      collapsedSize = 0,
+      defaultSize,
+      maxSize = 100,
+      minSize = 0,
+    } = panelConstraints;
 
-      if (collapsedSizePercentage != null && collapsedSizePixels != null) {
-        conflictingUnits.push("collapsed size");
-      }
-      if (defaultSizePercentage != null && defaultSizePixels != null) {
-        conflictingUnits.push("default size");
-      }
-      if (maxSizePercentage != null && maxSizePixels != null) {
-        conflictingUnits.push("max size");
-      }
-      if (minSizePercentage != null && minSizePixels != null) {
-        conflictingUnits.push("min size");
-      }
-
-      if (conflictingUnits.length > 0) {
-        warnings.push(
-          `should not specify both percentage and pixel units for: ${conflictingUnits.join(
-            ", "
-          )}`
-        );
-      }
-    }
-
-    {
-      const {
-        collapsedSizePercentage,
-        defaultSizePercentage,
-        maxSizePercentage,
-        minSizePercentage,
-      } = computePercentagePanelConstraints(
-        panelConstraints,
-        panelIndex,
-        groupSizePixels
+    if (minSize > maxSize) {
+      warnings.push(
+        `min size (${minSize}%) should not be greater than max size (${maxSize}%)`
       );
+    }
 
-      if (minSizePercentage > maxSizePercentage) {
-        warnings.push(
-          `min size (${minSizePercentage}%) should not be greater than max size (${maxSizePercentage}%)`
-        );
+    if (defaultSize != null) {
+      if (defaultSize < 0) {
+        warnings.push("default size should not be less than 0");
+      } else if (defaultSize < minSize) {
+        warnings.push("default size should not be less than min size");
       }
 
-      if (defaultSizePercentage != null) {
-        if (defaultSizePercentage < 0) {
-          warnings.push("default size should not be less than 0");
-        } else if (defaultSizePercentage < minSizePercentage) {
-          warnings.push("default size should not be less than min size");
-        }
-
-        if (defaultSizePercentage > 100) {
-          warnings.push("default size should not be greater than 100");
-        } else if (defaultSizePercentage > maxSizePercentage) {
-          warnings.push("default size should not be greater than max size");
-        }
+      if (defaultSize > 100) {
+        warnings.push("default size should not be greater than 100");
+      } else if (defaultSize > maxSize) {
+        warnings.push("default size should not be greater than max size");
       }
+    }
 
-      if (collapsedSizePercentage > minSizePercentage) {
-        warnings.push("collapsed size should not be greater than min size");
-      }
+    if (collapsedSize > minSize) {
+      warnings.push("collapsed size should not be greater than min size");
     }
 
     if (warnings.length > 0) {