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

* feat: support * fix: type * fix: error-common * fix: error-common * fix: type * 补充 * fix: restore type&docs * fix: restore defaultProps * fix: restore type * fix: restore
Tencent · Nov 19, 2024 · ca02d7d · ca02d7d
1 parent fcd5b58
commit ca02d7d
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 0 deletions.
diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
@@ -46,6 +46,8 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
     zIndex,
     visible,
     attach,
+    onBeforeOpen,
+    onBeforeClose,
     onOpened,
     onCancel,
     onConfirm,
@@ -155,6 +157,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
 
   const onAnimateStart = () => {
     if (!wrapRef.current) return;
+    onBeforeOpen?.()
     wrapRef.current.style.display = 'block';
   };
 
@@ -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}>

diff --git 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`<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

diff --git 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`<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

diff --git 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
@@ -45,6 +45,8 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((originalProps, ref) => {
     showOverlay,
     size: propsSize,
     placement,
+    onBeforeOpen,
+    onBeforeClose,
     onCancel,
     onConfirm,
     onClose,
@@ -196,7 +198,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}>

diff --git 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`<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

diff --git 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`<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

diff --git a/src/drawer/type.ts b/src/drawer/type.ts
@@ -104,6 +104,14 @@ export interface TdDrawerProps {
    * 抽屉层级，样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
    */