refactor(select): rename alertOptions to selectOptions, add ability t…

…o pass them for action-sheet 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
ionic-team · Aug 24, 2016 · b8285b7 · b8285b7
1 parent 8c1662d
commit b8285b7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git 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
- * <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,21 +242,21 @@ 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: () => {
         this.ionCancel.emit(null);
       }
     }];
 
-    // 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
@@ -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
@@ -44,7 +44,7 @@
 
   <ion-item>
     <ion-label>Notifications</ion-label>
-    <ion-select [(ngModel)]="notifications" interface="action-sheet" cancelText="Cancel!">
+    <ion-select [(ngModel)]="notifications" [selectOptions]="notificationSelectOpts" interface="action-sheet" cancelText="Cancel!">
       <ion-option value="enable">Enable</ion-option>
       <ion-option value="mute">Mute</ion-option>
       <ion-option value="mute_week">Mute for a week</ion-option>
@@ -54,7 +54,7 @@
 
   <ion-item>
     <ion-label>Music</ion-label>
-    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts" placeholder="Select Music">
+    <ion-select [(ngModel)]="music" [selectOptions]="musicSelectOpts" placeholder="Select Music">
       <ion-option>Alice in Chains</ion-option>
       <ion-option>Green Day</ion-option>
       <ion-option>Nirvana</ion-option>