feat: notification component support closeIcon props (#19618)

* notification component support closeIcon props

* update notification doc, change closeIcon support version to 3.26.0

components/notification/__tests__/index.test.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import notification from '..';
+import Icon from '../../icon';
 
 describe('notification', () => {
   beforeAll(() => {
@@ -78,4 +80,25 @@ describe('notification', () => {
     });
     expect(document.querySelectorAll('.ant-notification').length).toBe(1);
   });
+
+  it('support closeIcon', () => {
+    notification.open({
+      message: 'Notification Title',
+      duration: 0,
+      closeIcon: <Icon type="step-backward" />,
+    });
+    expect(document.querySelectorAll('.anticon-step-backward').length).toBe(1);
+  });
+
+  it('support config closeIcon', () => {
+    notification.config({
+      closeIcon: <Icon type="step-backward" />,
+    });
+    notification.open({
+      message: 'Notification Title',
+      duration: 0,
+      closeIcon: <Icon type="step-backward" />,
+    });
+    expect(document.querySelectorAll('.anticon-step-backward').length).toBe(1);
+  })
 });

components/notification/index.en-US.md

@@ -44,6 +44,7 @@ The properties of config are as follows:
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |  |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |  |
+| closeIcon | custom close icon | ReactNode | - | 3.26.0 |
 
 `notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
 
@@ -64,3 +65,4 @@ notification.config({
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |  |
+| closeIcon | custom close icon | ReactNode | - | 3.25.0 |

components/notification/index.tsx

@@ -12,6 +12,7 @@ let defaultTop = 24;
 let defaultBottom = 24;
 let defaultPlacement: NotificationPlacement = 'topRight';
 let defaultGetContainer: () => HTMLElement;
+let defaultCloseIcon: React.ReactNode;
 
 export interface ConfigProps {
   top?: number;
@@ -19,10 +20,11 @@ export interface ConfigProps {
   duration?: number;
   placement?: NotificationPlacement;
   getContainer?: () => HTMLElement;
+  closeIcon?: React.ReactNode;
 }
 
 function setNotificationConfig(options: ConfigProps) {
-  const { duration, placement, bottom, top, getContainer } = options;
+  const { duration, placement, bottom, top, getContainer, closeIcon } = options;
   if (duration !== undefined) {
     defaultDuration = duration;
   }
@@ -38,6 +40,9 @@ function setNotificationConfig(options: ConfigProps) {
   if (getContainer !== undefined) {
     defaultGetContainer = getContainer;
   }
+  if (closeIcon !== undefined) {
+    defaultCloseIcon = closeIcon;
+  }
 }
 
 function getPlacementStyle(
@@ -85,6 +90,7 @@ type NotificationInstanceProps = {
   getContainer?: () => HTMLElement;
   top?: number;
   bottom?: number;
+  closeIcon?: React.ReactNode;
 };
 
 function getNotificationInstance(
@@ -94,6 +100,7 @@ function getNotificationInstance(
     getContainer = defaultGetContainer,
     top,
     bottom,
+    closeIcon = defaultCloseIcon,
   }: NotificationInstanceProps,
   callback: (n: any) => void,
 ) {
@@ -102,13 +109,20 @@ function getNotificationInstance(
     callback(notificationInstance[cacheKey]);
     return;
   }
+
+  const closeIconToRender = (
+    <span className={`${prefixCls}-close-x`}>
+      {closeIcon || <Icon className={`${prefixCls}-close-icon`} type="close" />}
+    </span>
+  );
+
   (Notification as any).newInstance(
     {
       prefixCls,
       className: `${prefixCls}-${placement}`,
       style: getPlacementStyle(placement, top, bottom),
       getContainer,
-      closeIcon: <Icon className={`${prefixCls}-close-icon`} type="close" />,
+      closeIcon: closeIconToRender,
     },
     (notification: any) => {
       notificationInstance[cacheKey] = notification;
@@ -141,6 +155,7 @@ export interface ArgsProps {
   top?: number;
   bottom?: number;
   getContainer?: () => HTMLElement;
+  closeIcon?: React.ReactNode,
 }
 
 function notice(args: ArgsProps) {
@@ -163,7 +178,7 @@ function notice(args: ArgsProps) {
       <span className={`${prefixCls}-message-single-line-auto-margin`} />
     ) : null;
 
-  const { placement, top, bottom, getContainer } = args;
+  const { placement, top, bottom, getContainer, closeIcon } = args;
 
   getNotificationInstance(
     {
@@ -172,6 +187,7 @@ function notice(args: ArgsProps) {
       top,
       bottom,
       getContainer,
+      closeIcon,
     },
     (notification: any) => {
       notification.notice({

components/notification/index.zh-CN.md

@@ -45,6 +45,7 @@ config 参数如下：
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |  |
 | style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |  |
+| closeIcon | 自定义关闭图标 | ReactNode | - | 3.25.0 |
 
 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
 
@@ -65,3 +66,4 @@ notification.config({
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |  |
+| closeIcon | 自定义关闭图标 | ReactNode | - | 3.26.0 |