javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toast): remove default duration, allow close button click when bd disabled

Browse Source 
Set default text for the close button if nothing is passed. Updated
tests and API docs.

references #5582
This commit is contained in:
Brandy Carney
2016-04-21 13:46:29 -04:00
parent 96ef75a10a
commit d6589e1586
4 changed files with 72 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/toast/test/basic/e2e.ts
View File

@ -1,6 +1,6 @@
it('should open action sheet', function() {
element(by.css('.e2eOpenActionSheet')).click();
it('should open toast', function() {
element(by.css('.e2eOpenToast')).click();
});
it('should close with backdrop click', function() {

12
ionic/components/toast/test/basic/index.ts
View File

@ -5,17 +5,19 @@ import {App, Page, Toast, NavController} from 'ionic-angular';
})
class E2EPage {
private dismissMessage: string;
constructor(private nav: NavController) { }
showToast() {
const toast = Toast.create({
message: 'User was created successfully',
showCloseButton: true,
enableBackdropDismiss: false
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
@ -58,7 +60,7 @@ class E2EPage {
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root = E2EPage;
constructor() {
this.root = E2EPage;
}
}

14
ionic/components/toast/test/basic/main.html
View File

@ -7,7 +7,17 @@
<button block (click)="showLongToast()">Show Long Toast</button>
<br />
<button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
<button block (click)="showToastWithCloseButton()">With closeButtonText</button>
<button block (click)="showToastWithCloseButton()" class="e2eOpenToast">With closeButtonText</button>
{{ dismissMessage }}
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</ion-content>

79
ionic/components/toast/toast.ts
View File

@ -16,8 +16,29 @@ import {ViewController} from '../nav/view-controller';
/**
* @name Toast
* @description
* An Toast is a small message that appears in the lower part of the screen.
* It's useful for displaying success messages, error messages, etc.
* A Toast is a subtle notification that appears at the bottom of the
* screen. It can be used to provide feedback about an operation or to
* display a system message. The toast appears on top of the app's content,
* and can be dismissed by the app to resume user interaction with
* the app. It includes a backdrop, which can optionally be clicked to
* dismiss the toast.
*
* ### Creating
* All of the toast options should be passed in the first argument of
* the create method: `Toast.create(opts)`. The message to display should be
* passed in the `message` property. The `showCloseButton` option can be set to
* true in order to display a close button on the toast. See the [create](#create)
* method below for all available options.
*
* ### Dismissing
* The toast can be dismissed automatically after a specific amount of time
* by passing the number of milliseconds to display it in the `duration` of
* the toast options. It can also be dismissed by clicking on the backdrop,
* unless `enableBackdropDismiss` is set to `false` upon creation. If `showCloseButton`
* is set to true, then the close button will dismiss the toast. To dismiss
* the toast after creation, call the `dismiss()` method on the Toast instance.
* The `onDismiss` function can be called to perform an action after the toast
* is dismissed.
*
* @usage
* ```ts
@ -30,6 +51,11 @@ import {ViewController} from '../nav/view-controller';
* message: 'User was added successfully',
* duration: 3000
* });
*
* toast.onDismiss(() => {
* console.log('Dismissed toast');
* });
*
* this.nav.present(toast);
* }
* ```
@ -40,6 +66,7 @@ export class Toast extends ViewController {
constructor(opts: ToastOptions = {}) {
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
console.log(opts.enableBackdropDismiss);
super(ToastCmp, opts);
@ -73,16 +100,16 @@ export class Toast extends ViewController {
*
* Toast options
*
* | Property | Type | Description |
* |-----------------------|-----------|--------------------------------------------------------------------------- |
* | message | `string` | The message for the toast. Long strings will wrap and the toast container will expand. **(required)** |
* | duration | `number` | The amount of time in milliseconds the toast should appear *(optional)* |
* | cssClass | `string` | Any additional class for the toast *(optional)* |
* | showCloseButton | `boolean` | Whether or not to show an optional button to close the toast. *(optional)* |
* | closeButtonText | `string` | Text to display in the close button. *(optional)* |
* | enableBackdropDismiss | `boolean` | Whether the the toast should be dismissed by tapping the backdrop *(optional)* |
* | Property | Type | Default | Description |
* |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
* | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
* | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
* | cssClass | `string` | - | Any additional class for custom styles. |
* | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
* | closeButtonText | `string` | "Close" | Text to display in the close button. |
* | enableBackdropDismiss | `boolean` | true | Whether the toast should be dismissed by tapping the backdrop. |
*
* @param {object} ToastOptions Toast. See the above table for available options.
* @param {object} opts Toast options. See the above table for available options.
*/
static create(opts: ToastOptions = {}) {
return new Toast(opts);
@ -101,8 +128,8 @@ export class Toast extends ViewController {
<div class="toast-wrapper">
<div class="toast-container">
<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
<button clear class="toast-button" *ngIf="d.showCloseButton" (click)="bdClick()">
{{ d.closeButtonText }}
<button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
{{ d.closeButtonText || 'Close' }}
<ion-button-effect></ion-button-effect>
</button>
</div>
@ -158,21 +185,11 @@ class ToastCmp {
}
// if there's a `duration` set, automatically dismiss.
this.dismissTimeout = setTimeout(() =>
this.dismiss('backdrop'),
this.d.duration ? this.d.duration : 3000);
}
click(button, dismissDelay?) {
if (!this.isEnabled()) {
return;
}
let shouldDismiss = true;
if (shouldDismiss) {
setTimeout(() => {
this.dismiss(button.role);
}, dismissDelay || this._config.get('pageTransitionDelay'));
if (this.d.duration) {
this.dismissTimeout =
setTimeout(() => {
this.dismiss('backdrop')
}, this.d.duration);
}
}
@ -182,6 +199,12 @@ class ToastCmp {
}
}
cbClick() {
if (this.isEnabled()) {
this.dismiss('close');
}
}
dismiss(role): Promise<any> {
clearTimeout(this.dismissTimeout);
this.dismissTimeout = undefined;