fix: notification should hide close icon when closeIcon={null}

close #42736
ant-design · Jun 2, 2023 · 554d05e · 554d05e
1 parent 0463c1a
commit 554d05e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git a/components/notification/__tests__/index.test.tsx b/components/notification/__tests__/index.test.tsx
@@ -214,13 +214,13 @@ describe('notification', () => {
 
     const list: Array<NotificationWithIconType> = ['success', 'info', 'warning', 'error'];
 
-    const promises = list.map(type => openNotificationWithIcon(type));
+    const promises = list.map((type) => openNotificationWithIcon(type));
 
     await act(async () => {
       await Promise.all(promises);
     });
 
-    list.forEach(type => {
+    list.forEach((type) => {
       expect(document.querySelectorAll(`${iconPrefix}-${type}`).length).toBe(1);
     });
   });
@@ -238,13 +238,13 @@ describe('notification', () => {
     };
 
     const list: Array<NotificationWithIconType> = ['success', 'info', 'warning', 'error'];
-    const promises = list.map(type => openNotificationWithIcon(type));
+    const promises = list.map((type) => openNotificationWithIcon(type));
 
     await act(async () => {
       await Promise.all(promises);
     });
 
-    list.forEach(type => {
+    list.forEach((type) => {
       expect(document.querySelectorAll(`.ant-notification-notice-${type}`).length).toBe(1);
     });
   });
@@ -265,23 +265,47 @@ describe('notification', () => {
       notification.open({
         message: 'Notification Title',
         duration: 0,
-        closeIcon: <span className="test-customize-icon" />,
+        closeIcon: <span className='test-customize-icon' />,
       });
     });
 
     expect(document.querySelectorAll('.test-customize-icon').length).toBe(1);
   });
 
+  it('support closeIcon to be null', () => {
+    act(() => {
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        closeIcon: null,
+      });
+    });
+
+    expect(document.querySelectorAll('.test-customize-icon').length).toBe(0);
+  });
+
+  it('support closeIcon to be false', () => {
+    act(() => {
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        closeIcon: false,
+      });
+    });
+
+    expect(document.querySelectorAll('.test-customize-icon').length).toBe(0);
+  });
+
   it('support config closeIcon', () => {
     notification.config({
-      closeIcon: <span className="test-customize-icon" />,
+      closeIcon: <span className='test-customize-icon' />,
     });
 
     act(() => {
       notification.open({
         message: 'Notification Title',
         duration: 0,
-        closeIcon: <span className="test-customize-icon" />,
+        closeIcon: <span className='test-customize-icon' />,
       });
     });
 
@@ -300,13 +324,13 @@ describe('notification', () => {
     };
 
     const list: Array<'1' | '2'> = ['1', '2'];
-    const promises = list.map(type => openNotificationWithCloseIcon(type));
+    const promises = list.map((type) => openNotificationWithCloseIcon(type));
 
     await act(async () => {
       await Promise.all(promises);
     });
 
-    list.forEach(type => {
+    list.forEach((type) => {
       expect(document.querySelectorAll(`.test-customize-icon-${type}`).length).toBe(1);
     });
   });

diff --git a/components/notification/index.tsx b/components/notification/index.tsx
@@ -163,7 +163,7 @@ function getNotificationInstance(
   const cacheInstance = notificationInstance[cacheKey];
 
   if (cacheInstance) {
-    Promise.resolve(cacheInstance).then(instance => {
+    Promise.resolve(cacheInstance).then((instance) => {
       callback({ prefixCls: `${prefixCls}-notice`, iconPrefixCls, instance });
     });
 
@@ -174,7 +174,7 @@ function getNotificationInstance(
     [`${prefixCls}-rtl`]: rtl === true,
   });
 
-  notificationInstance[cacheKey] = new Promise(resolve => {
+  notificationInstance[cacheKey] = new Promise((resolve) => {
     Notification.newInstance(
       {
         prefixCls,
@@ -183,7 +183,7 @@ function getNotificationInstance(
         getContainer,
         maxCount,
       },
-      notification => {
+      (notification) => {
         resolve(notification);
         callback({
           prefixCls: `${prefixCls}-notice`,
@@ -252,11 +252,14 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
     });
   }
 
-  const closeIconToRender = (
-    <span className={`${prefixCls}-close-x`}>
-      {closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
-    </span>
-  );
+  const closeIconToRender =
+    typeof closeIcon === 'undefined' ? (
+      <span className={`${prefixCls}-close-x`}>
+        <CloseOutlined className={`${prefixCls}-close-icon`} />
+      </span>
+    ) : (
+      closeIcon
+    );
 
   const autoMarginTag =
     !description && iconNode ? (
@@ -266,7 +269,7 @@ function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: st
   return {
     content: (
       <ConfigProvider iconPrefixCls={iconPrefixCls}>
-        <div className={iconNode ? `${prefixCls}-with-icon` : ''} role="alert">
+        <div className={iconNode ? `${prefixCls}-with-icon` : ''} role='alert'>
           {iconNode}
           <div className={`${prefixCls}-message`}>
             {autoMarginTag}
@@ -300,24 +303,24 @@ function notice(args: ArgsProps) {
 const api: any = {
   open: notice,
   close(key: string) {
-    Object.keys(notificationInstance).forEach(cacheKey =>
-      Promise.resolve(notificationInstance[cacheKey]).then(instance => {
+    Object.keys(notificationInstance).forEach((cacheKey) =>
+      Promise.resolve(notificationInstance[cacheKey]).then((instance) => {
         instance.removeNotice(key);
       }),
     );
   },
   config: setNotificationConfig,
   destroy() {
-    Object.keys(notificationInstance).forEach(cacheKey => {
-      Promise.resolve(notificationInstance[cacheKey]).then(instance => {
+    Object.keys(notificationInstance).forEach((cacheKey) => {
+      Promise.resolve(notificationInstance[cacheKey]).then((instance) => {
         instance.destroy();
       });
       delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
     });
   },
 };
 
-['success', 'info', 'warning', 'error'].forEach(type => {
+['success', 'info', 'warning', 'error'].forEach((type) => {
   api[type] = (args: ArgsProps) =>
     api.open({
       ...args,