feat(module:notification): add close icon prop (#4495)

* feat(module:notification): add close icon prop close #4494 * fix: use else instead
NG-ZORRO · Dec 9, 2019 · 80a0b26 · 80a0b26
1 parent df3deac
commit 80a0b26
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 17 deletions.
diff --git a/components/notification/doc/index.en-US.md b/components/notification/doc/index.en-US.md
@@ -54,6 +54,7 @@ The parameters that are set by the `options` support are as follows:
 | nzStyle | Custom inline style | `object` |
 | nzClass | Custom CSS class | `object` |
 | nzData | Anything that would be used as template context | `any` |
+| nzCloseIcon | Custom close icon | `TemplateRef<void> \| string` |
 
 Methods for destruction are also provided:
 

diff --git a/components/notification/doc/index.zh-CN.md b/components/notification/doc/index.zh-CN.md
@@ -53,6 +53,7 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
 | nzStyle | 自定义内联样式 | `object` |
 | nzClass | 自定义 CSS class | `object` |
 | nzData | 任何想要在模板中作为上下文的数据 | `any` |
+| nzCloseIcon | 自定义关闭图标 | `TemplateRef<void> \| string` |
 
 
 还提供了全局销毁方法：

diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html
@@ -51,7 +51,14 @@
   </ng-template>
   <a tabindex="0" class="ant-notification-notice-close" (click)="close()">
     <span class="ant-notification-notice-close-x">
-      <i nz-icon nzType="close" class="ant-notification-close-icon"></i>
+      <ng-container *ngIf="nzMessage.options?.nzCloseIcon else iconTpl">
+        <ng-container *nzStringTemplateOutlet="nzMessage.options?.nzCloseIcon">
+          <i nz-icon [nzType]="nzMessage.options?.nzCloseIcon"></i>
+        </ng-container>
+      </ng-container>
+      <ng-template #iconTpl>
+        <i nz-icon nzType="close" class="ant-notification-close-icon"></i>
+      </ng-template>
     </span>
   </a>
 </div>
diff --git a/components/notification/nz-notification.definitions.ts b/components/notification/nz-notification.definitions.ts
@@ -25,6 +25,8 @@ export interface NzNotificationDataOptions<T = {}> extends NzMessageDataOptions
 
   /** Anything user wants renderer into a template. */
   nzData?: T;
+
+  nzCloseIcon?: TemplateRef<void> | string;
 }
 
 // Filled version of NzMessageData (includes more private properties)

diff --git a/components/notification/nz-notification.module.ts b/components/notification/nz-notification.module.ts
@@ -9,6 +9,7 @@
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER } from './nz-notification-config';
@@ -17,7 +18,7 @@ import { NzNotificationComponent } from './nz-notification.component';
 import { NzNotificationServiceModule } from './nz-notification.service.module';
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, NzIconModule, NzNotificationServiceModule],
+  imports: [CommonModule, OverlayModule, NzIconModule, NzNotificationServiceModule, NzAddOnModule],
   declarations: [NzNotificationComponent, NzNotificationContainerComponent],
   providers: [NZ_NOTIFICATION_DEFAULT_CONFIG_PROVIDER],
   entryComponents: [NzNotificationContainerComponent]

diff --git a/components/notification/nz-notification.spec.ts b/components/notification/nz-notification.spec.ts
@@ -2,8 +2,10 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { HomeOutline } from '@ant-design/icons-angular/icons';
 
 import { dispatchMouseEvent } from 'ng-zorro-antd/core';
+import { NZ_ICONS } from 'ng-zorro-antd/icon';
 
 import { NZ_NOTIFICATION_CONFIG } from './nz-notification-config';
 import { NzNotificationModule } from './nz-notification.module';
@@ -23,11 +25,23 @@ describe('NzNotification', () => {
   let overlayContainerElement: HTMLElement;
   let fixture: ComponentFixture<DemoAppComponent>;
 
+  function waitForNotificationToggling(): void {
+    fixture.detectChanges();
+    tick(2000);
+    fixture.detectChanges();
+  }
+
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NzNotificationModule, NoopAnimationsModule],
       declarations: [DemoAppComponent],
-      providers: [{ provide: NZ_NOTIFICATION_CONFIG, useValue: { nzMaxStack: 2 } }] // Override default config
+      providers: [
+        { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzMaxStack: 2 } },
+        {
+          provide: NZ_ICONS,
+          useValue: [HomeOutline]
+        }
+      ] // Override default config
     });
 
     TestBed.compileComponents();
@@ -201,33 +215,29 @@ describe('NzNotification', () => {
     tick(1000);
     expect(onCloseFlag).toBeTruthy();
 
-    waitForNotificationsToClose();
+    waitForNotificationToggling();
   }));
 
   it('should support configurable nzTop & nzBottom', fakeAsync(() => {
     notificationService.config({ nzTop: 48 });
     notificationService.create('', '', 'TEST TOP', { nzDuration: 3000 });
-    waitForNotificationToggling(fixture);
+    waitForNotificationToggling();
     const notificationContainer = overlayContainerElement.querySelector('.ant-notification') as HTMLElement;
     expect(notificationContainer.style.top).toBe('48px');
     expect(notificationContainer.style.bottom).toBeFalsy();
 
     notificationService.config({ nzPlacement: 'bottomLeft', nzBottom: '48px' });
     notificationService.create('', '', 'TEST BOTTOM');
-    waitForNotificationToggling(fixture);
+    waitForNotificationToggling();
     expect(notificationContainer.style.top).toBeFalsy();
     expect(notificationContainer.style.bottom).toBe('48px');
 
-    waitForNotificationsToClose();
+    waitForNotificationToggling();
   }));
-});
 
-function waitForNotificationToggling<T>(fixture: ComponentFixture<T>): void {
-  fixture.detectChanges();
-  tick(2000);
-  fixture.detectChanges();
-}
-
-function waitForNotificationsToClose(): void {
-  tick(10000);
-}
+  it('should support close icon', fakeAsync(() => {
+    notificationService.create('', '', 'ICON', { nzCloseIcon: 'home' });
+    waitForNotificationToggling();
+    expect(overlayContainerElement.querySelector('.anticon-home')).toBeTruthy();
+  }));
+});