Skip to content

Commit

Permalink
feat: Configurable disableTimeOut (#717)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@exequiel09 @scttcper
exequiel09 authored and scttcper committed Oct 2, 2019
1 parent 5299daf commit 475b15f
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 31 deletions.
36 changes: 18 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
42 changes: 34 additions & 8 deletions src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,23 +93,49 @@
<label for="toastTimeout">
<strong>Timeout</strong>
</label>
<input [(ngModel)]="options.timeOut" (ngModelChange)="fixNumber('timeOut')" [disabled]="options.disableTimeOut" type="text"
<input type="text" [(ngModel)]="options.timeOut" (ngModelChange)="fixNumber('timeOut')"
[disabled]="options.disableTimeOut === true || options.disableTimeOut === 'timeOut'"
class="form-control" id="toastTimeout" aria-describedby="toastTimeoutHelp">
<small id="toastTimeoutHelp" class="form-text text-muted">0 never expires</small>
</div>
<div class="form-group">
<label for="toastExtendedTimeout">
<strong>Extended Timeout</strong>
</label>
<input type="text" [(ngModel)]="options.extendedTimeOut" (ngModelChange)="fixNumber('extendedTimeOut')" [disabled]="options.disableTimeOut"
<input type="text" [(ngModel)]="options.extendedTimeOut" (ngModelChange)="fixNumber('extendedTimeOut')"
[disabled]="options.disableTimeOut === true || options.disableTimeOut === 'extendedTimeOut'"
class="form-control" id="toastExtendedTimeout">
<small id="toastExtendedTimeoutHelp" class="form-text text-muted">0 never expires</small>
<div class="form-check">
<input type="checkbox" class="form-check-input" [(ngModel)]="options.disableTimeOut" id="disableTimeOut">
<label for="disableTimeOut" class="form-check-label">
Disable timouts

<fieldset class="form-group">
<label>
<strong>Disable Timeouts</strong>
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" [(ngModel)]="options.disableTimeOut" [value]="true" id="disableTimeOut1">
<label for="disableTimeOut" class="form-check-label">
<code>disableTimeOut = true</code>
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" [(ngModel)]="options.disableTimeOut" [value]="false" id="disableTimeOut2">
<label for="disableTimeOut2" class="form-check-label">
<code>disableTimeOut = false</code>
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" [(ngModel)]="options.disableTimeOut" value="timeOut" id="disableTimeOut3">
<label for="disableTimeOut3" class="form-check-label">
<code>timeOut</code> only
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" [(ngModel)]="options.disableTimeOut" value="extendedTimeOut" id="disableTimeOut4">
<label for="disableTimeOut4" class="form-check-label">
<code>extendedTimeOut</code> only
</label>
</div>
</fieldset>
</div>
<div class="form-group">
<label for="maxNumberToasts">
Expand All @@ -120,7 +146,7 @@
<small id="maxNumberToastsHelp" class="form-text text-muted">0 is no limit</small>
<div class="form-check">
<input type="checkbox" class="form-check-input" [(ngModel)]="toastr.toastrConfig.autoDismiss" id="autoDismiss">
<label for="disableTimeOut" class="form-check-label" for="autoDismiss">Auto dismiss on max</label>
<label for="autoDismiss" class="form-check-label" for="autoDismiss">Auto dismiss on max</label>
</div>
</div>
<div class="form-group">
Expand Down
4 changes: 2 additions & 2 deletions src/lib/toastr/toast-noanimation.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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'
) {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/toastr/toast.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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'
) {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/toastr/toastr-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 475b15f

Please sign in to comment.