diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index 542f10e324..5562ec8bc7 100644 --- a/ionic/components/alert/alert.ts +++ b/ionic/components/alert/alert.ts @@ -15,29 +15,42 @@ import {ViewController} from '../nav/view-controller'; * An Alert is a dialog that presents users with information or collects * information from the user using inputs. An alert appears on top * of the app's content, and must be manually dismissed by the user before - * they can resume interaction with the app. - * - * An alert is created from an array of `buttons` and optionally an array of - * `inputs`. Each button includes properties for its `text`, and optionally a - * `handler`. If a handler returns `false` then the alert will not be dismissed. - * An alert can also optionally have a `title`, `subTitle` and `message`. - * - * All buttons will show up in the order they have been added to the `buttons` - * array, from left to right. Note: The right most button (the last one in the - * array) is the main button. - * - * Optionally, a `role` property can be added to a button, such as `cancel`. - * If a `cancel` role is on one of the buttons, then if the alert is dismissed - * by tapping the backdrop, then it will fire the handler from the button - * with a cancel role. - * - * Alerts can also include inputs whose data can be passed back to the app. - * Inputs can be used to prompt users for information. + * they can resume interaction with the app. It can also optionally have a + * `title`, `subTitle` and `message`. * * You can pass all of the alert's options in the first argument of * the create method: `Alert.create(opts)`. Otherwise the alert's instance * has methods to add options, such as `setTitle()` or `addButton()`. * + * + * ### Alert Buttons + * + * In the array of `buttons`, each button includes properties for its `text`, + * and optionally a `handler`. If a handler returns `false` then the alert + * will not automatically be dismissed when the button is clicked. All + * buttons will show up in the order they have been added to the `buttons` + * array, from left to right. Note: The right most button (the last one in + * the array) is the main button. + * + * Optionally, a `role` property can be added to a button, such as `cancel`. + * If a `cancel` role is on one of the buttons, then if the alert is + * dismissed by tapping the backdrop, then it will fire the handler from + * the button with a cancel role. + * + * + * ### Alert Inputs + * + * Alerts can also include several different inputs whose data can be passed + * back to the app. Inputs can be used as a simple way to prompt users for + * information. Radios, checkboxes and text inputs are all accepted, but they + * cannot be mixed. For example, an alert could have all radio button inputs, + * or all checkbox inputs, but the same alert cannot mix radio and checkbox + * inputs. Do note however, different types of "text"" inputs can be mixed, + * such as `url`, `email`, `text`, etc. If you require a complex form UI + * which doesn't fit within the guidelines of an alert then we recommend + * building the form within a modal instead. + * + * * @usage * ```ts * constructor(nav: NavController) { @@ -265,7 +278,14 @@ export class Alert extends ViewController { class AlertCmp { activeId: string; descId: string; - d: any; + d: { + cssClass?: string; + message?: string; + subTitle?: string; + buttons?: any[]; + inputs?: any[]; + enableBackdropDismiss?: boolean; + }; hdrId: string; id: number; subHdrId: string; @@ -310,10 +330,10 @@ class AlertCmp { // normalize the data let data = this.d; - if (data.body) { + if (data['body']) { // deprecated warning console.warn('Alert `body` property has been renamed to `message`'); - data.message = data.body; + data.message = data['body']; } data.buttons = data.buttons.map(button => { @@ -335,7 +355,21 @@ class AlertCmp { }; }); - this.inputType = (data.inputs.length ? data.inputs[0].type : null); + + // An alert can be created with several different inputs. Radios, + // checkboxes and inputs are all accepted, but they cannot be mixed. + let inputTypes = []; + data.inputs.forEach(input => { + if (inputTypes.indexOf(input.type) < 0) { + inputTypes.push(input.type); + } + }); + + if (inputTypes.length > 1 && (inputTypes.indexOf('checkbox') > -1 || inputTypes.indexOf('radio') > -1)) { + console.warn('Alert cannot mix input types: ' + (inputTypes.join('/')) + '. Please see alert docs for more info.'); + } + + this.inputType = inputTypes.length ? inputTypes[0] : null; let checkedInput = this.d.inputs.find(input => input.checked); if (checkedInput) { diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts index 048060c420..5bc0979bec 100644 --- a/ionic/components/alert/test/basic/index.ts +++ b/ionic/components/alert/test/basic/index.ts @@ -99,6 +99,12 @@ class E2EPage { value: 'hello', placeholder: 'Placeholder 2' }); + alert.addInput({ + name: 'name3', + value: 'http://ionicframework.com', + type: 'url', + placeholder: 'Favorite site ever' + }); alert.addButton({ text: 'Cancel', handler: data => {