feat(notification): support pauseOnHover props (#49024)

components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -538,14 +538,34 @@ 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`] = `
-<button
+<div
-  class="ant-btn ant-btn-primary"
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
-  type="button"
 >
-  <span>
+  <div
-    Open the notification box
+    class="ant-space-item"
-  </span>
+  >
-</button>
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Pause on hover
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Don't pause on hover
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders components/notification/demo/show-with-progress.tsx extend context correctly 2`] = `[]`;

components/notification/__tests__/__snapshots__/demo.test.ts.snap

@@ -524,14 +524,34 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
 `;
 
 exports[`renders components/notification/demo/show-with-progress.tsx correctly 1`] = `
-<button
+<div
-  class="ant-btn ant-btn-primary"
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
-  type="button"
 >
-  <span>
+  <div
-    Open the notification box
+    class="ant-space-item"
-  </span>
+  >
-</button>
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Pause on hover
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Don't pause on hover
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders components/notification/demo/stack.tsx correctly 1`] = `

components/notification/demo/show-with-progress.tsx

@@ -1,24 +1,30 @@
 import React from 'react';
-import { Button, notification } from 'antd';
+import { Button, Space, notification } from 'antd';
 
 const App: React.FC = () => {
   const [api, contextHolder] = notification.useNotification();
 
-  const openNotification = () => {
+  const openNotification = (pauseOnHover: boolean) => () => {
     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,
+      pauseOnHover,
     });
   };
 
   return (
     <>
       {contextHolder}
-      <Button type="primary" onClick={openNotification}>
+      <Space>
-        Open the notification box
+        <Button type="primary" onClick={openNotification(true)}>
-      </Button>
+          Pause on hover
+        </Button>
+        <Button type="primary" onClick={openNotification(false)}>
+          Don&apos;t pause on hover
+        </Button>
+      </Space>
     </>
   );
 };

components/notification/index.en-US.md

@@ -55,6 +55,7 @@ The properties of config are as follows:
 | 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 |
+| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
 | icon | Customized icon | ReactNode | - | - |
 | key | The unique identifier of the Notification | string | - | - |
 | message | The title of notification box (required) | ReactNode | - | - |

components/notification/index.zh-CN.md

@@ -107,6 +107,7 @@ notification.config({
 | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
 | showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
 | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |

components/notification/interface.ts

@@ -26,6 +26,7 @@ export interface ArgsProps {
   onClose?: () => void;
   duration?: number | null;
   showProgress?: boolean;
+  pauseOnHover?: boolean;
   icon?: React.ReactNode;
   placement?: NotificationPlacement;
   style?: React.CSSProperties;
@@ -54,6 +55,7 @@ export interface GlobalConfigProps {
   bottom?: number;
   duration?: number;
   showProgress?: boolean;
+  pauseOnHover?: boolean;
   prefixCls?: string;
   getContainer?: () => HTMLElement | ShadowRoot;
   placement?: NotificationPlacement;
@@ -75,4 +77,5 @@ export interface NotificationConfig {
   stack?: boolean | { threshold?: number };
   duration?: number;
   showProgress?: boolean;
+  pauseOnHover?: boolean;
 }

components/notification/useNotification.tsx

@@ -89,6 +89,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     closable: true,
     closeIcon: getCloseIcon(prefixCls),
     duration: duration ?? DEFAULT_DURATION,
+    pauseOnHover: true,
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,

package.json

@@ -128,7 +128,7 @@
     "rc-mentions": "~2.13.1",
     "rc-menu": "~9.14.0",
     "rc-motion": "^2.9.1",
-    "rc-notification": "~5.5.0",
+    "rc-notification": "~5.6.0",
     "rc-pagination": "~4.0.4",
     "rc-picker": "~4.5.0",
     "rc-progress": "~4.0.0",