Skip to content

Commit d6589e1

Browse files
brandyscarneybrandyscarney
committed
fix(toast): remove default duration, allow close button click when bd disabled
Set default text for the close button if nothing is passed. Updated tests and API docs. references #5582
1 parent 96ef75a commit d6589e1

File tree

4 files changed

+72
-37
lines changed

4 files changed

+72
-37
lines changed

‎ionic/components/toast/test/basic/e2e.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

2-
it('should open action sheet', function() {
3-
element(by.css('.e2eOpenActionSheet')).click();
2+
it('should open toast', function() {
3+
element(by.css('.e2eOpenToast')).click();
44
});
55

66
it('should close with backdrop click', function() {

‎ionic/components/toast/test/basic/index.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import {App, Page, Toast, NavController} from 'ionic-angular';
55
})
66
class E2EPage {
77

8-
private dismissMessage: string;
9-
10-
118
constructor(private nav: NavController) { }
129

1310
showToast() {
1411
const toast = Toast.create({
1512
message: 'User was created successfully',
13+
showCloseButton: true,
14+
enableBackdropDismiss: false
15+
});
16+
17+
toast.onDismiss(() => {
18+
console.log('Dismissed toast');
1619
});
1720

18-
toast.onDismiss(this.dismissHandler);
1921
this.nav.present(toast);
2022
}
2123

@@ -58,7 +60,7 @@ class E2EPage {
5860
template: '<ion-nav [root]="root"></ion-nav>'
5961
})
6062
class E2EApp {
63+
root = E2EPage;
6164
constructor() {
62-
this.root = E2EPage;
6365
}
6466
}

‎ionic/components/toast/test/basic/main.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,17 @@
77
<button block (click)="showLongToast()">Show Long Toast</button>
88
<br />
99
<button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
10-
<button block (click)="showToastWithCloseButton()">With closeButtonText</button>
10+
<button block (click)="showToastWithCloseButton()" class="e2eOpenToast">With closeButtonText</button>
1111

12-
{{ dismissMessage }}
12+
<p>
13+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt.
14+
</p>
15+
16+
<p>
17+
In felis augue, sagittis id dui ac, tempor luctus turpis. Vestibulum nec urna vitae nisl malesuada lacinia ut sit amet orci. Suspendisse sed mauris vitae mauris porttitor pulvinar. Donec quis ante id dui cursus malesuada ut nec magna. Vestibulum venenatis efficitur urna, quis tempus quam. Curabitur id elementum eros, at euismod nisl. Aliquam ultricies imperdiet arcu id consequat. Aliquam erat volutpat. Nam quis laoreet dui. Donec eget neque non leo porta scelerisque. In blandit placerat nibh, ut viverra nisi feugiat a. Pellentesque semper, ligula et tincidunt egestas, urna arcu pellentesque massa, vitae accumsan ligula velit vitae sem. Nulla porta est id ligula viverra, ut placerat quam auctor. Morbi eget efficitur nibh.
18+
</p>
19+
20+
<p>
21+
Aenean viverra commodo enim eget interdum. Donec condimentum tincidunt sollicitudin. Curabitur malesuada est elementum lectus sodales, vitae eleifend massa dignissim. Pellentesque nec diam dapibus purus vulputate pharetra at id nunc. Vivamus dapibus sed turpis in facilisis. Nulla sollicitudin lacus sem, vel fringilla neque accumsan non. Suspendisse non congue turpis, id mattis ex. Nam sit amet diam quis neque convallis aliquet quis et lorem. Donec sit amet libero sit amet nisl mollis vehicula nec id eros. Curabitur rutrum condimentum porta. Donec pellentesque consectetur lacus. Etiam maximus ante vitae varius eleifend. Integer ac justo sem. Morbi iaculis vel urna in tempus. Aenean at rhoncus nulla.
22+
</p>
1323
</ion-content>

‎ionic/components/toast/toast.ts

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,29 @@ import {ViewController} from '../nav/view-controller';
1616
/**
1717
* @name Toast
1818
* @description
19-
* An Toast is a small message that appears in the lower part of the screen.
20-
* It's useful for displaying success messages, error messages, etc.
19+
* A Toast is a subtle notification that appears at the bottom of the
20+
* screen. It can be used to provide feedback about an operation or to
21+
* display a system message. The toast appears on top of the app's content,
22+
* and can be dismissed by the app to resume user interaction with
23+
* the app. It includes a backdrop, which can optionally be clicked to
24+
* dismiss the toast.
25+
*
26+
* ### Creating
27+
* All of the toast options should be passed in the first argument of
28+
* the create method: `Toast.create(opts)`. The message to display should be
29+
* passed in the `message` property. The `showCloseButton` option can be set to
30+
* true in order to display a close button on the toast. See the [create](#create)
31+
* method below for all available options.
32+
*
33+
* ### Dismissing
34+
* The toast can be dismissed automatically after a specific amount of time
35+
* by passing the number of milliseconds to display it in the `duration` of
36+
* the toast options. It can also be dismissed by clicking on the backdrop,
37+
* unless `enableBackdropDismiss` is set to `false` upon creation. If `showCloseButton`
38+
* is set to true, then the close button will dismiss the toast. To dismiss
39+
* the toast after creation, call the `dismiss()` method on the Toast instance.
40+
* The `onDismiss` function can be called to perform an action after the toast
41+
* is dismissed.
2142
*
2243
* @usage
2344
* ```ts
@@ -30,6 +51,11 @@ import {ViewController} from '../nav/view-controller';
3051
* message: 'User was added successfully',
3152
* duration: 3000
3253
* });
54+
*
55+
* toast.onDismiss(() => {
56+
* console.log('Dismissed toast');
57+
* });
58+
*
3359
* this.nav.present(toast);
3460
* }
3561
* ```
@@ -40,6 +66,7 @@ export class Toast extends ViewController {
4066

4167
constructor(opts: ToastOptions = {}) {
4268
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
69+
console.log(opts.enableBackdropDismiss);
4370
super(ToastCmp, opts);
4471

4572

@@ -73,16 +100,16 @@ export class Toast extends ViewController {
73100
*
74101
* Toast options
75102
*
76-
* | Property | Type | Description |
77-
* |-----------------------|-----------|--------------------------------------------------------------------------- |
78-
* | message | `string` | The message for the toast. Long strings will wrap and the toast container will expand. **(required)** |
79-
* | duration | `number` | The amount of time in milliseconds the toast should appear *(optional)* |
80-
* | cssClass | `string` | Any additional class for the toast *(optional)* |
81-
* | showCloseButton | `boolean` | Whether or not to show an optional button to close the toast. *(optional)* |
82-
* | closeButtonText | `string` | Text to display in the close button. *(optional)* |
83-
* | enableBackdropDismiss | `boolean` | Whether the the toast should be dismissed by tapping the backdrop *(optional)* |
103+
* | Property | Type | Default | Description |
104+
* |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
105+
* | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
106+
* | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
107+
* | cssClass | `string` | - | Any additional class for custom styles. |
108+
* | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
109+
* | closeButtonText | `string` | "Close" | Text to display in the close button. |
110+
* | enableBackdropDismiss | `boolean` | true | Whether the toast should be dismissed by tapping the backdrop. |
84111
*
85-
* @param {object} ToastOptions Toast. See the above table for available options.
112+
* @param {object} opts Toast options. See the above table for available options.
86113
*/
87114
static create(opts: ToastOptions = {}) {
88115
return new Toast(opts);
@@ -101,8 +128,8 @@ export class Toast extends ViewController {
101128
<div class="toast-wrapper">
102129
<div class="toast-container">
103130
<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
104-
<button clear class="toast-button" *ngIf="d.showCloseButton" (click)="bdClick()">
105-
{{ d.closeButtonText }}
131+
<button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
132+
{{ d.closeButtonText || 'Close' }}
106133
<ion-button-effect></ion-button-effect>
107134
</button>
108135
</div>
@@ -158,21 +185,11 @@ class ToastCmp {
158185
}
159186

160187
// if there's a `duration` set, automatically dismiss.
161-
this.dismissTimeout = setTimeout(() =>
162-
this.dismiss('backdrop'),
163-
this.d.duration ? this.d.duration : 3000);
164-
}
165-
166-
click(button, dismissDelay?) {
167-
if (!this.isEnabled()) {
168-
return;
169-
}
170-
let shouldDismiss = true;
171-
172-
if (shouldDismiss) {
173-
setTimeout(() => {
174-
this.dismiss(button.role);
175-
}, dismissDelay || this._config.get('pageTransitionDelay'));
188+
if (this.d.duration) {
189+
this.dismissTimeout =
190+
setTimeout(() => {
191+
this.dismiss('backdrop')
192+
}, this.d.duration);
176193
}
177194
}
178195

@@ -182,6 +199,12 @@ class ToastCmp {
182199
}
183200
}
184201

202+
cbClick() {
203+
if (this.isEnabled()) {
204+
this.dismiss('close');
205+
}
206+
}
207+
185208
dismiss(role): Promise<any> {
186209
clearTimeout(this.dismissTimeout);
187210
this.dismissTimeout = undefined;

0 commit comments

Comments
 (0)