feat: add onResizeStart prop (#347)

* feat: add `onResizeStart` prop * refactor: remove useState callbacks from deps
gravity-ui · Jan 14, 2025 · f9a9230 · f9a9230
1 parent d0208f1
commit f9a9230
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -45,6 +45,9 @@ export interface DrawerItemProps {
      */
     width?: number;
 
+    /** Called at the start of resizing. */
+    onResizeStart?: VoidFunction;
+
     /**
      * Called at the end of resizing. Can be used to save the new width.
      * @param width The new width of the drawer item
@@ -76,6 +79,7 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             width,
             minResizeWidth,
             maxResizeWidth,
+            onResizeStart,
             onResize,
             keepMounted = false,
         } = props;
@@ -91,6 +95,7 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             width,
             minResizeWidth,
             maxResizeWidth,
+            onResizeStart,
             onResize,
         });
 

diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md
@@ -73,6 +73,7 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`.
 | className      | HTML `class` attribute                                                                  |         `string`          |         |
 | resizable      | Determines whether the drawer item can be resized                                       |         `boolean`         |         |
 | width          | The width of the resizable drawer item                                                  |         `number`          |         |
+| onResizeStart  | Callback function called at the start of resizing.                                      |       `() => void`        |         |
 | onResize       | Callback function called at the end of resizing. Can be used to save the new width.     | `(width: number) => void` |         |
 | minResizeWidth | The minimum width of the resizable drawer item                                          |         `number`          |         |
 | maxResizeWidth | The maximum width of the resizable drawer item                                          |         `number`          |         |

diff --git a/src/components/Drawer/utils.ts b/src/components/Drawer/utils.ts
@@ -89,6 +89,7 @@ export interface UseResizableDrawerItemParams {
     width?: number;
     minResizeWidth?: number;
     maxResizeWidth?: number;
+    onResizeStart?: VoidFunction;
     onResize?: OnResizeHandler;
 }
 
@@ -98,6 +99,7 @@ export function useResizableDrawerItem(params: UseResizableDrawerItemParams) {
         width,
         minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH,
         maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH,
+        onResizeStart,
         onResize,
     } = params;
 
@@ -124,7 +126,8 @@ export function useResizableDrawerItem(params: UseResizableDrawerItemParams) {
     const onStart = React.useCallback(() => {
         setIsResizing(true);
         setResizeDelta(0);
-    }, [setIsResizing, setResizeDelta]);
+        onResizeStart?.();
+    }, [onResizeStart]);
 
     const onMove = React.useCallback((delta: number) => {
         setResizeDelta(delta);
@@ -137,7 +140,7 @@ export function useResizableDrawerItem(params: UseResizableDrawerItemParams) {
             setInternalWidth(newWidth);
             onResize?.(newWidth);
         },
-        [setIsResizing, setInternalWidth, getResizedWidth, onResize],
+        [getResizedWidth, onResize],
     );
 
     const displayWidth = isResizing