From c446d1b6d14eec902c9e7cc86be7c860fc280238 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sun, 26 Aug 2018 22:29:46 +0200 Subject: [PATCH] fix(hide-when): mode is a reserved property --- core/src/components.d.ts | 12 ++-- core/src/components/hide-when/hide-when.tsx | 10 +-- core/src/components/input/input-base.tsx | 51 -------------- core/src/components/input/input.tsx | 76 ++++++++++----------- core/src/components/show-when/show-when.tsx | 8 +-- core/src/components/textarea/textarea.tsx | 62 ++++++++--------- core/src/utils/show-hide-when-utils.ts | 14 ++-- 7 files changed, 87 insertions(+), 146 deletions(-) delete mode 100644 core/src/components/input/input-base.tsx diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 653e098c5ed..80ddf7aa7a5 100644 --- 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 index b5c8f96aa7e..1fbee83f47b 100644 --- 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 deleted file mode 100644 index 0090c17e3ab..00000000000 --- a/core/src/components/input/input-base.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Shared Interfaces - -import { EventEmitter } from '@stencil/core'; - -import { StyleEvent } from '../../interface'; - -export interface InputBaseComponent { - ionStyle: EventEmitter; - ionBlur: EventEmitter; - ionFocus: EventEmitter; - - clearOnEdit: boolean; - didBlurAfterEdit: boolean; - - // Shared Attributes - autocapitalize?: string; - autocomplete?: string; - autofocus?: boolean; - disabled?: boolean; - minlength?: number; - maxlength?: number; - name?: string; - placeholder?: string; - readonly?: boolean; - required?: boolean; - spellcheck?: boolean; - value?: string; -} - -export interface InputComponent extends InputBaseComponent { - clearInput: boolean; - - // Input Attributes - accept?: string; - autocorrect?: string; - min?: string; - max?: string; - multiple?: boolean; - pattern?: string; - results?: number; - step?: string; - size?: number; - type?: string; -} - -export interface TextareaComponent extends InputBaseComponent { - // Textarea Attributes - cols?: number; - rows?: number; - wrap?: string; -} diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 4e47fc80584..aec5b8b34d5 100644 --- 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; - - /** - * Emitted when the value has changed. - */ - @Event() ionChange!: EventEmitter; - - /** - * Emitted when the styles change. - */ - @Event() ionStyle!: EventEmitter; - - /** - * Emitted when the input loses focus. - */ - @Event() ionBlur!: EventEmitter; - - /** - * Emitted when the input has focus. - */ - @Event() ionFocus!: EventEmitter; - - /** - * Emitted when the input has been created. - */ - @Event() ionInputDidLoad!: EventEmitter; - - /** - * Emitted when the input has been removed. - */ - @Event() ionInputDidUnload!: EventEmitter; - /** * 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; + + /** + * Emitted when the value has changed. + */ + @Event() ionChange!: EventEmitter; + + /** + * Emitted when the styles change. + */ + @Event() ionStyle!: EventEmitter; + + /** + * Emitted when the input loses focus. + */ + @Event() ionBlur!: EventEmitter; + + /** + * Emitted when the input has focus. + */ + @Event() ionFocus!: EventEmitter; + + /** + * Emitted when the input has been created. + */ + @Event() ionInputDidLoad!: EventEmitter; + + /** + * Emitted when the input has been removed. + */ + @Event() ionInputDidUnload!: EventEmitter; + 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 index 87f998fbf1f..658938f7aff 100644 --- 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 index 57ef2cba38d..19ecb0aa0fc 100644 --- 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; - - /** - * Emitted when a keyboard input ocurred. - */ - @Event() ionInput!: EventEmitter; - - /** - * Emitted when the styles change. - */ - @Event() ionStyle!: EventEmitter; - - /** - * Emitted when the input loses focus. - */ - @Event() ionBlur!: EventEmitter; - - /** - * Emitted when the input has focus. + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. */ - @Event() ionFocus!: EventEmitter; + @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; + + /** + * Emitted when a keyboard input ocurred. + */ + @Event() ionInput!: EventEmitter; + + /** + * Emitted when the styles change. + */ + @Event() ionStyle!: EventEmitter; + + /** + * Emitted when the input loses focus. + */ + @Event() ionBlur!: EventEmitter; + + /** + * Emitted when the input has focus. + */ + @Event() ionFocus!: EventEmitter; + componentDidLoad() { this.ionStyle = deferEvent(this.ionStyle); this.debounceChanged(); diff --git a/core/src/utils/show-hide-when-utils.ts b/core/src/utils/show-hide-when-utils.ts index b0c30b01efc..792fb805ac0 100644 --- a/core/src/utils/show-hide-when-utils.ts +++ b/core/src/utils/show-hide-when-utils.ts @@ -1,4 +1,4 @@ -import { Config, Mode } from '../interface'; +import { Config } from '../interface'; import { matchBreakpoint } from './media'; import { isPlatform } from './platform'; @@ -7,17 +7,13 @@ export interface DisplayWhen { config: Config; win: Window; mediaQuery?: string; - mode: Mode; + modes?: string; or: boolean; orientation?: string; platform?: string; size?: string; } -export function updateTestResults(displayWhen: DisplayWhen) { - return getTestResult(displayWhen); -} - function isPlatformMatch(win: Window, multiPlatformString: string) { const platforms = split(multiPlatformString); return platforms.some(p => isPlatform(win, p as any)); @@ -38,7 +34,7 @@ function split(multiOptions: string): string[] { return multiOptions.replace(/\s/g, '').split(','); } -function getTestResult(displayWhen: DisplayWhen) { +export function getTestResult(displayWhen: DisplayWhen) { const results: boolean[] = []; if (displayWhen.mediaQuery) { results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery)); @@ -46,8 +42,8 @@ function getTestResult(displayWhen: DisplayWhen) { if (displayWhen.size) { results.push(isSizeMatch(displayWhen.win, displayWhen.size)); } - if (displayWhen.mode) { - results.push(isModeMatch(displayWhen.config, displayWhen.mode)); + if (displayWhen.modes) { + results.push(isModeMatch(displayWhen.config, displayWhen.modes)); } if (displayWhen.platform) { results.push(isPlatformMatch(displayWhen.win, displayWhen.platform));