From 47dd02bf3ee6822814ac523f8efcea619a8148a1 Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:24:15 +0800
Subject: [PATCH] feat: attach suppport drawer (#3272)

---
 src/config-provider/config-provider.en-US.md | 2 +-
 src/config-provider/config-provider.md       | 2 +-
 src/config-provider/type.ts                  | 2 +-
 src/drawer/Drawer.tsx                        | 4 +++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
index 7ac115b140..31db4c7720 100644
--- a/src/config-provider/config-provider.en-US.md
+++ b/src/config-provider/config-provider.en-US.md
@@ -8,7 +8,7 @@ name | type | default | description | required
 alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N
 anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N
 animation | Object | - | Typescript：`Partial<Record<'include'\|'exclude', Array<AnimationType>>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
-attach | String / Object / Function | - | Typescript：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+attach | String / Object / Function | - | Typescript：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N
 cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N
 classPrefix | String | t | \- | N
diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
index 9000d99102..c6906be094 100644
--- a/src/config-provider/config-provider.md
+++ b/src/config-provider/config-provider.md
@@ -38,7 +38,7 @@ import 'tdesign-react/esm/style/index.js'
 alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N
 anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N
 animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial<Record<'include'\|'exclude', Array<AnimationType>>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
-attach | String / Object / Function | - | TS 类型：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+attach | String / Object / Function | - | TS 类型：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N
 cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N
 classPrefix | String | t | CSS 类名前缀 | N
diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
index 2225e9dd3b..7bc3452f33 100644
--- a/src/config-provider/type.ts
+++ b/src/config-provider/type.ts
@@ -28,7 +28,7 @@ export interface GlobalConfigProvider {
   /**
    * null
    */
-  attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode };
+  attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode };
   /**
    * 日历组件全局配置
    */
diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx
index a4190fd8ed..9b48802511 100644
--- a/src/drawer/Drawer.tsx
+++ b/src/drawer/Drawer.tsx
@@ -19,6 +19,7 @@ import Portal from '../common/Portal';
 import useLockStyle from './hooks/useLockStyle';
 import useDefaultProps from '../hooks/useDefaultProps';
 import parseTNode from '../_util/parseTNode';
+import useAttach from '../hooks/useAttach';
 
 export const CloseTriggerType: { [key: string]: DrawerEventSource } = {
   CLICK_OVERLAY: 'overlay',
@@ -72,6 +73,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
 
   const size = propsSize ?? local.size;
   const { classPrefix } = useConfig();
+  const drawerAttach = useAttach('drawer', attach);
   const maskRef = useRef<HTMLDivElement>();
   const containerRef = useRef<HTMLDivElement>();
   const drawerWrapperRef = useRef<HTMLElement>(); // 即最终的 attach dom，默认为 document.body
@@ -203,7 +205,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
       onExit={() => onBeforeClose?.()}
       onExited={() => setAnimationStart(false)}
     >
-      <Portal attach={attach} ref={drawerWrapperRef}>
+      <Portal attach={drawerAttach} ref={drawerWrapperRef}>
         <div
           ref={containerRef}
           className={classnames(prefixCls, className, `${prefixCls}--${placement}`, {