fix(all): strong type text fields

ionic-team · Jul 29, 2018 · 1d001a3 · 1d001a3
1 parent d65174b
commit 1d001a3
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -79,6 +79,7 @@ import {
   StyleEvent,
   TabbarLayout,
   TabbarPlacement,
+  TextFieldTypes,
   ToastOptions,
   TransitionDoneFn,
   TransitionInstruction,
@@ -2862,7 +2863,7 @@ declare global {
       /**
        * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
        */
-      'type': string;
+      'type': TextFieldTypes;
       /**
        * The value of the input.
        */
@@ -3024,7 +3025,7 @@ declare global {
       /**
        * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
        */
-      'type'?: string;
+      'type'?: TextFieldTypes;
       /**
        * The value of the input.
        */

diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
@@ -1,3 +1,4 @@
+import { TextFieldTypes } from '../../interface';
 
 export interface AlertOptions {
   header?: string;
@@ -12,7 +13,7 @@ export interface AlertOptions {
 }
 
 export interface AlertInput {
-  type: string;
+  type: TextFieldTypes | 'checkbox' | 'radio';
   name: string;
   placeholder?: string;
   value?: string;
@@ -21,8 +22,8 @@ export interface AlertInput {
   disabled?: boolean;
   id?: string;
   handler?: (input: AlertInput) => void;
-  min?: string | number;
-  max?: string | number;
+  min?: number;
+  max?: number;
 }
 
 export interface AlertButton {

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -144,17 +144,17 @@ export class Alert implements OverlayInterface {
     }
     this.inputType = inputTypes.values().next().value;
     this.processedInputs = inputs.map((i, index) => ({
-        type: i.type || 'text',
-        name: i.name ? i.name : index + '',
-        placeholder: i.placeholder ? i.placeholder : '',
-        value: i.value ? i.value : '',
-        label: i.label,
-        checked: !!i.checked,
-        disabled: !!i.disabled,
-        id: i.id ? i.id : `alert-input-${this.overlayId}-${index}`,
-        handler: i.handler ? i.handler : null,
-        min: i.min ? i.min : null,
-        max: i.max ? i.max : null
+      type: i.type || 'text',
+      name: i.name ? i.name : index + '',
+      placeholder: i.placeholder ? i.placeholder : '',
+      value: i.value ? i.value : '',
+      label: i.label,
+      checked: !!i.checked,
+      disabled: !!i.disabled,
+      id: i.id ? i.id : `alert-input-${this.overlayId}-${index}`,
+      handler: i.handler,
+      min: i.min,
+      max: i.max
     }) as AlertInput);
   }
 

diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
@@ -124,16 +124,19 @@
         header: 'Prompt!',
         inputs: [
           {
+            type: 'text',
             placeholder: 'Placeholder 1'
           },
           {
             name: 'name2',
+            type: 'text',
             id: 'name2-id',
             value: 'hello',
             placeholder: 'Placeholder 2'
           },
           {
             name: 'name3',
+            type: 'text',
             value: 'http://ionicframework.com',
             type: 'url',
             placeholder: 'Favorite site ever'

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
+import { Color, InputChangeEvent, Mode, StyleEvent, TextFieldTypes } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 import { InputComponent } from './input-base';
@@ -205,7 +205,7 @@ export class Input implements InputComponent {
   /**
    * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
    */
-  @Prop() type = 'text';
+  @Prop() type: TextFieldTypes = 'text';
 
   /**
    * The value of the input.

diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
@@ -30,6 +30,7 @@ export { OverlayEventDetail, OverlayInterface } from './utils/overlays';
 
 
 // Global types
+export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
 export type Side = 'start' | 'end';
 export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
 export type Color = PredefinedColors | string;