From 475b15f9140fb89d9d780736053410540668f598 Mon Sep 17 00:00:00 2001 From: Exequiel Ceasar Navarrete Date: Wed, 2 Oct 2019 12:39:22 +0800 Subject: [PATCH] feat: Configurable `disableTimeOut` (#717) * Allow specification of which timeout propert can be disabled instead of only both * Adjust timeout disable conditions * Fix attributes and typos * Implement new options in project homepage * Update README * Update README.md --- README.md | 36 ++++++++-------- src/app/home/home.component.html | 42 +++++++++++++++---- src/lib/toastr/toast-noanimation.component.ts | 4 +- src/lib/toastr/toast.component.ts | 4 +- src/lib/toastr/toastr-config.ts | 2 +- 5 files changed, 57 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 0e2b9606..19ad231e 100644 --- a/README.md +++ b/README.md @@ -131,24 +131,24 @@ There are **individual options** and **global options**. Passed to `ToastrService.success/error/warning/info/show()` -| Option | Type | Default | Description | -| ----------------- | ------------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| toastComponent | Component | Toast | Angular component that will be used | -| closeButton | boolean | false | Show close button | -| timeOut | number | 5000 | Time to live in milliseconds | -| extendedTimeOut | number | 1000 | Time to close after a user hovers over toast | -| disableTimeOut | boolean | false | Disable both timeOut and extendedTimeOut | -| easing | string | 'ease-in' | Toast component easing | -| easeTime | string \| number | 300 | Time spent easing | -| enableHtml | boolean | false | Allow html in message | -| progressBar | boolean | false | Show progress bar | -| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. | -| toastClass | string | 'ngx-toastr' | Class on toast | -| positionClass | string | 'toast-top-right' | Class on toast container | -| titleClass | string | 'toast-title' | Class inside toast on title | -| messageClass | string | 'toast-message' | Class inside toast on message | -| tapToDismiss | boolean | true | Close on click | -| onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection | +| Option | Type | Default | Description | +| ----------------- | ------------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| toastComponent | Component | Toast | Angular component that will be used | +| closeButton | boolean | false | Show close button | +| timeOut | number | 5000 | Time to live in milliseconds | +| extendedTimeOut | number | 1000 | Time to close after a user hovers over toast | +| disableTimeOut | boolean \| | 'timeOut' \| 'extendedTimeOut' | false | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` | +| easing | string | 'ease-in' | Toast component easing | +| easeTime | string \| number | 300 | Time spent easing | +| enableHtml | boolean | false | Allow html in message | +| progressBar | boolean | false | Show progress bar | +| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. | +| toastClass | string | 'ngx-toastr' | Class on toast | +| positionClass | string | 'toast-top-right' | Class on toast container | +| titleClass | string | 'toast-title' | Class inside toast on title | +| messageClass | string | 'toast-message' | Class inside toast on message | +| tapToDismiss | boolean | true | Close on click | +| onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection | #### Setting Individual Options diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 49347c5c..e9e6f1a8 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -93,7 +93,8 @@ - 0 never expires @@ -101,15 +102,40 @@ - 0 never expires -
- -
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/src/lib/toastr/toast-noanimation.component.ts b/src/lib/toastr/toast-noanimation.component.ts index 8f4a5d1f..91107d9f 100644 --- a/src/lib/toastr/toast-noanimation.component.ts +++ b/src/lib/toastr/toast-noanimation.component.ts @@ -109,7 +109,7 @@ export class ToastNoAnimation implements OnDestroy { */ activateToast() { this.state = 'active'; - if (!this.options.disableTimeOut && this.options.timeOut) { + if ((this.options.disableTimeOut === false || this.options.disableTimeOut !== 'timeOut') && this.options.timeOut) { this.timeout = setTimeout(() => { this.remove(); }, this.options.timeOut); @@ -196,7 +196,7 @@ export class ToastNoAnimation implements OnDestroy { @HostListener('mouseleave') delayedHideToast() { if ( - this.options.disableTimeOut || + (this.options.disableTimeOut === true || this.options.disableTimeOut === 'extendedTimeOut') || this.options.extendedTimeOut === 0 || this.state === 'removed' ) { diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts index fdedfb6e..2bafdff4 100644 --- a/src/lib/toastr/toast.component.ts +++ b/src/lib/toastr/toast.component.ts @@ -128,7 +128,7 @@ export class Toast implements OnDestroy { */ activateToast() { this.state = { ...this.state, value: 'active' }; - if (!this.options.disableTimeOut && this.options.timeOut) { + if ((this.options.disableTimeOut === false || this.options.disableTimeOut !== 'timeOut') && this.options.timeOut) { this.outsideTimeout(() => this.remove(), this.options.timeOut); this.hideTime = new Date().getTime() + this.options.timeOut; if (this.options.progressBar) { @@ -211,7 +211,7 @@ export class Toast implements OnDestroy { @HostListener('mouseleave') delayedHideToast() { if ( - this.options.disableTimeOut || + (this.options.disableTimeOut === true || this.options.disableTimeOut === 'extendedTimeOut') || this.options.extendedTimeOut === 0 || this.state.value === 'removed' ) { diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts index e36476de..63ea966c 100644 --- a/src/lib/toastr/toastr-config.ts +++ b/src/lib/toastr/toastr-config.ts @@ -16,7 +16,7 @@ export interface IndividualConfig { * disable both timeOut and extendedTimeOut * default: false */ - disableTimeOut: boolean; + disableTimeOut: boolean | 'timeOut' | 'extendedTimeOut'; /** * toast time to live in milliseconds * default: 5000