feat: refactor resizable drawer to use drag hook

Author: QdabuliuQ

assets/index.less

@@ -59,8 +59,8 @@
     pointer-events: auto;
   }
 
-  // Resizable styles
-  &-resizable-line {
+  // Dragger styles
+  &-resizable-dragger {
     position: absolute;
     z-index: 2;
     pointer-events: auto;

docs/examples/resizable.tsx

@@ -9,30 +9,32 @@ import type { Placement } from '@/index';
 
 export default () => {
   const [open, setOpen] = React.useState(false);
-  const [placement, setPlacement] = React.useState('right');
-  const [resizable, setResizable] = React.useState(true);
+  const [placement, setPlacement] = React.useState<Placement>('right');
+
+  const buttons = [
+    { placement: 'left' as Placement, label: 'Left Drawer' },
+    { placement: 'right' as Placement, label: 'Right Drawer' },
+    { placement: 'top' as Placement, label: 'Top Drawer' },
+    { placement: 'bottom' as Placement, label: 'Bottom Drawer' },
+  ];
+
+  const openDrawer = (direction: Placement) => {
+    setPlacement(direction);
+    setOpen(true);
+  };
 
   return (
     <div>
-      <div style={{ marginBottom: 16 }}>
-        <button onClick={() => setOpen(true)} style={{ marginRight: 8 }}>
-          Open Drawer
-        </button>
-        <label style={{ marginRight: 8 }}>
-          <input
-            type="checkbox"
-            checked={resizable}
-            onChange={e => setResizable(e.target.checked)}
-          />
-          Resizable
-        </label>
-        <span>Placement: </span>
-        <select value={placement} onChange={e => setPlacement(e.target.value)}>
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-          <option value="top">Top</option>
-          <option value="bottom">Bottom</option>
-        </select>
+      <div style={{ marginBottom: 16, display: 'flex', gap: 8 }}>
+        {buttons.map(({ placement, label }) => (
+          <button
+            key={placement}
+            onClick={() => openDrawer(placement)}
+            style={{ padding: '8px 16px' }}
+          >
+            {label}
+          </button>
+        ))}
       </div>
       <Drawer
         width={placement === 'left' || placement === 'right' ? 320 : undefined}
@@ -41,14 +43,11 @@ export default () => {
         open={open}
         key={placement}
         onClose={() => setOpen(false)}
-        resizable={resizable}
+        resizable
         {...motionProps}
       >
         <div style={{ marginTop: 24, color: '#888' }}>
-          <p>
-            You can drag the drawer edge to resize (only works when
-            &quot;Resizable&quot; is checked).
-          </p>
+          <p>You can drag the drawer edge to resize.</p>
         </div>
       </Drawer>
     </div>

src/DrawerPopup.tsx

@@ -11,7 +11,7 @@ import type {
   DrawerPanelEvents,
 } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
-import ResizableLine from './ResizableLine';
+import useDrag from './hooks/useDrag';
 import { parseWidthHeight } from './util';
 import type { DrawerClassNames, DrawerStyles } from './inter';
 
@@ -296,7 +296,6 @@ const DrawerPopup: React.ForwardRefRenderFunction<
 
   // ============================ Resizable ============================
   const [currentSize, setCurrentSize] = React.useState<number>();
-  const [isDragging, setIsDragging] = React.useState(false);
   const [maxSize, setMaxSize] = React.useState(0);
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 
@@ -330,9 +329,20 @@ const DrawerPopup: React.ForwardRefRenderFunction<
     onResizeEnd?.();
   }, [onResizeEnd]);
 
-  const handleDraggingChange = React.useCallback((dragging: boolean) => {
-    setIsDragging(dragging);
-  }, []);
+  // Use drag hook for resizable functionality
+  const { dragElementProps, isDragging } = useDrag({
+    prefixCls: `${prefixCls}-resizable`,
+    direction: placement,
+    className: drawerClassNames?.dragger,
+    style: styles?.dragger,
+    minSize: 0,
+    maxSize,
+    disabled: !resizable,
+    container: wrapperRef.current,
+    onResize: handleResize,
+    onResizeStart: handleResizeStart,
+    onResizeEnd: handleResizeEnd,
+  });
 
   const dynamicWrapperStyle = React.useMemo(() => {
     const style: React.CSSProperties = { ...wrapperStyle };
@@ -403,21 +413,7 @@ const DrawerPopup: React.ForwardRefRenderFunction<
             }}
             {...pickAttrs(props, { data: true })}
           >
-            {resizable && (
-              <ResizableLine
-                prefixCls={`${prefixCls}-resizable`}
-                direction={placement}
-                className={drawerClassNames?.resizableLine}
-                style={styles?.resizableLine}
-                minSize={0}
-                maxSize={maxSize}
-                isDragging={isDragging}
-                onResize={handleResize}
-                onResizeStart={handleResizeStart}
-                onResizeEnd={handleResizeEnd}
-                onDraggingChange={handleDraggingChange}
-              />
-            )}
+            {resizable && <div {...dragElementProps} />}
             {drawerRender ? drawerRender(content) : content}
           </div>
         );

src/ResizableLine.tsx renamed to src/hooks/useDrag.ts

@@ -1,68 +1,80 @@
-import classNames from 'classnames';
 import * as React from 'react';
-import type { Placement } from './Drawer';
+import classNames from 'classnames';
+import type { Placement } from '../Drawer';
 
-export interface ResizableLineProps {
+export interface UseDragOptions {
   prefixCls?: string;
   direction: Placement;
   className?: string;
   style?: React.CSSProperties;
   minSize?: number;
   maxSize?: number;
-  isDragging?: boolean;
+  disabled?: boolean;
+  container?: HTMLElement | null;
   onResize?: (size: number) => void;
   onResizeEnd?: (size: number) => void;
   onResizeStart?: (size: number) => void;
-  onDraggingChange?: (dragging: boolean) => void;
 }
 
-const ResizableLine: React.FC<ResizableLineProps> = ({
-  prefixCls = 'resizable',
-  direction,
-  className,
-  style,
-  minSize = 100,
-  maxSize,
-  isDragging = false,
-  onResize,
-  onResizeEnd,
-  onResizeStart,
-  onDraggingChange,
-}) => {
-  const lineRef = React.useRef<HTMLDivElement>(null);
+export interface UseDragReturn {
+  dragElementProps: {
+    className: string;
+    style: React.CSSProperties;
+    onMouseDown: (e: React.MouseEvent) => void;
+  };
+  isDragging: boolean;
+}
+
+export default function useDrag(options: UseDragOptions): UseDragReturn {
+  const {
+    prefixCls = 'resizable',
+    direction,
+    className,
+    style,
+    minSize = 100,
+    maxSize,
+    disabled = false,
+    container,
+    onResize,
+    onResizeEnd,
+    onResizeStart,
+  } = options;
+
+  const [isDragging, setIsDragging] = React.useState(false);
   const [startPos, setStartPos] = React.useState(0);
   const [startSize, setStartSize] = React.useState(0);
 
   const isHorizontal = direction === 'left' || direction === 'right';
 
   const handleMouseDown = React.useCallback(
     (e: React.MouseEvent) => {
+      if (disabled) return;
+
       e.preventDefault();
       e.stopPropagation();
 
-      onDraggingChange?.(true);
+      setIsDragging(true);
 
       if (isHorizontal) {
         setStartPos(e.clientX);
       } else {
         setStartPos(e.clientY);
       }
 
-      // Get the current size of the parent container
-      const parentElement = lineRef.current?.parentElement;
-      if (parentElement) {
-        const rect = parentElement.getBoundingClientRect();
+      // Get the current size of the container
+      if (container) {
+        const rect = container.getBoundingClientRect();
         const currentSize = isHorizontal ? rect.width : rect.height;
         setStartSize(currentSize);
         onResizeStart?.(currentSize);
       }
     },
-    [isHorizontal, onResizeStart, onDraggingChange],
+    [disabled, isHorizontal, container, onResizeStart],
   );
 
   const handleMouseMove = React.useCallback(
     (e: MouseEvent) => {
-      if (!isDragging) return;
+      if (!isDragging || disabled) return;
 
       const currentPos = isHorizontal ? e.clientX : e.clientY;
       let delta = currentPos - startPos;
@@ -87,6 +99,7 @@ const ResizableLine: React.FC<ResizableLineProps> = ({
     },
     [
       isDragging,
+      disabled,
       startPos,
       startSize,
       direction,
@@ -98,18 +111,17 @@ const ResizableLine: React.FC<ResizableLineProps> = ({
   );
 
   const handleMouseUp = React.useCallback(() => {
-    if (isDragging) {
-      onDraggingChange?.(false);
+    if (isDragging && !disabled) {
+      setIsDragging(false);
 
       // Get the final size after resize
-      const parentElement = lineRef.current?.parentElement;
-      if (parentElement) {
-        const rect = parentElement.getBoundingClientRect();
+      if (container) {
+        const rect = container.getBoundingClientRect();
         const finalSize = isHorizontal ? rect.width : rect.height;
         onResizeEnd?.(finalSize);
       }
     }
-  }, [isDragging, onResizeEnd, isHorizontal, onDraggingChange]);
+  }, [isDragging, disabled, container, onResizeEnd, isHorizontal]);
 
   React.useEffect(() => {
     if (isDragging) {
@@ -123,30 +135,27 @@ const ResizableLine: React.FC<ResizableLineProps> = ({
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
 
-  const resizeLineClassName = classNames(
-    `${prefixCls}-line`,
-    `${prefixCls}-line-${direction}`,
+  const dragElementClassName = classNames(
+    `${prefixCls}-dragger`,
+    `${prefixCls}-dragger-${direction}`,
     {
-      [`${prefixCls}-line-dragging`]: isDragging,
+      [`${prefixCls}-dragger-dragging`]: isDragging,
+      [`${prefixCls}-dragger-horizontal`]: isHorizontal,
+      [`${prefixCls}-dragger-vertical`]: !isHorizontal,
     },
     className,
   );
 
-  const resizeLineStyle: React.CSSProperties = {
-    position: 'absolute',
-    zIndex: 2,
-    cursor: isHorizontal ? 'col-resize' : 'row-resize',
+  const dragElementStyle: React.CSSProperties = {
     ...style,
   };
 
-  return (
-    <div
-      ref={lineRef}
-      className={resizeLineClassName}
-      style={resizeLineStyle}
-      onMouseDown={handleMouseDown}
-    />
-  );
-};
-
-export default ResizableLine;
+  return {
+    dragElementProps: {
+      className: dragElementClassName,
+      style: dragElementStyle,
+      onMouseDown: handleMouseDown,
+    },
+    isDragging,
+  };
+}

src/inter.ts

@@ -2,12 +2,12 @@ export interface DrawerClassNames {
   mask?: string;
   wrapper?: string;
   section?: string;
-  resizableLine?: string;
+  dragger?: string;
 }
 
 export interface DrawerStyles {
   mask?: React.CSSProperties;
   wrapper?: React.CSSProperties;
   section?: React.CSSProperties;
-  resizableLine?: React.CSSProperties;
+  dragger?: React.CSSProperties;
 }

tests/index.spec.tsx

@@ -501,11 +501,11 @@ describe('rc-drawer-menu', () => {
     );
     contentWrapper.getBoundingClientRect = mockGetBoundingClientRect;
 
-    const resizableLine = document.querySelector('.rc-drawer-resizable-line');
-    expect(resizableLine).toBeTruthy();
+    const dragger = document.querySelector('.rc-drawer-resizable-dragger');
+    expect(dragger).toBeTruthy();
 
     // Simulate drag from 200px to 100px (should reduce width by 100px)
-    fireEvent.mouseDown(resizableLine, { clientX: 200 });
+    fireEvent.mouseDown(dragger, { clientX: 200 });
     fireEvent.mouseMove(document, { clientX: 100, clientY: 0 });
     fireEvent.mouseUp(document, { clientX: 100, clientY: 0 });