feat: modify size logic and test units

Author: QdabuliuQ

src/DrawerPopup.tsx

@@ -284,30 +284,59 @@ const DrawerPopup: React.ForwardRefRenderFunction<
         break;
     }
   }
-  // Use currentSize if available (from resizing), otherwise use width/height with proper fallback to defaults
+  // Track if props changed to detect controlled mode
+  const prevSizeRef = React.useRef<{
+    width?: number | string;
+    height?: number | string;
+  }>({});
+  const isControlledMode = React.useMemo(() => {
+    // Consider controlled if width/height changes between renders (external updates)
+    const currentSize = isHorizontal ? width : height;
+    const prevSize = isHorizontal
+      ? prevSizeRef.current.width
+      : prevSizeRef.current.height;
+
+    const hasExternalUpdate =
+      currentSize !== undefined &&
+      currentSize !== prevSize &&
+      prevSize !== undefined;
+
+    // Update ref for next comparison
+    prevSizeRef.current = { width, height };
+
+    return hasExternalUpdate;
+  }, [width, height, isHorizontal]);
+
+  // Size calculation with controlled mode consideration
   if (isHorizontal) {
     let finalWidth: number | string;
-    if (currentSize !== undefined) {
-      // Highest priority: user dragged size
+    if (isControlledMode) {
+      // In controlled mode, prioritize external width
+      finalWidth = width !== undefined ? width : defaultWidth;
+    } else if (currentSize !== undefined) {
+      // In uncontrolled mode, user dragged size takes precedence
       finalWidth = currentSize;
     } else if (width !== undefined) {
-      // Second priority: explicitly provided width
+      // Fallback to provided width
       finalWidth = width;
     } else {
-      // Lowest priority: default width fallback
+      // Final fallback to default
       finalWidth = defaultWidth;
     }
     wrapperStyle.width = parseWidthHeight(finalWidth);
   } else {
     let finalHeight: number | string;
-    if (currentSize !== undefined) {
-      // Highest priority: user dragged size
+    if (isControlledMode) {
+      // In controlled mode, prioritize external height
+      finalHeight = height !== undefined ? height : defaultHeight;
+    } else if (currentSize !== undefined) {
+      // In uncontrolled mode, user dragged size takes precedence
       finalHeight = currentSize;
     } else if (height !== undefined) {
-      // Second priority: explicitly provided height
+      // Fallback to provided height
       finalHeight = height;
     } else {
-      // Lowest priority: default height fallback
+      // Final fallback to default
       finalHeight = defaultHeight;
     }
     wrapperStyle.height = parseWidthHeight(finalHeight);
@@ -358,10 +387,13 @@ const DrawerPopup: React.ForwardRefRenderFunction<
 
   const handleResize = React.useCallback(
     (size: number) => {
-      setCurrentSize(size);
+      // In controlled mode, only trigger callback without updating internal state
+      if (!isControlledMode) {
+        setCurrentSize(size);
+      }
       resizable?.onResize?.(size);
     },
-    [resizable],
+    [resizable, isControlledMode],
   );
 
   const handleResizeStart = React.useCallback(() => {

tests/index.spec.tsx

@@ -4,6 +4,7 @@ import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import type { DrawerProps } from '../src';
 import Drawer from '../src';
+import useDrag from '../src/hooks/useDrag';
 
 describe('rc-drawer-menu', () => {
   beforeEach(() => {
@@ -477,9 +478,9 @@ describe('rc-drawer-menu', () => {
   });
 
   it('should support resizable horizontal', () => {
-    let currentWidth = 200;
+    let currentWidth = '200px';
     const setWidth = (newWidth: number) => {
-      currentWidth = newWidth;
+      currentWidth = newWidth + 'px';
     };
     const onResizeStart = jest.fn();
     const onResizeEnd = jest.fn();
@@ -683,4 +684,172 @@ describe('rc-drawer-menu', () => {
     });
     unmount();
   });
+
+  it('should handle default size fallbacks for both directions', () => {
+    // Test horizontal default width (number type)
+    const { unmount: unmount1 } = render(
+      <Drawer open placement="right" defaultWidth={250}>
+        <div>Test content</div>
+      </Drawer>,
+    );
+    let contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ width: '250px' });
+    unmount1();
+
+    // Test vertical default height (number type)
+    const { unmount: unmount2 } = render(
+      <Drawer open placement="top" defaultHeight={150}>
+        <div>Test content</div>
+      </Drawer>,
+    );
+    contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ height: '150px' });
+    unmount2();
+
+    // Test string default width (triggers different code path)
+    const { unmount: unmount3 } = render(
+      <Drawer open placement="left" defaultWidth="300px">
+        <div>Test content</div>
+      </Drawer>,
+    );
+    contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ width: '300px' });
+    unmount3();
+  });
+
+  it('should prioritize props over defaults when currentSize is undefined', () => {
+    // Test width prop priority over defaultWidth
+    const { unmount: unmount1 } = render(
+      <Drawer
+        open
+        placement="left"
+        width={280}
+        defaultWidth="350px" // string to keep currentSize undefined
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    let contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ width: '280px' });
+    unmount1();
+
+    // Test height prop priority over defaultHeight
+    const { unmount: unmount2 } = render(
+      <Drawer
+        open
+        placement="top"
+        height={180}
+        defaultHeight="250px" // string to keep currentSize undefined
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ height: '180px' });
+    unmount2();
+  });
+
+  it('should handle controlled mode for both width and height', () => {
+    // Test controlled mode for width
+    const { rerender: rerender1, unmount: unmount1 } = render(
+      <Drawer
+        open
+        placement="left"
+        width={200}
+        resizable={{ onResize: () => {} }}
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    rerender1(
+      <Drawer
+        open
+        placement="left"
+        width={300}
+        resizable={{ onResize: () => {} }}
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    let contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ width: '300px' });
+    unmount1();
+
+    // Test controlled mode for height
+    const { rerender: rerender2, unmount: unmount2 } = render(
+      <Drawer
+        open
+        placement="top"
+        height={150}
+        resizable={{ onResize: () => {} }}
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    rerender2(
+      <Drawer
+        open
+        placement="top"
+        height={250}
+        resizable={{ onResize: () => {} }}
+      >
+        <div>Test content</div>
+      </Drawer>,
+    );
+    contentWrapper = document.querySelector('.rc-drawer-content-wrapper');
+    expect(contentWrapper).toHaveStyle({ height: '250px' });
+    unmount2();
+  });
+
+  it('should fallback to container size when currentSize is undefined', () => {
+    const onResizeStart = jest.fn();
+    const onResize = jest.fn();
+    const onResizeEnd = jest.fn();
+
+    const mockContainer = {
+      getBoundingClientRect: jest.fn(() => ({
+        width: 350,
+        height: 250,
+        top: 0,
+        left: 0,
+        bottom: 250,
+        right: 350,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      })),
+    } as any;
+
+    const TestComponent = () => {
+      const { dragElementProps } = useDrag({
+        prefixCls: 'rc-drawer-resizable',
+        direction: 'left',
+        minSize: 0,
+        containerRef: { current: mockContainer },
+        currentSize: undefined,
+        onResizeStart,
+        onResize,
+        onResizeEnd,
+      });
+
+      return <div {...dragElementProps}>Dragger</div>;
+    };
+
+    render(<TestComponent />);
+
+    const dragger = document.querySelector('.rc-drawer-resizable-dragger');
+    expect(dragger).toBeTruthy();
+
+    fireEvent.mouseDown(dragger, { clientX: 200 });
+
+    expect(mockContainer.getBoundingClientRect).toHaveBeenCalled();
+
+    expect(onResizeStart).toHaveBeenCalledWith(350);
+
+    fireEvent.mouseMove(document, { clientX: 250 });
+    expect(onResize).toHaveBeenCalledWith(400);
+
+    fireEvent.mouseUp(document, { clientX: 250 });
+    expect(onResizeEnd).toHaveBeenCalledWith(350);
+  });
 });