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

Jump to bottom

feat(Dialog&Drawer): Support BeforeOpen And BeforeClose API #466

Merged
merged 4 commits into from
Nov 13, 2024
Merged

feat(Dialog&Drawer): Support BeforeOpen And BeforeClose API #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8dd1aad
feat(Dialog&Drawer): Support BeforeOpen and BeforeClose API
Wesley-0808 Nov 12, 2024
ceb674c
fix
Wesley-0808 Nov 12, 2024
e5e7d9c
sync style
Wesley-0808 Nov 13, 2024
af4a5c8
chore: resolve conflict
github-actions[bot] Nov 13, 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
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions packages/products/tdesign-mobile-react/src/dialog/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { TdDialogProps } from './type';

export const dialogDefaultProps: TdDialogProps = {
buttonLayout: 'horizontal',
closeOnOverlayClick: undefined,
closeOnOverlayClick: false,
confirmLoading: undefined,
destroyOnClose: false,
overlayProps: {},
preventScrollThrough: true,
showOverlay: true,
visible: false,
};
41 changes: 22 additions & 19 deletions packages/products/tdesign-mobile-react/src/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
:: BASE_DOC ::

## API

### Dialog Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
actions | TNode | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
buttonLayout | String | horizontal | options：horizontal/vertical | N
cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
closeOnOverlayClick | Boolean | undefined | \- | N
confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
actions | TNode | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
buttonLayout | String | horizontal | options: horizontal/vertical | N
cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
closeOnOverlayClick | Boolean | false | \- | N
confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
confirmLoading | Boolean | undefined | confirm button loading status | N
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | \- | N
overlayProps | Object | {} | \- | N
overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
preventScrollThrough | Boolean | true | \- | N
showOverlay | Boolean | true | \- | N
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
visible | Boolean | false | \- | N
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
visible | Boolean | - | \- | 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/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
onClose | Function | | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
onClosed | Function | | Typescript：`() => void`<br/> | N
onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
Expand All @@ -32,17 +34,18 @@ onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => voi
name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | \- | N
style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
`Omit<DialogProps, 'attach'>` | \- | - | \- | N
style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
`Omit<DialogProps, 'attach'>` | \- | - | extends `Omit<DialogProps, 'attach'>` | N

### DialogInstance

name | params | return | description
-- | -- | -- | --
destroy | \- | \- | \-
hide | \- | \- | \-
show | \- | \- | \-
update | `(props: DialogOptions)` | \- | \-
destroy | \- | \- | required
hide | \- | \- | required
setConfirmLoading | `(loading: boolean)` | \- | required。set confirm button loading status
show | \- | \- | required
update | `(props: DialogOptions)` | \- | required

### dialog 或 DialogPlugin

Expand Down
45 changes: 24 additions & 21 deletions packages/products/tdesign-mobile-react/src/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,68 @@
:: BASE_DOC ::

## API

### Dialog Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
actions | TNode | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
actions | TNode | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
buttonLayout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
closeOnOverlayClick | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
closeOnOverlayClick | Boolean | false | 点击蒙层时是否触发关闭事件 | N
confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
overlayProps | Object | {} | 透传至 Overlay 组件 | N
overlayProps | Object | {} | 透传至 Overlay 组件。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
preventScrollThrough | Boolean | true | 防止滚动穿透 | N
showOverlay | Boolean | true | 是否显示遮罩层 | N
title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
visible | Boolean | false | 控制对话框是否显示 | N
title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
visible | Boolean | - | 控制对话框是否显示 | 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/>关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
onClosed | Function | | TS 类型：`() => void`<br/>对话框消失动画效果结束后触发 | N
onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“确认”按钮存在，则点击“确认”按钮时触发 | N
onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N

### DialogOptions

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N
style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
`Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部 API | N
style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
`Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部属性 | N

### DialogInstance

名称 | 参数 | 返回值 | 描述
-- | -- | -- | --
destroy | \- | \- | 销毁弹框
hide | \- | \- | 隐藏弹框
show | \- | \- | 显示弹框
update | `(props: DialogOptions)` | \- | 更新弹框内容
destroy | \- | \- | 必需。销毁弹框
hide | \- | \- | 必需。隐藏弹框
setConfirmLoading | `(loading: boolean)` | \- | 必需。设置确认按钮加载状态
show | \- | \- | 必需。显示弹框
update | `(props: DialogOptions)` | \- | 必需。更新弹框内容

### dialog 或 DialogPlugin

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
options | \- | - | TS 类型：`DialogOptions`

插件返回值：`DialogInstance`

### dialog.confirm 或 DialogPlugin.confirm

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
options | \- | - | TS 类型：`DialogOptions`

### dialog.alert 或 DialogPlugin.alert

参数名称 | 参数类型 | 参数默认值 | 参数说明
参数名称 | 参数类型 | 参数默认值 | 参数描述
-- | -- | -- | --
options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
29 changes: 23 additions & 6 deletions packages/products/tdesign-mobile-react/src/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* */

import { ButtonProps } from '../button';
import { OverlayProps } from '../overlay';
import { TNode, Styles } from '../common';
import { MouseEvent } from 'react';

Expand All @@ -24,12 +25,17 @@ export interface TdDialogProps {
cancelBtn?: ButtonProps | TNode | null;
/**
* 点击蒙层时是否触发关闭事件
* @default false
*/
closeOnOverlayClick?: boolean;
/**
* 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
*/
confirmBtn?: ButtonProps | TNode | null;
/**
* 确认按钮加载状态
*/
confirmLoading?: boolean;
/**
* 内容
*/
Expand All @@ -43,7 +49,7 @@ export interface TdDialogProps {
* 透传至 Overlay 组件
* @default {}
*/
overlayProps?: object;
overlayProps?: OverlayProps;
/**
* 防止滚动穿透
* @default true
Expand All @@ -60,13 +66,20 @@ export interface TdDialogProps {
title?: TNode;
/**
* 控制对话框是否显示
* @default false
*/
visible?: boolean;
/**
* 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
*/
zIndex?: number;
/**
* 对话框执行消失动画效果前触发
*/
onBeforeClose?: () => void;
/**
* 对话框执行弹出动画效果前触发
*/
onBeforeOpen?: () => void;
/**
* 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
*/
Expand Down Expand Up @@ -105,19 +118,23 @@ export interface DialogInstance {
/**
* 销毁弹框
*/
destroy?: () => void;
destroy: () => void;
/**
* 隐藏弹框
*/
hide?: () => void;
hide: () => void;
/**
* 设置确认按钮加载状态
*/
setConfirmLoading: (loading: boolean) => void;
/**
* 显示弹框
*/
show?: () => void;
show: () => void;
/**
* 更新弹框内容
*/
update?: (props: DialogOptions) => void;
update: (props: DialogOptions) => void;
}

export type DialogEventSource = 'cancel' | 'overlay';
Expand Down
13 changes: 13 additions & 0 deletions packages/products/tdesign-mobile-react/src/drawer/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TdDrawerProps } from './type';

export const drawerDefaultProps: TdDrawerProps = {
closeOnOverlayClick: true,
destroyOnClose: false,
placement: 'right',
showOverlay: true,
visible: false,
};
49 changes: 49 additions & 0 deletions packages/products/tdesign-mobile-react/src/drawer/drawer.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
:: BASE_DOC ::

## API


### Drawer Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
closeOnOverlayClick | Boolean | true | \- | N
destroyOnClose | Boolean | false | \- | N
footer | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
items | Array | - | Typescript：`DrawerItem[] ` `interface DrawerItem { title: string; icon: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/drawer/type.ts) | N
placement | String | right | options: left/right | N
showOverlay | Boolean | true | \- | N
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
visible | Boolean | false | \- | N
zIndex | Number | - | \- | N
onBeforeClose | Function | | Typescript：`() => void`<br/> | N
onBeforeOpen | Function | | Typescript：`() => void`<br/> | N
onClose | Function | | Typescript：`(trigger: TriggerSource) => void`<br/> | N
onItemClick | Function | | Typescript：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/> | N
onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N

### DrawerOptions

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | \- | N
style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
`Omit<DrawerProps, 'attach'>` | \- | - | extends `Omit<DrawerProps, 'attach'>` | N

### DrawerInstance

name | params | return | description
-- | -- | -- | --
destroy | \- | \- | \-
hide | \- | \- | \-
show | \- | \- | \-
update | `(props: DrawerOptions)` | \- | \-

### drawer 或 DrawerPlugin

name | params | default | description
-- | -- | -- | --
options | \- | - | Typescript：`DrawerOptions`
Loading
Loading