feat(select): fallback to alert interface when more than 6 opts

ionic/components/action-sheet/action-sheet.ios.scss

@@ -89,6 +89,11 @@ ion-action-sheet {
   }
 }
 
+.action-sheet-selected {
+  font-weight: bold;
+  background: white;
+}
+
 .action-sheet-destructive {
   color: $action-sheet-ios-button-destructive-text-color;
 }

ionic/components/action-sheet/action-sheet.md.scss

@@ -71,3 +71,7 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
     margin-bottom: $action-sheet-md-group-margin-bottom;
   }
 }
+
+.action-sheet-selected {
+  font-weight: bold;
+}

ionic/components/action-sheet/action-sheet.ts

@@ -244,6 +244,8 @@ class ActionSheetCmp {
       } else {
         if (button.role === 'destructive') {
           button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-destructive';
+        } else if (button.role === 'selected') {
+          button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-selected';
         }
         buttons.push(button);
       }

ionic/components/action-sheet/action-sheet.wp.scss

@@ -75,6 +75,10 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
   }
 }
 
+.action-sheet-selected {
+  font-weight: bold;
+}
+
 .action-sheet-cancel {
   background: $action-sheet-wp-button-background;
 }

ionic/components/select/select.ts

@@ -2,6 +2,7 @@ import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forw
 import {NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Alert} from '../alert/alert';
+import {ActionSheet} from '../action-sheet/action-sheet';
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
 import {merge, isTrueProperty, isBlank, isCheckedProperty} from '../../util/util';
@@ -157,6 +158,11 @@ export class Select {
    */
   @Input() checked: any = false;
 
+  /**
+   * @private
+   */
+  @Input() interface: string = '';
+
   /**
    * @output {any} Any expression you want to evaluate when the selection has changed
    */
@@ -206,7 +212,10 @@ export class Select {
   }
 
   private _open() {
-    if (this._disabled) return;
+    if (this._disabled) {
+      return;
+    }
+
     console.debug('select, open alert');
 
     // the user may have assigned some options specifically for the alert
@@ -216,6 +225,7 @@ export class Select {
     // and we create a new array for the alert's two buttons
     alertOptions.buttons = [{
       text: this.cancelText,
+      role: 'cancel',
       handler: () => {
         this.cancel.emit(null);
       }
@@ -226,6 +236,35 @@ export class Select {
       alertOptions.title = this._item.getLabelText();
     }
 
+    let options = this._options.toArray();
+    if (this.interface === 'action-sheet' && options.length > 6) {
+      this.interface = null;
+    }
+
+    let overlay;
+    if (this.interface === 'action-sheet') {
+      if (this._multi) {
+        throw new Error('action-sheet interface cannot use multivalue selector');
+      }
+
+      alertOptions.buttons = alertOptions.buttons.concat(options.map(input => {
+        return {
+          role: (input.checked ? 'selected' : ''),
+          text: input.text,
+          handler: () => {
+            this.onChange(input.value);
+            this.change.emit(input.value);
+          }
+        }
+      }));
+      alertOptions.cssClass = 'select-action-sheet';
+
+      overlay = ActionSheet.create(alertOptions);
+
+    } else {
+      // default to use the alert interface
+      this.interface = 'alert';
+
       // user cannot provide inputs from alertOptions
       // alert inputs must be created by ionic from ion-options
       alertOptions.inputs = this._options.toArray().map(input => {
@@ -234,22 +273,22 @@ export class Select {
           label: input.text,
           value: input.value,
           checked: input.checked
-      };
+        }
       });
 
       // create the alert instance from our built up alertOptions
-    let alert = Alert.create(alertOptions);
+      overlay = Alert.create(alertOptions);
 
       if (this._multi) {
         // use checkboxes
-      alert.setCssClass('select-alert multiple-select-alert');
+        overlay.setCssClass('select-alert multiple-select-alert');
 
       } else {
         // use radio buttons
-      alert.setCssClass('select-alert single-select-alert');
+        overlay.setCssClass('select-alert single-select-alert');
       }
 
-    alert.addButton({
+      overlay.addButton({
         text: this.okText,
         handler: selectedValues => {
           this.onChange(selectedValues);
@@ -257,10 +296,12 @@ export class Select {
         }
       });
 
-    this._nav.present(alert, alertOptions);
+    }
+
+    this._nav.present(overlay, alertOptions);
 
     this._isOpen = true;
-    alert.onDismiss(() => {
+    overlay.onDismiss(() => {
       this._isOpen = false;
     });
   }

ionic/components/select/test/single-value/index.ts

@@ -16,6 +16,7 @@ class E2EPage {
   month: string;
   year: string;
   years: Array<number>;
+  notification: string;
 
   constructor() {
     this.gaming = '';
@@ -23,6 +24,7 @@ class E2EPage {
     this.music = null;
     this.month = '12';
     this.year = '1994';
+    this.notification = 'enable';
 
     this.years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
 

ionic/components/select/test/single-value/main.html

@@ -26,7 +26,7 @@
 
   <ion-item>
     <ion-label>Operating System</ion-label>
-    <ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
+    <ion-select [(ngModel)]="os" interface="alert" submitText="Okay" cancelText="Nah">
       <ion-option value="dos">DOS</ion-option>
       <ion-option value="lunix">Linux</ion-option>
       <ion-option value="mac7">Mac OS 7</ion-option>
@@ -37,6 +37,16 @@
     </ion-select>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Notifications</ion-label>
+    <ion-select [(ngModel)]="notification" 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>
+      <ion-option value="mute_year">Mute for a year</ion-option>
+    </ion-select>
+  </ion-item>
+
   <ion-item>
     <ion-label>Music</ion-label>
     <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
@@ -74,11 +84,16 @@
   <button (click)="resetGender()">Reset Gender</button>
 
   <p aria-hidden="true" padding>
-    <code>gender: {{gender}}</code><br>
+    <code>gender: {{gender}}</code>
-    <code>gaming: {{gaming}}</code><br>
+    <br>
-    <code>os: {{os}}</code><br>
+    <code>gaming: {{gaming}}</code>
-    <code>music: {{music}}</code><br>
+    <br>
-    <code>date: {{month}}/{{year}}</code><br>
+    <code>os: {{os}}</code>
+    <br>
+    <code>music: {{music}}</code>
+    <br>
+    <code>date: {{month}}/{{year}}</code>
+    <br>
   </p>
 
 </ion-content>