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

ionic-team · Apr 17, 2016 · 1c67b02 · 1c67b02
2 parents 8141a38 + 81096f1
commit 1c67b02
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 35 deletions.
diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/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;
 }

diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/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;
+}
diff --git a/ionic/components/action-sheet/action-sheet.ts b/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);
       }

diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/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;
 }
diff --git a/ionic/components/select/select.ts b/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,41 +236,72 @@ 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 options = this._options.toArray();
+    if (this.interface === 'action-sheet' && options.length > 6) {
+      this.interface = null;
+    }
 
-    // create the alert instance from our built up alertOptions
-    let alert = Alert.create(alertOptions);
+    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';
 
-    if (this._multi) {
-      // use checkboxes
-      alert.setCssClass('select-alert multiple-select-alert');
+      overlay = ActionSheet.create(alertOptions);
 
     } else {
-      // use radio buttons
-      alert.setCssClass('select-alert single-select-alert');
-    }
+      // 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 => {
+        return {
+          type: (this._multi ? 'checkbox' : 'radio'),
+          label: input.text,
+          value: input.value,
+          checked: input.checked
+        }
+      });
 
-    alert.addButton({
-      text: this.okText,
-      handler: selectedValues => {
-        this.onChange(selectedValues);
-        this.change.emit(selectedValues);
+      // create the alert instance from our built up alertOptions
+      overlay = Alert.create(alertOptions);
+
+      if (this._multi) {
+        // use checkboxes
+        overlay.setCssClass('select-alert multiple-select-alert');
+
+      } else {
+        // use radio buttons
+        overlay.setCssClass('select-alert single-select-alert');
       }
-    });
 
-    this._nav.present(alert, alertOptions);
+      overlay.addButton({
+        text: this.okText,
+        handler: selectedValues => {
+          this.onChange(selectedValues);
+          this.change.emit(selectedValues);
+        }
+      });
+
+    }
+
+    this._nav.present(overlay, alertOptions);
 
     this._isOpen = true;
-    alert.onDismiss(() => {
+    overlay.onDismiss(() => {
       this._isOpen = false;
     });
   }
@@ -386,7 +427,7 @@ export class Select {
   /**
    * @private
    */
-  onTouched() {}
+  onTouched() { }
 
   /**
    * @private

diff --git a/ionic/components/select/test/single-value/index.ts b/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];
 

diff --git a/ionic/components/select/test/single-value/main.html b/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>