fix: type resize callback sizes (#628)

* fix: type resize callback sizes

* docs: explain resize callback sizes

* docs: remove unrelated table formatting

* docs: document resize callback sizes

Author: nrps9909

README.md

@@ -85,7 +85,7 @@ Then open `http://localhost:8000`.
 | placement              | `left` \| `right` \| `top` \| `bottom`                                                                   | `right`              | Drawer placement.                                                               |
 | prefixCls              | string                                                                                                   | `rc-drawer`          | Class name prefix.                                                              |
 | push                   | boolean \| `{ distance?: number \| string }`                                                             | -                    | Push parent drawers when nested.                                                |
-| resizable              | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: () => void; onResizeEnd?: () => void }` | false                | Enable resizing and optional resize callbacks.                                  |
+| resizable              | boolean \| `{ onResize?: (size: number) => void; onResizeStart?: (size: number) => void; onResizeEnd?: (size: number) => void }` | false                | Enable resizing and optional resize callbacks.                                  |
 | rootClassName          | string                                                                                                   | -                    | Class name for the root wrapper.                                                |
 | rootStyle              | CSSProperties                                                                                            | -                    | Style for the root wrapper.                                                     |
 | size                   | number \| string                                                                                         | `378` for left/right | Drawer size. Controls width for left/right and height for top/bottom placement. |

docs/demo/resizable.md

@@ -5,4 +5,6 @@ nav:
   path: /resizable
 ---
 
+Drag an edge to resize the drawer. `onResizeStart`, `onResize`, and `onResizeEnd` each receive the current size in pixels.
+
 <code src="../examples/resizable.tsx"></code>

docs/examples/resizable.tsx

@@ -12,6 +12,7 @@ export default () => {
   const [placement, setPlacement] = React.useState<Placement>('right');
   const [width, setWidth] = React.useState(320);
   const [height, setHeight] = React.useState(240);
+  const [resizeStatus, setResizeStatus] = React.useState('Ready to resize');
 
   const buttons = [
     { placement: 'left' as Placement, label: 'Left Drawer' },
@@ -40,6 +41,9 @@ export default () => {
           </button>
         ))}
       </div>
+      <div style={{ marginBottom: 16 }}>
+        Current size: {isHorizontal ? width : height}px. {resizeStatus}
+      </div>
       <Drawer
         width={isHorizontal ? width : undefined}
         height={!isHorizontal ? height : undefined}
@@ -55,11 +59,11 @@ export default () => {
               setHeight(size);
             }
           },
-          onResizeStart: () => {
-            console.log('onResizeStart');
+          onResizeStart: size => {
+            setResizeStatus(`Resize started at ${size}px`);
           },
-          onResizeEnd: () => {
-            console.log('onResizeEnd');
+          onResizeEnd: size => {
+            setResizeStatus(`Resize ended at ${size}px`);
           },
         }}
         {...motionProps}

src/Drawer.tsx

@@ -46,8 +46,8 @@ export interface DrawerProps
     | boolean
     | {
         onResize?: (size: number) => void;
-        onResizeStart?: () => void;
-        onResizeEnd?: () => void;
+        onResizeStart?: (size: number) => void;
+        onResizeEnd?: (size: number) => void;
       };
   focusTriggerAfterClose?: boolean;
 }

src/DrawerPopup.tsx

@@ -82,8 +82,8 @@ export interface DrawerPopupProps
     | boolean
     | {
         onResize?: (size: number) => void;
-        onResizeStart?: () => void;
-        onResizeEnd?: () => void;
+        onResizeStart?: (size: number) => void;
+        onResizeEnd?: (size: number) => void;
       };
 }
 

tests/index.spec.tsx

@@ -445,8 +445,8 @@ describe('rc-drawer-menu', () => {
 
   it('should support resizable horizontal', () => {
     const onResize = jest.fn();
-    const onResizeStart = jest.fn();
-    const onResizeEnd = jest.fn();
+    const onResizeStart = jest.fn((_size: number) => {});
+    const onResizeEnd = jest.fn((_size: number) => {});
 
     const { unmount } = render(
       <div
@@ -516,13 +516,15 @@ describe('rc-drawer-menu', () => {
 
     // onResizeStart should be called when mouse down
     expect(onResizeStart).toHaveBeenCalledTimes(1);
+    expect(onResizeStart).toHaveBeenCalledWith(200);
     expect(onResizeEnd).not.toHaveBeenCalled();
 
     fireEvent.mouseMove(document, { clientX: 300, clientY: 0 });
     fireEvent.mouseUp(document, { clientX: 300, clientY: 0 });
 
     // onResizeEnd should be called when mouse up
     expect(onResizeEnd).toHaveBeenCalledTimes(1);
+    expect(onResizeEnd).toHaveBeenCalledWith(200);
 
     expect(onResize).toHaveBeenCalledWith(100);