Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ConfigProvider): attach suppport drawer #3272

Merged
merged 1 commit into from
Dec 9, 2024
Merged

feat(ConfigProvider): attach suppport drawer #3272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/config-provider/config-provider.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/config-provider/config-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/config-provider/type.ts
View file
Open in desktop
Original file line number Diff 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
4 changes: 3 additions & 1 deletion src/drawer/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}`, {
Expand Down
Loading