refactor(Notification): notification support hidden close button when closeIcon setting to null or false (#42927)

* feat: notification support hidden close button when closeIcon setting to null or false

* feat: reset prettier format

components/notification/PurePanel.tsx

@@ -21,6 +21,7 @@ export const TypeIcon = {
 };
 
 export function getCloseIcon(prefixCls: string, closeIcon?: React.ReactNode) {
+  if (closeIcon === null || closeIcon === false) return null;
   return (
     closeIcon || (
       <span className={`${prefixCls}-close-x`}>

components/notification/__tests__/index.test.tsx

@@ -313,4 +313,39 @@ describe('notification', () => {
 
     expect(document.querySelectorAll('[role="status"]').length).toBe(1);
   });
+  it('should hide close btn when closeIcon setting to null or false', async () => {
+    notification.config({
+      closeIcon: undefined,
+    });
+    act(() => {
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        className: 'normal',
+      });
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        className: 'custom',
+        closeIcon: <span className="custom-close-icon">Close</span>,
+      });
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        closeIcon: null,
+        className: 'with-null',
+      });
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        closeIcon: false,
+        className: 'with-false',
+      });
+    });
+    await awaitPromise();
+    expect(document.querySelectorAll('.normal .ant-notification-notice-close').length).toBe(1);
+    expect(document.querySelectorAll('.custom .custom-close-icon').length).toBe(1);
+    expect(document.querySelectorAll('.with-null .ant-notification-notice-close').length).toBe(0);
+    expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0);
+  });
 });

components/notification/index.en-US.md

@@ -48,7 +48,7 @@ The properties of config are as follows:
 | --- | --- | --- | --- | --- |
 | btn | Customized close button | ReactNode | - | - |
 | className | Customized CSS class | string | - | - |
-| closeIcon | Custom close icon | ReactNode | - | - |
+| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | 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 | - |
 | icon | Customized icon | ReactNode | - | - |
@@ -68,8 +68,8 @@ The properties of config are as follows:
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  |
-| closeIcon | Custom close icon | ReactNode | - |  |
-| getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body |  |
+| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
+| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |  |
 | 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 |  |
@@ -99,7 +99,7 @@ notification.config({
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  |
-| closeIcon | Custom close icon | ReactNode | - |  |
+| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |
 | getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |

components/notification/index.zh-CN.md

@@ -49,7 +49,7 @@ config 参数如下：
 | --- | --- | --- | --- | --- |
 | btn | 自定义关闭按钮 | ReactNode | - | - |
 | className | 自定义 CSS class | string | - | - |
-| closeIcon | 自定义关闭图标 | ReactNode | - | - |
+| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | description | 通知提醒内容，必选 | ReactNode | - | - |
 | duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
 | icon | 自定义图标 | ReactNode | - | - |
@@ -69,8 +69,8 @@ config 参数如下：
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | ReactNode | - |  |
-| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
+| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
@@ -100,7 +100,7 @@ notification.config({
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | ReactNode | - |  |
+| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
 | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |

components/notification/interface.ts

@@ -27,7 +27,7 @@ export interface ArgsProps {
   className?: string;
   readonly type?: IconType;
   onClick?: () => void;
-  closeIcon?: React.ReactNode;
+  closeIcon?: boolean | React.ReactNode;
   props?: DivProps;
   role?: 'alert' | 'status';
 }

components/notification/useNotification.tsx

@@ -113,9 +113,12 @@ export function useInternalNotification(
         btn,
         className,
         role = 'alert',
+        closeIcon,
         ...restConfig
       } = config;
 
+      const realCloseIcon = getCloseIcon(noticePrefixCls, closeIcon);
+
       return originOpen({
         placement: 'topRight',
         ...restConfig,
@@ -131,6 +134,8 @@ export function useInternalNotification(
           />
         ),
         className: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
+        closeIcon: realCloseIcon,
+        closable: !!realCloseIcon,
       });
     };