feat: attach suppport drawer (#3272)

Tencent · Dec 9, 2024 · 47dd02b · 47dd02b
1 parent 2c09fbe
commit 47dd02b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}`, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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 };
       /**
        * 日历组件全局配置
        */
@@ Expand Down @@