Navigation drawer issue 432 (#433)

* feat(Drawer): add the 'event' argument to the 'onResize' prop (#432)

* fix(Drawer): add a type specifier for import (#432)

Author: BlackPoretsky

src/components/Drawer/Drawer.tsx

@@ -7,7 +7,12 @@ import {CSSTransition, Transition} from 'react-transition-group';
 
 import {block} from '../utils/cn';
 
-import {type DrawerDirection, useResizableDrawerItem} from './utils';
+import {
+    type DrawerDirection,
+    type OnResizeContinueHandler,
+    type OnResizeHandler,
+    useResizableDrawerItem,
+} from './utils';
 
 import './Drawer.scss';
 
@@ -53,15 +58,16 @@ export interface DrawerItemProps {
     /**
      * Called at the end of resizing. Can be used to save the new width.
      * @param width The new width of the drawer item
+     * @param event The original event
      */
-    onResize?: (width: number) => void;
+    onResize?: OnResizeHandler;
 
     /**
      * Callback function called each time when the drawer item is resizing.
      * Do not use it to store the new width for DrawerItem `width` prop. Use `onResize` instead.
      * @param width The new width of the drawer item
      */
-    onResizeContinue?: (width: number) => void;
+    onResizeContinue?: OnResizeContinueHandler;
 
     /** The minimum width of the resizable drawer item */
     minResizeWidth?: number;

src/components/Drawer/utils.ts

@@ -5,7 +5,8 @@ export const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
 export const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
 
 export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
-export type OnResizeHandler = (width: number) => void;
+export type OnResizeHandler = (width: number, event: MouseEvent | TouchEvent) => void;
+export type OnResizeContinueHandler = (width: number) => void;
 
 function getEventClientPosition(
     e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
@@ -23,7 +24,7 @@ function getEventClientPosition(
 export interface UseResizeHandlersParams {
     onStart: () => void;
     onMove: (delta: number) => void;
-    onEnd: (delta: number) => void;
+    onEnd: (delta: number, event: MouseEvent | TouchEvent) => void;
     direction?: 'horizontal' | 'vertical';
 }
 
@@ -69,7 +70,7 @@ export function useResizeHandlers({
             const current = getEventClientPosition(e, direction);
             const delta = initialPosition.current - current;
 
-            onEnd(delta);
+            onEnd(delta, e);
         },
         [handleMove, disableSelect, direction, onEnd],
     );
@@ -114,7 +115,7 @@ export interface UseResizableDrawerItemParams {
     maxResizeWidth?: number;
     onResizeStart?: VoidFunction;
     onResize?: OnResizeHandler;
-    onResizeContinue?: OnResizeHandler;
+    onResizeContinue?: OnResizeContinueHandler;
 }
 
 export function useResizableDrawerItem(params: UseResizableDrawerItemParams) {
@@ -163,11 +164,11 @@ export function useResizableDrawerItem(params: UseResizableDrawerItemParams) {
     );
 
     const onEnd = React.useCallback(
-        (delta: number) => {
+        (delta: number, event: MouseEvent | TouchEvent) => {
             const newWidth = getResizedWidth(delta);
             setIsResizing(false);
             setInternalWidth(newWidth);
-            onResize?.(newWidth);
+            onResize?.(newWidth, event);
         },
         [getResizedWidth, onResize],
     );