diff --git a/docs/structure.ts b/docs/structure.ts index 54853b516d..ae7e48d59c 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -319,6 +319,7 @@ export const structure = [ source: [ 'NbToastrService', 'NbToastComponent', + 'NbToastrConfig', ], }, { diff --git a/src/framework/theme/components/toastr/toast.component.html b/src/framework/theme/components/toastr/toast.component.html index 07452f42f6..644b3e0cb4 100644 --- a/src/framework/theme/components/toastr/toast.component.html +++ b/src/framework/theme/components/toastr/toast.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/framework/theme/components/toastr/toastr-container.component.ts b/src/framework/theme/components/toastr/toastr-container.component.ts index 5aff8acb10..07c41aabcf 100644 --- a/src/framework/theme/components/toastr/toastr-container.component.ts +++ b/src/framework/theme/components/toastr/toastr-container.component.ts @@ -4,13 +4,14 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, Input, OnInit, QueryList, ViewChildren } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'; import { animate, style, transition, trigger } from '@angular/animations'; import { NbToastComponent } from './toast.component'; import { NbToast } from './model'; import { NbLayoutDirectionService } from '../../services/direction.service'; import { NbGlobalPosition, NbPositionHelper } from '../cdk'; +import { takeWhile } from 'rxjs/operators'; const voidState = style({ @@ -32,7 +33,7 @@ const defaultOptions = { params: { direction: '' } }; ]), ], }) -export class NbToastrContainerComponent implements OnInit { +export class NbToastrContainerComponent implements OnInit, OnDestroy { @Input() content: NbToast[] = []; @@ -47,15 +48,22 @@ export class NbToastrContainerComponent implements OnInit { fadeIn; + protected alive: boolean = true; + constructor(protected layoutDirection: NbLayoutDirectionService, protected positionHelper: NbPositionHelper) { } ngOnInit() { this.layoutDirection.onDirectionChange() + .pipe(takeWhile(() => this.alive)) .subscribe(() => this.onDirectionChange()); } + ngOnDestroy() { + this.alive = false; + } + protected onDirectionChange() { const direction = this.positionHelper.isRightPosition(this.position) ? '' : '-'; this.fadeIn = { value: '', params: { direction } }; diff --git a/src/framework/theme/components/toastr/toastr.service.ts b/src/framework/theme/components/toastr/toastr.service.ts index 94160577aa..3891201a6d 100644 --- a/src/framework/theme/components/toastr/toastr.service.ts +++ b/src/framework/theme/components/toastr/toastr.service.ts @@ -18,6 +18,7 @@ import { import { NbToastrContainerComponent } from './toastr-container.component'; import { NB_TOASTR_CONFIG, NbToastrConfig } from './toastr-config'; import { NbToast, NbToastStatus } from './model'; +import { NbToastComponent } from './toast.component'; export class NbToastContainer { @@ -34,10 +35,10 @@ export class NbToastContainer { return; } - if (this.positionHelper.isTopPosition(toast.config.position)) { - this.attachToTop(toast); - } else { - this.attachToBottom(toast); + const toastComponent: NbToastComponent = this.attachToast(toast); + + if (toast.config.destroyByClick) { + this.subscribeOnClick(toastComponent, toast); } if (toast.config.duration) { @@ -53,28 +54,34 @@ export class NbToastContainer { && this.prevToast.title === toast.title; } - protected attachToTop(toast: NbToast) { + protected attachToast(toast: NbToast): NbToastComponent { + if (this.positionHelper.isTopPosition(toast.config.position)) { + return this.attachToTop(toast); + } else { + return this.attachToBottom(toast); + } + } + + protected attachToTop(toast: NbToast): NbToastComponent { this.toasts.unshift(toast); this.updateContainer(); - - if (toast.config.destroyByClick) { - this.containerRef.instance.toasts.first.destroy.subscribe(() => this.destroy(toast)); - } + return this.containerRef.instance.toasts.first; } - protected attachToBottom(toast: NbToast) { + protected attachToBottom(toast: NbToast): NbToastComponent { this.toasts.push(toast); this.updateContainer(); - - if (toast.config.destroyByClick) { - this.containerRef.instance.toasts.last.destroy.subscribe(() => this.destroy(toast)); - } + return this.containerRef.instance.toasts.last; } protected setDestroyTimeout(toast: NbToast) { setTimeout(() => this.destroy(toast), toast.config.duration); } + protected subscribeOnClick(toastComponent: NbToastComponent, toast: NbToast) { + toastComponent.destroy.subscribe(() => this.destroy(toast)); + } + protected destroy(toast: NbToast) { this.toasts = this.toasts.filter(t => t !== toast); this.updateContainer(); @@ -174,6 +181,9 @@ export class NbToastrService { protected containerRegistry: NbToastrContainerRegistry) { } + /** + * Shows toast with message, title and user config. + * */ show(message, title?, userConfig?: Partial) { const config = new NbToastrConfig({ ...this.globalConfig, ...userConfig }); const container = this.containerRegistry.get(config.position); @@ -181,26 +191,44 @@ export class NbToastrService { container.attach(toast); } + /** + * Shows success toast with message, title and user config. + * */ success(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.SUCCESS }); } + /** + * Shows info toast with message, title and user config. + * */ info(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.INFO }); } + /** + * Shows warning toast with message, title and user config. + * */ warning(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.WARNING }); } + /** + * Shows primary toast with message, title and user config. + * */ primary(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.PRIMARY }); } + /** + * Shows danger toast with message, title and user config. + * */ danger(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.DANGER }); } + /** + * Shows default toast with message, title and user config. + * */ default(message, title?, config?: Partial) { return this.show(message, title, { ...config, status: NbToastStatus.DEFAULT }); } diff --git a/src/playground/toastr/toastr-showcase.component.ts b/src/playground/toastr/toastr-showcase.component.ts index 8ca26be20c..b2bf7dbfa4 100644 --- a/src/playground/toastr/toastr-showcase.component.ts +++ b/src/playground/toastr/toastr-showcase.component.ts @@ -5,15 +5,7 @@ import { NbToastrService } from '@nebular/theme'; selector: 'nb-toastr-showcase', template: ` - - - - - - - - - + `, styles: [ `