From 2e7d355edf1cd0836dd6afc3090f02c905e490da Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sat, 11 Aug 2018 19:00:01 +0200 Subject: [PATCH] fix(input): event interfaces --- core/src/components/checkbox/checkbox.tsx | 4 +- core/src/components/datetime/datetime.tsx | 16 +- core/src/components/input/input.tsx | 4 +- .../picker-column/picker-column.tsx | 8 - core/src/components/picker/picker.tsx | 17 +- .../components/radio-group/radio-group.tsx | 8 +- core/src/components/radio/radio.tsx | 4 +- core/src/components/range/range.tsx | 6 +- core/src/components/searchbar/searchbar.tsx | 4 +- core/src/components/segment/segment.tsx | 4 +- core/src/components/tab-highlight/readme.md | 25 --- core/src/components/textarea/textarea.tsx | 4 +- core/src/components/toggle/toggle.tsx | 4 +- core/src/utils/input-interface.ts | 197 +----------------- 14 files changed, 39 insertions(+), 266 deletions(-) delete mode 100644 core/src/components/tab-highlight/readme.md diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 80f8428eae..4c48879873 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; +import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; import { deferEvent, renderHiddenInput } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Checkbox implements CheckboxInput { +export class Checkbox { private inputId = `ion-cb-${checkboxIds++}`; private labelId = `${this.inputId}-lbl`; diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 3d59750e7b..883068cfe8 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,6 +1,6 @@ -import { Component, Event, EventEmitter, Prop, State, Watch, Method } from '@stencil/core'; +import { Component, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; -import { CssClassMap, PickerColumn, PickerOptions, StyleEvent } from '../../interface'; +import { CssClassMap, InputChangeEvent, PickerColumn, PickerOptions, StyleEvent } from '../../interface'; import { clamp, deferEvent } from '../../utils/helpers'; import { createThemedClasses } from '../../utils/theme'; @@ -48,7 +48,7 @@ export class Datetime { * datetime. For example, the minimum could just be the year, such as `1994`. * Defaults to the beginning of the year, 100 years ago from today. */ - @Prop({ mutable: true }) min: string | undefined; + @Prop({ mutable: true }) min?: string; /** * The maximum datetime allowed. Value must be a date string @@ -58,7 +58,7 @@ export class Datetime { * datetime. For example, the maximum could just be the year, such as `1994`. * Defaults to the end of this year. */ - @Prop({ mutable: true }) max: string | undefined; + @Prop({ mutable: true }) max?: string; /** * The display format of the date and time as text that shows @@ -174,7 +174,7 @@ export class Datetime { /** * the value of the datetime. */ - @Prop({ mutable: true }) value?: string; + @Prop({ mutable: true }) value?: any; /** * Update the datetime value when the value changes @@ -183,7 +183,9 @@ export class Datetime { protected valueChanged() { this.updateValue(); this.emitStyle(); - this.ionChange.emit(); + this.ionChange.emit({ + value: this.value + }); } /** @@ -194,7 +196,7 @@ export class Datetime { /** * Emitted when the value (selected date) has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; /** * Emitted when the styles change. diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index b1ea4f13ef..396e542d25 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { Color, InputChangeEvent, Mode, StyleEvent, TextFieldTypes } from '../../interface'; +import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -32,7 +32,7 @@ export class Input implements InputComponent { /** * Emitted when the value has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; /** * Emitted when the styles change. diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 20314afa0f..3159e943cb 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -30,11 +30,6 @@ export class PickerColumnCmp { @Prop() col!: PickerColumn; - /** - * Emitted when the selected option has changed. - */ - @Event() ionChange!: EventEmitter; - componentWillLoad() { let pickerRotateFactor = 0; let pickerScaleFactor = 0.81; @@ -80,7 +75,6 @@ export class PickerColumnCmp { // set what y position we're at cancelAnimationFrame(this.rafId); this.update(y, duration, true); - this.ionChange.emit(); } private update(y: number, duration: number, saveY: boolean) { @@ -187,8 +181,6 @@ export class PickerColumnCmp { if (notLockedIn) { // isn't locked in yet, keep decelerating until it is this.rafId = requestAnimationFrame(() => this.decelerate()); - } else { - this.ionChange.emit(); } } else if (this.y % this.optHeight !== 0) { diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index a82e4ef46a..2b8b7fbd8e 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -91,26 +91,22 @@ export class Picker implements OverlayInterface { /** * Emitted after the picker has presented. */ - @Event({ eventName: 'ionPickerDidPresent' }) - didPresent!: EventEmitter; + @Event({ eventName: 'ionPickerDidPresent' }) didPresent!: EventEmitter; /** * Emitted before the picker has presented. */ - @Event({ eventName: 'ionPickerWillPresent' }) - willPresent!: EventEmitter; + @Event({ eventName: 'ionPickerWillPresent' }) willPresent!: EventEmitter; /** * Emitted before the picker has dismissed. */ - @Event({ eventName: 'ionPickerWillDismiss' }) - willDismiss!: EventEmitter; + @Event({ eventName: 'ionPickerWillDismiss' }) willDismiss!: EventEmitter; /** * Emitted after the picker has dismissed. */ - @Event({ eventName: 'ionPickerDidDismiss' }) - didDismiss!: EventEmitter; + @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter; /** * Emitted after the picker has unloaded. @@ -285,8 +281,7 @@ export class Picker implements OverlayInterface { @@ -295,7 +290,7 @@ export class Picker implements OverlayInterface {
- {columns.map(c => )} + { columns.map(c => ) }
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 1ed81238ca..295766ed7d 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -1,11 +1,11 @@ -import { Component, ComponentDidLoad, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; -import { InputChangeEvent, RadioGroupInput } from '../../interface'; +import { TextInputChangeEvent } from '../../interface'; @Component({ tag: 'ion-radio-group' }) -export class RadioGroup implements ComponentDidLoad, RadioGroupInput { +export class RadioGroup { private inputId = `ion-rg-${radioGroupIds++}`; private labelId = `${this.inputId}-lbl`; @@ -49,7 +49,7 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput { /** * Emitted when the value has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; @Listen('ionRadioDidLoad') onRadioDidLoad(ev: Event) { diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index dfd11e61b9..b567adee31 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { CheckedInputChangeEvent, Color, Mode, RadioButtonInput, StyleEvent } from '../../interface'; +import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; import { deferEvent } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Radio implements RadioButtonInput { +export class Radio { private inputId = `ion-rb-${radioButtonIds++}`; private nativeInput!: HTMLInputElement; diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 8d58b97e92..f47ecd4f82 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; -import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, RangeValue, StyleEvent } from '../../interface'; +import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface'; import { clamp, debounceEvent, deferEvent } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -14,7 +14,7 @@ import { Knob, RangeEventDetail } from './range-interface'; }, shadow: true }) -export class Range implements BaseInput { +export class Range { private noUpdate = false; private rect!: ClientRect; @@ -118,7 +118,7 @@ export class Range implements BaseInput { /** * Emitted when the value property has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; /** * Emitted when the styles change. diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index aabc53e140..267428a9e1 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { Color, InputChangeEvent, Mode } from '../../interface'; +import { Color, Mode, TextInputChangeEvent } from '../../interface'; import { debounceEvent } from '../../utils/helpers'; import { createColorClasses } from '../../utils/theme'; @@ -115,7 +115,7 @@ export class Searchbar { /** * Emitted when the value has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; /** * Emitted when the cancel button is clicked. diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 30f51476da..6f833ca73c 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; -import { Color, InputChangeEvent, Mode } from '../../interface'; +import { Color, Mode, TextInputChangeEvent } from '../../interface'; import { createColorClasses, hostContext } from '../../utils/theme'; @Component({ @@ -47,7 +47,7 @@ export class Segment { /** * Emitted when the value property has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; @Listen('ionSelect') segmentClick(ev: CustomEvent) { diff --git a/core/src/components/tab-highlight/readme.md b/core/src/components/tab-highlight/readme.md deleted file mode 100644 index b2f8a6c52e..0000000000 --- a/core/src/components/tab-highlight/readme.md +++ /dev/null @@ -1,25 +0,0 @@ -# ion-tab-highlight - - - - - - -## Properties - -#### selectedTab - - - - -## Attributes - -#### selected-tab - - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 749b8be322..913d8f4444 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; -import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface'; +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'; @@ -27,7 +27,7 @@ export class Textarea implements TextareaComponent { /** * Emitted when the input value has changed. */ - @Event() ionChange!: EventEmitter; + @Event() ionChange!: EventEmitter; /** * Emitted when a keyboard input ocurred. diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 643c5e70eb..4e19f8acaa 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core'; -import { CheckboxInput, CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface'; +import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface'; import { hapticSelection } from '../../utils/haptic'; import { deferEvent, renderHiddenInput } from '../../utils/helpers'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -13,7 +13,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Toggle implements CheckboxInput { +export class Toggle { private inputId = `ion-tg-${toggleIds++}`; private nativeInput!: HTMLInputElement; diff --git a/core/src/utils/input-interface.ts b/core/src/utils/input-interface.ts index a0991bc4fa..927a4183d1 100644 --- a/core/src/utils/input-interface.ts +++ b/core/src/utils/input-interface.ts @@ -1,203 +1,12 @@ -import { EventEmitter } from '@stencil/core'; - -export interface BaseInput { - - /** - * Indicates that the user cannot interact with the control. - */ - disabled: boolean; - - /** - * Returns / Sets the element's readonly attribute, indicating that - * the user cannot modify the value of the control. HTML5. This is - * ignored if the value of the type attribute is hidden, range, color, - * checkbox, radio, file, or a button type. - */ - readOnly?: boolean; - - name: string; -} - -export interface CheckboxInput extends BaseInput { - /** - * Reflects the value of the form control. - */ - value: string; - - /** - * Returns / Sets the current state of the element when type is checkbox or radio. - */ - checked: boolean; - - /** - * The change event is fired when the value of has changed. - */ - ionChange: EventEmitter; - - /** - * Removes focus from input; keystrokes will subsequently go nowhere. - */ - ionBlur: EventEmitter; - - /** - * Focus on the input element; keystrokes will subsequently go to this element. - */ - ionFocus: EventEmitter; - - /** - * Emitted when the styles change. This is useful for parent - * components to know how to style themselves depending on the - * child input. For example, a disabled ion-toggle may give - * its wrapping ion-item a different style. - */ - ionStyle: EventEmitter; -} - -export interface RadioButtonInput extends BaseInput { - /** - * Reflects the value of the form control. - */ - value: string; - - /** - * Returns / Sets the current state of the element when type is checkbox or radio. - */ - checked: boolean; - - /** - * A single radio button fires an ionSelect event, whereas - * a radio group fires an ionChange event. It would be more common - * to attach listeners to the radio group, not individual radio buttons. - */ - ionSelect: EventEmitter; - - /** - * Removes focus from input; keystrokes will subsequently go nowhere. - */ - ionBlur: EventEmitter; - - /** - * Focus on the input element; keystrokes will subsequently go to this element. - */ - ionFocus: EventEmitter; -} - -export interface RadioGroupInput extends BaseInput { - ionChange: EventEmitter; -} - -export interface SelectInput extends BaseInput { - /** - * Indicates whether the option is currently selected. - */ - selected: boolean; - - /** - * A long reflecting the index of the first selected