From ca02d7d3297db518404f6ac151b496faed5f2bb5 Mon Sep 17 00:00:00 2001 From: Wesley <69622989+Wesley-0808@users.noreply.github.com> Date: Tue, 19 Nov 2024 14:23:16 +0800 Subject: [PATCH] feat(Dialog&Drawer): support `beforeOpen` And `beforeClose` API (#3203) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: support * fix: type * fix: error-common * fix: error-common * fix: type * 补充 * fix: restore type&docs * fix: restore defaultProps * fix: restore type * fix: restore --- src/dialog/Dialog.tsx | 4 ++++ src/dialog/dialog.en-US.md | 2 ++ src/dialog/dialog.md | 2 ++ src/dialog/type.ts | 8 ++++++++ src/drawer/Drawer.tsx | 4 ++++ src/drawer/drawer.en-US.md | 2 ++ src/drawer/drawer.md | 2 ++ src/drawer/type.ts | 8 ++++++++ 8 files changed, 32 insertions(+) diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx index 209191076d..0a10d28bcb 100644 --- a/src/dialog/Dialog.tsx +++ b/src/dialog/Dialog.tsx @@ -46,6 +46,8 @@ const Dialog = forwardRef((originalProps, ref) => { zIndex, visible, attach, + onBeforeOpen, + onBeforeClose, onOpened, onCancel, onConfirm, @@ -155,6 +157,7 @@ const Dialog = forwardRef((originalProps, ref) => { const onAnimateStart = () => { if (!wrapRef.current) return; + onBeforeOpen?.() wrapRef.current.style.display = 'block'; }; @@ -195,6 +198,7 @@ const Dialog = forwardRef((originalProps, ref) => { nodeRef={portalRef} onEnter={onAnimateStart} onEntered={onOpened} + onExit={() => onBeforeClose?.()} onExited={onAnimateLeave} > diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md index de3badf6e6..965a062cfa 100644 --- a/src/dialog/dialog.en-US.md +++ b/src/dialog/dialog.en-US.md @@ -42,6 +42,8 @@ top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N +onBeforeClose | Function | | Typescript：`() => void`
| N +onBeforeOpen | Function | | Typescript：`() => void`
| N onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md index 95eb7e63a3..b01ee53b8a 100644 --- a/src/dialog/dialog.md +++ b/src/dialog/dialog.md @@ -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`
对话框执行消失动画效果前触发 | N +onBeforeOpen | Function | | TS 类型：`() => void`
对话框执行弹出动画效果前触发 | N onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`
关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发 | N diff --git a/src/dialog/type.ts b/src/dialog/type.ts index 6524873d05..9ff246258e 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -126,6 +126,14 @@ export interface TdDialogProps { * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 对话框执行消失动画效果前触发 + */ + onBeforeClose?: () => void; + /** + * 对话框执行弹出动画效果前触发 + */ + onBeforeOpen?: () => void; /** * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */ diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx index 3d8027d65b..a4190fd8ed 100644 --- a/src/drawer/Drawer.tsx +++ b/src/drawer/Drawer.tsx @@ -45,6 +45,8 @@ const Drawer = forwardRef((originalProps, ref) => { showOverlay, size: propsSize, placement, + onBeforeOpen, + onBeforeClose, onCancel, onConfirm, onClose, @@ -196,7 +198,9 @@ const Drawer = forwardRef((originalProps, ref) => { mountOnEnter={!forceRender} unmountOnExit={destroyOnClose} timeout={{ appear: 10, enter: 10, exit: 300 }} + onEnter={() => onBeforeOpen?.()} onEntered={() => setAnimationStart(true)} + onExit={() => onBeforeClose?.()} onExited={() => setAnimationStart(false)} > diff --git a/src/drawer/drawer.en-US.md b/src/drawer/drawer.en-US.md index 44ec1479e3..4479a90442 100644 --- a/src/drawer/drawer.en-US.md +++ b/src/drawer/drawer.en-US.md @@ -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`
| N +onBeforeOpen | Function | | Typescript：`() => void`
| N onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: DrawerCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N diff --git a/src/drawer/drawer.md b/src/drawer/drawer.md index 6071d6e4d2..99cab17e0d 100644 --- a/src/drawer/drawer.md +++ b/src/drawer/drawer.md @@ -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`
对话框执行消失动画效果前触发 | N +onBeforeOpen | Function | | TS 类型：`() => void`
对话框执行弹出动画效果前触发 | N onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`
关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 | N diff --git a/src/drawer/type.ts b/src/drawer/type.ts index e28c5d0f96..4ef0133e1f 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -104,6 +104,14 @@ export interface TdDrawerProps { * 抽屉层级，样式默认为 1500 */ zIndex?: number; + /** + * 对话框执行消失动画效果前触发 + */ + onBeforeClose?: () => void; + /** + * 对话框执行弹出动画效果前触发 + */ + onBeforeOpen?: () => void; /** * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 */