diff --git a/.changeset/funny-pianos-type.md b/.changeset/funny-pianos-type.md new file mode 100644 index 0000000..43ead54 --- /dev/null +++ b/.changeset/funny-pianos-type.md @@ -0,0 +1,5 @@ +--- +"react-flexy-panels": patch +--- + +feat: expose onPreResize prop on handle to allow any preprocess to be done before the panels are resized diff --git a/README.md b/README.md index b136a75..5fe34a2 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,11 @@ A flexible, resizable panel system for React applications version >= 18 with sup ## Features - ðŸŽĻ **Flexible Layouts** - Support for both horizontal and vertical panel arrangements +- 🎛ïļ **Customizable** - Support for pixel, percentage, and auto-sizing units +- 🎭 **Unstyled** - No default styles, giving you full control over appearance - 🔄 **Resizable Panels** - Drag handles to resize panels dynamically - ðŸ“Ķ **Tree-shakeable** - Optimized for minimal bundle size -- ðŸŽŊ **TypeScript** - Full TypeScript support with type definitions - ðŸŠķ **Lightweight** - Minimal dependencies, only React as a peer dependency -- 🎛ïļ **Customizable** - Support for pixel, percentage, and auto-sizing units ## Installation diff --git a/packages/react-flexy-panels/README.md b/packages/react-flexy-panels/README.md index b136a75..5fe34a2 100644 --- a/packages/react-flexy-panels/README.md +++ b/packages/react-flexy-panels/README.md @@ -7,11 +7,11 @@ A flexible, resizable panel system for React applications version >= 18 with sup ## Features - ðŸŽĻ **Flexible Layouts** - Support for both horizontal and vertical panel arrangements +- 🎛ïļ **Customizable** - Support for pixel, percentage, and auto-sizing units +- 🎭 **Unstyled** - No default styles, giving you full control over appearance - 🔄 **Resizable Panels** - Drag handles to resize panels dynamically - ðŸ“Ķ **Tree-shakeable** - Optimized for minimal bundle size -- ðŸŽŊ **TypeScript** - Full TypeScript support with type definitions - ðŸŠķ **Lightweight** - Minimal dependencies, only React as a peer dependency -- 🎛ïļ **Customizable** - Support for pixel, percentage, and auto-sizing units ## Installation diff --git a/packages/react-flexy-panels/src/components/FlexyPanelHandle/FlexyPanelHandle.tsx b/packages/react-flexy-panels/src/components/FlexyPanelHandle/FlexyPanelHandle.tsx index ee49c8b..9bfc2d5 100644 --- a/packages/react-flexy-panels/src/components/FlexyPanelHandle/FlexyPanelHandle.tsx +++ b/packages/react-flexy-panels/src/components/FlexyPanelHandle/FlexyPanelHandle.tsx @@ -7,7 +7,7 @@ import { FlexyPanelHandleProps } from "./types"; export const FlexyPanelHandle = forwardRef< HTMLDivElement, FlexyPanelHandleProps ->(({ onMouseDown, onTouchStart, ...props }, ref) => { +>(({ onMouseDown, onTouchStart, onPreResize, ...props }, ref) => { const id = useId(); const { direction } = useFlexyPanelsContext(); const { @@ -16,6 +16,7 @@ export const FlexyPanelHandle = forwardRef< } = usePanelDrag({ direction, handleId: id, + onPreResize, }); const handleMouseDown = useCallback( diff --git a/packages/react-flexy-panels/src/components/FlexyPanelHandle/types/FlexyPanelHandleProps.t.ts b/packages/react-flexy-panels/src/components/FlexyPanelHandle/types/FlexyPanelHandleProps.t.ts index 3ce5449..b865826 100644 --- a/packages/react-flexy-panels/src/components/FlexyPanelHandle/types/FlexyPanelHandleProps.t.ts +++ b/packages/react-flexy-panels/src/components/FlexyPanelHandle/types/FlexyPanelHandleProps.t.ts @@ -1,3 +1,6 @@ import { ComponentProps } from "react"; +import { OnPreResizeFunction } from "../../../types"; -export type FlexyPanelHandleProps = ComponentProps<"div">; \ No newline at end of file +export type FlexyPanelHandleProps = ComponentProps<"div"> & { + onPreResize?: OnPreResizeFunction; +}; diff --git a/packages/react-flexy-panels/src/hooks/usePanelDrag.ts b/packages/react-flexy-panels/src/hooks/usePanelDrag.ts index 8ee5b7d..1e1af9d 100644 --- a/packages/react-flexy-panels/src/hooks/usePanelDrag.ts +++ b/packages/react-flexy-panels/src/hooks/usePanelDrag.ts @@ -1,16 +1,21 @@ -import { Direction } from "../types"; +import { Direction, OnPreResizeFunction } from "../types"; import { findAdjacentPanels, updatePanelSizes } from "../utils"; import { useCallback, useEffect, useRef, useState } from "react"; type UsePanelDragOptions = { direction: Direction; handleId: string; + onPreResize?: OnPreResizeFunction; }; /** * Custom hook to handle panel dragging logic */ -export const usePanelDrag = ({ direction, handleId }: UsePanelDragOptions) => { +export const usePanelDrag = ({ + direction, + handleId, + onPreResize, +}: UsePanelDragOptions) => { const [isDragging, setIsDragging] = useState(false); const dragStartRef = useRef(0); const handleElementRef = useRef(null); @@ -43,6 +48,7 @@ export const usePanelDrag = ({ direction, handleId }: UsePanelDragOptions) => { dragDelta, direction, unappliedDragDelta: unappliedDragDeltaRef.current, + onPreResize, }); unappliedDragDeltaRef.current = @@ -50,7 +56,7 @@ export const usePanelDrag = ({ direction, handleId }: UsePanelDragOptions) => { dragStartRef.current = dragCurrent; }, - [direction, handleId] + [direction, handleId, onPreResize] ); const onDrag = useCallback( diff --git a/packages/react-flexy-panels/src/types/OnPreResizeFunction.t.ts b/packages/react-flexy-panels/src/types/OnPreResizeFunction.t.ts new file mode 100644 index 0000000..d148c59 --- /dev/null +++ b/packages/react-flexy-panels/src/types/OnPreResizeFunction.t.ts @@ -0,0 +1,4 @@ +export type OnPreResizeFunction = (sizes: { + panel1NewSize: number; + panel2NewSize: number; +}) => void; diff --git a/packages/react-flexy-panels/src/types/index.ts b/packages/react-flexy-panels/src/types/index.ts index 1246a8d..5f8ac3f 100644 --- a/packages/react-flexy-panels/src/types/index.ts +++ b/packages/react-flexy-panels/src/types/index.ts @@ -1 +1,2 @@ export * from "./Direction.t"; +export * from "./OnPreResizeFunction.t"; diff --git a/packages/react-flexy-panels/src/utils/updatePanelSizes.ts b/packages/react-flexy-panels/src/utils/updatePanelSizes.ts index 1d688a3..e1c0435 100644 --- a/packages/react-flexy-panels/src/utils/updatePanelSizes.ts +++ b/packages/react-flexy-panels/src/utils/updatePanelSizes.ts @@ -1,4 +1,4 @@ -import { Direction } from "../types"; +import { Direction, OnPreResizeFunction } from "../types"; import { getPanelSizeByDirection } from "./getPanelSizeByDirection"; import { isSameSign } from "./isSameSign"; @@ -13,8 +13,9 @@ export function updatePanelSizes(props: { dragDelta: number; direction: Direction; unappliedDragDelta: number; + onPreResize?: OnPreResizeFunction; }): number { - const { panel1, panel2, direction, unappliedDragDelta } = props; + const { panel1, panel2, direction, unappliedDragDelta, onPreResize } = props; let dragDelta = props.dragDelta; if (dragDelta === 0) { @@ -92,6 +93,12 @@ export function updatePanelSizes(props: { panel2NewSize = Math.max(minPanelSize, panel2NewSize); } + // Call the onPreResize function to allow any custom logic to be applied before the panel sizes are updated + onPreResize?.({ + panel1NewSize, + panel2NewSize, + }); + // Handle different unit combinations if (panel1Unit === "auto" && panel2Unit === "auto") { panel1.style.flex = `0 1 ${panel1NewSize}px`;