javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(radio): native input type=radio

Browse Source
This commit is contained in:
Adam Bradley
2017-11-21 08:00:50 -06:00
parent a6d0a11705
commit 048a0cc42a
14 changed files with 629 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
packages/core/src/utils/input-interfaces.d.ts vendored
View File

@@ -3,9 +3,6 @@ import { EventEmitter } from '@stencil/core';
export interface BaseInput {
// Properties
// ------------------------
/**
* Indicates that the user cannot interact with the control.
*/
@@ -24,9 +21,19 @@ export interface BaseInput {
*/
value: string;
}
// Events
// ------------------------
export interface CheckboxInput 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.
*/
ionChange: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
@@ -45,27 +52,50 @@ export interface BaseInput {
* its wrapping ion-item a different style.
*/
ionStyle: EventEmitter<StyleEvent>;
}
export interface BooleanInput extends BaseInput {
export interface RadioButtonInput 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
* 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.
*/
ionChange: EventEmitter<BooleanInputChangeEvent>;
ionSelect: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
/**
* 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<StyleEvent>;
}
export interface BooleanInputChangeEvent {
export interface CheckedInputChangeEvent {
checked: boolean;
value: string;
}
export interface TextInputChangeEvent {
value: string;
}
@@ -74,7 +104,6 @@ export interface SelectOptionInput extends BaseInput {
* Indicates whether the option is currently selected.
*/
selected: boolean;
}
@@ -95,18 +124,92 @@ export interface SelectInput extends BaseInput {
* whether multiple items can be selected.
*/
multiple: 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<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
/**
* 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<StyleEvent>;
}
export interface RadioGroupInput extends BaseInput {
ionChange: EventEmitter<TextInputChangeEvent>;
}
export interface TextInput extends BaseInput {
/**
*
* 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<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
/**
* 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<StyleEvent>;
}
export interface TextMultiLineInput extends TextInput {
/**
* 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<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
/**
* 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<StyleEvent>;
}

122
packages/core/src/utils/input-interfaces.ts
View File

@@ -1,122 +0,0 @@
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<BlurEvent>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
/**
* 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<StyleEvent>;
}
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<BooleanInputChangeEvent>;
}
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 <option> element.
* The value -1 indicates no element is selected.
*/
selectedIndex: number;
/**
* Reflecting the multiple HTML attribute, which indicates
* whether multiple items can be selected.
*/
multiple: boolean;
}
export interface TextInput extends BaseInput {
/**
*
*/
}
export interface TextMultiLineInput extends TextInput {
}
export interface StyleEvent {
[styleName: string]: boolean;
}
export interface FocusEvent {}
export interface BlurEvent {}