From b4813ed2760778e3cc7a71d9b0e56d56cb4715a7 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 16 Nov 2017 15:43:04 -0600 Subject: [PATCH] chore(interface): init input interfaces --- .../core/src/components/checkbox/checkbox.tsx | 18 ++- .../core/src/components/toggle/toggle.tsx | 19 ++- packages/core/src/index.d.ts | 6 - packages/core/src/utils/input-interfaces.d.ts | 122 ++++++++++++++++++ 4 files changed, 145 insertions(+), 20 deletions(-) create mode 100644 packages/core/src/utils/input-interfaces.d.ts diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx index 78636e9cc9..f621bcb078 100644 --- a/packages/core/src/components/checkbox/checkbox.tsx +++ b/packages/core/src/components/checkbox/checkbox.tsx @@ -1,6 +1,6 @@ +import { BlurEvent, BooleanInput, BooleanInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces'; import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core'; - /** * @name Checkbox * @module ionic @@ -76,7 +76,7 @@ import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChang theme: 'checkbox' } }) -export class Checkbox { +export class Checkbox implements BooleanInput { private checkboxId: string; private labelId: string; private styleTmr: any; @@ -84,12 +84,22 @@ export class Checkbox { /** * @output {Event} Emitted when the checked property has changed. */ - @Event() ionChange: EventEmitter; + @Event() ionChange: EventEmitter; + + /** + * @output {Event} Emitted when the toggle has focus. + */ + @Event() ionFocus: EventEmitter; + + /** + * @output {Event} Emitted when the toggle loses focus. + */ + @Event() ionBlur: EventEmitter; /** * @output {Event} Emitted when the styles change. */ - @Event() ionStyle: EventEmitter; + @Event() ionStyle: EventEmitter; /** * @input {string} The color to use from your Sass `$colors` map. diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx index 7f3d1c5ff0..3b558839e2 100644 --- a/packages/core/src/components/toggle/toggle.tsx +++ b/packages/core/src/components/toggle/toggle.tsx @@ -1,5 +1,6 @@ +import { BlurEvent, BooleanInput, BooleanInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces'; import { Component, Event, EventEmitter, Listen, Method, Prop, PropDidChange, State } from '@stencil/core'; -import { BooleanInputComponent, GestureDetail } from '../../index'; +import { GestureDetail } from '../../index'; import { hapticSelection } from '../../utils/haptic'; @@ -13,7 +14,7 @@ import { hapticSelection } from '../../utils/haptic'; theme: 'toggle' } }) -export class Toggle implements BooleanInputComponent { +export class Toggle implements BooleanInput { private toggleId: string; private labelId: string; private styleTmr: any; @@ -26,22 +27,22 @@ export class Toggle implements BooleanInputComponent { /** * @output {Event} Emitted when the value property has changed. */ - @Event() ionChange: EventEmitter; + @Event() ionChange: EventEmitter; /** * @output {Event} Emitted when the styles change. */ - @Event() ionStyle: EventEmitter; + @Event() ionStyle: EventEmitter; /** * @output {Event} Emitted when the toggle has focus. */ - @Event() ionFocus: EventEmitter; + @Event() ionFocus: EventEmitter; /** * @output {Event} Emitted when the toggle loses focus. */ - @Event() ionBlur: EventEmitter; + @Event() ionBlur: EventEmitter; /** * @input {string} The color to use from your Sass `$colors` map. @@ -187,8 +188,7 @@ export class Toggle implements BooleanInputComponent { protected render() { return ( + enabled={!this.disabled}>
@@ -199,8 +199,7 @@ export class Toggle implements BooleanInputComponent { aria-disabled={this.disabled ? 'true' : false} aria-labelledby={this.labelId} role='checkbox' - tabIndex={0} - > + tabIndex={0}> ); diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index f0c489bfd6..55124734af 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -174,12 +174,6 @@ export interface BaseInputComponent { fireBlur: () => void; } -export interface BooleanInputComponent extends BaseInputComponent { - checked: boolean; - toggle: (ev: UIEvent) => void; -} - - export interface StencilElement extends HTMLElement { componentOnReady(): Promise; componentOnReady(done: (cmp?: HTMLElement) => void): void; diff --git a/packages/core/src/utils/input-interfaces.d.ts b/packages/core/src/utils/input-interfaces.d.ts new file mode 100644 index 0000000000..b85f37ae03 --- /dev/null +++ b/packages/core/src/utils/input-interfaces.d.ts @@ -0,0 +1,122 @@ +import { EventEmitter } from '@stencil/core'; + + +export interface BaseInput { + + // Properties + // ------------------------ + + /** + * 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; + + /** + * Reflects the value of the form control. + */ + value: string; + + + // Events + // ------------------------ + + /** + * 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 BooleanInput extends BaseInput { + /** + * 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. + * This is actually more similar to the native "input" event + * https://developer.mozilla.org/en-US/docs/Web/Events/input + */ + ionChange: EventEmitter; +} + + +export interface BooleanInputChangeEvent { + checked: boolean; +} + + +export interface SelectOptionInput extends BaseInput { + /** + * Indicates whether the option is currently selected. + */ + selected: boolean; + +} + + +export interface SelectInput extends BaseInput { + /** + * Indicates whether the option is currently selected. + */ + selected: boolean; + + /** + * A long reflecting the index of the first selected