fix(inputs): disabled handling (#16071)

ionic-team · Oct 25, 2018 · ef6895a · ef6895a
1 parent 4d3ad67
commit ef6895a
Show file tree

Hide file tree

Showing 36 changed files with 319 additions and 230 deletions.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -564,13 +564,13 @@ export class Radio {
 }
 
 export declare interface RadioGroup extends StencilComponents<'IonRadioGroup'> {}
-@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'disabled', 'value'] })
+@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'value'] })
 export class RadioGroup {
   ionChange: EventEmitter<CustomEvent>;
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyInputs(this, el, ['allowEmptySelection', 'name', 'disabled', 'value']);
+    proxyInputs(this, el, ['allowEmptySelection', 'name', 'value']);
     proxyOutputs(this, el, ['ionChange']);
   }
 }

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -1292,7 +1292,7 @@ export namespace Components {
     /**
     * The value of the datetime as a valid ISO 8601 datetime string.
     */
-    'value'?: string;
+    'value'?: string | null;
     /**
     * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
     */
@@ -1386,7 +1386,7 @@ export namespace Components {
     /**
     * The value of the datetime as a valid ISO 8601 datetime string.
     */
-    'value'?: string;
+    'value'?: string | null;
     /**
     * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
     */
@@ -1847,7 +1847,7 @@ export namespace Components {
     /**
     * The value of the input.
     */
-    'value': string;
+    'value'?: string | null;
   }
   interface IonInputAttributes extends StencilHTMLAttributes {
     /**
@@ -1989,7 +1989,7 @@ export namespace Components {
     /**
     * The value of the input.
     */
-    'value'?: string;
+    'value'?: string | null;
   }
 
   interface IonItemDivider {
@@ -2207,7 +2207,7 @@ export namespace Components {
     */
     'mode': Mode;
     /**
-    * The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
+    * The position determines where and how the label behaves inside an item.
     */
     'position'?: 'fixed' | 'stacked' | 'floating';
   }
@@ -2225,7 +2225,7 @@ export namespace Components {
     */
     'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
     /**
-    * The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
+    * The position determines where and how the label behaves inside an item.
     */
     'position'?: 'fixed' | 'stacked' | 'floating';
   }
@@ -2564,7 +2564,7 @@ export namespace Components {
     */
     'contentId'?: string;
     /**
-    * If `true`, the menu is disabled. Default `false`.
+    * If `true`, the menu is disabled. Defaults to `false`.
     */
     'disabled': boolean;
     /**
@@ -2596,7 +2596,7 @@ export namespace Components {
     */
     'side': Side;
     /**
-    * If `true`, swiping the menu is enabled. Default `true`.
+    * If `true`, swiping the menu is enabled. Defaults to `true`.
     */
     'swipeGesture': boolean;
     /**
@@ -2614,7 +2614,7 @@ export namespace Components {
     */
     'contentId'?: string;
     /**
-    * If `true`, the menu is disabled. Default `false`.
+    * If `true`, the menu is disabled. Defaults to `false`.
     */
     'disabled'?: boolean;
     /**
@@ -2650,7 +2650,7 @@ export namespace Components {
     */
     'side'?: Side;
     /**
-    * If `true`, swiping the menu is enabled. Default `true`.
+    * If `true`, swiping the menu is enabled. Defaults to `true`.
     */
     'swipeGesture'?: boolean;
     /**
@@ -3308,14 +3308,10 @@ export namespace Components {
 
   interface IonRadioGroup {
     /**
-    * If `true`, the radios can be deselected. Default false.
+    * If `true`, the radios can be deselected. Defaults to `false`.
     */
     'allowEmptySelection': boolean;
     /**
-    * If `true`, the user cannot interact with the radio group. Default false.
-    */
-    'disabled': boolean;
-    /**
     * The name of the control, which is submitted with the form data.
     */
     'name': string;
@@ -3326,14 +3322,10 @@ export namespace Components {
   }
   interface IonRadioGroupAttributes extends StencilHTMLAttributes {
     /**
-    * If `true`, the radios can be deselected. Default false.
+    * If `true`, the radios can be deselected. Defaults to `false`.
     */
     'allowEmptySelection'?: boolean;
     /**
-    * If `true`, the user cannot interact with the radio group. Default false.
-    */
-    'disabled'?: boolean;
-    /**
     * The name of the control, which is submitted with the form data.
     */
     'name'?: string;
@@ -3371,7 +3363,7 @@ export namespace Components {
     /**
     * the value of the radio.
     */
-    'value': any | null;
+    'value'?: any | null;
   }
   interface IonRadioAttributes extends StencilHTMLAttributes {
     /**
@@ -3814,7 +3806,7 @@ export namespace Components {
 
   interface IonSearchbar {
     /**
-    * If `true`, enable searchbar animation. Default `false`.
+    * If `true`, enable searchbar animation. Defaults to `false`.
     */
     'animated': boolean;
     /**
@@ -3862,11 +3854,11 @@ export namespace Components {
     */
     'setFocus': () => void;
     /**
-    * If `true`, show the cancel button. Default `false`.
+    * If `true`, show the cancel button. Defaults to `false`.
     */
     'showCancelButton': boolean;
     /**
-    * If `true`, enable spellcheck on the input. Default `false`.
+    * If `true`, enable spellcheck on the input. Defaults to `false`.
     */
     'spellcheck': boolean;
     /**
@@ -3876,11 +3868,11 @@ export namespace Components {
     /**
     * the value of the searchbar.
     */
-    'value': string;
+    'value'?: string | null;
   }
   interface IonSearchbarAttributes extends StencilHTMLAttributes {
     /**
-    * If `true`, enable searchbar animation. Default `false`.
+    * If `true`, enable searchbar animation. Defaults to `false`.
     */
     'animated'?: boolean;
     /**
@@ -3948,11 +3940,11 @@ export namespace Components {
     */
     'searchIcon'?: string;
     /**
-    * If `true`, show the cancel button. Default `false`.
+    * If `true`, show the cancel button. Defaults to `false`.
     */
     'showCancelButton'?: boolean;
     /**
-    * If `true`, enable spellcheck on the input. Default `false`.
+    * If `true`, enable spellcheck on the input. Defaults to `false`.
     */
     'spellcheck'?: boolean;
     /**
@@ -3962,7 +3954,7 @@ export namespace Components {
     /**
     * the value of the searchbar.
     */
-    'value'?: string;
+    'value'?: string | null;
   }
 
   interface IonSegmentButton {
@@ -3975,7 +3967,7 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * If `true`, the user cannot interact with the segment button. Default false.
+    * If `true`, the user cannot interact with the segment button. Defaults to `false`.
     */
     'disabled': boolean;
     /**
@@ -3997,7 +3989,7 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * If `true`, the user cannot interact with the segment button. Default false.
+    * If `true`, the user cannot interact with the segment button. Defaults to `false`.
     */
     'disabled'?: boolean;
     /**
@@ -4067,7 +4059,7 @@ export namespace Components {
     /**
     * The text value of the option.
     */
-    'value'?: any;
+    'value'?: any | null;
   }
   interface IonSelectOptionAttributes extends StencilHTMLAttributes {
     /**
@@ -4089,7 +4081,7 @@ export namespace Components {
     /**
     * The text value of the option.
     */
-    'value'?: any;
+    'value'?: any | null;
   }
 
   interface IonSelectPopover {
@@ -4816,7 +4808,7 @@ export namespace Components {
     /**
     * The value of the textarea.
     */
-    'value': string;
+    'value'?: string | null;
     /**
     * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
     */
@@ -4910,7 +4902,7 @@ export namespace Components {
     /**
     * The value of the textarea.
     */
-    'value'?: string;
+    'value'?: string | null;
     /**
     * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
     */
@@ -5102,7 +5094,7 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * If `true`, the user cannot interact with the toggle. Default false.
+    * If `true`, the user cannot interact with the toggle. Defaults to `false`.
     */
     'disabled': boolean;
     /**
@@ -5116,7 +5108,7 @@ export namespace Components {
     /**
     * the value of the toggle.
     */
-    'value': string;
+    'value'?: string | null;
   }
   interface IonToggleAttributes extends StencilHTMLAttributes {
     /**
@@ -5128,7 +5120,7 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * If `true`, the user cannot interact with the toggle. Default false.
+    * If `true`, the user cannot interact with the toggle. Defaults to `false`.
     */
     'disabled'?: boolean;
     /**
@@ -5158,7 +5150,7 @@ export namespace Components {
     /**
     * the value of the toggle.
     */
-    'value'?: string;
+    'value'?: string | null;
   }
 
   interface IonToolbar {

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
-import { deferEvent, renderHiddenInput } from '../../utils/helpers';
+import { renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
@@ -78,10 +78,6 @@ export class Checkbox implements ComponentInterface {
     this.emitStyle();
   }
 
-  componentDidLoad() {
-    this.ionStyle = deferEvent(this.ionStyle);
-  }
-
   @Watch('checked')
   checkedChanged(isChecked: boolean) {
     this.ionChange.emit({

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
-import { clamp, deferEvent } from '../../utils/helpers';
+import { clamp } from '../../utils/helpers';
 import { hostContext } from '../../utils/theme';
 
 import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
@@ -179,7 +179,7 @@ export class Datetime implements ComponentInterface {
   /**
    * The value of the datetime as a valid ISO 8601 datetime string.
    */
-  @Prop({ mutable: true }) value?: string;
+  @Prop({ mutable: true }) value?: string | null;
 
   /**
    * Update the datetime value when the value changes
@@ -212,7 +212,6 @@ export class Datetime implements ComponentInterface {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
     // if neither were provided then it will use default English names
-    this.ionStyle = deferEvent(this.ionStyle);
     this.locale = {
       // this.locale[type] = convertToArrayOfStrings((this[type] ? this[type] : this.config.get(type), type);
       monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
@@ -222,9 +221,6 @@ export class Datetime implements ComponentInterface {
     };
 
     this.updateDatetimeValue(this.value);
-  }
-
-  componentDidLoad() {
     this.emitStyle();
   }
 
@@ -502,7 +498,7 @@ export class Datetime implements ComponentInterface {
     this.text = renderDatetime(template, this.datetimeValue, this.locale);
   }
 
-  hasValue(): boolean {
+  private hasValue(): boolean {
     const val = this.datetimeValue;
     return Object.keys(val).length > 0;
   }
@@ -538,7 +534,6 @@ export class Datetime implements ComponentInterface {
         onClick={this.open.bind(this)}
         class="datetime-cover"
       >
-        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </button>
     ];
   }

diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
@@ -224,7 +224,7 @@ dates in JavaScript.
 | `pickerFormat`    | `picker-format`     | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`.                                                       | `string \| undefined`                       |
 | `pickerOptions`   | --                  | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options.                                                                                                                                                                                                                                                                                                                                                               | `PickerOptions \| undefined`                |
 | `placeholder`     | `placeholder`       | The text to display when there's no date selected yet. Using lowercase to match the input attribute                                                                                                                                                                                                                                                                                                                                                                                               | `null \| string \| undefined`               |
-| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `string \| undefined`                       |
+| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`               |
 | `yearValues`      | --                  | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined` |
 
 

diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
@@ -42,7 +42,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>MM DD YY</ion-label>
+          <ion-label position="floating">MM DD YY</ion-label>
           <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
         </ion-item>