Auto close specific to toast type (#53)

* implement * autoCLOSESuccess
scenius-software · Jun 13, 2024 · 7a434d5 · 7a434d5
1 parent ba59023
commit 7a434d5
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,10 @@ Toast container options (optional)
 [position]="'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"  (default: 'top-right')
 [transition]="'bounce' | 'slide' | 'zoom' | 'flip'" (default: 'bounce)
 [autoClose]="time in ms (0 = disabled)" (default: 5000)
+[autoCloseSuccess]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseInfo]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseWarn]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseError]="time in ms (0 = disabled)" (default: undefined)
 [hideProgressBar]="true | false"  (default: false)
 [newestOnTop]="true | false"  (default: false)
 [closeOnClick]="true | false" (default: true)

diff --git a/projects/angular-toastify/README.md b/projects/angular-toastify/README.md
@@ -48,6 +48,10 @@ Toast container options (optional)
 [position]="'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"  (default: 'top-right')
 [transition]="'bounce' | 'slide' | 'zoom' | 'flip'" (default: 'bounce)
 [autoClose]="time in ms (0 = disabled)" (default: 5000)
+[autoCloseSuccess]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseInfo]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseWarn]="time in ms (0 = disabled)" (default: undefined)
+[autoCloseError]="time in ms (0 = disabled)" (default: undefined)
 [hideProgressBar]="true | false"  (default: false)
 [newestOnTop]="true | false"  (default: false)
 [closeOnClick]="true | false" (default: true)

diff --git a/...angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html b/...angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html
@@ -1,6 +1,7 @@
 <div class="toast-container toast-container--{{position}}">
     <lib-toastify-toast *ngFor="let toast of toasts" [class]="getClass(toast)" style="animation-fill-mode: both; animation-duration: 0.75s"
-        [autoClose]="autoClose" [toast]="toast" (dismissEvent)="dismiss(toast)" [hideProgressBar]="hideProgressBar" [pauseOnHover]="pauseOnHover"
+        [autoClose]="autoClose" [autoCloseSuccess]="this.autoCloseSuccess" [autoCloseError]="this.autoCloseError" [autoCloseWarn]="this.autoCloseWarn" 
+        [autoCloseInfo]="this.autoCloseInfo" [toast]="toast" (dismissEvent)="dismiss(toast)" [hideProgressBar]="hideProgressBar" [pauseOnHover]="pauseOnHover"
         [pauseOnVisibilityChange]="pauseOnVisibilityChange" [closeOnClick]="closeOnClick" [iconLibrary]="iconLibrary">
     </lib-toastify-toast>
 </div>
diff --git a/...s/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.ts b/...s/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.ts
@@ -16,6 +16,10 @@ export class ToastifyToastContainerComponent implements OnInit, OnChanges {
   @Input() position: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' = 'top-right';
   @Input() transition: 'bounce' | 'slide' | 'zoom' | 'flip' = 'bounce';
   @Input() autoClose = 5000;
+  @Input() autoCloseError = undefined;
+  @Input() autoCloseSuccess = undefined;
+  @Input() autoCloseInfo = undefined;
+  @Input() autoCloseWarn = undefined;
   @Input() hideProgressBar = false;
   @Input() pauseOnHover = true;
   @Input() pauseOnVisibilityChange = true;

diff --git a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html b/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html
@@ -22,4 +22,4 @@
 <button (click)="handleDismissButtonAction()" class="close-button close-button--{{ToastType[toast.type]}}" type="button" aria-label="close">✖</button>
 
 <div #progressBar *ngIf="!hideProgressBar" class="progress-bar progress-bar&#45;&#45;{{ToastType[toast.type]}}" style="opacity: 1;"></div>
-<div #progressBarCover *ngIf="!hideProgressBar" class="progress-bar-cover toast--{{ToastType[toast.type]}}" [style.animation-duration]="this.autoClose + 'ms'"  [style.animation-play-state]="running? 'running' : 'paused'"></div>
+<div #progressBarCover *ngIf="!hideProgressBar" class="progress-bar-cover toast--{{ToastType[toast.type]}}" [style.animation-duration]="this.autoCloseAfterSpecificChange() + 'ms'"  [style.animation-play-state]="running? 'running' : 'paused'"></div>
diff --git a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.ts b/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.ts
@@ -28,7 +28,11 @@ export class ToastifyToastComponent implements OnInit, OnDestroy {
   @ViewChild("progressBar") progressBar: ElementRef<HTMLElement>;
   @ViewChild("progressBarCover") progressBarCover: ElementRef<HTMLElement>;
 
-  @Input() autoClose = 5000;
+  @Input() autoClose = 5000;  
+  @Input() autoCloseError = undefined;
+  @Input() autoCloseSuccess = undefined;
+  @Input() autoCloseInfo = undefined;
+  @Input() autoCloseWarn = undefined;
   @Input() hideProgressBar = false;
   @Input() pauseOnHover = true;
   @Input() pauseOnVisibilityChange = true;
@@ -54,7 +58,7 @@ export class ToastifyToastComponent implements OnInit, OnDestroy {
   constructor(private _cd: ChangeDetectorRef, private _zone: NgZone) {}
 
   ngOnInit(): void {
-    this.autoCloseRemaining = this.autoClose;
+    this.autoCloseRemaining = this.autoCloseAfterSpecificChange();
     this.startTime = this.toast.time;
     this.toast.$resetToast.subscribe(() => this.resetToastTimer());
     // Do not start timer when toast is prompted while window is out of focus
@@ -76,7 +80,7 @@ export class ToastifyToastComponent implements OnInit, OnDestroy {
     const frame = () => {
       if (this.running) {
         const remainingTime = Math.max(0, this.expectedAutoDismissTime - new Date().getTime());
-        const percentage = 100 - ((remainingTime / this.autoClose) * 100);
+        const percentage = 100 - ((remainingTime / this.autoCloseAfterSpecificChange()) * 100);
         this.progressBarCover.nativeElement.style.width = percentage + "%";
         if (percentage <= 0) return;
       }
@@ -101,7 +105,7 @@ export class ToastifyToastComponent implements OnInit, OnDestroy {
   }
 
   startCloseTimer(): void {
-    if (this.running || !this.autoClose) {
+    if (this.running || !this.autoCloseAfterSpecificChange()) {
       return;
     }
 
@@ -118,21 +122,40 @@ export class ToastifyToastComponent implements OnInit, OnDestroy {
     );
   }
 
+  autoCloseAfterSpecificChange(): number {
+    const specificAmount = (() => {
+      switch (this.toast.type) {
+        case ToastType.success:
+          return this.autoCloseSuccess;
+        case ToastType.error:
+          return this.autoCloseError;
+        case ToastType.warning:
+          return this.autoCloseWarn;
+        case ToastType.info:
+          return this.autoCloseInfo;
+        default:
+          return undefined;
+      }
+    })();
+
+    return specificAmount === undefined ? this.autoClose : specificAmount;
+  }
+
   pauseCloseTimer(): void {
     this.running = false;
     this.clearTimerTimeout();
 
     // Calculate the elapsed time, subtract remaining time
     this.pauseTime = new Date().getTime();
     const elapsed = this.pauseTime - this.startTime;
-    this.autoCloseRemaining = this.autoClose - elapsed;
+    this.autoCloseRemaining = this.autoCloseAfterSpecificChange() - elapsed;
   }
 
   resetToastTimer() {
     this.clearTimerTimeout();
     this.running = false;
     this.startTime = new Date().getTime();
-    this.autoCloseRemaining = this.autoClose;
+    this.autoCloseRemaining = this.autoCloseAfterSpecificChange();
     this.startCloseTimer();
   }