docs(alert): do not allow mixing alert input types

This commit is contained in:
Adam Bradley
2016-03-06 22:30:08 -06:00
parent 564d4fc5e0
commit 74a48f3b64
2 changed files with 62 additions and 22 deletions

View File

@ -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) {

View File

@ -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 => {