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

This commit is contained in:
Manu Mtz.-Almeida
2018-08-26 22:29:46 +02:00
parent 86acb8cd92
commit c446d1b6d1
7 changed files with 87 additions and 146 deletions

View File

@ -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. * 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. * 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; '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; '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. * 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. * 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; '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; '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. * 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. * 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. * 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. * 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.
*/ */

View File

@ -1,7 +1,7 @@
import { Component, Element, Listen, Prop, State } from '@stencil/core'; import { Component, Element, Listen, Prop, State } from '@stencil/core';
import { Config, Mode } from '../../interface'; import { Config } from '../../interface';
import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils'; import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
@Component({ @Component({
tag: 'ion-hide-when', 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. * If the current platform matches the given value, the element will hide.
* Accepts a comma separated list of modes to match against. * 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. * 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. * 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; @Prop() platform?: string;
@ -55,7 +55,7 @@ export class HideWhen implements DisplayWhen {
@Listen('window:resize') @Listen('window:resize')
onResize() { onResize() {
this.passesTest = updateTestResults(this); this.passesTest = getTestResult(this);
} }
hostData() { hostData() {

View File

@ -1,51 +0,0 @@
// Shared Interfaces
import { EventEmitter } from '@stencil/core';
import { StyleEvent } from '../../interface';
export interface InputBaseComponent {
ionStyle: EventEmitter<StyleEvent>;
ionBlur: EventEmitter<void>;
ionFocus: EventEmitter<void>;
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;
}

View File

@ -4,8 +4,6 @@ import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '.
import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme'; import { createColorClasses, hostContext } from '../../utils/theme';
import { InputComponent } from './input-base';
@Component({ @Component({
tag: 'ion-input', tag: 'ion-input',
styleUrls: { styleUrls: {
@ -14,51 +12,16 @@ import { InputComponent } from './input-base';
}, },
shadow: true shadow: true
}) })
export class Input implements InputComponent { export class Input {
private nativeInput?: HTMLInputElement; private nativeInput?: HTMLInputElement;
private inputId = `ion-input-${inputIds++}`; private inputId = `ion-input-${inputIds++}`;
didBlurAfterEdit = false; private didBlurAfterEdit = false;
@State() hasFocus = false; @State() hasFocus = false;
@Element() el!: HTMLElement; @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. * The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * 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 }); 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() { componentWillLoad() {
// By default, password inputs clear after focus when they have content // By default, password inputs clear after focus when they have content
if (this.clearOnEdit === undefined && this.type === 'password') { if (this.clearOnEdit === undefined && this.type === 'password') {

View File

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

View File

@ -3,7 +3,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } f
import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface'; import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';
import { TextareaComponent } from '../input/input-base';
@Component({ @Component({
tag: 'ion-textarea', tag: 'ion-textarea',
@ -13,41 +12,21 @@ import { TextareaComponent } from '../input/input-base';
}, },
shadow: true shadow: true
}) })
export class Textarea implements TextareaComponent { export class Textarea {
private nativeInput?: HTMLTextAreaElement; private nativeInput?: HTMLTextAreaElement;
private inputId = `ion-input-${textareaIds++}`; private inputId = `ion-input-${textareaIds++}`;
private didBlurAfterEdit = false;
didBlurAfterEdit = false;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@State() hasFocus = false; @State() hasFocus = false;
/** /**
* Emitted when the input value has changed. * The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/ */
@Event() ionChange!: EventEmitter<TextInputChangeEvent>; @Prop() mode!: Mode;
/**
* 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>;
/** /**
* The color to use from your application's color palette. * The color to use from your application's color palette.
@ -56,12 +35,6 @@ export class Textarea implements TextareaComponent {
*/ */
@Prop() color?: Color; @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"`. * 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 }); 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() { componentDidLoad() {
this.ionStyle = deferEvent(this.ionStyle); this.ionStyle = deferEvent(this.ionStyle);
this.debounceChanged(); this.debounceChanged();

View File

@ -1,4 +1,4 @@
import { Config, Mode } from '../interface'; import { Config } from '../interface';
import { matchBreakpoint } from './media'; import { matchBreakpoint } from './media';
import { isPlatform } from './platform'; import { isPlatform } from './platform';
@ -7,17 +7,13 @@ export interface DisplayWhen {
config: Config; config: Config;
win: Window; win: Window;
mediaQuery?: string; mediaQuery?: string;
mode: Mode; modes?: string;
or: boolean; or: boolean;
orientation?: string; orientation?: string;
platform?: string; platform?: string;
size?: string; size?: string;
} }
export function updateTestResults(displayWhen: DisplayWhen) {
return getTestResult(displayWhen);
}
function isPlatformMatch(win: Window, multiPlatformString: string) { function isPlatformMatch(win: Window, multiPlatformString: string) {
const platforms = split(multiPlatformString); const platforms = split(multiPlatformString);
return platforms.some(p => isPlatform(win, p as any)); return platforms.some(p => isPlatform(win, p as any));
@ -38,7 +34,7 @@ function split(multiOptions: string): string[] {
return multiOptions.replace(/\s/g, '').split(','); return multiOptions.replace(/\s/g, '').split(',');
} }
function getTestResult(displayWhen: DisplayWhen) { export function getTestResult(displayWhen: DisplayWhen) {
const results: boolean[] = []; const results: boolean[] = [];
if (displayWhen.mediaQuery) { if (displayWhen.mediaQuery) {
results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery)); results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery));
@ -46,8 +42,8 @@ function getTestResult(displayWhen: DisplayWhen) {
if (displayWhen.size) { if (displayWhen.size) {
results.push(isSizeMatch(displayWhen.win, displayWhen.size)); results.push(isSizeMatch(displayWhen.win, displayWhen.size));
} }
if (displayWhen.mode) { if (displayWhen.modes) {
results.push(isModeMatch(displayWhen.config, displayWhen.mode)); results.push(isModeMatch(displayWhen.config, displayWhen.modes));
} }
if (displayWhen.platform) { if (displayWhen.platform) {
results.push(isPlatformMatch(displayWhen.win, displayWhen.platform)); results.push(isPlatformMatch(displayWhen.win, displayWhen.platform));