fix(drawer): report sizes in resize callbacks (#84)

Sync react-component/drawer#628.

Author: aibayanyu20

packages/drawer/src/DrawerPopup.tsx

@@ -73,8 +73,8 @@ export interface DrawerPopupProps extends DrawerPanelEvents {
     | boolean
     | {
       onResize?: (size: number) => void
-      onResizeStart?: () => void
-      onResizeEnd?: () => void
+      onResizeStart?: (size: number) => void
+      onResizeEnd?: (size: number) => void
     }
 
 }
@@ -215,8 +215,8 @@ const DrawerPopup = defineComponent<DrawerPopupProps>(
       containerRef: wrapperRef,
       currentSize: mergedSize,
       onResize: onInternalResize,
-      onResizeStart: () => resizeConfig?.value?.onResizeStart?.(),
-      onResizeEnd: () => resizeConfig?.value?.onResizeEnd?.(),
+      onResizeStart: size => resizeConfig?.value?.onResizeStart?.(size),
+      onResizeEnd: size => resizeConfig?.value?.onResizeEnd?.(size),
     })
     return () => {
       const {

packages/drawer/tests/index.test.tsx

@@ -44,6 +44,41 @@ describe('vc-drawer', () => {
     await nextTick()
   })
 
+  it('reports drawer sizes when resize starts and ends', async () => {
+    const onResizeStart = vi.fn()
+    const onResizeEnd = vi.fn()
+    const wrapper = mount(Drawer, {
+      props: {
+        open: true,
+        getContainer: false,
+        placement: 'right',
+        defaultSize: 320,
+        resizable: {
+          onResizeStart,
+          onResizeEnd,
+        },
+        ...motionProps,
+      },
+    })
+
+    await nextTick()
+    const contentWrapper = wrapper.find('.vc-drawer-content-wrapper').element as HTMLElement
+    contentWrapper.getBoundingClientRect = vi.fn(() => ({
+      width: 360,
+      height: 0,
+    } as DOMRect))
+
+    await wrapper.find('.vc-drawer-resizable-dragger').trigger('mousedown', { clientX: 100 })
+    await nextTick()
+    document.dispatchEvent(new MouseEvent('mouseup'))
+
+    expect(onResizeStart).toHaveBeenCalledWith(320)
+    expect(onResizeEnd).toHaveBeenCalledWith(360)
+
+    wrapper.unmount()
+    await nextTick()
+  })
+
   it('closes on Escape when getContainer is false', async () => {
     const onClose = vi.fn()
     const wrapper = mount(Drawer, {