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(Dialog&Drawer): support beforeOpen And beforeClose API #3203

Merged
merged 10 commits into from
Nov 19, 2024
Merged

feat(Dialog&Drawer): support beforeOpen And beforeClose API #3203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
efe9498
feat: support
Wesley-0808 Nov 14, 2024
474ddf1
fix: type
Wesley-0808 Nov 14, 2024
48e2574
fix: error-common
Wesley-0808 Nov 14, 2024
3768a5c
fix: error-common
Wesley-0808 Nov 14, 2024
80a4ec9
fix: type
Wesley-0808 Nov 15, 2024
904b29f
补充
Wesley-0808 Nov 15, 2024
19d078d
fix: restore type&docs
Wesley-0808 Nov 15, 2024
249e6d7
fix: restore defaultProps
Wesley-0808 Nov 15, 2024
5123f4c
fix: restore type
Wesley-0808 Nov 15, 2024
330f6e5
fix: restore
Wesley-0808 Nov 15, 2024
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
4 changes: 4 additions & 0 deletions src/dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
zIndex,
visible,
attach,
onBeforeOpen,
onBeforeClose,
onOpened,
onCancel,
onConfirm,
Expand Down Expand Up @@ -155,6 +157,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {

const onAnimateStart = () => {
if (!wrapRef.current) return;
onBeforeOpen?.()
wrapRef.current.style.display = 'block';
};

Expand Down Expand Up @@ -195,6 +198,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
nodeRef={portalRef}
onEnter={onAnimateStart}
onEntered={onOpened}
onExit={() => onBeforeClose?.()}
onExited={onAnimateLeave}
>
<Portal attach={dialogAttach} ref={portalRef}>
Expand Down
2 changes: 2 additions & 0 deletions src/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ top | String / Number | - | \- | N
visible | Boolean | - | \- | N
width | String / Number | - | \- | N
zIndex | Number | - | \- | N
onBeforeClose | Function | | Typescript：`() => void`<br/> | N
onBeforeOpen | Function | | Typescript：`() => void`<br/> | N
onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClose | Function | | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
Expand Down
2 changes: 2 additions & 0 deletions src/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级
visible | Boolean | - | 控制对话框是否显示 | N
width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N
zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
onBeforeClose | Function | | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
onBeforeOpen | Function | | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击右上角关闭按钮时触发 | N
Expand Down
8 changes: 8 additions & 0 deletions src/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,14 @@ export interface TdDialogProps {
* 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
*/
zIndex?: number;
/**
* 对话框执行消失动画效果前触发
*/
onBeforeClose?: () => void;
/**
* 对话框执行弹出动画效果前触发
*/
onBeforeOpen?: () => void;
/**
* 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
*/
Expand Down
4 changes: 4 additions & 0 deletions src/drawer/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
showOverlay,
size: propsSize,
placement,
onBeforeOpen,
onBeforeClose,
onCancel,
onConfirm,
onClose,
Expand Down Expand Up @@ -172,7 +174,9 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
mountOnEnter={!forceRender}
unmountOnExit={destroyOnClose}
timeout={{ appear: 10, enter: 10, exit: 300 }}
onEnter={() => onBeforeOpen?.()}
onEntered={() => setAnimationStart(true)}
onExit={() => onBeforeClose?.()}
onExited={() => setAnimationStart(false)}
>
<Portal attach={attach} ref={drawerWrapperRef}>
Expand Down
2 changes: 2 additions & 0 deletions src/drawer/drawer.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ size | String | 'small' | \- | N
sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set `max` or `min` to limit size。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
visible | Boolean | false | \- | N
zIndex | Number | - | \- | N
onBeforeClose | Function | | Typescript：`() => void`<br/> | N
onBeforeOpen | Function | | Typescript：`() => void`<br/> | N
onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClose | Function | | Typescript：`(context: DrawerCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
Expand Down
2 changes: 2 additions & 0 deletions src/drawer/drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ size | String | 'small' | 尺寸，支持 'small', 'medium', 'large'，'35px', '
sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
visible | Boolean | false | 组件是否可见 | N
zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
onBeforeClose | Function | | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
onBeforeOpen | Function | | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N
onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`<br/>关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 | N
Expand Down
8 changes: 8 additions & 0 deletions src/drawer/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,14 @@ export interface TdDrawerProps {
* 抽屉层级，样式默认为 1500
*/
zIndex?: number;
/**
* 对话框执行消失动画效果前触发
*/
onBeforeClose?: () => void;
/**
* 对话框执行弹出动画效果前触发
*/
onBeforeOpen?: () => void;
/**
* 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
*/
Expand Down
Loading