From 27c3b51c181a647eccdba617247ecb0a84141570 Mon Sep 17 00:00:00 2001
From: Karott Schu <karott7@gmail.com>
Date: Sat, 2 Oct 2021 14:14:31 +0800
Subject: [PATCH] fix: Notification closeIcon don't update (#32351) (#32359)

* fix: Notification closeIcon don't update (#32351)

* add test case for Notification closeIcon (#32351)

Co-authored-by: shuzhiqiang <shuzhiqiang@megalinkps.cn>
---
 components/notification/__tests__/index.test.js | 15 +++++++++++++++
 components/notification/index.tsx               | 16 ++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/components/notification/__tests__/index.test.js b/components/notification/__tests__/index.test.js
index 205c2aedf0..5391f8985b 100644
--- a/components/notification/__tests__/index.test.js
+++ b/components/notification/__tests__/index.test.js
@@ -191,6 +191,21 @@ describe('notification', () => {
     expect(document.querySelectorAll('.test-customize-icon').length).toBe(1);
   });
 
+  it('closeIcon should be update', async () => {
+    const openNotificationWithCloseIcon = async type => {
+      notification.open({
+        message: 'Notification Title',
+        closeIcon: <span className={`test-customize-icon-${type}`} />,
+      });
+      await Promise.resolve();
+      expect(document.querySelectorAll(`.test-customize-icon-${type}`).length).toBe(1);
+    };
+
+    const promises = ['1', '2'].map(type => openNotificationWithCloseIcon(type));
+
+    await Promise.all(promises);
+  });
+
   it('support config duration', () => {
     notification.config({
       duration: 0,
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index 345b5c65d7..0749758d4f 100755
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@@ -124,7 +124,6 @@ function getNotificationInstance(
     top,
     bottom,
     getContainer = defaultGetContainer,
-    closeIcon = defaultCloseIcon,
     prefixCls: customizePrefixCls,
   } = args;
   const { getPrefixCls, getIconPrefixCls } = globalConfig();
@@ -141,12 +140,6 @@ function getNotificationInstance(
     return;
   }
 
-  const closeIconToRender = (
-    <span className={`${prefixCls}-close-x`}>
-      {closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
-    </span>
-  );
-
   const notificationClass = classNames(`${prefixCls}-${placement}`, {
     [`${prefixCls}-rtl`]: rtl === true,
   });
@@ -158,7 +151,6 @@ function getNotificationInstance(
         className: notificationClass,
         style: getPlacementStyle(placement, top, bottom),
         getContainer,
-        closeIcon: closeIconToRender,
         maxCount,
       },
       notification => {
@@ -213,6 +205,7 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
     key,
     style,
     className,
+    closeIcon = defaultCloseIcon,
   } = args;
 
   const duration = durationArg === undefined ? defaultDuration : durationArg;
@@ -226,6 +219,12 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
     });
   }
 
+  const closeIconToRender = (
+    <span className={`${prefixCls}-close-x`}>
+      {closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
+    </span>
+  );
+
   const autoMarginTag =
     !description && iconNode ? (
       <span className={`${prefixCls}-message-single-line-auto-margin`} />
@@ -247,6 +246,7 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
     ),
     duration,
     closable: true,
+    closeIcon: closeIconToRender,
     onClose,
     onClick,
     key,