diff --git a/components/message/nz-message-container.component.ts b/components/message/nz-message-container.component.ts index 80ae97ce240..590cb456faf 100644 --- a/components/message/nz-message-container.component.ts +++ b/components/message/nz-message-container.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; import { NzMessageConfig, NZ_MESSAGE_CONFIG, NZ_MESSAGE_DEFAULT_CONFIG } from './nz-message-config'; import { NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; @@ -26,34 +27,52 @@ export class NzMessageContainerComponent { this.config = { ...this.config, ...config }; } - // Create a new message + /** + * Create a new message. + * @param message Parsed message configuration. + */ createMessage(message: NzMessageDataFilled): void { if (this.messages.length >= this.config.nzMaxStack) { this.messages.splice(0, 1); } message.options = this._mergeMessageOptions(message.options); + message.onClose = new Subject(); this.messages.push(message); this.cdr.detectChanges(); } - // Remove a message by messageId + /** + * Remove a message by `messageId`. + * @param messageId Id of the message to be removed. + */ removeMessage(messageId: string): void { this.messages.some((message, index) => { if (message.messageId === messageId) { this.messages.splice(index, 1); this.cdr.detectChanges(); + message.onClose.next(); + message.onClose.complete(); + if (message.onClick) { + message.onClick.complete(); + } return true; } }); } - // Remove all messages + /** + * Remove all messages. + */ removeMessageAll(): void { this.messages = []; this.cdr.detectChanges(); } - // Merge default options and custom message options + /** + * Merge default options and custom message options + * @param options + * @private + */ protected _mergeMessageOptions(options: NzMessageDataOptions): NzMessageDataOptions { const defaultOptions: NzMessageDataOptions = { nzDuration : this.config.nzDuration, diff --git a/components/message/nz-message.definitions.ts b/components/message/nz-message.definitions.ts index 1d72ede6348..086985dae4d 100644 --- a/components/message/nz-message.definitions.ts +++ b/components/message/nz-message.definitions.ts @@ -1,20 +1,30 @@ +import { Observable, Subject } from 'rxjs'; + +export type NzMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading'; + export interface NzMessageDataOptions { nzDuration?: number; nzAnimate?: boolean; nzPauseOnHover?: boolean; } -// Message data for terminal users +/** + * Message data for terminal users. + */ export interface NzMessageData { - // TODO: remove the literal parts as it's widened anyway - type?: 'success' | 'info' | 'warning' | 'error' | 'loading' | string; + type?: NzMessageType | string; content?: string; } -// Filled version of NzMessageData (includes more private properties) +/** + * Filled version of NzMessageData (includes more private properties). + */ export interface NzMessageDataFilled extends NzMessageData { - messageId: string; // Service-wide unique id, auto generated - state?: 'enter' | 'leave'; + messageId: string; + createdAt: Date; + options?: NzMessageDataOptions; - createdAt: Date; // Auto created + state?: 'enter' | 'leave'; + onClose?: Subject; + onClick?: Subject; } diff --git a/components/message/nz-message.service.ts b/components/message/nz-message.service.ts index 042d5dc8b89..b13fbe8bcaa 100644 --- a/components/message/nz-message.service.ts +++ b/components/message/nz-message.service.ts @@ -1,12 +1,11 @@ import { Overlay } from '@angular/cdk/overlay'; -import { ComponentPortal } from '@angular/cdk/portal'; import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector, Type } from '@angular/core'; import { NzMessageConfig } from './nz-message-config'; import { NzMessageContainerComponent } from './nz-message-container.component'; import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './nz-message.definitions'; -let globalCounter = 0; // global ID counter for messages +let globalCounter = 0; export class NzMessageBaseService { protected _container: ContainerClass; @@ -17,9 +16,8 @@ export class NzMessageBaseService { tick(1000); expect(overlayContainerElement.textContent).toContain('EXISTS'); })); + + it('should emit event when message close', fakeAsync(() => { + })); }); @Component({ diff --git a/components/notification/nz-notification-container.component.ts b/components/notification/nz-notification-container.component.ts index 8c34928e044..52102968fec 100644 --- a/components/notification/nz-notification-container.component.ts +++ b/components/notification/nz-notification-container.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; import { NzMessageContainerComponent } from '../message/nz-message-container.component'; import { NzNotificationConfig, NZ_NOTIFICATION_CONFIG, NZ_NOTIFICATION_DEFAULT_CONFIG } from './nz-notification-config'; @@ -34,6 +35,8 @@ export class NzNotificationContainerComponent extends NzMessageContainerComponen */ createMessage(notification: NzNotificationDataFilled): void { notification.options = this._mergeMessageOptions(notification.options); + notification.onClick = new Subject(); + notification.onClose = new Subject(); const key = notification.options.nzKey; const notificationWithSameKey = this.messages.find(msg => msg.options.nzKey === notification.options.nzKey); if (key && notificationWithSameKey) { diff --git a/components/notification/nz-notification.component.html b/components/notification/nz-notification.component.html index 013379f4a6b..bd825170820 100644 --- a/components/notification/nz-notification.component.html +++ b/components/notification/nz-notification.component.html @@ -2,6 +2,7 @@ [ngStyle]="nzMessage.options.nzStyle" [ngClass]="nzMessage.options.nzClass" [@notificationMotion]="state" + (click)="onClick($event)" (mouseenter)="onEnter()" (mouseleave)="onLeave()">
diff --git a/components/notification/nz-notification.component.ts b/components/notification/nz-notification.component.ts index c088c805149..40ba63709c6 100644 --- a/components/notification/nz-notification.component.ts +++ b/components/notification/nz-notification.component.ts @@ -22,6 +22,10 @@ export class NzNotificationComponent extends NzMessageComponent { this._destroy(); } + onClick(e: MouseEvent): void { + this.nzMessage.onClick.next(e); + } + get state(): string { if (this.nzMessage.state === 'enter') { if ((this.container.config.nzPlacement === 'topLeft') || (this.container.config.nzPlacement === 'bottomLeft')) { diff --git a/components/notification/nz-notification.definitions.ts b/components/notification/nz-notification.definitions.ts index e45effc5d2c..c57bf23073d 100644 --- a/components/notification/nz-notification.definitions.ts +++ b/components/notification/nz-notification.definitions.ts @@ -1,4 +1,5 @@ import { TemplateRef } from '@angular/core'; +import { Subject } from 'rxjs'; import { NzMessageData, NzMessageDataOptions } from '../message/nz-message.definitions'; @@ -21,7 +22,10 @@ export interface NzNotificationDataOptions extends NzMessageDataOptions // Filled version of NzMessageData (includes more private properties) export interface NzNotificationDataFilled extends NzNotificationData { messageId: string; // Service-wide unique id, auto generated + createdAt: Date; // Auto created + state?: 'enter' | 'leave'; options?: NzNotificationDataOptions; - createdAt: Date; // Auto created + onClose?: Subject; + onClick?: Subject; }