From b8285b7ba8c0e6a5639d0cda8ce0c9cfcaa60144 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Aug 2016 20:15:49 -0400 Subject: [PATCH] refactor(select): rename alertOptions to selectOptions, add ability to pass them for action-sheet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/select/select.ts | 46 +++++++++++-------- .../select/test/single-value/index.ts | 8 +++- .../select/test/single-value/main.html | 4 +- 3 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/components/select/select.ts b/src/components/select/select.ts index ba0274691f..ed57a3b191 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -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 - * + * * ... * * ``` * * ```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(() => { diff --git a/src/components/select/test/single-value/index.ts b/src/components/select/test/single-value/index.ts index 8f6e8c97d5..bb58a8ad70 100644 --- a/src/components/select/test/single-value/index.ts +++ b/src/components/select/test/single-value/index.ts @@ -11,11 +11,15 @@ export interface Currency { templateUrl: 'main.html' }) class E2EPage { - musicAlertOpts: any = { + musicSelectOpts: any = { title: '1994 Music', subTitle: 'Select your favorite', cssClass: 'music-select' }; + notificationSelectOpts: any = { + title: 'Mute notifications', + cssClass: 'notification-select' + }; gender: string; gaming: string = ''; os: string = 'win3.1'; @@ -24,7 +28,7 @@ class E2EPage { month: string = '12'; year: string = '1994'; notification: string = 'enable'; - status: string = "checked"; + status: string = 'checked'; currencies: Currency[] = [ { diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html index efcc2fb656..0d43bbfa3a 100644 --- a/src/components/select/test/single-value/main.html +++ b/src/components/select/test/single-value/main.html @@ -44,7 +44,7 @@ Notifications - + Enable Mute Mute for a week @@ -54,7 +54,7 @@ Music - + Alice in Chains Green Day Nirvana