From 7664f39d8b2a61057cb19cc4727736cec9e2bd89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 24 Jan 2024 15:25:56 +0800
Subject: [PATCH] feat: notification support duration (#47141)

* feat: notication support duration

* test: update test
---
 .../notification/__tests__/hooks.test.tsx     | 50 ++++++++++++++++++-
 components/notification/interface.ts          |  1 +
 components/notification/useNotification.tsx   |  3 +-
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/components/notification/__tests__/hooks.test.tsx b/components/notification/__tests__/hooks.test.tsx
index 843858dd48..38ba2ef229 100644
--- 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
index b5171338cb..62387f43d3 100644
--- 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
index 80e4b62238..a4f44bfd4d 100644
--- 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,