feat: allow resize abort onPreResize

.changeset/lovely-suits-divide.md

@@ -0,0 +1,5 @@
+---
+"react-flexy-panels": patch
+---
+
+feat: allow resize abort onPreResize

apps/docs/src/components/FlexyHandle.tsx

@@ -1,15 +1,16 @@
 import { cn } from "@rlx-widgets/base";
 import { GripVerticalIcon } from "lucide-react";
-import { FlexyPanelHandle } from "react-flexy-panels";
+import { FlexyPanelHandle, OnPreResizeFunction } from "react-flexy-panels";
 
-export const FlexyHandle = ({ withHandle }: { withHandle?: boolean }) => {
+export const FlexyHandle = ({ withHandle, onPreResize }: { withHandle?: boolean, onPreResize?: OnPreResizeFunction }) => {
   return (
     <FlexyPanelHandle
       className={cn(
         "cursor-pointer relative flex items-center justify-center after:absolute after:bg-border",
         "data-[direction=vertical]:h-px data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:top-[calc(50%-0.5px)] data-[direction=vertical]:after:h-px data-[direction=vertical]:after:w-full data-[direction=vertical]:cursor-row-resize",
         "data-[direction=horizontal]:w-px data-[direction=horizontal]:after:inset-y-0 data-[direction=horizontal]:after:left-[calc(50%-0.5px)] data-[direction=horizontal]:after:w-px data-[direction=horizontal]:cursor-col-resize"
       )}
+      onPreResize={onPreResize}
     >
       {withHandle && (
         <div

apps/docs/src/pages/SandboxPage.tsx

@@ -5,6 +5,12 @@ import { useState } from "react";
 
 export const SandboxPage = () => {
   const [panel2Open, setPanel2Open] = useState(true);
+  const onPreResize = (sizes: {
+    panel1NewSize: number;
+    panel2NewSize: number;
+  }) => {
+    return { abort: sizes.panel1NewSize > 300 };
+  };
   return (
     <div>
       <div className="h-full w-full border">
@@ -16,7 +22,7 @@ export const SandboxPage = () => {
           </FlexyPanel>
           {panel2Open && (
             <>
-              <FlexyHandle />
+              <FlexyHandle onPreResize={onPreResize} />
               <FlexyPanel defaultSize={33}>
                 <div className="flex items-center justify-center h-100">
                   Panel 2

packages/react-flexy-panels/src/types/OnPreResizeFunction.t.ts

@@ -1,4 +1,8 @@
+export type OnPreResizeReturnOptions = {
+  abort?: boolean;
+};
+
 export type OnPreResizeFunction = (sizes: {
   panel1NewSize: number;
   panel2NewSize: number;
-}) => void;
+}) => OnPreResizeReturnOptions | undefined | void;

packages/react-flexy-panels/src/utils/updatePanelSizes.ts

@@ -94,10 +94,13 @@ export function updatePanelSizes(props: {
   }
 
   // Call the onPreResize function to allow any custom logic to be applied before the panel sizes are updated
-  onPreResize?.({
+  const onPreResizeResult = onPreResize?.({
     panel1NewSize,
     panel2NewSize,
   });
+  if (onPreResizeResult?.abort) {
+    return 0;
+  }
 
   // Handle different unit combinations
   if (panel1Unit === "auto" && panel2Unit === "auto") {