同步 master 分支的一些 bugfix 到 antd-v5 分支，以修复 antd@v5 的 bug (#371)

Co-authored-by: Ryan <[email protected]>
fix: global duration not work(Also includes some other attributes) (#365)

Author: Wxh16144

src/hooks/useNotification.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { NotificationsProps, NotificationsRef } from '../Notifications';
 import Notifications from '../Notifications';
 import type { OpenConfig, Placement, StackConfig } from '../interface';
+import { useEvent } from 'rc-util';
 
 const defaultGetContainer = () => document.body;
 
@@ -107,26 +108,29 @@ export default function useNotification(
 
   const [taskQueue, setTaskQueue] = React.useState<Task[]>([]);
 
-  // ========================= Refs =========================
-  const api = React.useMemo<NotificationAPI>(() => {
-    return {
-      open: (config) => {
-        const mergedConfig = mergeConfig(shareConfig, config);
-        if (mergedConfig.key === null || mergedConfig.key === undefined) {
-          mergedConfig.key = `rc-notification-${uniqueKey}`;
-          uniqueKey += 1;
-        }
+  const open = useEvent<NotificationAPI['open']>((config) => {
+    const mergedConfig = mergeConfig(shareConfig, config);
+    if (mergedConfig.key === null || mergedConfig.key === undefined) {
+      mergedConfig.key = `rc-notification-${uniqueKey}`;
+      uniqueKey += 1;
+    }
 
-        setTaskQueue((queue) => [...queue, { type: 'open', config: mergedConfig }]);
-      },
+    setTaskQueue((queue) => [...queue, { type: 'open', config: mergedConfig }]);
+  });
+
+  // ========================= Refs =========================
+  const api = React.useMemo<NotificationAPI>(
+    () => ({
+      open: open,
       close: (key) => {
         setTaskQueue((queue) => [...queue, { type: 'close', key }]);
       },
       destroy: () => {
         setTaskQueue((queue) => [...queue, { type: 'destroy' }]);
       },
-    };
-  }, []);
+    }),
+    [],
+  );
 
   // ======================= Container ======================
   // React 18 should all in effect that we will check container in each render

tests/index.test.tsx

@@ -849,4 +849,47 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
   });
+
+  describe('Modifying properties through useState can take effect', () => {
+    it('should show notification and disappear after 5 seconds', async () => {
+      const Demo: React.FC = () => {
+        const [duration, setDuration] = React.useState(0);
+        const [api, holder] = useNotification({ duration });
+
+        return (
+          <>
+            <button data-testid="change-duration" onClick={() => setDuration(5)}>
+              change duration
+            </button>
+            <button
+              data-testid="show-notification"
+              onClick={() => {
+                api.open({
+                  content: `Test Notification`,
+                });
+              }}
+            >
+              show notification
+            </button>
+            {holder}
+          </>
+        );
+      };
+
+      const { getByTestId } = render(<Demo />);
+
+      fireEvent.click(getByTestId('show-notification'));
+
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1);
+      fireEvent.click(getByTestId('change-duration'));
+      fireEvent.click(getByTestId('show-notification'));
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(2);
+
+      act(() => {
+        vi.advanceTimersByTime(5000);
+      });
+
+      expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1);
+    });
+  });
 });