feat: notification support duration (#47141)

* feat: notication support duration * test: update test
ant-design · Jan 24, 2024 · 7664f39 · 7664f39
1 parent 2b9ced5
commit 7664f39
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/components/notification/__tests__/hooks.test.tsx b/components/notification/__tests__/hooks.test.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+
 import notification from '..';
-import { fireEvent, pureRender, render } from '../../../tests/utils';
+import { act, fireEvent, pureRender, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
 describe('notification.hooks', () => {
   beforeEach(() => {
+    document.body.innerHTML = '';
     jest.useFakeTimers();
   });
 
   afterEach(() => {
+    jest.clearAllTimers();
     jest.useRealTimers();
   });
 
@@ -189,4 +192,47 @@ describe('notification.hooks', () => {
 
     expect(document.querySelector('.ant-notification-stack')).toBeFalsy();
   });
+
+  it('support duration', () => {
+    const Demo = () => {
+      const [api, holder] = notification.useNotification({ duration: 1.5 });
+
+      return (
+        <>
+          <a
+            onClick={() => {
+              api.info({
+                message: null,
+                description: 'test',
+              });
+            }}
+          >
+            Show
+          </a>
+          {holder}
+        </>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('a')!);
+
+    function getNoticeCount() {
+      return Array.from(document.querySelectorAll('.ant-notification-notice-wrapper')).filter(
+        (node) => !node.classList.contains('ant-notification-fade-leave'),
+      ).length;
+    }
+
+    // Pass 1s
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(getNoticeCount()).toBe(1);
+
+    // Pass 2s
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(getNoticeCount()).toBe(0);
+  });
 });
diff --git a/components/notification/interface.ts b/components/notification/interface.ts
@@ -67,4 +67,5 @@ export interface NotificationConfig {
   maxCount?: number;
   rtl?: boolean;
   stack?: boolean | { threshold?: number };
+  duration?: number;
 }
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
@@ -64,6 +64,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     rtl,
     onAllRemoved,
     stack,
+    duration,
   } = props;
   const { getPrefixCls, getPopupContainer, notification, direction } = useContext(ConfigContext);
   const [, token] = useToken();
@@ -87,7 +88,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     motion: getNotificationMotion,
     closable: true,
     closeIcon: getCloseIcon(prefixCls),
-    duration: DEFAULT_DURATION,
+    duration: duration ?? DEFAULT_DURATION,
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,