feat(select): using action-sheet as ion-select interface

Author: manucorporat

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

@@ -82,6 +82,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

@@ -64,3 +64,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

@@ -240,6 +240,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

@@ -69,6 +69,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';
@@ -156,6 +157,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
    */
@@ -205,7 +211,9 @@ 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
@@ -215,6 +223,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);
       }
@@ -225,41 +234,67 @@ export class Select {
       alertOptions.title = this._item.getLabelText();
     }
 
-    // user cannot provide inputs from alertOptions
-    // alert inputs must be created by ionic from ion-options
-    alertOptions.inputs = this._options.toArray().map(input => {
-      return {
-        type: (this._multi ? 'checkbox' : 'radio'),
-        label: input.text,
-        value: input.value,
-        checked: input.checked
+    let modal;
+    if (this.interface === 'action-sheet') {
+      if (this._multi) {
+        throw new Error('multivalue selector can not be have action-sheet interface');
       }
-    });
+      let options = this._options.toArray();
+      if (options.length > 6) {
+        throw new Error('action-sheet interface MUST NOT have more than 6 options');
+      }
+      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);
+          }
+        }
+      }));
+
+      modal = ActionSheet.create(alertOptions);
+
+    } else if (this.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 => {
+        return {
+          type: (this._multi ? 'checkbox' : 'radio'),
+          label: input.text,
+          value: input.value,
+          checked: input.checked
+        }
+      });
 
-    // create the alert instance from our built up alertOptions
-    let alert = Alert.create(alertOptions);
+      // create the alert instance from our built up alertOptions
+      modal = Alert.create(alertOptions);
 
-    if (this._multi) {
-      // use checkboxes
-      alert.setCssClass('select-alert multiple-select-alert');
+      if (this._multi) {
+        // use checkboxes
+        modal.setCssClass('select-alert multiple-select-alert');
 
+      } else {
+        // use radio buttons
+        modal.setCssClass('select-alert single-select-alert');
+      }
+
+      modal.addButton({
+        text: this.okText,
+        handler: selectedValues => {
+          this.onChange(selectedValues);
+          this.change.emit(selectedValues);
+        }
+      });
     } else {
-      // use radio buttons
-      alert.setCssClass('select-alert single-select-alert');
+      throw new Error('unknown interface value: ' + this.interface);
     }
 
-    alert.addButton({
-      text: this.okText,
-      handler: selectedValues => {
-        this.onChange(selectedValues);
-        this.change.emit(selectedValues);
-      }
-    });
-
-    this._nav.present(alert, alertOptions);
+    this._nav.present(modal, alertOptions);
 
     this._isOpen = true;
-    alert.onDismiss(() => {
+    modal.onDismiss(() => {
       this._isOpen = false;
     });
   }
@@ -385,7 +420,7 @@ export class Select {
   /**
    * @private
    */
-  onTouched() {}
+  onTouched() { }
 
   /**
    * @private

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

@@ -16,13 +16,15 @@ class E2EPage {
   month: string;
   year: string;
   years: Array<number>;
+  notification: string;
 
   constructor() {
     this.gaming = '';
     this.os = 'win3.1';
     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>gaming: {{gaming}}</code><br>
-    <code>os: {{os}}</code><br>
-    <code>music: {{music}}</code><br>
-    <code>date: {{month}}/{{year}}</code><br>
+    <code>gender: {{gender}}</code>
+    <br>
+    <code>gaming: {{gaming}}</code>
+    <br>
+    <code>os: {{os}}</code>
+    <br>
+    <code>music: {{music}}</code>
+    <br>
+    <code>date: {{month}}/{{year}}</code>
+    <br>
   </p>
 
-</ion-content>
+</ion-content>