Merge pull request #18 from ngxpert/beta

[Fix] Toast message not being removed automatically
ngxpert · Aug 25, 2024 · a1d1bb2 · a1d1bb2
2 parents 944c11d + 03cea9b
commit a1d1bb2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [3.0.1-beta.1](https://github.com/ngxpert/hot-toast/compare/v3.0.0...v3.0.1-beta.1) (2024-08-25)
+
+
+### Bug Fixes
+
+* fixed toast message not being removed automatically and minor changeDetection changes ([aceb7ae](https://github.com/ngxpert/hot-toast/commit/aceb7aea12fc02a8bf5e878d03f7be88947c5154)), closes [#16](https://github.com/ngxpert/hot-toast/issues/16)
+
 # [3.0.0](https://github.com/ngxpert/hot-toast/compare/v2.0.0...v3.0.0) (2024-06-06)
 
 

diff --git a/...ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts b/...ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts
@@ -66,24 +66,24 @@ export class HotToastContainerComponent {
     const visibleToasts = this.getVisibleToasts(position);
     const index = visibleToasts.findIndex((toast) => toast.id === toastId);
     const offset =
-      index !== -1
-        ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
-            const toastsAfter = visibleToasts.length - 1 - i;
-            return this.defaultConfig.visibleToasts !== 0 && i < visibleToasts.length - this.defaultConfig.visibleToasts
-              ? 0
-              : acc +
-                  (this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
-                    ? t.height || 0
-                    : toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
-                  HOT_TOAST_MARGIN;
-          }, 0)
-        : 0;
+    index !== -1
+    ? visibleToasts.slice(...(this.defaultConfig.reverseOrder ? [index + 1] : [0, index])).reduce((acc, t, i) => {
+      const toastsAfter = visibleToasts.length - 1 - i;
+      return this.defaultConfig.visibleToasts !== 0 && i < visibleToasts.length - this.defaultConfig.visibleToasts
+      ? 0
+      : acc +
+      (this.defaultConfig.stacking === 'vertical' || this.isShowingAllToasts
+        ? t.height || 0
+        : toastsAfter * HOT_TOAST_DEPTH_SCALE + HOT_TOAST_DEPTH_SCALE_ADD) +
+        HOT_TOAST_MARGIN;
+      }, 0)
+      : 0;
     return offset;
   }
 
   updateHeight(height: number, toast: Toast<unknown>) {
     toast.height = height;
-    this.cdr.detectChanges();
+    this.cdr.markForCheck();
   }
 
   addToast<DataType>(ref: HotToastRef<DataType>, skipAttachToParent?: boolean): AddToastRef<DataType> {
@@ -102,7 +102,7 @@ export class HotToastContainerComponent {
       });
     }
 
-    this.cdr.detectChanges();
+    this.cdr.markForCheck();
 
     this.attachGroupRefs<DataType>(toast, ref, skipAttachToParent);
 
@@ -113,11 +113,11 @@ export class HotToastContainerComponent {
       updateMessage: (message: Content) => {
         toast.message = message;
         this.updateToasts(toast);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
       },
       updateToast: (options: UpdateToastOptions<DataType>) => {
         this.updateToasts(toast, options);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
       },
       afterClosed: this.getAfterClosed(toast),
       afterGroupToggled: this.getAfterGroupToggled(toast),
@@ -140,7 +140,7 @@ export class HotToastContainerComponent {
         if (toastIndex > -1) {
           (this.toastRefs[toastIndex] as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = groupRefs;
 
-          this.cdr.detectChanges();
+          this.cdr.markForCheck();
           this._onGroupRefAttached.next({ groupRefs, id: toast.id });
         }
       } else if (toast.group.parent && !skipAttachToParent) {
@@ -161,7 +161,7 @@ export class HotToastContainerComponent {
 
           this.toasts[parentToastRefIndex].group = { ...existingGroup };
 
-          this.cdr.detectChanges();
+          this.cdr.markForCheck();
 
           this._onGroupRefAttached.next({ groupRefs, id: parentToast.id });
         }
@@ -208,7 +208,7 @@ export class HotToastContainerComponent {
       this._onClosed.next(closeToast);
       this.toasts = this.toasts.filter((t) => t.id !== closeToast.id);
       this.toastRefs = this.toastRefs.filter((t) => t.getToast().id !== closeToast.id);
-      this.cdr.detectChanges();
+      this.cdr.markForCheck();
     }
   }
 
@@ -217,7 +217,7 @@ export class HotToastContainerComponent {
     if (toastIndex > -1) {
       this._onGroupToggle.next(groupEvent);
       (this.toastRefs[toastIndex] as { groupExpanded: boolean }).groupExpanded = groupEvent.event === 'expand';
-      this.cdr.detectChanges();
+      this.cdr.markForCheck();
     }
   }
 

diff --git a/...xpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts b/...xpert/hot-toast/src/lib/components/hot-toast-group-item/hot-toast-group-item.component.ts
@@ -1,6 +1,5 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -51,7 +50,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
   @Output() showAllToasts = new EventEmitter<boolean>();
   @Output() toggleGroup = new EventEmitter<HotToastGroupEvent>();
 
-  @ViewChild('hotToastBarBase') protected toastBarBase: ElementRef<HTMLElement>;
+  @ViewChild('hotToastBarBase', { static: true }) protected toastBarBase: ElementRef<HTMLElement>;
 
   isManualClose = false;
   context: Record<string, unknown>;
@@ -64,7 +63,6 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
     protected injector: Injector,
     protected renderer: Renderer2,
     protected ngZone: NgZone,
-    protected cdr: ChangeDetectorRef
   ) {}
 
   get toastBarBaseHeight() {
@@ -213,7 +211,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, exitAnimation);
+    animate(this.renderer, nativeElement, exitAnimation);
     this.softClosed = true;
   }
   softOpen() {
@@ -223,7 +221,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, softEnterAnimation);
+    animate(this.renderer, nativeElement, softEnterAnimation);
     this.softClosed = false;
   }
 
@@ -236,7 +234,7 @@ export class HotToastGroupItemComponent implements OnChanges, OnInit, AfterViewI
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, exitAnimation);
+    animate(this.renderer, nativeElement, exitAnimation);
   }
 
   handleMouseEnter() {

diff --git a/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts b/projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts
@@ -71,7 +71,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   @Output() showAllToasts = new EventEmitter<boolean>();
   @Output() toggleGroup = new EventEmitter<HotToastGroupEvent>();
 
-  @ViewChild('hotToastBarBase') private toastBarBase: ElementRef<HTMLElement>;
+  @ViewChild('hotToastBarBase', { static: true }) private toastBarBase: ElementRef<HTMLElement>;
 
   isManualClose = false;
   context: Record<string, unknown>;
@@ -181,13 +181,13 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
   ngDoCheck() {
     if (this.toastRef.groupRefs.length !== this.groupRefs.length) {
       this.groupRefs = this.toastRef.groupRefs.slice();
-      this.cdr.detectChanges();
+      this.cdr.markForCheck();
 
       this.emiHeightWithGroup(this.isExpanded);
     }
     if (this.toastRef.groupExpanded !== this.isExpanded) {
       this.isExpanded = this.toastRef.groupExpanded;
-      this.cdr.detectChanges();
+      this.cdr.markForCheck();
 
       this.emiHeightWithGroup(this.isExpanded);
     }
@@ -254,9 +254,9 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, exitAnimation);
+    animate(this.renderer, nativeElement, exitAnimation);
     this.softClosed = true;
-    
+
     if (this.isExpanded) {
       this.toggleToastGroup();
     }
@@ -269,7 +269,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, softEnterAnimation);
+    animate(this.renderer, nativeElement, softEnterAnimation);
     this.softClosed = false;
   }
 
@@ -282,7 +282,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
 
     const nativeElement = this.toastBarBase.nativeElement;
 
-    animate(nativeElement, exitAnimation);
+    animate(this.renderer, nativeElement, exitAnimation);
   }
 
   handleMouseEnter() {
@@ -326,12 +326,12 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
 
   updateHeight(height: number, toast: Toast<unknown>) {
     toast.height = height;
-    this.cdr.detectChanges();
+    this.cdr.markForCheck();
   }
 
   beforeClosedGroupItem(toast: Toast<unknown>) {
     toast.visible = false;
-    this.cdr.detectChanges();
+    this.cdr.markForCheck();
     if (this.visibleToasts.length === 0 && this.isExpanded) {
       this.toggleToastGroup();
     } else {
@@ -343,7 +343,7 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     const toastIndex = this.groupChildrenToasts.findIndex((t) => t.id === closeToast.id);
     if (toastIndex > -1) {
       this.groupChildrenToastRefs = this.groupChildrenToastRefs.filter((t) => t.getToast().id !== closeToast.id);
-      this.cdr.detectChanges();
+      this.cdr.markForCheck();
     }
   }
 

diff --git a/projects/ngxpert/hot-toast/src/lib/utils.ts b/projects/ngxpert/hot-toast/src/lib/utils.ts
@@ -1,3 +1,5 @@
-export const animate = (element: HTMLElement, value: string) => {
-  element.style.animation = value;
+import { Renderer2 } from '@angular/core';
+
+export const animate = (renderer: Renderer2, element: HTMLElement, animation: string) => {
+  renderer.setStyle(element, 'animation', animation);
 };