From 2298158e793b1c7e05b55759c082173f5629c792 Mon Sep 17 00:00:00 2001
From: huangchen1031 <huangchen1031@vip.qq.com>
Date: Sat, 11 Jan 2025 17:40:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(drawer):=20sizeDraggable=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?SizeDragLimit=E7=B1=BB=E5=9E=8B=20(#3323)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(drawer): sizeDraggable支持SizeDragLimit类型

* fix: delete comment
---
 src/drawer/hooks/useDrag.ts | 40 ++++++++++++++++++++++++-------------
 src/drawer/type.ts          |  7 ++++++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/drawer/hooks/useDrag.ts b/src/drawer/hooks/useDrag.ts
index 3913f1e7c7..0549a24c9d 100644
--- 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
index 4ef0133e1f..b620e766e4 100644
--- 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 {