Wired up onLayout and onResize/onExpand/onCollapse callbacks

bvaughn · Oct 21, 2023 · 30ed78c · 30ed78c
1 parent 9806d6b
commit 30ed78c
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 44 deletions.
diff --git a/packages/react-resizable-panels-website/src/routes/examples/ImperativePanelGroupApi.tsx b/packages/react-resizable-panels-website/src/routes/examples/ImperativePanelGroupApi.tsx
@@ -1,5 +1,8 @@
 import { useRef, useState } from "react";
-import type { new_ImperativePanelGroupHandle as ImperativePanelGroupHandle } from "react-resizable-panels";
+import type {
+  MixedSizes,
+  new_ImperativePanelGroupHandle as ImperativePanelGroupHandle,
+} from "react-resizable-panels";
 import {
   new_Panel as Panel,
   new_PanelGroup as PanelGroup,
@@ -54,8 +57,8 @@ function Content() {
 
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  const onLayout = (sizes: number[]) => {
-    setSizes(sizes);
+  const onLayout = (mixedSizes: MixedSizes[]) => {
+    setSizes(mixedSizes.map((mixedSize) => mixedSize.sizePercentage));
   };
 
   const resetLayout = () => {

diff --git a/packages/react-resizable-panels/src/index.ts b/packages/react-resizable-panels/src/index.ts
@@ -3,6 +3,7 @@ import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 
 // TEMP
+import type { MixedSizes } from "./new/types";
 import { Panel as new_Panel } from "./new/Panel";
 import type { ImperativePanelHandle as new_ImperativePanelHandle } from "./new/Panel";
 import { PanelGroup as new_PanelGroup } from "./new/PanelGroup";
@@ -26,6 +27,7 @@ export {
   // TypeScript types
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
+  MixedSizes,
   PanelOnCollapse,
   PanelOnResize,
   PanelGroupOnLayout,

diff --git a/packages/react-resizable-panels/src/new/Panel.ts b/packages/react-resizable-panels/src/new/Panel.ts
@@ -16,13 +16,10 @@ import { MixedSizes } from "./types";
 
 export type OnCollapse = () => void;
 export type OnExpand = () => void;
-export type OnResize = ({
-  sizePercentage,
-  sizePixels,
-}: {
-  sizePercentage: number;
-  sizePixels: number;
-}) => void;
+export type OnResize = (
+  mixedSizes: MixedSizes,
+  prevMixedSizes: MixedSizes
+) => void;
 
 export type PanelCallbacks = {
   onCollapse?: OnCollapse;