Skip to content

Commit 39c385f

Browse files
uyarnuyarn
authored
feat: add notification on close (#719)
1 parent d938acd commit 39c385f

File tree

13 files changed

+127
-37
lines changed

13 files changed

+127
-37
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-react/packages/components/notification/notification.en-US.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Notification Props
56

67
name | type | default | description | required
78
-- | -- | -- | -- | --
8-
className | String | - | 类名 | N
9-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
9+
className | String | - | className of component | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
1011
children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1112
closeBtn | TNode | undefined | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1213
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1314
duration | Number | 3000 | \- | N
1415
footer | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1516
icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
16-
theme | String | info | options：info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
17+
theme | String | info | options: info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
1718
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
19+
onClose | Function | | Typescript：`() => void`<br/>the callback event of NotificationPlugin.close | N
1820
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
1921
onDurationEnd | Function | | Typescript：`() => void`<br/> | N
2022

@@ -24,15 +26,15 @@ name | type | default | description | required
2426
-- | -- | -- | -- | --
2527
attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2628
offset | Array | - | Typescript：`Array<string \| number>` | N
27-
placement | String | top-right | options：top-left/top-right/bottom-left/bottom-right。Typescript：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
29+
placement | String | top-right | options: top-left/top-right/bottom-left/bottom-right。Typescript：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
2830
zIndex | Number | 6000 | \- | N
29-
`NotificationProps` | \- | - | \- | N
31+
`NotificationProps` | \- | - | extends `NotificationProps` | N
3032

3133
### notification 或 NotificationPlugin
3234

3335
name | params | default | description
3436
-- | -- | -- | --
35-
theme | String | info | required。options：info/success/warning/error。Typescript：`NotificationThemeList`
37+
theme | String | info | required。options: info/success/warning/error。Typescript：`NotificationThemeList`
3638
options | Object | - | required。Typescript：`NotificationOptions`
3739

3840
### notification.info 或 NotificationPlugin.info

‎packages/products/tdesign-react/packages/components/notification/notification.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Notification Props
56

6-
名称 | 类型 | 默认值 | 说明 | 必传
7+
名称 | 类型 | 默认值 | 描述 | 必传
78
-- | -- | -- | -- | --
89
className | String | - | 类名 | N
910
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -15,72 +16,73 @@ footer | TNode | - | 用于自定义底部内容。TS 类型：`string \| TNode`
1516
icon | TNode | true | 用于自定义消息通知前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1617
theme | String | info | 消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
1718
title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
19+
onClose | Function | | TS 类型：`() => void`<br/>调用 NotificationPlugin.close 的事件回调 | N
1820
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击关闭按钮时触发 | N
1921
onDurationEnd | Function | | TS 类型：`() => void`<br/>计时结束时触发 | N
2022

2123
### NotificationOptions
2224

23-
名称 | 类型 | 默认值 | 说明 | 必传
25+
名称 | 类型 | 默认值 | 描述 | 必传
2426
-- | -- | -- | -- | --
2527
attach | String / Function | 'body' | 指定消息通知挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2628
offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
2729
placement | String | top-right | 消息弹出位置。可选项：top-left/top-right/bottom-left/bottom-right。TS 类型：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts) | N
2830
zIndex | Number | 6000 | 消息通知层级 | N
29-
`NotificationProps` | \- | - | 继承 `NotificationProps` 中的全部 API | N
31+
`NotificationProps` | \- | - | 继承 `NotificationProps` 中的全部属性 | N
3032

3133
### notification 或 NotificationPlugin
3234

33-
参数名称 | 参数类型 | 参数默认值 | 参数说明
35+
参数名称 | 参数类型 | 参数默认值 | 参数描述
3436
-- | -- | -- | --
3537
theme | String | info | 必需。消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList`
3638
options | Object | - | 必需。消息通知内容。TS 类型：`NotificationOptions`
3739

3840
### notification.info 或 NotificationPlugin.info
3941

40-
参数名称 | 参数类型 | 参数默认值 | 参数说明
42+
参数名称 | 参数类型 | 参数默认值 | 参数描述
4143
-- | -- | -- | --
4244
options | Object | - | 必需。消息通知内容。TS 类型：`NotificationInfoOptions` `type NotificationInfoOptions = Omit<NotificationOptions, 'theme'>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/notification/type.ts)
4345

4446
插件返回值：`Promise<NotificationInstance>`
4547

4648
### notification.warning 或 NotificationPlugin.warning
4749

48-
参数名称 | 参数类型 | 参数默认值 | 参数说明
50+
参数名称 | 参数类型 | 参数默认值 | 参数描述
4951
-- | -- | -- | --
5052
options | Object | - | 必需。消息通知内容。TS 类型：`NotificationInfoOptions`
5153

5254
插件返回值：`Promise<NotificationInstance>`
5355

5456
### notification.error 或 NotificationPlugin.error
5557

56-
参数名称 | 参数类型 | 参数默认值 | 参数说明
58+
参数名称 | 参数类型 | 参数默认值 | 参数描述
5759
-- | -- | -- | --
5860
options | Object | - | 必需。消息通知内容。TS 类型：`NotificationInfoOptions`
5961

6062
插件返回值：`Promise<NotificationInstance>`
6163

6264
### notification.success 或 NotificationPlugin.success
6365

64-
参数名称 | 参数类型 | 参数默认值 | 参数说明
66+
参数名称 | 参数类型 | 参数默认值 | 参数描述
6567
-- | -- | -- | --
6668
options | Object | - | 必需。消息通知内容。TS 类型：`NotificationInfoOptions`
6769

6870
插件返回值：`Promise<NotificationInstance>`
6971

7072
### notification.close 或 NotificationPlugin.close
7173

72-
参数名称 | 参数类型 | 参数默认值 | 参数说明
74+
参数名称 | 参数类型 | 参数默认值 | 参数描述
7375
-- | -- | -- | --
7476
options | Object | - | 必需。该插件参数为 NotificationPlugin.info() 等插件执行后的返回值。示例：`const msg = NotificationPlugin.info({}); NotificationPlugin.close(msg)`。TS 类型：`Promise<NotificationInstance>`
7577

7678
### notification.closeAll 或 NotificationPlugin.closeAll
7779

78-
参数名称 | 参数类型 | 参数默认值 | 参数说明
80+
参数名称 | 参数类型 | 参数默认值 | 参数描述
7981
-- | -- | -- | --
8082
-- | \- | - | \-
8183

8284
### notification.config 或 NotificationPlugin.config
8385

84-
参数名称 | 参数类型 | 参数默认值 | 参数说明
86+
参数名称 | 参数类型 | 参数默认值 | 参数描述
8587
-- | -- | -- | --
8688
notify | Object | - | 必需。消息通知插件全局配置。TS 类型：`NotificationOptions`

‎packages/products/tdesign-react/packages/components/notification/type.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ export interface TdNotificationProps {
4343
* 标题
4444
*/
4545
title?: TNode;
46+
/**
47+
* 调用 NotificationPlugin.close 的事件回调
48+
*/
49+
onClose?: () => void;
4650
/**
4751
* 点击关闭按钮时触发
4852
*/

‎packages/products/tdesign-vue-next/packages/components/notification/notification.en-US.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@ footer | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
1414
icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
1515
theme | String | info | options: info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/notification/type.ts) | N
1616
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
17+
onClose | Function | | Typescript：`() => void`<br/>the callback event of NotificationPlugin.close | N
1718
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
1819
onDurationEnd | Function | | Typescript：`() => void`<br/> | N
1920

2021
### Notification Events
2122

2223
name | params | description
2324
-- | -- | --
25+
close | \- | the callback event of NotificationPlugin.close
2426
close-btn-click | `(context: { e: MouseEvent })` | \-
2527
duration-end | \- | \-
2628

‎packages/products/tdesign-vue-next/packages/components/notification/notification.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@ footer | String / Slot / Function | - | 用于自定义底部内容。TS 类型
1414
icon | Boolean / Slot / Function | true | 用于自定义消息通知前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
1515
theme | String | info | 消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/notification/type.ts) | N
1616
title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
17+
onClose | Function | | TS 类型：`() => void`<br/>调用 NotificationPlugin.close 的事件回调 | N
1718
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击关闭按钮时触发 | N
1819
onDurationEnd | Function | | TS 类型：`() => void`<br/>计时结束时触发 | N
1920

2021
### Notification Events
2122

2223
名称 | 参数 | 描述
2324
-- | -- | --
25+
close | \- | 调用 NotificationPlugin.close 的事件回调
2426
close-btn-click | `(context: { e: MouseEvent })` | 点击关闭按钮时触发
2527
duration-end | \- | 计时结束时触发
2628

‎packages/products/tdesign-vue-next/packages/components/notification/props.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ export default {
4848
title: {
4949
type: [String, Function] as PropType<TdNotificationProps['title']>,
5050
},
51+
/** 调用 NotificationPlugin.close 的事件回调 */
52+
onClose: Function as PropType<TdNotificationProps['onClose']>,
5153
/** 点击关闭按钮时触发 */
5254
onCloseBtnClick: Function as PropType<TdNotificationProps['onCloseBtnClick']>,
5355
/** 计时结束时触发 */

‎packages/products/tdesign-vue-next/packages/components/notification/type.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export interface TdNotificationProps {
4242
* 标题
4343
*/
4444
title?: string | TNode;
45+
/**
46+
* 调用 NotificationPlugin.close 的事件回调
47+
*/
48+
onClose?: () => void;
4549
/**
4650
* 点击关闭按钮时触发
4751
*/

‎packages/products/tdesign-vue/src/notification/notification.en-US.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### Notification Props
56

67
name | type | default | description | required
@@ -11,15 +12,17 @@ default | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
1112
duration | Number | 3000 | \- | N
1213
footer | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
1314
icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
14-
theme | String | info | options：info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N
15+
theme | String | info | options: info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N
1516
title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
17+
onClose | Function | | Typescript：`() => void`<br/>the callback event of NotificationPlugin.close | N
1618
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
1719
onDurationEnd | Function | | Typescript：`() => void`<br/> | N
1820

1921
### Notification Events
2022

2123
name | params | description
2224
-- | -- | --
25+
close | \- | the callback event of NotificationPlugin.close
2326
close-btn-click | `(context: { e: MouseEvent })` | \-
2427
duration-end | \- | \-
2528

@@ -29,18 +32,19 @@ name | type | default | description | required
2932
-- | -- | -- | -- | --
3033
attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
3134
offset | Array | - | Typescript：`Array<string \| number>` | N
32-
placement | String | top-right | options：top-left/top-right/bottom-left/bottom-right。Typescript：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N
35+
placement | String | top-right | options: top-left/top-right/bottom-left/bottom-right。Typescript：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts) | N
3336
zIndex | Number | 6000 | \- | N
34-
`NotificationProps` | \- | - | \- | N
37+
`NotificationProps` | \- | - | extends `NotificationProps` | N
3538

3639
### NotificationPlugin
3740

3841
同时也支持 `this.$notification`。
3942

4043
name | params | default | description
4144
-- | -- | -- | --
42-
theme | String | info | required。options：info/success/warning/error。Typescript：`NotificationThemeList`
45+
theme | String | info | required。options: info/success/warning/error。Typescript：`NotificationThemeList`
4346
options | Object | - | required。Typescript：`NotificationOptions`
47+
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
4448

4549
### NotificationPlugin.info
4650

@@ -49,6 +53,7 @@ options | Object | - | required。Typescript：`NotificationOptions`
4953
name | params | default | description
5054
-- | -- | -- | --
5155
options | Object | - | required。Typescript：`NotificationInfoOptions` `type NotificationInfoOptions = Omit<NotificationOptions, 'theme'>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/notification/type.ts)
56+
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
5257

5358
插件返回值：`Promise<NotificationInstance>`
5459

@@ -59,6 +64,7 @@ options | Object | - | required。Typescript：`NotificationInfoOptions` `type N
5964
name | params | default | description
6065
-- | -- | -- | --
6166
options | Object | - | required。Typescript：`NotificationInfoOptions`
67+
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
6268

6369
插件返回值：`Promise<NotificationInstance>`
6470

@@ -69,6 +75,7 @@ options | Object | - | required。Typescript：`NotificationInfoOptions`
6975
name | params | default | description
7076
-- | -- | -- | --
7177
options | Object | - | required。Typescript：`NotificationInfoOptions`
78+
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
7279

7380
插件返回值：`Promise<NotificationInstance>`
7481

@@ -79,6 +86,7 @@ options | Object | - | required。Typescript：`NotificationInfoOptions`
7986
name | params | default | description
8087
-- | -- | -- | --
8188
options | Object | - | required。Typescript：`NotificationInfoOptions`
89+
context | \- | - | Typescript：`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
8290

8391
插件返回值：`Promise<NotificationInstance>`
8492

0 commit comments

Comments
 (0)