diff --git a/README.md b/README.md index 5952c2a..68ff062 100644 --- 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 index 017ae6e..016e55f 100644 --- 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/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html b/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html index 68c7068..dd7804f 100644 --- a/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html +++ b/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html @@ -1,6 +1,7 @@
\ No newline at end of file diff --git a/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.ts b/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.ts index 00850b7..d0380a2 100644 --- a/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.ts +++ b/projects/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 index ca6f7a1..2c86697 100644 --- 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 @@
-
+
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 index 15f7f7b..a771ec1 100644 --- 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; @ViewChild("progressBarCover") progressBarCover: ElementRef; - @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,6 +122,25 @@ 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(); @@ -125,14 +148,14 @@ export class ToastifyToastComponent implements OnInit, OnDestroy { // 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(); }