From c191b5360aa29439343a66c39db6ce8f9026463b Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 9 Apr 2024 16:14:58 +0800 Subject: [PATCH 1/9] feat(notification): add show progress option and update docs --- components/notification/demo/show-progress.md | 7 +++++ .../notification/demo/show-progress.tsx | 26 +++++++++++++++++++ components/notification/index.en-US.md | 2 ++ components/notification/index.zh-CN.md | 2 ++ components/notification/interface.ts | 3 +++ 5 files changed, 40 insertions(+) create mode 100644 components/notification/demo/show-progress.md create mode 100644 components/notification/demo/show-progress.tsx diff --git a/components/notification/demo/show-progress.md b/components/notification/demo/show-progress.md new file mode 100644 index 000000000000..d8bbf11a1c0e --- /dev/null +++ b/components/notification/demo/show-progress.md @@ -0,0 +1,7 @@ +## zh-CN + +显示自动关闭通知框的进度条。 + +## en-US + +Show progress bar for auto-closing notification. diff --git a/components/notification/demo/show-progress.tsx b/components/notification/demo/show-progress.tsx new file mode 100644 index 000000000000..afd5e3744491 --- /dev/null +++ b/components/notification/demo/show-progress.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Button, notification } from 'antd'; + +const App: React.FC = () => { + const [api, contextHolder] = notification.useNotification(); + + const openNotification = () => { + api.open({ + message: 'Notification Title', + description: + 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', + showProgress: true, + }); + }; + + return ( + <> + {contextHolder} + + + ); +}; + +export default App; diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 564dc7cd4eb0..441d47355d48 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -30,6 +30,7 @@ To display a notification message at any of the four corners of the viewport. Ty Customized style Update Message Content Stack +Show Progress Static Method (deprecated) _InternalPanelDoNotUseOrYouWillBeFired @@ -53,6 +54,7 @@ The properties of config are as follows: | closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | | description | The content of notification box (required) | ReactNode | - | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - | +| showProgress | Show progress bar for auto-closing notification. | boolean | | | | icon | Customized icon | ReactNode | - | - | | key | The unique identifier of the Notification | string | - | - | | message | The title of notification box (required) | ReactNode | - | - | diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index c003d194dbb4..4e497dbd34f1 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -31,6 +31,7 @@ demo: 自定义样式 更新消息内容 堆叠 +显示进度条 静态方法（不推荐） _InternalPanelDoNotUseOrYouWillBeFired @@ -105,6 +106,7 @@ notification.config({ | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | | | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 | | duration | 默认自动关闭延时，单位秒 | number | 4.5 | | +| showProgress | 显示自动关闭通知框的进度条 | boolean | | | | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | | | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | | | rtl | 是否开启 RTL 模式 | boolean | false | | diff --git a/components/notification/interface.ts b/components/notification/interface.ts index 53ecbcbb5369..adc6ce23bf5d 100644 --- a/components/notification/interface.ts +++ b/components/notification/interface.ts @@ -25,6 +25,7 @@ export interface ArgsProps { key?: React.Key; onClose?: () => void; duration?: number | null; + showProgress?: boolean; icon?: React.ReactNode; placement?: NotificationPlacement; style?: React.CSSProperties; @@ -52,6 +53,7 @@ export interface GlobalConfigProps { top?: number; bottom?: number; duration?: number; + showProgress?: boolean; prefixCls?: string; getContainer?: () => HTMLElement | ShadowRoot; placement?: NotificationPlacement; @@ -72,4 +74,5 @@ export interface NotificationConfig { rtl?: boolean; stack?: boolean | { threshold?: number }; duration?: number; + showProgress?: boolean; } From e53f010a4637f88b6381dfac2e98acc1a699c36f Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Mon, 15 Apr 2024 16:37:05 +0800 Subject: [PATCH 2/9] feat(notification): update style for progress --- ...show-progress.md => show-with-progress.md} | 0 ...ow-progress.tsx => show-with-progress.tsx} | 0 components/notification/index.en-US.md | 2 +- components/notification/index.zh-CN.md | 2 +- components/notification/style/index.ts | 20 +++++++++++++++++++ 5 files changed, 22 insertions(+), 2 deletions(-) rename components/notification/demo/{show-progress.md => show-with-progress.md} (100%) rename components/notification/demo/{show-progress.tsx => show-with-progress.tsx} (100%) diff --git a/components/notification/demo/show-progress.md b/components/notification/demo/show-with-progress.md similarity index 100% rename from components/notification/demo/show-progress.md rename to components/notification/demo/show-with-progress.md diff --git a/components/notification/demo/show-progress.tsx b/components/notification/demo/show-with-progress.tsx similarity index 100% rename from components/notification/demo/show-progress.tsx rename to components/notification/demo/show-with-progress.tsx diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 441d47355d48..a5cf00552e35 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -30,7 +30,7 @@ To display a notification message at any of the four corners of the viewport. Ty Customized style Update Message Content Stack -Show Progress +Show with progress Static Method (deprecated) _InternalPanelDoNotUseOrYouWillBeFired diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 4e497dbd34f1..30f07971577d 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -31,7 +31,7 @@ demo: 自定义样式 更新消息内容 堆叠 -显示进度条 +显示进度条 静态方法（不推荐） _InternalPanelDoNotUseOrYouWillBeFired diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index f9f3c91c17cf..10e361636288 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -44,6 +44,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { fontSizeLG, notificationMarginBottom, borderRadiusLG, + colorPrimary, colorSuccess, colorInfo, colorWarning, @@ -154,6 +155,25 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { ...genFocusStyle(token), }, + [`${noticeCls}-progress`]: { + position: 'absolute', + width: `calc(100% - ${unit(borderRadiusLG)} * 2)`, + height: '2px', + left: borderRadiusLG, + right: borderRadiusLG, + bottom: '-2px', + + '.rc-progress-line': { + '&-trail': { + stroke: `rgba(0, 0, 0, 0.04)`, + }, + + '&-path': { + stroke: colorPrimary, + }, + }, + }, + [`${noticeCls}-btn`]: { float: 'right', marginTop: token.marginSM, From c8df0c07ddaceefb5003245578c72b058c50c904 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Mon, 6 May 2024 09:37:13 +0800 Subject: [PATCH 3/9] fix: lint issues and add version for the doc --- components/notification/index.en-US.md | 4 ++-- components/notification/index.zh-CN.md | 4 ++-- components/notification/style/index.ts | 10 ++++++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index a5cf00552e35..316251de763e 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -30,7 +30,7 @@ To display a notification message at any of the four corners of the viewport. Ty Customized style Update Message Content Stack -Show with progress +Show with progress Static Method (deprecated) _InternalPanelDoNotUseOrYouWillBeFired @@ -54,7 +54,7 @@ The properties of config are as follows: | closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | | description | The content of notification box (required) | ReactNode | - | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - | -| showProgress | Show progress bar for auto-closing notification. | boolean | | | +| showProgress | Show progress bar for auto-closing notification. | boolean | | 5.18.0 | | icon | Customized icon | ReactNode | - | - | | key | The unique identifier of the Notification | string | - | - | | message | The title of notification box (required) | ReactNode | - | - | diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 30f07971577d..91053f32da29 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -31,7 +31,7 @@ demo: 自定义样式 更新消息内容 堆叠 -显示进度条 +显示进度条 静态方法（不推荐） _InternalPanelDoNotUseOrYouWillBeFired @@ -106,7 +106,7 @@ notification.config({ | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | | | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 | | duration | 默认自动关闭延时，单位秒 | number | 4.5 | | -| showProgress | 显示自动关闭通知框的进度条 | boolean | | | +| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 | | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | | | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | | | rtl | 是否开启 RTL 模式 | boolean | false | | diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 10e361636288..09bf4a544e78 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -159,8 +159,14 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { position: 'absolute', width: `calc(100% - ${unit(borderRadiusLG)} * 2)`, height: '2px', - left: borderRadiusLG, - right: borderRadiusLG, + left: { + _skip_check_: true, + value: borderRadiusLG, + }, + right: { + _skip_check_: true, + value: borderRadiusLG, + }, bottom: '-2px', '.rc-progress-line': { From e7e145fddef53f0606c1f5433352ccec3cdf2ce6 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Sat, 11 May 2024 13:18:26 +0800 Subject: [PATCH 4/9] feat: upgrade rc-notification and update the style changes --- components/notification/style/index.ts | 32 ++++++++++++++++++-------- package.json | 2 +- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 09bf4a544e78..715ee19bc075 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -34,6 +34,7 @@ export interface NotificationToken extends FullToken<'Notification'> { notificationMarginBottom: number; notificationMarginEdge: number; notificationStackLayer: number; + notificationProgressBarSize: number; } export const genNoticeStyle = (token: NotificationToken): CSSObject => { @@ -53,11 +54,13 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { notificationBg, notificationPadding, notificationMarginEdge, + notificationProgressBarSize, fontSize, lineHeight, width, notificationIconSize, colorText, + calc, } = token; const noticeCls = `${componentCls}-notice`; @@ -157,8 +160,10 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { [`${noticeCls}-progress`]: { position: 'absolute', - width: `calc(100% - ${unit(borderRadiusLG)} * 2)`, - height: '2px', + display: 'block', + appearance: 'none', + WebkitAppearance: 'none', + inlineSize: `calc(100% - ${unit(borderRadiusLG)} * 2)`, left: { _skip_check_: true, value: borderRadiusLG, @@ -167,16 +172,22 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { _skip_check_: true, value: borderRadiusLG, }, - bottom: '-2px', + bottom: calc(notificationProgressBarSize).mul(-1).equal(), + blockSize: notificationProgressBarSize, + border: 0, - '.rc-progress-line': { - '&-trail': { - stroke: `rgba(0, 0, 0, 0.04)`, - }, + '&, &::-webkit-progress-bar': { + borderRadius: borderRadiusLG, + backgroundColor: `rgba(0, 0, 0, 0.04)`, + }, - '&-path': { - stroke: colorPrimary, - }, + [`&::-moz-progress-bar`]: { + backgroundColor: colorPrimary, + }, + + [`&::-webkit-progress-value`]: { + borderRadius: borderRadiusLG, + backgroundColor: colorPrimary, }, }, @@ -305,6 +316,7 @@ export const prepareNotificationToken: ( notificationMarginEdge: token.marginLG, animationMaxHeight: 150, notificationStackLayer: 3, + notificationProgressBarSize: 2, }); return notificationToken; diff --git a/package.json b/package.json index 75f00cb3cf9e..1cfe196253cc 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,7 @@ "rc-mentions": "~2.11.1", "rc-menu": "~9.13.0", "rc-motion": "^2.9.0", - "rc-notification": "~5.4.0", + "rc-notification": "~5.5.0", "rc-pagination": "~4.0.4", "rc-picker": "~4.5.0", "rc-progress": "~4.0.0", From ab7bb8e5c884b5f67a094b9558646aa95d82c3c5 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Sat, 11 May 2024 14:36:33 +0800 Subject: [PATCH 5/9] test: update test snapshots --- .../__snapshots__/demo-extend.test.ts.snap | 13 +++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 11 +++++++++++ 2 files changed, 24 insertions(+) diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap index 90f66def7182..cdb2839c7011 100644 --- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -537,6 +537,19 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co exports[`renders components/notification/demo/render-panel.tsx extend context correctly 2`] = `[]`; +exports[`renders components/notification/demo/show-with-progress.tsx extend context correctly 1`] = ` + +`; + +exports[`renders components/notification/demo/show-with-progress.tsx extend context correctly 2`] = `[]`; + exports[`renders components/notification/demo/stack.tsx extend context correctly 1`] = `
`; +exports[`renders components/notification/demo/show-with-progress.tsx correctly 1`] = ` + +`; + exports[`renders components/notification/demo/stack.tsx correctly 1`] = `
Date: Sat, 11 May 2024 16:02:39 +0800 Subject: [PATCH 6/9] fix: update changes base on the conversation --- components/notification/style/index.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 715ee19bc075..c8e09801b1c4 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -34,7 +34,7 @@ export interface NotificationToken extends FullToken<'Notification'> { notificationMarginBottom: number; notificationMarginEdge: number; notificationStackLayer: number; - notificationProgressBarSize: number; + notificationProgressHeight: number; } export const genNoticeStyle = (token: NotificationToken): CSSObject => { @@ -54,13 +54,12 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { notificationBg, notificationPadding, notificationMarginEdge, - notificationProgressBarSize, + notificationProgressHeight, fontSize, lineHeight, width, notificationIconSize, colorText, - calc, } = token; const noticeCls = `${componentCls}-notice`; @@ -172,11 +171,11 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { _skip_check_: true, value: borderRadiusLG, }, - bottom: calc(notificationProgressBarSize).mul(-1).equal(), - blockSize: notificationProgressBarSize, + bottom: 0, + blockSize: notificationProgressHeight, border: 0, - '&, &::-webkit-progress-bar': { + '&, &::progress-bar': { borderRadius: borderRadiusLG, backgroundColor: `rgba(0, 0, 0, 0.04)`, }, @@ -316,7 +315,7 @@ export const prepareNotificationToken: ( notificationMarginEdge: token.marginLG, animationMaxHeight: 150, notificationStackLayer: 3, - notificationProgressBarSize: 2, + notificationProgressHeight: 2, }); return notificationToken; From 2cc2a0eb132a53ec0b63e86cd2f9597a80dd9d52 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Sat, 11 May 2024 20:34:00 +0800 Subject: [PATCH 7/9] fix: update bg base on the conversation --- components/notification/style/index.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index c8e09801b1c4..b81fa5cdf933 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -45,7 +45,6 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { fontSizeLG, notificationMarginBottom, borderRadiusLG, - colorPrimary, colorSuccess, colorInfo, colorWarning, @@ -175,18 +174,18 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { blockSize: notificationProgressHeight, border: 0, - '&, &::progress-bar': { + '&, &::-webkit-progress-bar': { borderRadius: borderRadiusLG, backgroundColor: `rgba(0, 0, 0, 0.04)`, }, [`&::-moz-progress-bar`]: { - backgroundColor: colorPrimary, + background: `linear-gradient(90deg, #31afff, #1677ff)`, }, [`&::-webkit-progress-value`]: { borderRadius: borderRadiusLG, - backgroundColor: colorPrimary, + background: `linear-gradient(90deg, #31afff, #1677ff)`, }, }, From 70f69fe1671337cdfc2216bf7b5c38124920f8e7 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Mon, 13 May 2024 10:41:00 +0800 Subject: [PATCH 8/9] fix: use primary color for progress bg --- components/notification/style/index.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index b81fa5cdf933..2bbc3356ab7b 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -34,6 +34,7 @@ export interface NotificationToken extends FullToken<'Notification'> { notificationMarginBottom: number; notificationMarginEdge: number; notificationStackLayer: number; + notificationProgressBg: string; notificationProgressHeight: number; } @@ -53,6 +54,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { notificationBg, notificationPadding, notificationMarginEdge, + notificationProgressBg, notificationProgressHeight, fontSize, lineHeight, @@ -179,13 +181,13 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { backgroundColor: `rgba(0, 0, 0, 0.04)`, }, - [`&::-moz-progress-bar`]: { - background: `linear-gradient(90deg, #31afff, #1677ff)`, + '&::-moz-progress-bar': { + background: notificationProgressBg, }, - [`&::-webkit-progress-value`]: { + '&::-webkit-progress-value': { borderRadius: borderRadiusLG, - background: `linear-gradient(90deg, #31afff, #1677ff)`, + background: notificationProgressBg, }, }, @@ -315,6 +317,7 @@ export const prepareNotificationToken: ( animationMaxHeight: 150, notificationStackLayer: 3, notificationProgressHeight: 2, + notificationProgressBg: `linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary})`, }); return notificationToken; From 6d325b94fca50325544bbf804b76e59a1786e1a6 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Fri, 17 May 2024 14:38:36 +0800 Subject: [PATCH 9/9] docs: update doc changes Co-authored-by: kiner-tang <1127031143@qq.com> Signed-off-by: Eden Wang --- components/notification/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 316251de763e..c7b7d723bf2e 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -54,7 +54,7 @@ The properties of config are as follows: | closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | | description | The content of notification box (required) | ReactNode | - | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - | -| showProgress | Show progress bar for auto-closing notification. | boolean | | 5.18.0 | +| showProgress | Show progress bar for auto-closing notification | boolean | | 5.18.0 | | icon | Customized icon | ReactNode | - | - | | key | The unique identifier of the Notification | string | - | - | | message | The title of notification box (required) | ReactNode | - | - |