diff --git a/components/notification/__tests__/config.test.js b/components/notification/__tests__/config.test.js new file mode 100644 index 0000000000..40d23a24c4 --- /dev/null +++ b/components/notification/__tests__/config.test.js @@ -0,0 +1,44 @@ +import notification, { getInstance } from '..'; +import { sleep } from '../../../tests/utils'; + +describe('notification.config', () => { + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterAll(() => { + notification.destroy(); + }); + + it('should be able to config maxCount', async () => { + notification.config({ + maxCount: 5, + duration: 0.5, + }); + + for (let i = 0; i < 10; i += 1) { + notification.open({ + message: 'Notification message', + key: i, + }); + } + + notification.open({ + message: 'Notification last', + key: '11', + }); + + await Promise.resolve(); + + expect(document.querySelectorAll('.ant-notification-notice').length).toBe(5); + expect(document.querySelectorAll('.ant-notification-notice')[4].textContent).toBe( + 'Notification last', + ); + + jest.runAllTimers(); + await sleep(500); + expect((await getInstance('ant-notification-topRight')).component.state.notices).toHaveLength( + 0, + ); + }); +}); diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 687a9fcf30..e8d79e1103 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -65,7 +65,7 @@ notification.config({ ``` | Property | Description | Type | Default | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | | closeIcon | Custom close icon | ReactNode | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | @@ -73,6 +73,7 @@ notification.config({ | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | rtl | Whether to enable RTL mode | boolean | false | | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 | +| maxCount | Max Notification show, drop oldest if exceed limit | number | - | | ## FAQ @@ -100,4 +101,4 @@ return ( ### How to set static methods prefixCls ? -You can config with [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) +You can config with [`ConfigProvider.config`]() diff --git a/components/notification/index.tsx b/components/notification/index.tsx index c488a61f85..345b5c65d7 100755 --- a/components/notification/index.tsx +++ b/components/notification/index.tsx @@ -25,6 +25,7 @@ let defaultPlacement: NotificationPlacement = 'topRight'; let defaultGetContainer: () => HTMLElement; let defaultCloseIcon: React.ReactNode; let rtl = false; +let maxCount: number; export interface ConfigProps { top?: number; @@ -35,6 +36,7 @@ export interface ConfigProps { getContainer?: () => HTMLElement; closeIcon?: React.ReactNode; rtl?: boolean; + maxCount?: number; } function setNotificationConfig(options: ConfigProps) { @@ -65,6 +67,9 @@ function setNotificationConfig(options: ConfigProps) { if (options.rtl !== undefined) { rtl = options.rtl; } + if (options.maxCount !== undefined) { + maxCount = options.maxCount; + } } function getPlacementStyle( @@ -154,6 +159,7 @@ function getNotificationInstance( style: getPlacementStyle(placement, top, bottom), getContainer, closeIcon: closeIconToRender, + maxCount, }, notification => { resolve(notification); diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 2f8981ca18..11a8ec1e83 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -66,7 +66,7 @@ notification.config({ ``` | 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | bottom | 消息从底部弹出时,距离底部的位置,单位像素 | number | 24 | | closeIcon | 自定义关闭图标 | ReactNode | - | | duration | 默认自动关闭延时,单位秒 | number | 4.5 | @@ -74,6 +74,7 @@ notification.config({ | placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | rtl | 是否开启 RTL 模式 | boolean | false | | top | 消息从顶部弹出时,距离顶部的位置,单位像素 | number | 24 | +| maxCount | 最大显示数, 超过限制时,最早的消息会被自动关闭 | number | - | | ## FAQ @@ -101,4 +102,4 @@ return ( ### 静态方法如何设置 prefixCls ? -你可以通过 [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) 进行设置。 +你可以通过 [`ConfigProvider.config`]() 进行设置。