fix(toastr): merge fixes

akveo · Sep 11, 2018 · 058847d · 058847d
1 parent 216324b
commit 058847d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git 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
@@ -1,4 +1,4 @@
-<ng-container [ngSwitch]="toast.config.status">
+<ng-container *ngIf="hasIcon && !icon" [ngSwitch]="toast.config.status">
 
   <ng-container *ngSwitchCase="'danger'">
     <svg>

diff --git 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
@@ -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,33 +181,54 @@ export class NbToastrService {
               protected containerRegistry: NbToastrContainerRegistry) {
   }
 
+  /**
+   * Shows toast with message, title and user config.
+   * */
   show(message, title?, userConfig?: Partial<NbToastrConfig>) {
     const config = new NbToastrConfig({ ...this.globalConfig, ...userConfig });
     const container = this.containerRegistry.get(config.position);
     const toast = { message, title, config };
     container.attach(toast);
   }
 
+  /**
+   * Shows success toast with message, title and user config.
+   * */
   success(message, title?, config?: Partial<NbToastrConfig>) {
     return this.show(message, title, { ...config, status: NbToastStatus.SUCCESS });
   }
 
+  /**
+   * Shows info toast with message, title and user config.
+   * */
   info(message, title?, config?: Partial<NbToastrConfig>) {
     return this.show(message, title, { ...config, status: NbToastStatus.INFO });
   }
 
+  /**
+   * Shows warning toast with message, title and user config.
+   * */
   warning(message, title?, config?: Partial<NbToastrConfig>) {
     return this.show(message, title, { ...config, status: NbToastStatus.WARNING });
   }
 
+  /**
+   * Shows primary toast with message, title and user config.
+   * */
   primary(message, title?, config?: Partial<NbToastrConfig>) {
     return this.show(message, title, { ...config, status: NbToastStatus.PRIMARY });
   }
 
+  /**
+   * Shows danger toast with message, title and user config.
+   * */
   danger(message, title?, config?: Partial<NbToastrConfig>) {
     return this.show(message, title, { ...config, status: NbToastStatus.DANGER });
   }
 
+  /**
+   * Shows default toast with message, title and user config.
+   * */
   default(message, title?, config?: Partial<NbToastrConfig>) {
     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
@@ -5,15 +5,7 @@ import { NbToastrService } from '@nebular/theme';
   selector: 'nb-toastr-showcase',
   template: `
     <button class="btn btn-primary" (click)="showToast('top-right', 'success')">Top Right</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-right', 'success')">Bottom Right</button>
-    <button class="btn btn-primary" (click)="showToast('top-left', 'success')">Top Left</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-left', 'success')">Botttm Left</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'success')">Success</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'info')">Info</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'warning')">Warning</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'primary')">Primary</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'danger')">Danger</button>
-    <button class="btn btn-primary" (click)="showToast('top-right', 'default')">default</button>
+    <button class="btn btn-primary" (click)="showToast('bottom-left', 'info')">Bottom left</button>
   `,
   styles: [
       `