fix(hide-when): mode is a reserved property

ionic-team · Aug 26, 2018 · c446d1b · c446d1b
1 parent 86acb8c
commit c446d1b
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 146 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -1539,7 +1539,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
     */
-    'mode': Mode;
+    'modes': string;
     /**
     * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
     */
@@ -1549,7 +1549,7 @@ export namespace Components {
     */
     'orientation': string;
     /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
+    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
     */
     'platform': string;
     /**
@@ -1565,7 +1565,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
     */
-    'mode'?: Mode;
+    'modes'?: string;
     /**
     * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
     */
@@ -1575,7 +1575,7 @@ export namespace Components {
     */
     'orientation'?: string;
     /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
+    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
     */
     'platform'?: string;
     /**
@@ -4065,7 +4065,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
     */
-    'mode': Mode;
+    'modes': string;
     /**
     * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
     */
@@ -4091,7 +4091,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
     */
-    'mode'?: Mode;
+    'modes'?: string;
     /**
     * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
     */

diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
-import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
+import { Config } from '../../interface';
+import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-hide-when',
@@ -17,7 +17,7 @@ export class HideWhen implements DisplayWhen {
    * If the current platform matches the given value, the element will hide.
    * Accepts a comma separated list of modes to match against.
    */
-  @Prop() mode!: Mode;
+  @Prop() modes!: string;
 
   /**
    * If the current orientation matches this value, the element will hide.
@@ -37,7 +37,7 @@ export class HideWhen implements DisplayWhen {
 
   /**
    * If the current platform matches the given value, the element will hide.
-   * Accepts a comma separated list of platform to match against.
+   * Accepts a comma separated list of platforms to match against.
    */
   @Prop() platform?: string;
 
@@ -55,7 +55,7 @@ export class HideWhen implements DisplayWhen {
 
   @Listen('window:resize')
   onResize() {
-    this.passesTest = updateTestResults(this);
+    this.passesTest = getTestResult(this);
   }
 
   hostData() {

diff --git a/core/src/components/input/input-base.tsx b/core/src/components/input/input-base.tsx
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -4,8 +4,6 @@ import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '.
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-import { InputComponent } from './input-base';
-
 @Component({
   tag: 'ion-input',
   styleUrls: {
@@ -14,51 +12,16 @@ import { InputComponent } from './input-base';
   },
   shadow: true
 })
-export class Input implements InputComponent {
+export class Input {
 
   private nativeInput?: HTMLInputElement;
   private inputId = `ion-input-${inputIds++}`;
-  didBlurAfterEdit = false;
+  private didBlurAfterEdit = false;
 
   @State() hasFocus = false;
 
   @Element() el!: HTMLElement;
 
-  /**
-   * Emitted when a keyboard input ocurred.
-   */
-  @Event() ionInput!: EventEmitter<KeyboardEvent>;
-
-  /**
-   * Emitted when the value has changed.
-   */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
-
-  /**
-   * Emitted when the styles change.
-   */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
-
-  /**
-   * Emitted when the input loses focus.
-   */
-  @Event() ionBlur!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has focus.
-   */
-  @Event() ionFocus!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has been created.
-   */
-  @Event() ionInputDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has been removed.
-   */
-  @Event() ionInputDidUnload!: EventEmitter<void>;
-
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -226,6 +189,41 @@ export class Input implements InputComponent {
     this.ionChange.emit({ value });
   }
 
+  /**
+   * Emitted when a keyboard input ocurred.
+   */
+  @Event() ionInput!: EventEmitter<KeyboardEvent>;
+
+  /**
+   * Emitted when the value has changed.
+   */
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle!: EventEmitter<StyleEvent>;
+
+  /**
+   * Emitted when the input loses focus.
+   */
+  @Event() ionBlur!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has focus.
+   */
+  @Event() ionFocus!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has been created.
+   */
+  @Event() ionInputDidLoad!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has been removed.
+   */
+  @Event() ionInputDidUnload!: EventEmitter<void>;
+
   componentWillLoad() {
     // By default, password inputs clear after focus when they have content
     if (this.clearOnEdit === undefined && this.type === 'password') {

diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
-import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
+import { Config } from '../../interface';
+import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
@@ -18,7 +18,7 @@ export class ShowWhen implements DisplayWhen {
    * If the current platform matches the given value, the element will show.
    * Accepts a comma separated list of modes to match against.
    */
-  @Prop() mode!: Mode;
+  @Prop() modes!: string;
 
   /**
    * If the current orientation matches this value, the element will show.
@@ -56,7 +56,7 @@ export class ShowWhen implements DisplayWhen {
 
   @Listen('window:resize')
   onResize() {
-    this.passesTest = updateTestResults(this);
+    this.passesTest = getTestResult(this);
   }
 
   hostData() {

diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
@@ -3,7 +3,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } f
 import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
-import { TextareaComponent } from '../input/input-base';
 
 @Component({
   tag: 'ion-textarea',
@@ -13,41 +12,21 @@ import { TextareaComponent } from '../input/input-base';
   },
   shadow: true
 })
-export class Textarea implements TextareaComponent {
+export class Textarea {
 
   private nativeInput?: HTMLTextAreaElement;
   private inputId = `ion-input-${textareaIds++}`;
-
-  didBlurAfterEdit = false;
+  private didBlurAfterEdit = false;
 
   @Element() el!: HTMLElement;
 
   @State() hasFocus = false;
 
   /**
-   * Emitted when the input value has changed.
-   */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
-
-  /**
-   * Emitted when a keyboard input ocurred.
-   */
-  @Event() ionInput!: EventEmitter<KeyboardEvent>;
-
-  /**
-   * Emitted when the styles change.
-   */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
-
-  /**
-   * Emitted when the input loses focus.
-   */
-  @Event() ionBlur!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has focus.
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
    */
-  @Event() ionFocus!: EventEmitter<void>;
+  @Prop() mode!: Mode;
 
   /**
    * The color to use from your application's color palette.
@@ -56,12 +35,6 @@ export class Textarea implements TextareaComponent {
    */
   @Prop() color?: Color;
 
-  /**
-   * The mode determines which platform styles to use.
-   * Possible values are: `"ios"` or `"md"`.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
    */
@@ -164,6 +137,31 @@ export class Textarea implements TextareaComponent {
     this.ionChange.emit({ value });
   }
 
+  /**
+   * Emitted when the input value has changed.
+   */
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+
+  /**
+   * Emitted when a keyboard input ocurred.
+   */
+  @Event() ionInput!: EventEmitter<KeyboardEvent>;
+
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle!: EventEmitter<StyleEvent>;
+
+  /**
+   * Emitted when the input loses focus.
+   */
+  @Event() ionBlur!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has focus.
+   */
+  @Event() ionFocus!: EventEmitter<void>;
+
   componentDidLoad() {
     this.ionStyle = deferEvent(this.ionStyle);
     this.debounceChanged();