Merge pull request #847 from HealthCatalyst/dev

dev -> master
HealthCatalyst · Apr 30, 2019 · bb0d0e5 · bb0d0e5
2 parents 2aea131 + 60a4be1
commit bb0d0e5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-custom.component.ts b/projects/cashmere-examples/src/lib/toaster-overview/toaster-overview-custom.component.ts
@@ -10,7 +10,7 @@ import {Component} from '@angular/core';
                 color: white;
                 padding: 20px 10px;
                 display: flex;
-                width: 400px;
+                width: 100%;
             }
             .custom-toast-icon {
                 margin-right: 20px;
@@ -25,6 +25,7 @@ import {Component} from '@angular/core';
             }
             .custom-toast-body {
                 font-size: 12px;
+                width: 319px
             }
         `
     ]

diff --git a/projects/cashmere/src/lib/toaster/hc-toast.component.ts b/projects/cashmere/src/lib/toaster/hc-toast.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, ElementRef, ViewContainerRef, ComponentRef} from '@angular/core';
+import {Component, EventEmitter, ElementRef, ViewContainerRef, ComponentRef, ChangeDetectorRef} from '@angular/core';
 import {trigger, state, style, transition, animate, AnimationEvent} from '@angular/animations';
 import {Portal, CdkPortalOutletAttachedRef} from '@angular/cdk/portal';
 import {BehaviorSubject} from 'rxjs';
@@ -30,7 +30,7 @@ export class HcToastComponent {
     _toastPortal: Portal<any>;
     readonly _componentInstance = new BehaviorSubject<any>(null);
 
-    constructor(public _el: ElementRef, public _viewContainerRef: ViewContainerRef) {}
+    constructor(public _el: ElementRef, public _viewContainerRef: ViewContainerRef, public _changeRef: ChangeDetectorRef) {}
 
     _onAnimationStart(event: AnimationEvent) {
         this._animationStateChanged.emit(event);

diff --git a/projects/cashmere/src/lib/toaster/hc-toaster.service.ts b/projects/cashmere/src/lib/toaster/hc-toaster.service.ts
@@ -62,20 +62,7 @@ export class HcToasterService {
         if (options.clickDismiss) {
             _toastRef.componentInstance._canDismiss = options.clickDismiss;
             _toastRef.componentInstance._closeClick.subscribe(() => {
-                this._removeToastPointer(_toastRef);
                 _toastRef.close();
-                if (options.toastClosed) {
-                    options.toastClosed();
-                }
-                _toastRef.componentInstance._animationStateChanged
-                    .pipe(
-                        filter(event => event.phaseName === 'done' && event.toState === 'leave'),
-                        take(1)
-                    )
-                    .subscribe(() => {
-                        this._updateToastPositions();
-                    });
-                _toastRef.componentInstance._closeClick.unsubscribe();
             });
         }
 
@@ -111,31 +98,36 @@ export class HcToasterService {
         if (options.timeout !== 0) {
             setTimeout(() => {
                 if (_toastRef.componentInstance) {
-                    this._removeToastPointer(_toastRef);
                     _toastRef.close();
-                    if (options.toastClosed) {
-                        options.toastClosed();
-                    }
-                    _toastRef.componentInstance._animationStateChanged
-                        .pipe(
-                            filter(event => event.phaseName === 'done' && event.toState === 'leave'),
-                            take(1)
-                        )
-                        .subscribe(() => {
-                            this._updateToastPositions();
-                        });
                 }
             }, options.timeout);
         }
 
+        // Cleanup functions called when the toast close animation is triggered
+        _toastRef.componentInstance._animationStateChanged
+            .pipe(
+                filter(event => event.phaseName === 'done' && event.toState === 'leave'),
+                take(1)
+            )
+            .subscribe(() => {
+                this._removeToastPointer(_toastRef);
+                if (options.toastClosed) {
+                    options.toastClosed();
+                }
+                this._updateToastPositions();
+                _toastRef.componentInstance._animationStateChanged.unsubscribe();
+                _toastRef.componentInstance._closeClick.unsubscribe();
+            });
+
+        _toastRef.componentInstance._changeRef.detectChanges();
         this._toasts.push(_toastRef);
         return _toastRef;
     }
 
     /** Closes the most recent toast displayed */
     closeLastToast() {
         if (this._toasts.length > 0) {
-            const element = this._toasts.pop();
+            const element = this._toasts[this._toasts.length - 1];
             if (element) {
                 element.close();
             }
@@ -146,7 +138,7 @@ export class HcToasterService {
     closeAllToasts() {
         let len = this._toasts.length;
         for (let index = 0; index < len; index++) {
-            const element = this._toasts.pop();
+            const element = this._toasts[index];
             if (element) {
                 element.close();
             }