feat: add resizable drawer feature

docs/demo/resizable.md

@@ -0,0 +1,8 @@
+---
+title: resizable
+nav:
+  title: Resizable
+  path: /resizable
+---
+
+<code src="../examples/resizable.tsx"></code>

docs/examples/assets/motion.less

@@ -83,4 +83,46 @@
       }
     }
   }
+
+  &-top {
+    .panel-motion();
+
+    &-enter,
+    &-appear {
+      transform: translateY(-100%);
+
+      &-active {
+        transform: translateX(0);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0);
+
+      &-active {
+        transform: translateY(-100%) !important;
+      }
+    }
+  }
+
+  &-bottom {
+    .panel-motion();
+
+    &-enter,
+    &-appear {
+      transform: translateY(100%);
+
+      &-active {
+        transform: translateX(0);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0);
+
+      &-active {
+        transform: translateY(100%) !important;
+      }
+    }
+  }
 }

docs/examples/base.tsx

@@ -20,7 +20,7 @@ const Demo = () => {
         afterOpenChange={(c: boolean) => {
           console.log('transitionEnd: ', c);
         }}
-        placement="right"
+        placement="top"
         // width={400}
         width="60%"
         // Motion

docs/examples/resizable.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import Drawer from 'rc-drawer';
+
+import '../../assets/index.less';
+import './assets/index.less';
+import motionProps from './motion';
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+  const [placement, setPlacement] = React.useState<
+    'left' | 'right' | 'top' | 'bottom'
+  >('right');
+  const [resizable, setResizable] = React.useState(true);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <button onClick={() => setOpen(true)} style={{ marginRight: 8 }}>
+          打开抽屉
+        </button>
+        <label style={{ marginRight: 8 }}>
+          <input
+            type="checkbox"
+            checked={resizable}
+            onChange={e => setResizable(e.target.checked)}
+          />
+          可拖拽调整大小
+        </label>
+        <span>位置：</span>
+        <select
+          value={placement}
+          onChange={e => setPlacement(e.target.value as any)}
+        >
+          <option value="left">左侧</option>
+          <option value="right">右侧</option>
+          <option value="top">顶部</option>
+          <option value="bottom">底部</option>
+        </select>
+      </div>
+      <Drawer
+        width={placement === 'left' || placement === 'right' ? 320 : undefined}
+        height={placement === 'top' || placement === 'bottom' ? 240 : undefined}
+        placement={placement}
+        open={open}
+        key={placement}
+        onClose={() => setOpen(false)}
+        resizable={resizable}
+        {...motionProps}
+      >
+        <div style={{ marginTop: 24, color: '#888' }}>
+          <p>你可以拖拽抽屉边缘调整大小（仅在勾选“可拖拽调整大小”时生效）。</p>
+        </div>
+      </Drawer>
+    </div>
+  );
+};

src/Drawer.tsx

@@ -26,6 +26,11 @@ export interface DrawerProps
   panelRef?: React.Ref<HTMLDivElement>;
   classNames?: DrawerClassNames;
   styles?: DrawerStyles;
+  /** 是否启用调整大小功能 */
+  resizable?: boolean;
+  onResize?: (size: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {
@@ -48,6 +53,9 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
 
     // Refs
     panelRef,
@@ -114,6 +122,9 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
   };
   const drawerPopupProps = {
     ...props,

src/DrawerPopup.tsx

@@ -11,6 +11,7 @@ import type {
   DrawerPanelEvents,
 } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
+import ResizableLine from './ResizableLine';
 import { parseWidthHeight } from './util';
 import type { DrawerClassNames, DrawerStyles } from './inter';
 
@@ -75,6 +76,12 @@ export interface DrawerPopupProps
   // styles
   styles?: DrawerStyles;
   drawerRender?: (node: React.ReactNode) => React.ReactNode;
+
+  // resizable
+  resizable?: boolean;
+  onResize?: (size: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
 }
 
 function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
@@ -120,9 +127,13 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onClick,
     onKeyDown,
     onKeyUp,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
 
     styles,
     drawerRender,
+    resizable,
   } = props;
 
   // ================================ Refs ================================
@@ -280,6 +291,63 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onKeyUp,
   };
 
+  // ============================ Resizable ============================
+  const [currentSize, setCurrentSize] = React.useState<number>();
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const handleResize = React.useCallback(
+    (size: number) => {
+      setCurrentSize(size);
+      onResize?.(size);
+    },
+    [onResize],
+  );
+
+  const handleResizeStart = React.useCallback(() => {
+    setIsDragging(true);
+    onResizeStart?.();
+  }, [onResizeStart]);
+
+  const handleResizeEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+
+  const dynamicWrapperStyle = React.useMemo(() => {
+    const style: React.CSSProperties = { ...wrapperStyle };
+
+    if (currentSize !== undefined && resizable) {
+      if (placement === 'left' || placement === 'right') {
+        style.width = currentSize;
+      } else {
+        style.height = currentSize;
+      }
+    }
+
+    if (resizable) {
+      style.overflow = 'none';
+    } else {
+      style.overflow = 'auto';
+    }
+
+    return style;
+  }, [wrapperStyle, currentSize, resizable, placement]);
+
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [maxSize, setMaxSize] = React.useState(0);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const rect = wrapperRef.current.parentElement?.getBoundingClientRect();
+      console.log(rect, 'rect');
+
+      setMaxSize(
+        placement === 'left' || placement === 'right'
+          ? (rect?.width ?? 0)
+          : (rect?.height ?? 0),
+      );
+    }
+  }, [wrapperRef.current]);
+
   const panelNode: React.ReactNode = (
     <CSSMotion
       key="panel"
@@ -311,18 +379,31 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
         );
         return (
           <div
+            ref={wrapperRef}
             className={classNames(
               `${prefixCls}-content-wrapper`,
               drawerClassNames?.wrapper,
-              motionClassName,
+              !isDragging && motionClassName,
             )}
             style={{
-              ...wrapperStyle,
+              ...dynamicWrapperStyle,
               ...motionStyle,
               ...styles?.wrapper,
             }}
             {...pickAttrs(props, { data: true })}
           >
+            <ResizableLine
+              prefixCls={`${prefixCls}-resizable`}
+              direction={placement}
+              resizable={resizable}
+              className={drawerClassNames?.resizableLine}
+              style={styles?.resizableLine}
+              minSize={0}
+              maxSize={maxSize}
+              onResize={handleResize}
+              onResizeStart={handleResizeStart}
+              onResizeEnd={handleResizeEnd}
+            />
             {drawerRender ? drawerRender(content) : content}
           </div>
         );