feat(drawer): sizeDraggable支持SizeDragLimit类型 (#3323)

* feat(drawer): sizeDraggable支持SizeDragLimit类型 * fix: delete comment
Tencent · Jan 11, 2025 · 2298158 · 2298158
1 parent 116cb47
commit 2298158
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/src/drawer/hooks/useDrag.ts b/src/drawer/hooks/useDrag.ts
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { TdDrawerProps } from '../type';
 import { Styles } from '../../common';
+import { getSizeDraggable, calcMoveSize } from '../../_common/js/drawer/utils';
 
 const useDrag = (
   placement: TdDrawerProps['placement'],
@@ -12,20 +13,31 @@ const useDrag = (
   const handleMousemove = (e: MouseEvent) => {
     // 鼠标移动时计算draggedSizeValue的值
     const { x, y } = e;
-    if (sizeDraggable) {
-      if (placement === 'right') {
-        changeDragSizeValue(`${document.documentElement.clientWidth - x + 8}px`);
-      }
-      if (placement === 'left') {
-        changeDragSizeValue(`${x + 8}px`);
-      }
-      if (placement === 'top') {
-        changeDragSizeValue(`${y + 8}px`);
-      }
-      if (placement === 'bottom') {
-        changeDragSizeValue(`${document.documentElement.clientHeight - y + 8}px`);
-      }
-    }
+
+    const maxHeight = document.documentElement.clientHeight;
+    const maxWidth = document.documentElement.clientWidth;
+    const offsetHeight = 8;
+    const offsetWidth = 8;
+    // x 轴方向使用最大宽度，y轴方向使用最大高度
+    const max = placement === 'left' || placement === 'right' ? maxWidth : maxHeight;
+    // x 轴方向使用默认最小宽度，y轴方向使用默认最小高度
+    const min = placement === 'left' || placement === 'right' ? offsetWidth : offsetHeight;
+
+    const { allowSizeDraggable, max: limitMax, min: limitMin } = getSizeDraggable(sizeDraggable, { max, min });
+
+    if (!allowSizeDraggable) return;
+
+    const moveSize = calcMoveSize(placement, {
+      x,
+      y,
+      maxWidth,
+      maxHeight,
+      max: limitMax,
+      min: limitMin,
+    });
+
+    if (typeof moveSize === 'undefined') return;
+    changeDragSizeValue(`${moveSize}px`);
   };
   const draggableLineStyles: Styles = useMemo(() => {
     // 设置拖拽control的样式

diff --git a/src/drawer/type.ts b/src/drawer/type.ts
@@ -94,7 +94,7 @@ export interface TdDrawerProps {
    * 抽屉大小可拖拽调整，横向抽屉调整宽度
    * @default false
    */
-  sizeDraggable?: boolean;
+  sizeDraggable?: boolean | SizeDragLimit;
   /**
    * 组件是否可见
    * @default false
@@ -180,6 +180,11 @@ export interface DrawerInstance {
 
 export type FooterButton = string | ButtonProps | TNode;
 
+export interface SizeDragLimit {
+  max: number;
+  min: number;
+}
+
 export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
 
 export interface DrawerCloseContext {