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

refactor(select): rename alertOptions to selectOptions, add ability to pass them for action-sheet

Browse Source 
BREAKING CHANGES:

Select’s `alertOptions` input has been renamed to `selectOptions`. It
now allows you to pass options for either the alert or action-sheet
interface. Refer to their documentation for the options each of them
accept.

http://ionicframework.com/docs/v2/api/components/action-sheet/ActionShee
tController/#create
http://ionicframework.com/docs/v2/api/components/alert/AlertController/#
create

fixes #7764
This commit is contained in:
Brandy Carney
2016-08-23 20:15:49 -04:00
parent 8c1662d5e9
commit b8285b7ba8
3 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/select/select.ts
View File

@ -96,18 +96,18 @@ export const SELECT_VALUE_ACCESSOR = new Provider(
* ### Alert Options
*
* Since `ion-select` is a wrapper to `Alert`, by default, it can be
* passed options in the `alertOptions` property. This can be used to
* passed options in the `selectOptions` property. This can be used to
* pass a custom alert title, subtitle or message. See the {@link ../../alert/Alert Alert API docs}
* for more properties.
*
* ```html
* <ion-select [alertOptions]="alertOptions">
* <ion-select [selectOptions]="selectOptions">
* ...
* </ion-select>
* ```
*
* ```ts
* this.alertOptions = {
* this.selectOptions = {
* title: 'Pizza Toppings',
* subTitle: 'Select your toppings'
* };
@ -169,10 +169,12 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
@Input() placeholder: string;
/**
* @input {any} Any addition options that the alert interface can take.
* See the [Alert API docs](../../alert/Alert) for the create options.
* @input {any} Any additional options that the `alert` or `action-sheet` interface can take.
* See the [Alert API docs](../../alert/AlertController/#create) and the
* [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) for the
* create options for each interface.
*/
@Input() alertOptions: any = {};
@Input() selectOptions: any = {};
/**
* @input {string} The interface the select should use: `action-sheet` or `alert`. Default: `alert`.
@ -240,11 +242,11 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
console.debug('select, open alert');
// the user may have assigned some options specifically for the alert
let alertOptions = merge({}, this.alertOptions);
let selectOptions = merge({}, this.selectOptions);
// make sure their buttons array is removed from the options
// and we create a new array for the alert's two buttons
alertOptions.buttons = [{
selectOptions.buttons = [{
text: this.cancelText,
role: 'cancel',
handler: () => {
@ -252,9 +254,9 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
}
}];
// if the alertOptions didn't provide an title then use the label's text
if (!alertOptions.title && this._item) {
alertOptions.title = this._item.getLabelText();
// if the selectOptions didn't provide a title then use the label's text
if (!selectOptions.title && this._item) {
selectOptions.title = this._item.getLabelText();
}
let options = this._options.toArray();
@ -270,7 +272,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
let overlay: any;
if (this.interface === 'action-sheet') {
alertOptions.buttons = alertOptions.buttons.concat(options.map(input => {
selectOptions.buttons = selectOptions.buttons.concat(options.map(input => {
return {
role: (input.selected ? 'selected' : ''),
text: input.text,
@ -280,17 +282,21 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
}
};
}));
alertOptions.cssClass = 'select-action-sheet';
var selectCssClass = 'select-action-sheet';
overlay = new ActionSheet(this._app, alertOptions);
// If the user passed a cssClass for the select, add it
selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
selectOptions.cssClass = selectCssClass;
overlay = new ActionSheet(this._app, selectOptions);
} else {
// default to use the alert interface
this.interface = 'alert';
// user cannot provide inputs from alertOptions
// user cannot provide inputs from selectOptions
// alert inputs must be created by ionic from ion-options
alertOptions.inputs = this._options.map(input => {
selectOptions.inputs = this._options.map(input => {
return {
type: (this._multi ? 'checkbox' : 'radio'),
label: input.text,
@ -302,8 +308,8 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
var selectCssClass = 'select-alert';
// create the alert instance from our built up alertOptions
overlay = new Alert(this._app, alertOptions);
// create the alert instance from our built up selectOptions
overlay = new Alert(this._app, selectOptions);
if (this._multi) {
// use checkboxes
@ -314,7 +320,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
}
// If the user passed a cssClass for the select, add it
selectCssClass += alertOptions.cssClass ? ' ' + alertOptions.cssClass : '';
selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
overlay.setCssClass(selectCssClass);
overlay.addButton({
@ -327,7 +333,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
}
overlay.present(alertOptions);
overlay.present(selectOptions);
this._isOpen = true;
overlay.onDidDismiss(() => {