From aaadac9f64f3a1f517a03ee487a9de36181dac53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Fri, 28 Aug 2026 16:01:25 +0800 Subject: [PATCH 1/4] fix: type resize callback sizes --- src/Drawer.tsx | 4 ++-- src/DrawerPopup.tsx | 4 ++-- tests/index.spec.tsx | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/Drawer.tsx b/src/Drawer.tsx index 47155982..4d35f273 100644 --- a/src/Drawer.tsx +++ b/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; } diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx index 01beea4f..4e53f84f 100644 --- a/src/DrawerPopup.tsx +++ b/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; }; } diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 026e3e66..c8cff299 100755 --- a/tests/index.spec.tsx +++ b/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(
{ // 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 }); @@ -523,6 +524,7 @@ describe('rc-drawer-menu', () => { // onResizeEnd should be called when mouse up expect(onResizeEnd).toHaveBeenCalledTimes(1); + expect(onResizeEnd).toHaveBeenCalledWith(200); expect(onResize).toHaveBeenCalledWith(100); From 77c44f506796cf0458dc705466bd773e22e581cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Fri, 28 Aug 2026 16:32:45 +0800 Subject: [PATCH 2/4] docs: explain resize callback sizes --- README.md | 74 ++++++++++++++++++------------------- docs/demo/resizable.md | 2 + docs/examples/resizable.tsx | 12 ++++-- 3 files changed, 47 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 2664174f..1f7b16f3 100644 --- a/README.md +++ b/README.md @@ -56,43 +56,43 @@ Then open `http://localhost:8000`. ## API -| Property | Type | Default | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | -| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | -| autoFocus | boolean | true | Whether to focus the drawer after it opens. | -| children | ReactNode | - | Drawer content. | -| className | string | - | Class name for the drawer panel. | -| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | -| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | -| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | -| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | -| focusTrap | boolean | - | Whether to trap focus inside the drawer. | -| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | -| forceRender | boolean | false | Render the drawer before it is opened. | -| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | -| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | -| keyboard | boolean | true | Whether pressing Esc closes the drawer. | -| mask | boolean | true | Whether to show the mask. | -| maskClassName | string | - | Class name for the mask. | -| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | -| maskMotion | CSSMotionProps | - | Motion config for the mask. | -| maskStyle | CSSProperties | - | Style for the mask. | -| maxSize | number | - | Maximum size for a resizable drawer. | -| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | -| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | -| open | boolean | false | Whether the drawer is open. | -| panelRef | Ref | - | Ref for the drawer panel. | -| 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. | -| 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. | -| style | CSSProperties | - | Style for the drawer panel. | -| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | -| width | number \| string | - | Deprecated. Use `size` for left or right placement. | -| zIndex | number | - | Root wrapper z-index. | +| Property | Type | Default | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | +| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | +| autoFocus | boolean | true | Whether to focus the drawer after it opens. | +| children | ReactNode | - | Drawer content. | +| className | string | - | Class name for the drawer panel. | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | +| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | +| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | +| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | +| focusTrap | boolean | - | Whether to trap focus inside the drawer. | +| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | +| forceRender | boolean | false | Render the drawer before it is opened. | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | +| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | +| keyboard | boolean | true | Whether pressing Esc closes the drawer. | +| mask | boolean | true | Whether to show the mask. | +| maskClassName | string | - | Class name for the mask. | +| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | +| maskMotion | CSSMotionProps | - | Motion config for the mask. | +| maskStyle | CSSProperties | - | Style for the mask. | +| maxSize | number | - | Maximum size for a resizable drawer. | +| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | +| open | boolean | false | Whether the drawer is open. | +| panelRef | Ref | - | Ref for the drawer panel. | +| 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?: (size: number) => void; onResizeEnd?: (size: number) => void }` | false | Enable resizing. Each callback receives the current size in pixels. | +| 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. | +| style | CSSProperties | - | Style for the drawer panel. | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | +| width | number \| string | - | Deprecated. Use `size` for left or right placement. | +| zIndex | number | - | Root wrapper z-index. | Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel. diff --git a/docs/demo/resizable.md b/docs/demo/resizable.md index 92fdad22..ae327d67 100644 --- a/docs/demo/resizable.md +++ b/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. + diff --git a/docs/examples/resizable.tsx b/docs/examples/resizable.tsx index b2bfc524..6cdb2e99 100644 --- a/docs/examples/resizable.tsx +++ b/docs/examples/resizable.tsx @@ -12,6 +12,7 @@ export default () => { const [placement, setPlacement] = React.useState('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 () => { ))}
+
+ Current size: {isHorizontal ? width : height}px. {resizeStatus} +
{ 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} From 9975b0b872d755199a817c5725d8c2fe0d5ba339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Fri, 28 Aug 2026 17:09:32 +0800 Subject: [PATCH 3/4] docs: remove unrelated table formatting --- README.md | 74 +++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 1f7b16f3..2664174f 100644 --- a/README.md +++ b/README.md @@ -56,43 +56,43 @@ Then open `http://localhost:8000`. ## API -| Property | Type | Default | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | -| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | -| autoFocus | boolean | true | Whether to focus the drawer after it opens. | -| children | ReactNode | - | Drawer content. | -| className | string | - | Class name for the drawer panel. | -| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | -| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | -| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | -| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | -| focusTrap | boolean | - | Whether to trap focus inside the drawer. | -| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | -| forceRender | boolean | false | Render the drawer before it is opened. | -| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | -| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | -| keyboard | boolean | true | Whether pressing Esc closes the drawer. | -| mask | boolean | true | Whether to show the mask. | -| maskClassName | string | - | Class name for the mask. | -| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | -| maskMotion | CSSMotionProps | - | Motion config for the mask. | -| maskStyle | CSSProperties | - | Style for the mask. | -| maxSize | number | - | Maximum size for a resizable drawer. | -| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | -| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | -| open | boolean | false | Whether the drawer is open. | -| panelRef | Ref | - | Ref for the drawer panel. | -| 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?: (size: number) => void; onResizeEnd?: (size: number) => void }` | false | Enable resizing. Each callback receives the current size in pixels. | -| 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. | -| style | CSSProperties | - | Style for the drawer panel. | -| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | -| width | number \| string | - | Deprecated. Use `size` for left or right placement. | -| zIndex | number | - | Root wrapper z-index. | +| Property | Type | Default | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- | +| afterOpenChange | `(open: boolean) => void` | - | Called after the open or close animation ends. | +| autoFocus | boolean | true | Whether to focus the drawer after it opens. | +| children | ReactNode | - | Drawer content. | +| className | string | - | Class name for the drawer panel. | +| classNames | `{ mask?: string; wrapper?: string; section?: string; dragger?: string }` | - | Semantic class names for internal drawer elements. | +| defaultSize | number \| string | - | Default size for uncontrolled resizable drawer. | +| destroyOnHidden | boolean | false | Unmount the drawer after it is fully closed. | +| drawerRender | `(node: ReactNode) => ReactNode` | - | Customize rendered drawer panel content. | +| focusTrap | boolean | - | Whether to trap focus inside the drawer. | +| focusTriggerAfterClose | boolean | true | Whether to return focus to the trigger after closing. | +| forceRender | boolean | false | Render the drawer before it is opened. | +| getContainer | HTMLElement \| `() => HTMLElement` \| string \| false | `body` | Return the mount node. Set to `false` to render inline. | +| height | number \| string | - | Deprecated. Use `size` for top or bottom placement. | +| keyboard | boolean | true | Whether pressing Esc closes the drawer. | +| mask | boolean | true | Whether to show the mask. | +| maskClassName | string | - | Class name for the mask. | +| maskClosable | boolean | true | Whether clicking the mask closes the drawer. | +| maskMotion | CSSMotionProps | - | Motion config for the mask. | +| maskStyle | CSSProperties | - | Style for the mask. | +| maxSize | number | - | Maximum size for a resizable drawer. | +| motion | CSSMotionProps \| `(placement: Placement) => CSSMotionProps` | - | Motion config for the drawer panel. | +| onClose | `(event: MouseEvent \| KeyboardEvent) => void` | - | Called when the drawer requests to close. | +| open | boolean | false | Whether the drawer is open. | +| panelRef | Ref | - | Ref for the drawer panel. | +| 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. | +| 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. | +| style | CSSProperties | - | Style for the drawer panel. | +| styles | `{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }` | - | Semantic styles for internal drawer elements. | +| width | number \| string | - | Deprecated. Use `size` for left or right placement. | +| zIndex | number | - | Root wrapper z-index. | Mouse and keyboard event handlers such as `onClick`, `onMouseEnter`, `onMouseLeave`, `onKeyDown`, and `onKeyUp` are passed to the drawer panel. From d634662c4073b1dc9609bad387eb82082ef7b4f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Fri, 28 Aug 2026 17:46:08 +0800 Subject: [PATCH 4/4] docs: document resize callback sizes --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2664174f..4bbf5557 100644 --- a/README.md +++ b/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. |