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

fix(all): strong typed events

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-23 17:26:10 +02:00
parent b8c87c453a
commit d5129df970
44 changed files with 434 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
core/src/components.d.ts vendored
View File

@ -67,10 +67,9 @@ import {
Mode as Mode2,
} from '.';
import {
BlurEvent,
CheckedInputChangeEvent,
FocusEvent,
InputChangeEvent,
RangeInputChangeEvent,
SelectInputChangeEvent,
StyleEvent,
} from './utils/input-interfaces';
@ -284,15 +283,15 @@ declare global {
/**
* Emitted after the alert has loaded.
*/
'onIonActionSheetDidLoad'?: (event: CustomEvent) => void;
'onIonActionSheetDidLoad'?: (event: CustomEvent<void>) => void;
/**
* Emitted after the alert has presented.
*/
'onIonActionSheetDidPresent'?: (event: CustomEvent) => void;
'onIonActionSheetDidPresent'?: (event: CustomEvent<void>) => void;
/**
* Emitted after the alert has unloaded.
*/
'onIonActionSheetDidUnload'?: (event: CustomEvent) => void;
'onIonActionSheetDidUnload'?: (event: CustomEvent<void>) => void;
/**
* Emitted before the alert has dismissed.
*/
@ -300,7 +299,7 @@ declare global {
/**
* Emitted before the alert has presented.
*/
'onIonActionSheetWillPresent'?: (event: CustomEvent) => void;
'onIonActionSheetWillPresent'?: (event: CustomEvent<void>) => void;
'overlayId'?: number;
/**
* Subtitle for the action sheet.
@ -775,7 +774,7 @@ declare global {
/**
* Emitted when the backdrop is tapped.
*/
'onIonBackdropTap'?: (event: CustomEvent) => void;
'onIonBackdropTap'?: (event: CustomEvent<void>) => void;
/**
* If true, the backdrop will stop propagation on tap. Defaults to `true`.
*/
@ -945,11 +944,11 @@ declare global {
/**
* Emitted when the button loses focus.
*/
'onIonBlur'?: (event: CustomEvent<BlurEvent>) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the button has focus.
*/
'onIonFocus'?: (event: CustomEvent<FocusEvent>) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* If true, activates a button with rounded corners.
*/
@ -1324,7 +1323,7 @@ declare global {
/**
* Emitted when the toggle loses focus.
*/
'onIonBlur'?: (event: CustomEvent<BlurEvent>) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the checked property has changed.
*/
@ -1332,7 +1331,7 @@ declare global {
/**
* Emitted when the toggle has focus.
*/
'onIonFocus'?: (event: CustomEvent<FocusEvent>) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
@ -1719,11 +1718,11 @@ declare global {
/**
* Emitted when the datetime selection was cancelled.
*/
'onIonCancel'?: (event: CustomEvent) => void;
'onIonCancel'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent) => void;
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`.
*/
@ -2027,12 +2026,10 @@ declare global {
'notCaptured': GestureCallback;
'onEnd': GestureCallback;
'onMove': GestureCallback;
'onPress': GestureCallback;
'onStart': GestureCallback;
'onWillStart': (_: GestureDetail) => Promise<void>;
'passive': boolean;
'threshold': number;
'type': string;
}
}
@ -2066,33 +2063,11 @@ declare global {
'maxAngle'?: number;
'notCaptured'?: GestureCallback;
'onEnd'?: GestureCallback;
/**
* Emitted when the gesture ends.
*/
'onIonGestureEnd'?: (event: CustomEvent) => void;
/**
* Emitted when the gesture moves.
*/
'onIonGestureMove'?: (event: CustomEvent) => void;
/**
* Emitted when the gesture is not captured.
*/
'onIonGestureNotCaptured'?: (event: CustomEvent) => void;
/**
* Emitted when the gesture starts.
*/
'onIonGestureStart'?: (event: CustomEvent) => void;
/**
* Emitted when press is detected.
*/
'onIonPress'?: (event: CustomEvent) => void;
'onMove'?: GestureCallback;
'onPress'?: GestureCallback;
'onStart'?: GestureCallback;
'onWillStart'?: (_: GestureDetail) => Promise<void>;
'passive'?: boolean;
'threshold'?: number;
'type'?: string;
}
}
}
@ -2273,7 +2248,7 @@ declare global {
/**
* The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`.
*/
'position': string;
'position': 'top' | 'bottom';
/**
* The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`.
*/
@ -2311,11 +2286,11 @@ declare global {
/**
* Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.
*/
'onIonInfinite'?: (event: CustomEvent) => void;
'onIonInfinite'?: (event: CustomEvent<void>) => void;
/**
* The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`.
*/
'position'?: string;
'position'?: 'top' | 'bottom';
/**
* The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`.
*/
@ -2382,10 +2357,6 @@ declare global {
* This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
*/
'autofocus': boolean;
/**
* If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
*/
'checked': boolean;
/**
* If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
*/
@ -2395,7 +2366,7 @@ declare global {
*/
'clearOnEdit': boolean;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
'debounce': number;
/**
@ -2512,10 +2483,6 @@ declare global {
* This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
*/
'autofocus'?: boolean;
/**
* If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
*/
'checked'?: boolean;
/**
* If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
*/
@ -2525,7 +2492,7 @@ declare global {
*/
'clearOnEdit'?: boolean;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
'debounce'?: number;
/**
@ -2563,27 +2530,31 @@ declare global {
/**
* Emitted when the input loses focus.
*/
'onIonBlur'?: (event: CustomEvent) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the value has changed.
*/
'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
/**
* Emitted when the input has focus.
*/
'onIonFocus'?: (event: CustomEvent) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the input value has changed.
* Emitted when a keyboard input ocurred.
*/
'onIonInput'?: (event: CustomEvent) => void;
'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
/**
* Emitted when the input has been created.
*/
'onIonInputDidLoad'?: (event: CustomEvent) => void;
'onIonInputDidLoad'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the input has been removed.
*/
'onIonInputDidUnload'?: (event: CustomEvent) => void;
'onIonInputDidUnload'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent) => void;
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
*/
@ -2784,7 +2755,7 @@ declare global {
namespace StencilComponents {
interface IonItemOptions {
'fireSwipeEvent': (value: any) => void;
'fireSwipeEvent': () => void;
'isRightSide': () => boolean;
/**
* The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
@ -2816,7 +2787,7 @@ declare global {
/**
* Emitted when the item has been fully swiped.
*/
'onIonSwipe'?: (event: CustomEvent) => void;
'onIonSwipe'?: (event: CustomEvent<void>) => void;
/**
* The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
*/
@ -3014,7 +2985,7 @@ declare global {
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent) => void;
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
*/
@ -3551,12 +3522,12 @@ declare global {
/**
* Emitted when the menu is closed.
*/
'onIonClose'?: (event: CustomEvent) => void;
'onIonClose'?: (event: CustomEvent<void>) => void;
'onIonMenuChange'?: (event: CustomEvent<MenuChangeEventDetail>) => void;
/**
* Emitted when the menu is open.
*/
'onIonOpen'?: (event: CustomEvent) => void;
'onIonOpen'?: (event: CustomEvent<void>) => void;
/**
* If true, the menu will persist on child pages.
*/
@ -4540,19 +4511,19 @@ declare global {
/**
* Emitted when the radio button loses focus.
*/
'onIonBlur'?: (event: CustomEvent<BlurEvent>) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the radio button has focus.
*/
'onIonFocus'?: (event: CustomEvent<FocusEvent>) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the radio loads.
*/
'onIonRadioDidLoad'?: (event: CustomEvent) => void;
'onIonRadioDidLoad'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the radio unloads.
*/
'onIonRadioDidUnload'?: (event: CustomEvent) => void;
'onIonRadioDidUnload'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the radio button is selected.
*/
@ -4738,19 +4709,19 @@ declare global {
/**
* Emitted when the range loses focus.
*/
'onIonBlur'?: (event: CustomEvent) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the value property has changed.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonChange'?: (event: CustomEvent<RangeInputChangeEvent>) => void;
/**
* Emitted when the range has focus.
*/
'onIonFocus'?: (event: CustomEvent) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent) => void;
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`.
*/
@ -4904,15 +4875,15 @@ declare global {
/**
* Emitted while the user is pulling down the content and exposing the refresher.
*/
'onIonPull'?: (event: CustomEvent) => void;
'onIonPull'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
*/
'onIonRefresh'?: (event: CustomEvent) => void;
'onIonRefresh'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the user begins to start pulling down.
*/
'onIonStart'?: (event: CustomEvent) => void;
'onIonStart'?: (event: CustomEvent<void>) => void;
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
@ -5344,7 +5315,7 @@ declare global {
*/
'color': string;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
*/
'debounce': number;
/**
@ -5414,7 +5385,7 @@ declare global {
*/
'color'?: string;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
*/
'debounce'?: number;
/**
@ -5424,23 +5395,27 @@ declare global {
/**
* Emitted when the input loses focus.
*/
'onIonBlur'?: (event: CustomEvent) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the cancel button is clicked.
*/
'onIonCancel'?: (event: CustomEvent) => void;
'onIonCancel'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the value has changed.
*/
'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
/**
* Emitted when the clear input button is clicked.
*/
'onIonClear'?: (event: CustomEvent) => void;
'onIonClear'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the input has focus.
*/
'onIonFocus'?: (event: CustomEvent) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the Searchbar input has changed, including when it's cleared.
* Emitted when a keyboard input ocurred.
*/
'onIonInput'?: (event: CustomEvent) => void;
'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
/**
* Set the input's placeholder. Default `"Search"`.
*/
@ -5535,7 +5510,7 @@ declare global {
/**
* Emitted when the segment button is clicked.
*/
'onIonClick'?: (event: CustomEvent) => void;
'onIonSelect'?: (event: CustomEvent<void>) => void;
/**
* The value of the segment button.
*/
@ -5596,7 +5571,7 @@ declare global {
/**
* Emitted when the value property has changed.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
/**
* the value of the segment.
*/
@ -5651,11 +5626,11 @@ declare global {
/**
* Emitted when the select option loads.
*/
'onIonSelectOptionDidLoad'?: (event: CustomEvent) => void;
'onIonSelectOptionDidLoad'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the select option unloads.
*/
'onIonSelectOptionDidUnload'?: (event: CustomEvent) => void;
'onIonSelectOptionDidUnload'?: (event: CustomEvent<void>) => void;
/**
* If true, the element is selected.
*/
@ -5805,11 +5780,11 @@ declare global {
/**
* Emitted when the select loses focus.
*/
'onIonBlur'?: (event: CustomEvent<BlurEvent>) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the selection is cancelled.
*/
'onIonCancel'?: (event: CustomEvent) => void;
'onIonCancel'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the value has changed.
*/
@ -5817,7 +5792,7 @@ declare global {
/**
* Emitted when the select has focus.
*/
'onIonFocus'?: (event: CustomEvent<FocusEvent>) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
@ -6215,7 +6190,7 @@ declare global {
/**
* Emitted when the split pane is visible.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonChange'?: (event: CustomEvent<{visible: boolean}>) => void;
/**
* Expression to be called when the split-pane visibility has changed
*/
@ -6554,7 +6529,7 @@ declare global {
/**
* Emitted when the tab changes.
*/
'onIonChange'?: (event: CustomEvent) => void;
'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void;
'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
'scrollable'?: boolean;
@ -6689,7 +6664,7 @@ declare global {
*/
'cols': number;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
'debounce': number;
/**
@ -6779,7 +6754,7 @@ declare global {
*/
'cols'?: number;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
'debounce'?: number;
/**
@ -6801,19 +6776,23 @@ declare global {
/**
* Emitted when the input loses focus.
*/
'onIonBlur'?: (event: CustomEvent) => void;
/**
* Emitted when the input has focus.
*/
'onIonFocus'?: (event: CustomEvent) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the input value has changed.
*/
'onIonInput'?: (event: CustomEvent) => void;
'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
/**
* Emitted when the input has focus.
*/
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when a keyboard input ocurred.
*/
'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent) => void;
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* Instructional text that shows before the input has a value.
*/
@ -7128,7 +7107,7 @@ declare global {
*/
'name': string;
/**
* // TODO! the value of the toggle.
* the value of the toggle.
*/
'value': string;
}
@ -7176,7 +7155,7 @@ declare global {
/**
* Emitted when the toggle loses focus.
*/
'onIonBlur'?: (event: CustomEvent<BlurEvent>) => void;
'onIonBlur'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the value property has changed.
*/
@ -7184,13 +7163,13 @@ declare global {
/**
* Emitted when the toggle has focus.
*/
'onIonFocus'?: (event: CustomEvent<FocusEvent>) => void;
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
/**
* // TODO! the value of the toggle.
* the value of the toggle.
*/
'value'?: string;
}

8
core/src/components/action-sheet/action-sheet.tsx
View File

@ -82,22 +82,22 @@ export class ActionSheet implements OverlayInterface {
/**
* Emitted after the alert has loaded.
*/
@Event() ionActionSheetDidLoad!: EventEmitter;
@Event() ionActionSheetDidLoad!: EventEmitter<void>;
/**
* Emitted after the alert has unloaded.
*/
@Event() ionActionSheetDidUnload!: EventEmitter;
@Event() ionActionSheetDidUnload!: EventEmitter<void>;
/**
* Emitted after the alert has presented.
*/
@Event({eventName: 'ionActionSheetDidPresent'}) didPresent!: EventEmitter;
@Event({eventName: 'ionActionSheetDidPresent'}) didPresent!: EventEmitter<void>;
/**
* Emitted before the alert has presented.
*/
@Event({eventName: 'ionActionSheetWillPresent'}) willPresent!: EventEmitter;
@Event({eventName: 'ionActionSheetWillPresent'}) willPresent!: EventEmitter<void>;
/**
* Emitted before the alert has dismissed.

2
core/src/components/backdrop/backdrop.tsx
View File

@ -35,7 +35,7 @@ export class Backdrop {
/**
* Emitted when the backdrop is tapped.
*/
@Event() ionBackdropTap!: EventEmitter;
@Event() ionBackdropTap!: EventEmitter<void>;
componentDidLoad() {
registerBackdrop(this.doc, this);

5
core/src/components/button/button.tsx
View File

@ -1,6 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { CssClassMap, Mode } from '../../index';
import { BlurEvent, FocusEvent } from '../../utils/input-interfaces';
import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme';
@ -94,12 +93,12 @@ export class Button {
/**
* Emitted when the button has focus.
*/
@Event() ionFocus!: EventEmitter<FocusEvent>;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the button loses focus.
*/
@Event() ionBlur!: EventEmitter<BlurEvent>;
@Event() ionBlur!: EventEmitter<void>;
componentWillLoad() {
if (this.el.closest('ion-buttons')) {

6
core/src/components/checkbox/checkbox.tsx
View File

@ -1,4 +1,4 @@
import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
import { CheckboxInput, CheckedInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { CssClassMap, Mode } from '../../index';
import { deferEvent } from '../../utils/helpers';
@ -63,12 +63,12 @@ export class Checkbox implements CheckboxInput {
/**
* Emitted when the toggle has focus.
*/
@Event() ionFocus!: EventEmitter<FocusEvent>;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the toggle loses focus.
*/
@Event() ionBlur!: EventEmitter<BlurEvent>;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the styles change.

7
core/src/components/datetime/datetime.tsx
View File

@ -21,6 +21,7 @@ import {
import { clamp, deferEvent } from '../../utils/helpers';
import { PickerColumn, PickerController, PickerOptions } from '../../index';
import { StyleEvent } from '../../utils/input-interfaces';
@Component({
@ -211,12 +212,12 @@ export class Datetime {
/**
* Emitted when the datetime selection was cancelled.
*/
@Event() ionCancel!: EventEmitter;
@Event() ionCancel!: EventEmitter<void>;
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter;
@Event() ionStyle!: EventEmitter<StyleEvent>;
componentWillLoad() {
@ -263,7 +264,7 @@ export class Datetime {
{
text: this.cancelText,
role: 'cancel',
handler: () => this.ionCancel.emit(this)
handler: () => this.ionCancel.emit()
},
{
text: this.doneText,

115
core/src/components/gesture/gesture.tsx
View File

@ -1,4 +1,4 @@
import { Component, Event, EventEmitter, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
import { Component, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
import { assert, now } from '../../utils/helpers';
import { BlockerConfig, BlockerDelegate, GestureDelegate, QueueController } from '../../index';
import { PanRecognizer } from './recognizers';
@ -18,9 +18,8 @@ export class Gesture {
private positions: number[] = [];
private gesture!: GestureDelegate;
private lastTouch = 0;
private pan?: PanRecognizer; // TODO
private pan!: PanRecognizer;
private hasCapturedPan = false;
private hasPress = false;
private hasStartedPan = false;
private hasFiredStart = true;
private isMoveQueued = false;
@ -40,41 +39,14 @@ export class Gesture {
@Prop() passive = true;
@Prop() maxAngle = 40;
@Prop() threshold = 10;
@Prop() type = 'pan';
@Prop() canStart?: GestureCallback;
@Prop() onWillStart?: (_: GestureDetail) => Promise<void>;
@Prop() onStart?: GestureCallback;
@Prop() onMove?: GestureCallback;
@Prop() onEnd?: GestureCallback;
@Prop() onPress?: GestureCallback;
@Prop() notCaptured?: GestureCallback;
/**
* Emitted when the gesture moves.
*/
@Event() ionGestureMove!: EventEmitter;
/**
* Emitted when the gesture starts.
*/
@Event() ionGestureStart!: EventEmitter;
/**
* Emitted when the gesture ends.
*/
@Event() ionGestureEnd!: EventEmitter;
/**
* Emitted when the gesture is not captured.
*/
@Event() ionGestureNotCaptured!: EventEmitter;
/**
* Emitted when press is detected.
*/
@Event() ionPress!: EventEmitter;
constructor() {
this.detail = {
type: 'pan',
@ -105,13 +77,7 @@ export class Gesture {
// in this case, we already know the GestureController and Gesture are already
// apart of the same bundle, so it's safe to load it this way
// only create one instance of GestureController, and reuse the same one later
const types = this.type.replace(/\s/g, '').toLowerCase().split(',');
if (types.indexOf('pan') > -1) {
this.pan = new PanRecognizer(this.direction, this.threshold, this.maxAngle);
}
this.hasPress = (types.indexOf('press') > -1);
this.disabledChanged(this.disabled);
if (this.autoBlockAll) {
@ -121,16 +87,22 @@ export class Gesture {
}
}
componentDidUnload() {
if (this.blocker) {
this.blocker.destroy();
this.blocker = undefined;
}
this.gesture.destroy();
}
@Watch('disabled')
protected disabledChanged(isDisabled: boolean) {
if (this.pan || this.hasPress) {
this.enableListener(this, 'touchstart', !isDisabled, this.attachTo, this.passive);
this.enableListener(this, 'mousedown', !isDisabled, this.attachTo, this.passive);
if (isDisabled) {
this.abortGesture();
}
}
}
// DOWN *************************
@ -194,13 +166,11 @@ export class Gesture {
}
this.positions.push(detail.currentX, detail.currentY, timeStamp);
if (this.pan) {
this.hasStartedPan = true;
if (this.threshold === 0) {
return this.tryToCapturePan();
}
this.pan.start(detail.startX, detail.startY);
}
return true;
}
@ -224,11 +194,6 @@ export class Gesture {
}
private pointerMove(ev: UIEvent) {
if (!this.pan) {
assert(false, 'pan must be non null');
return;
}
// fast path, if gesture is currently captured
// do minimun job to get user-land even dispatched
if (this.hasCapturedPan) {
@ -262,8 +227,6 @@ export class Gesture {
this.isMoveQueued = false;
if (this.onMove) {
this.onMove(detail);
} else {
this.ionGestureMove.emit(detail);
}
}
@ -334,8 +297,6 @@ export class Gesture {
assert(!this.hasFiredStart, 'has fired must be false');
if (this.onStart) {
this.onStart(this.detail);
} else {
this.ionGestureStart.emit(this.detail);
}
this.hasFiredStart = true;
}
@ -343,7 +304,9 @@ export class Gesture {
private abortGesture() {
this.reset();
this.enable(false);
this.notCaptured && this.notCaptured(this.detail);
if (this.notCaptured) {
this.notCaptured(this.detail);
}
}
private reset() {
@ -351,7 +314,9 @@ export class Gesture {
this.hasStartedPan = false;
this.isMoveQueued = false;
this.hasFiredStart = true;
this.gesture && this.gesture.release();
if (this.gesture) {
this.gesture.release();
}
}
// END *************************
@ -390,85 +355,39 @@ export class Gesture {
// Try to capture press
if (hasCaptured) {
detail.type = 'pan';
if (this.onEnd) {
this.onEnd(detail);
} else {
this.ionGestureEnd.emit(detail);
}
return;
}
// Try to capture press
if (this.hasPress && this.detectPress()) {
return;
}
// Not captured any event
if (this.notCaptured) {
this.notCaptured(detail);
} else {
this.ionGestureNotCaptured.emit(detail);
}
}
private detectPress(): boolean {
const detail = this.detail;
const vecX = detail.deltaX;
const vecY = detail.deltaY;
const dis = vecX * vecX + vecY * vecY;
if (dis < 100) {
detail.type = 'press';
if (this.onPress) {
this.onPress(detail);
} else {
this.ionPress.emit(detail);
}
return true;
}
return false;
}
// ENABLE LISTENERS *************************
private enableMouse(shouldEnable: boolean) {
if (this.pan) {
this.enableListener(this, 'document:mousemove', shouldEnable, undefined, this.passive);
}
this.enableListener(this, 'document:mouseup', shouldEnable, undefined, this.passive);
}
private enableTouch(shouldEnable: boolean) {
if (this.pan) {
this.enableListener(this, 'touchmove', shouldEnable, this.attachTo, this.passive);
}
this.enableListener(this, 'touchcancel', shouldEnable, this.attachTo, this.passive);
this.enableListener(this, 'touchend', shouldEnable, this.attachTo, this.passive);
}
private enable(shouldEnable: boolean) {
this.enableMouse(shouldEnable);
this.enableTouch(shouldEnable);
}
componentDidUnload() {
if (this.blocker) {
this.blocker.destroy();
this.blocker = undefined;
}
this.gesture.destroy();
}
}
const MOUSE_WAIT = 2500;
export interface GestureDetail {
type: string;
startX: number;
@ -489,7 +408,7 @@ export interface GestureCallback {
(detail?: GestureDetail): boolean|void;
}
function updateDetail(ev: any, detail: any) {
function updateDetail(ev: any, detail: GestureDetail) {
// get X coordinates for either a mouse click
// or a touch depending on the given event
let x = 0;

47
core/src/components/gesture/readme.md
View File

@ -67,11 +67,6 @@ number
#### onPress
#### onStart
@ -92,11 +87,6 @@ boolean
number
#### type
string
## Attributes
#### attach-to
@ -159,11 +149,6 @@ number
#### on-press
#### on-start
@ -184,38 +169,6 @@ boolean
number
#### type
string
## Events
#### ionGestureEnd
Emitted when the gesture ends.
#### ionGestureMove
Emitted when the gesture moves.
#### ionGestureNotCaptured
Emitted when the gesture is not captured.
#### ionGestureStart
Emitted when the gesture starts.
#### ionPress
Emitted when press is detected.
----------------------------------------------

20
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -1,12 +1,6 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { QueueController } from '../../index';
const enum Position {
Top = 'top',
Bottom = 'bottom',
}
@Component({
tag: 'ion-infinite-scroll',
styleUrl: 'infinite-scroll.scss'
@ -15,7 +9,7 @@ export class InfiniteScroll {
private thrPx = 0;
private thrPc = 0;
private scrollEl: HTMLIonScrollElement|undefined;
private scrollEl?: HTMLIonScrollElement;
private didFire = false;
private isBusy = false;
@ -71,7 +65,7 @@ export class InfiniteScroll {
* The value can be either `top` or `bottom`.
* Defaults to `bottom`.
*/
@Prop() position: string = Position.Bottom;
@Prop() position: 'top' | 'bottom' = 'bottom';
/**
* Emitted when the scroll reaches
@ -79,7 +73,7 @@ export class InfiniteScroll {
* you must call the infinite scroll's `complete()` method when
* your async operation has completed.
*/
@Event() ionInfinite!: EventEmitter;
@Event() ionInfinite!: EventEmitter<void>;
async componentWillLoad() {
const scrollEl = this.el.closest('ion-scroll');
@ -91,7 +85,7 @@ export class InfiniteScroll {
componentDidLoad() {
this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled);
if (this.position === Position.Top) {
if (this.position === 'top') {
this.queue.write(() => this.scrollEl && this.scrollEl.scrollToBottom(0));
}
}
@ -117,7 +111,7 @@ export class InfiniteScroll {
const height = scrollEl.offsetHeight;
const threshold = this.thrPc ? (height * this.thrPc) : this.thrPx;
const distanceFromInfinite = (this.position === Position.Bottom)
const distanceFromInfinite = (this.position === 'bottom')
? scrollHeight - infiniteHeight - scrollTop - threshold - height
: scrollTop - infiniteHeight - threshold;
@ -125,7 +119,7 @@ export class InfiniteScroll {
if (!this.didFire) {
this.isLoading = true;
this.didFire = true;
this.ionInfinite.emit(this);
this.ionInfinite.emit();
return 3;
}
} else {
@ -153,7 +147,7 @@ export class InfiniteScroll {
}
this.isLoading = false;
if (this.position === Position.Top) {
if (this.position === 'top') {
/**
* New content is being added at the top, but the scrollTop position stays the same,
* which causes a scroll jump visually. This algorithm makes sure to prevent this.

4
core/src/components/input-shims/input-shims.tsx
View File

@ -54,14 +54,14 @@ export class InputShims {
@Listen('body:ionInputDidLoad')
protected onInputDidLoad(event: any) {
if (this.didLoad) {
this.registerInput(event.detail);
this.registerInput(event.target);
}
}
@Listen('body:ionInputDidUnload')
protected onInputDidUnload(event: any) {
if (this.didLoad) {
this.unregisterInput(event.detail);
this.unregisterInput(event.target);
}
}

7
core/src/components/input/input-base.tsx
View File

@ -1,11 +1,12 @@
// Shared Interfaces
import { EventEmitter } from '@stencil/core';
import { StyleEvent } from '../../utils/input-interfaces';
export interface InputBaseComponent {
ionStyle: EventEmitter;
ionBlur: EventEmitter;
ionFocus: EventEmitter;
ionStyle: EventEmitter<StyleEvent>;
ionBlur: EventEmitter<void>;
ionFocus: EventEmitter<void>;
clearOnEdit: boolean;
didBlurAfterEdit: boolean;

109
core/src/components/input/input.tsx
View File

@ -1,9 +1,9 @@
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { Mode } from '../..';
import { debounceEvent, deferEvent } from '../../utils/helpers';
import { InputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
import { createThemedClasses } from '../../utils/theme';
import { InputComponent } from './input-base';
import { Mode } from '../..';
@Component({
@ -18,43 +18,48 @@ import { Mode } from '../..';
})
export class Input implements InputComponent {
mode!: Mode;
color!: string;
private nativeInput: HTMLInputElement|undefined;
didBlurAfterEdit = false;
mode!: Mode;
color!: string;
@Element() el!: HTMLElement;
/**
* Emitted when the input value has changed.
* Emitted when a keyboard input ocurred.
*/
@Event() ionInput!: EventEmitter;
@Event() ionInput!: EventEmitter<KeyboardEvent>;
/**
* Emitted when the value has changed.
*/
@Event() ionChange!: EventEmitter<InputChangeEvent>;
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter;
@Event() ionStyle!: EventEmitter<StyleEvent>;
/**
* Emitted when the input loses focus.
*/
@Event() ionBlur!: EventEmitter;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the input has focus.
*/
@Event() ionFocus!: EventEmitter;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the input has been created.
*/
@Event() ionInputDidLoad!: EventEmitter;
@Event() ionInputDidLoad!: EventEmitter<void>;
/**
* Emitted when the input has been removed.
*/
@Event() ionInputDidUnload!: EventEmitter;
@Event() ionInputDidUnload!: EventEmitter<void>;
/**
* If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
@ -81,16 +86,6 @@ export class Input implements InputComponent {
*/
@Prop() autofocus = false;
/**
* If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
*/
@Prop() checked = false;
@Watch('checked')
protected checkedChanged() {
this.emitStyle();
}
/**
* If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
*/
@ -102,13 +97,13 @@ export class Input implements InputComponent {
@Prop({ mutable: true }) clearOnEdit!: boolean;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
@Prop() debounce = 0;
@Watch('debounce')
protected debounceChanged() {
this.ionInput = debounceEvent(this.ionInput, this.debounce);
this.ionChange = debounceEvent(this.ionChange, this.debounce);
}
/**
@ -213,9 +208,12 @@ export class Input implements InputComponent {
@Watch('value')
protected valueChanged() {
const inputEl = this.nativeInput;
if (inputEl && inputEl.value !== this.value) {
inputEl.value = this.value;
const value = this.value;
if (inputEl && inputEl.value !== value) {
inputEl.value = value;
}
this.emitStyle();
this.ionChange.emit({value});
}
componentWillLoad() {
@ -230,59 +228,60 @@ export class Input implements InputComponent {
this.debounceChanged();
this.emitStyle();
this.ionInputDidLoad.emit(this.el);
this.ionInputDidLoad.emit();
}
componentDidUnload() {
this.nativeInput = undefined;
this.ionInputDidUnload.emit(this.el);
this.ionInputDidUnload.emit();
}
private emitStyle() {
this.ionStyle.emit({
'input': true,
'input-checked': this.checked,
'input-disabled': this.disabled,
'input-has-value': this.hasValue(),
'input-has-focus': this.hasFocus()
});
}
private inputBlurred(ev: Event) {
this.ionBlur.emit(ev);
this.focusChange(this.hasFocus());
this.emitStyle();
}
private inputChanged(ev: Event) {
private onInput(ev: KeyboardEvent) {
const input = ev.target as HTMLInputElement;
if (input) {
this.value = ev.target && (ev.target as HTMLInputElement).value || '';
}
this.ionInput.emit(ev);
this.emitStyle();
}
private inputFocused(ev: Event) {
this.ionFocus.emit(ev);
this.focusChange(this.hasFocus());
private onBlur() {
this.focusChanged();
this.emitStyle();
this.ionBlur.emit();
}
private focusChange(inputHasFocus: boolean) {
private onFocus() {
this.focusChanged();
this.emitStyle();
this.ionFocus.emit();
}
private focusChanged() {
// If clearOnEdit is enabled and the input blurred but has a value, set a flag
if (this.clearOnEdit && !inputHasFocus && this.hasValue()) {
if (this.clearOnEdit && !this.hasFocus() && this.hasValue()) {
this.didBlurAfterEdit = true;
}
}
private inputKeydown(ev: Event) {
this.checkClearOnEdit(ev);
private inputKeydown() {
this.checkClearOnEdit();
}
/**
* Check if we need to clear the text input if clearOnEdit is enabled
*/
private checkClearOnEdit(ev: Event) {
private checkClearOnEdit() {
if (!this.clearOnEdit) {
return;
}
@ -290,16 +289,15 @@ export class Input implements InputComponent {
// Did the input value change after it was blurred and edited?
if (this.didBlurAfterEdit && this.hasValue()) {
// Clear the input
this.clearTextInput(ev);
this.clearTextInput();
}
// Reset the flag
this.didBlurAfterEdit = false;
}
private clearTextInput(ev: Event) {
private clearTextInput() {
this.value = '';
this.ionInput.emit(ev);
}
private hasFocus(): boolean {
@ -308,7 +306,7 @@ export class Input implements InputComponent {
}
private hasValue(): boolean {
return (this.value !== null && this.value !== undefined && this.value !== '');
return (this.value !== '');
}
render() {
@ -324,7 +322,6 @@ export class Input implements InputComponent {
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
checked={this.checked}
class={themedClasses}
disabled={this.disabled}
inputMode={this.inputmode}
@ -344,15 +341,15 @@ export class Input implements InputComponent {
size={this.size}
type={this.type}
value={this.value}
onBlur={this.inputBlurred.bind(this)}
onInput={this.inputChanged.bind(this)}
onFocus={this.inputFocused.bind(this)}
onInput={this.onInput.bind(this)}
onBlur={this.onBlur.bind(this)}
onFocus={this.onFocus.bind(this)}
onKeyDown={this.inputKeydown.bind(this)}
/>,
<button
type="button"
class="input-clear-icon"
hidden={this.clearInput !== true}
hidden={!this.clearInput}
onClick={this.clearTextInput.bind(this)}
onMouseDown={this.clearTextInput.bind(this)}/>
];

25
core/src/components/input/readme.md
View File

@ -42,13 +42,6 @@ boolean
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
#### checked
boolean
If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
#### clearInput
boolean
@ -67,7 +60,7 @@ If true, the value will be cleared after focus upon edit. Defaults to `true` whe
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
#### disabled
@ -233,13 +226,6 @@ boolean
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
#### checked
boolean
If true and the type is `checkbox` or `radio`, the control is selected by default. Defaults to `false`.
#### clear-input
boolean
@ -258,7 +244,7 @@ If true, the value will be cleared after focus upon edit. Defaults to `true` whe
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
#### disabled
@ -394,6 +380,11 @@ The value of the input.
Emitted when the input loses focus.
#### ionChange
Emitted when the value has changed.
#### ionFocus
Emitted when the input has focus.
@ -401,7 +392,7 @@ Emitted when the input has focus.
#### ionInput
Emitted when the input value has changed.
Emitted when a keyboard input ocurred.
#### ionInputDidLoad

6
core/src/components/item-options/item-options.tsx
View File

@ -25,7 +25,7 @@ export class ItemOptions {
/**
* Emitted when the item has been fully swiped.
*/
@Event() ionSwipe!: EventEmitter;
@Event() ionSwipe!: EventEmitter<void>;
@Method()
isRightSide() {
@ -38,8 +38,8 @@ export class ItemOptions {
}
@Method()
fireSwipeEvent(value: any) {
this.ionSwipe.emit(value);
fireSwipeEvent() {
this.ionSwipe.emit();
}
hostData() {

12
core/src/components/item-sliding/item-sliding.tsx
View File

@ -39,8 +39,8 @@ export class ItemSliding {
private optsWidthLeftSide = 0;
private sides = ItemSide.None;
private tmr: number|undefined;
private leftOptions: HTMLIonItemOptionsElement|undefined;
private rightOptions: HTMLIonItemOptionsElement|undefined;
private leftOptions?: HTMLIonItemOptionsElement;
private rightOptions?: HTMLIonItemOptionsElement;
private optsDirty = true;
@Element() el!: HTMLElement;
@ -202,9 +202,9 @@ export class ItemSliding {
this.setOpenAmount(restingPoint, true);
if (this.state & SlidingState.SwipeRight && this.rightOptions) {
this.rightOptions.fireSwipeEvent(this);
this.rightOptions.fireSwipeEvent();
} else if (this.state & SlidingState.SwipeLeft && this.leftOptions) {
this.leftOptions.fireSwipeEvent(this);
this.leftOptions.fireSwipeEvent();
}
}
@ -255,7 +255,9 @@ export class ItemSliding {
}
style.transform = `translate3d(${-openAmount}px,0,0)`;
this.ionDrag.emit(this);
this.ionDrag.emit({
amount: openAmount
});
}
hostData() {

3
core/src/components/label/label.tsx
View File

@ -1,5 +1,6 @@
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { Mode } from '../..';
import { StyleEvent } from '../../utils/input-interfaces';
@Component({
@ -39,7 +40,7 @@ export class Label {
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter;
@Event() ionStyle!: EventEmitter<StyleEvent>;
@Method()
getText(): string {

5
core/src/components/menu/menu.tsx
View File

@ -111,12 +111,12 @@ export class Menu {
/**
* Emitted when the menu is open.
*/
@Event() ionOpen!: EventEmitter;
@Event() ionOpen!: EventEmitter<void>;
/**
* Emitted when the menu is closed.
*/
@Event() ionClose!: EventEmitter;
@Event() ionClose!: EventEmitter<void>;
@Event() protected ionMenuChange!: EventEmitter<MenuChangeEventDetail>;
@ -446,7 +446,6 @@ export class Menu {
disabled={!this.isActive() || !this.swipeEnabled}
gestureName="menu-swipe"
gesturePriority={10}
type="pan"
direction="x"
threshold={10}
attachTo="window"

1
core/src/components/nav/nav.tsx
View File

@ -752,7 +752,6 @@ export class Nav implements NavOutlet {
onEnd={this.swipeBackEnd.bind(this)}
gestureName="goback-swipe"
gesturePriority={10}
type="pan"
direction="x"
threshold={10}
attachTo="body"/>,

1
core/src/components/picker-column/picker-column.tsx
View File

@ -420,7 +420,6 @@ export class PickerColumnCmp {
onEnd={this.onDragEnd.bind(this)}
gestureName="picker-swipe"
gesturePriority={10}
type="pan"
direction="y"
passive={false}
threshold={0}

13
core/src/components/radio-group/radio-group.tsx
View File

@ -1,5 +1,4 @@
import { Component, ComponentDidLoad, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { HTMLIonRadioElementEvent } from '../radio/radio';
import { InputChangeEvent, RadioGroupInput } from '../../utils/input-interfaces';
@ -53,8 +52,8 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
@Event() ionChange!: EventEmitter<InputChangeEvent>;
@Listen('ionRadioDidLoad')
onRadioDidLoad(ev: HTMLIonRadioElementEvent) {
const radio = ev.target;
onRadioDidLoad(ev: Event) {
const radio = ev.target as HTMLIonRadioElement;
radio.name = this.name;
// add radio to internal list
@ -71,16 +70,16 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
}
@Listen('ionRadioDidUnload')
onRadioDidUnload(ev: HTMLIonRadioElementEvent) {
const index = this.radios.indexOf(ev.target);
onRadioDidUnload(ev: Event) {
const index = this.radios.indexOf(ev.target as HTMLIonRadioElement);
if (index > -1) {
this.radios.splice(index, 1);
}
}
@Listen('ionSelect')
onRadioSelect(ev: HTMLIonRadioElementEvent) {
const selectedRadio = ev.target;
onRadioSelect(ev: Event) {
const selectedRadio = ev.target as HTMLIonRadioElement;
if (selectedRadio) {
this.value = selectedRadio.value;
}

19
core/src/components/radio/radio.tsx
View File

@ -1,4 +1,4 @@
import { BlurEvent, CheckedInputChangeEvent, FocusEvent, RadioButtonInput, StyleEvent } from '../../utils/input-interfaces';
import { CheckedInputChangeEvent, RadioButtonInput, StyleEvent } from '../../utils/input-interfaces';
import { Component, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
import { CssClassMap, Mode } from '../../index';
@ -59,12 +59,12 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
/**
* Emitted when the radio loads.
*/
@Event() ionRadioDidLoad!: EventEmitter;
@Event() ionRadioDidLoad!: EventEmitter<void>;
/**
* Emitted when the radio unloads.
*/
@Event() ionRadioDidUnload!: EventEmitter;
@Event() ionRadioDidUnload!: EventEmitter<void>;
/**
* Emitted when the styles change.
@ -79,12 +79,12 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
/**
* Emitted when the radio button has focus.
*/
@Event() ionFocus!: EventEmitter<FocusEvent>;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the radio button loses focus.
*/
@Event() ionBlur!: EventEmitter<BlurEvent>;
@Event() ionBlur!: EventEmitter<void>;
componentWillLoad() {
@ -98,7 +98,7 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
}
componentDidLoad() {
this.ionRadioDidLoad.emit({ radio: this });
this.ionRadioDidLoad.emit();
this.nativeInput.checked = this.checked;
const parentItem = this.nativeInput.closest('ion-item');
@ -112,7 +112,7 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
}
componentDidUnload() {
this.ionRadioDidUnload.emit({ radio: this });
this.ionRadioDidUnload.emit();
}
@Watch('color')
@ -207,9 +207,4 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
}
}
export interface HTMLIonRadioElementEvent extends CustomEvent {
target: HTMLIonRadioElement;
}
let radioButtonIds = 0;

15
core/src/components/range/range.tsx
View File

@ -1,7 +1,7 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { GestureDetail, Mode } from '../../index';
import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
import { BaseInput } from '../../utils/input-interfaces';
import { BaseInput, RangeInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
export interface Tick {
ratio: number | (() => number);
@ -116,32 +116,32 @@ export class Range implements BaseInput {
*/
@Prop({ mutable: true }) value: any;
@Watch('value')
protected valueChanged(val: boolean) {
this.ionChange.emit({value: val});
protected valueChanged(value: any) {
this.inputUpdated();
this.emitStyle();
this.ionChange.emit({value});
}
/**
* Emitted when the value property has changed.
*/
@Event() ionChange!: EventEmitter;
@Event() ionChange!: EventEmitter<RangeInputChangeEvent>;
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter;
@Event() ionStyle!: EventEmitter<StyleEvent>;
/**
* Emitted when the range has focus.
*/
@Event() ionFocus!: EventEmitter;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the range loses focus.
*/
@Event() ionBlur!: EventEmitter;
@Event() ionBlur!: EventEmitter<void>;
componentWillLoad() {
@ -423,7 +423,6 @@ export class Range implements BaseInput {
disabled={this.disabled}
gestureName="range"
gesturePriority={30}
type="pan"
direction="x"
threshold={0}>

12
core/src/components/refresher/refresher.tsx
View File

@ -82,17 +82,17 @@ export class Refresher {
* Updates the refresher state to `refreshing`. The `complete()` method should be
* called when the async operation has completed.
*/
@Event() ionRefresh!: EventEmitter;
@Event() ionRefresh!: EventEmitter<void>;
/**
* Emitted while the user is pulling down the content and exposing the refresher.
*/
@Event() ionPull!: EventEmitter;
@Event() ionPull!: EventEmitter<void>;
/**
* Emitted when the user begins to start pulling down.
*/
@Event() ionStart!: EventEmitter;
@Event() ionStart!: EventEmitter<void>;
constructor() {
this.gestureConfig = {
@ -260,11 +260,11 @@ export class Refresher {
// emit "start" if it hasn't started yet
if (!this.didStart) {
this.didStart = true;
this.ionStart.emit(this);
this.ionStart.emit();
}
// emit "pulling" on every move
this.ionPull.emit(this);
this.ionPull.emit();
// do nothing if the delta is less than the pull threshold
if (deltaY < pullMin) {
@ -312,7 +312,7 @@ export class Refresher {
// emit "refresh" because it was pulled down far enough
// and they let go to begin refreshing
this.ionRefresh.emit(this);
this.ionRefresh.emit();
}
private close(state: RefresherState, delay: string) {

14
core/src/components/searchbar/readme.md
View File

@ -82,7 +82,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
#### mode
@ -172,7 +172,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
#### mode
@ -231,6 +231,11 @@ Emitted when the input loses focus.
Emitted when the cancel button is clicked.
#### ionChange
Emitted when the value has changed.
#### ionClear
Emitted when the clear input button is clicked.
@ -241,11 +246,6 @@ Emitted when the clear input button is clicked.
Emitted when the input has focus.
#### ionInput
Emitted when the Searchbar input has changed, including when it's cleared.
----------------------------------------------

97
core/src/components/searchbar/searchbar.tsx
View File

@ -3,6 +3,7 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@st
import { createThemedClasses } from '../../utils/theme';
import { debounceEvent } from '../../utils/helpers';
import { Mode } from '../..';
import { InputChangeEvent } from '../../utils/input-interfaces';
@Component({
@ -16,6 +17,8 @@ import { Mode } from '../..';
}
})
export class Searchbar {
private nativeInput!: HTMLInputElement;
private isCancelVisible = false;
private shouldBlur = true;
private shouldAlignLeft = true;
@ -63,13 +66,13 @@ export class Searchbar {
@Prop() cancelButtonText = 'Cancel';
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
*/
@Prop() debounce = 250;
@Watch('debounce')
protected debounceChanged() {
this.ionInput = debounceEvent(this.ionInput, this.debounce);
this.ionChange = debounceEvent(this.ionChange, this.debounce);
}
/**
@ -98,29 +101,44 @@ export class Searchbar {
@Prop({ mutable: true }) value = '';
/**
* Emitted when the Searchbar input has changed, including when it's cleared.
* Emitted when a keyboard input ocurred.
*/
@Event() ionInput!: EventEmitter;
@Event() ionInput!: EventEmitter<KeyboardEvent>;
/**
* Emitted when the value has changed.
*/
@Event() ionChange!: EventEmitter<InputChangeEvent>;
/**
* Emitted when the cancel button is clicked.
*/
@Event() ionCancel!: EventEmitter;
@Event() ionCancel!: EventEmitter<void>;
/**
* Emitted when the clear input button is clicked.
*/
@Event() ionClear!: EventEmitter;
@Event() ionClear!: EventEmitter<void>;
/**
* Emitted when the input loses focus.
*/
@Event() ionBlur!: EventEmitter;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the input has focus.
*/
@Event() ionFocus!: EventEmitter;
@Event() ionFocus!: EventEmitter<void>;
@Watch('value')
protected valueChanged() {
const inputEl = this.nativeInput;
const value = this.value;
if (inputEl && inputEl.value !== value) {
inputEl.value = value;
}
this.ionChange.emit({value});
}
componentDidLoad() {
this.positionElements();
@ -130,8 +148,8 @@ export class Searchbar {
/**
* Clears the input field and triggers the control change.
*/
clearInput(ev: UIEvent) {
this.ionClear.emit({event: ev});
private clearInput() {
this.ionClear.emit();
// setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
// wait for 4 frames
@ -139,7 +157,6 @@ export class Searchbar {
const value = this.value;
if (value !== undefined && value !== '') {
this.value = '';
this.ionInput.emit({event: ev});
}
}, 16 * 4);
this.shouldBlur = false;
@ -150,10 +167,10 @@ export class Searchbar {
* the clearInput function doesn't want the input to blur
* then calls the custom cancel function if the user passed one in.
*/
cancelSearchbar(ev: UIEvent) {
this.ionCancel.emit({event: ev});
private cancelSearchbar() {
this.ionCancel.emit();
this.clearInput(ev);
this.clearInput();
this.shouldBlur = true;
this.activated = false;
}
@ -161,12 +178,15 @@ export class Searchbar {
/**
* Update the Searchbar input value when the input changes
*/
inputChanged(ev: Event) {
this.value = ev.target && (ev.target as HTMLInputElement).value || '';
private onInput(ev: KeyboardEvent) {
const input = ev.target as HTMLInputElement;
if (input) {
this.value = input.value;
}
this.ionInput.emit(ev);
}
inputUpdated() {
private inputUpdated() {
// const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElment;
// It is important not to re-assign the value if it is the same, because,
// otherwise, the caret is moved to the end of the input
@ -182,7 +202,7 @@ export class Searchbar {
* Sets the Searchbar to not focused and checks if it should align left
* based on whether there is a value in the searchbar or not.
*/
inputBlurred() {
private onBlur() {
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
// shouldBlur determines if it should blur
@ -190,7 +210,7 @@ export class Searchbar {
if (this.shouldBlur === false) {
inputEl.focus();
this.shouldBlur = true;
this.ionBlur.emit({this: this});
this.ionBlur.emit();
this.inputUpdated();
return;
}
@ -202,11 +222,11 @@ export class Searchbar {
/**
* Sets the Searchbar to focused and active on input focus.
*/
inputFocused() {
private onFocus() {
this.activated = true;
this.focused = true;
this.ionFocus.emit({this: this});
this.ionFocus.emit();
this.inputUpdated();
this.positionElements();
@ -216,7 +236,7 @@ export class Searchbar {
* Positions the input search icon, placeholder, and the cancel button
* based on the input value and if it is focused. (ios only)
*/
positionElements() {
private positionElements() {
const prevAlignLeft = this.shouldAlignLeft;
const shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true);
this.shouldAlignLeft = shouldAlignLeft;
@ -237,7 +257,7 @@ export class Searchbar {
/**
* Positions the input placeholder
*/
positionPlaceholder() {
private positionPlaceholder() {
const isRTL = this.doc.dir === 'rtl';
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
@ -277,7 +297,7 @@ export class Searchbar {
/**
* Show the iOS Cancel button on focus, hide it offscreen otherwise
*/
positionCancelButton() {
private positionCancelButton() {
const isRTL = this.doc.dir === 'rtl';
const cancelButton = this.el.querySelector('.searchbar-cancel-button-ios') as HTMLElement;
const shouldShowCancel = this.focused;
@ -309,7 +329,7 @@ export class Searchbar {
class: {
'searchbar-active': this.activated,
'searchbar-animated': this.animated,
'searchbar-has-value': (this.value !== undefined && this.value !== ''),
'searchbar-has-value': (this.value !== ''),
'searchbar-show-cancel': this.showCancelButton,
'searchbar-left-aligned': this.shouldAlignLeft,
'searchbar-has-focus': this.focused
@ -321,8 +341,7 @@ export class Searchbar {
const cancelButtonClasses = createThemedClasses(this.mode, this.color, 'searchbar-cancel-button');
const searchIconClasses = createThemedClasses(this.mode, this.color, 'searchbar-search-icon');
const cancelButton =
this.showCancelButton
const cancelButton = (this.showCancelButton)
? <button
type="button"
tabindex={this.mode === 'ios' && !this.activated ? -1 : undefined}
@ -335,34 +354,30 @@ export class Searchbar {
</button>
: null;
const searchbar: JSX.Element[] = [
return [
<div class="searchbar-input-container">
{ this.mode === 'md' ? cancelButton : null }
{ this.mode === 'md' && cancelButton }
<div class={searchIconClasses}></div>
<input
ref={(el) => this.nativeInput = el as HTMLInputElement}
class="searchbar-input"
onInput={this.inputChanged.bind(this)}
onBlur={this.inputBlurred.bind(this)}
onFocus={this.inputFocused.bind(this)}
onInput={this.onInput.bind(this)}
onBlur={this.onBlur.bind(this)}
onFocus={this.onFocus.bind(this)}
placeholder={this.placeholder}
type={this.type}
value={this.value}
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
spellCheck={this.spellcheck}/>
<button
type="button"
class="searchbar-clear-icon"
onClick={this.clearInput.bind(this)}
onMouseDown={this.clearInput.bind(this)}>
</button>
</div>
onMouseDown={this.clearInput.bind(this)}/>
</div>,
this.mode === 'ios' && cancelButton
];
if (cancelButton && this.mode === 'ios') {
searchbar.push(cancelButton);
}
return searchbar;
}
}

2
core/src/components/searchbar/test/basic/index.html
View File

@ -105,7 +105,7 @@
const searchbars = document.querySelectorAll('ion-searchbar')
for (let i = 0; i < searchbars.length; i++) {
searchbars[i].addEventListener('ionInput', (ev) => {
searchbars[i].addEventListener('ionChange', (ev) => {
console.log(ev);
})
}

2
core/src/components/searchbar/test/preview/index.html
View File

@ -105,7 +105,7 @@
const searchbars = document.querySelectorAll('ion-searchbar')
for (let i = 0; i < searchbars.length; i++) {
searchbars[i].addEventListener('ionInput', (ev) => {
searchbars[i].addEventListener('ionChange', (ev) => {
console.log(ev);
})
}

2
core/src/components/segment-button/readme.md
View File

@ -108,7 +108,7 @@ The value of the segment button.
## Events
#### ionClick
#### ionSelect
Emitted when the segment button is clicked.

22
core/src/components/segment-button/segment-button.tsx
View File

@ -12,7 +12,6 @@ let ids = 0;
}
})
export class SegmentButton {
styleTmr: any;
@Element() el!: HTMLElement;
@ -49,31 +48,20 @@ export class SegmentButton {
/**
* The value of the segment button.
*/
@Prop({ mutable: true }) value!: string;
@Prop() value: string = 'ion-sb-' + (ids++);
/**
* Emitted when the segment button is clicked.
*/
@Event() ionClick!: EventEmitter;
componentWillLoad() {
if (this.value === undefined) {
this.value = `ion-sb-${ids++}`;
}
}
@Event() ionSelect!: EventEmitter<void>;
/**
* Emit the click event to the parent segment
*/
private segmentButtonClick() {
clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => {
this.ionClick.emit();
});
private onClick() {
this.ionSelect.emit();
}
render() {
const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
const hostClasses = getElementClassMap(this.el.classList);
@ -97,7 +85,7 @@ export class SegmentButton {
class={buttonClasses}
disabled={this.disabled}
href={this.href}
onClick={this.segmentButtonClick.bind(this)}>
onClick={this.onClick.bind(this)}>
<slot></slot>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType>

4
core/src/components/segment-button/usage/angular.md
View File

@ -2,10 +2,10 @@
```html
<!-- Segment buttons with text and click listeners -->
<ion-segment>
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
Friends
</ion-segment-button>
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
Enemies
</ion-segment-button>
</ion-segment>

2
core/src/components/segment-button/usage/javascript.md
View File

@ -51,7 +51,7 @@
// Listen for ionClick on all segment buttons
const segmentButtons = document.querySelectorAll('ion-segment-button')
for (let i = 0; i < segmentButtons.length; i++) {
segmentButtons[i].addEventListener('ionClick', (ev) => {
segmentButtons[i].addEventListener('ionSelect', (ev) => {
console.log('Segment button clicked', ev);
})
}

5
core/src/components/segment/segment.tsx
View File

@ -1,5 +1,6 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { Mode } from '../..';
import { InputChangeEvent } from '../../utils/input-interfaces';
@Component({
@ -47,9 +48,9 @@ export class Segment {
/**
* Emitted when the value property has changed.
*/
@Event() ionChange!: EventEmitter;
@Event() ionChange!: EventEmitter<InputChangeEvent>;
@Listen('ionClick')
@Listen('ionSelect')
segmentClick(ev: CustomEvent) {
const selectedButton = ev.target as HTMLIonSegmentButtonElement;
this.value = selectedButton.value;

2
core/src/components/segment/test/preview/index.html
View File

@ -197,7 +197,7 @@
// Listen for ionClick on all segment buttons
const segmentButtons = document.querySelectorAll('ion-segment-button')
for (let i = 0; i < segmentButtons.length; i++) {
segmentButtons[i].addEventListener('ionClick', (ev) => {
segmentButtons[i].addEventListener('ionSelect', (ev) => {
console.log('Segment button clicked', ev);
})
}

4
core/src/components/select-option/select-option.tsx
View File

@ -31,12 +31,12 @@ export class SelectOption {
/**
* Emitted when the select option loads.
*/
@Event() ionSelectOptionDidLoad!: EventEmitter;
@Event() ionSelectOptionDidLoad!: EventEmitter<void>;
/**
* Emitted when the select option unloads.
*/
@Event() ionSelectOptionDidUnload!: EventEmitter;
@Event() ionSelectOptionDidUnload!: EventEmitter<void>;
componentWillLoad() {
if (this.value === undefined) {

12
core/src/components/select/select.tsx
View File

@ -1,7 +1,7 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';
import { CssClassMap, Mode } from '../../index';
import { HTMLIonSelectOptionElementEvent } from '../select-option/select-option';
import { BlurEvent, FocusEvent, SelectInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
import { SelectInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
import { ActionSheetButton, ActionSheetOptions } from '../action-sheet/action-sheet';
import { AlertOptions } from '../alert/alert';
@ -104,17 +104,17 @@ export class Select {
/**
* Emitted when the selection is cancelled.
*/
@Event() ionCancel!: EventEmitter;
@Event() ionCancel!: EventEmitter<void>;
/**
* Emitted when the select has focus.
*/
@Event() ionFocus!: EventEmitter<FocusEvent>;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the select loses focus.
*/
@Event() ionBlur!: EventEmitter<BlurEvent>;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the styles change.
@ -350,7 +350,7 @@ export class Select {
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit(this);
this.ionCancel.emit();
}
});
@ -388,7 +388,7 @@ export class Select {
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit(this);
this.ionCancel.emit();
}
},
{

2
core/src/components/split-pane/split-pane.tsx
View File

@ -47,7 +47,7 @@ export class SplitPane {
/**
* Emitted when the split pane is visible.
*/
@Event() ionChange!: EventEmitter;
@Event() ionChange!: EventEmitter<{visible: boolean}>;
/**
* Expression to be called when the split-pane visibility has changed

4
core/src/components/tabs/tabs.tsx
View File

@ -70,7 +70,7 @@ export class Tabs implements NavOutlet {
/**
* Emitted when the tab changes.
*/
@Event() ionChange!: EventEmitter;
@Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>;
@Event() ionNavWillChange!: EventEmitter<void>;
@Event() ionNavDidChange!: EventEmitter<void>;
@ -251,7 +251,7 @@ export class Tabs implements NavOutlet {
if (leavingTab) {
leavingTab.active = false;
}
this.ionChange.emit(selectedTab);
this.ionChange.emit({tab: selectedTab});
this.ionNavDidChange.emit();
}
}

11
core/src/components/textarea/readme.md
View File

@ -89,7 +89,7 @@ The visible width of the text control, in average character widths. If it is spe
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
#### disabled
@ -210,7 +210,7 @@ The visible width of the text control, in average character widths. If it is spe
number
Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
#### disabled
@ -297,6 +297,11 @@ Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `
Emitted when the input loses focus.
#### ionChange
Emitted when the input value has changed.
#### ionFocus
Emitted when the input has focus.
@ -304,7 +309,7 @@ Emitted when the input has focus.
#### ionInput
Emitted when the input value has changed.
Emitted when a keyboard input ocurred.
#### ionStyle

97
core/src/components/textarea/textarea.tsx
View File

@ -1,18 +1,14 @@
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { debounceEvent } from '../../utils/helpers';
import { debounceEvent, deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
import { TextareaComponent } from '../input/input-base';
import { Mode } from '../..';
import { InputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
@Component({
tag: 'ion-textarea',
// TODO: separate textarea from input scss
// right now we're cheating by knowing ion-input
// css is bundled with ion-textarea
styleUrls: {
ios: 'textarea.ios.scss',
md: 'textarea.md.scss'
@ -22,6 +18,7 @@ import { Mode } from '../..';
}
})
export class Textarea implements TextareaComponent {
mode!: Mode;
color!: string;
@ -33,22 +30,27 @@ export class Textarea implements TextareaComponent {
/**
* Emitted when the input value has changed.
*/
@Event() ionInput!: EventEmitter;
@Event() ionChange!: EventEmitter<InputChangeEvent>;
/**
* Emitted when a keyboard input ocurred.
*/
@Event() ionInput!: EventEmitter<KeyboardEvent>;
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter;
@Event() ionStyle!: EventEmitter<StyleEvent>;
/**
* Emitted when the input loses focus.
*/
@Event() ionBlur!: EventEmitter;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the input has focus.
*/
@Event() ionFocus!: EventEmitter;
@Event() ionFocus!: EventEmitter<void>;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
@ -71,13 +73,13 @@ export class Textarea implements TextareaComponent {
@Prop({ mutable: true }) clearOnEdit = false;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `0`.
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
*/
@Prop() debounce = 0;
@Watch('debounce')
protected debounceChanged() {
this.ionInput = debounceEvent(this.ionInput, this.debounce);
this.ionChange = debounceEvent(this.ionChange, this.debounce);
}
/**
@ -151,65 +153,62 @@ export class Textarea implements TextareaComponent {
@Watch('value')
protected valueChanged() {
const inputEl = this.el.querySelector('textarea')!;
if (inputEl.value !== this.value) {
inputEl.value = this.value;
const value = this.value;
if (inputEl.value !== value) {
inputEl.value = value;
}
this.ionChange.emit({value});
}
componentDidLoad() {
this.ionStyle = deferEvent(this.ionStyle);
this.debounceChanged();
this.emitStyle();
}
private emitStyle() {
clearTimeout(this.styleTmr);
const styles = {
this.ionStyle.emit({
'textarea': true,
'input': true,
'input-disabled': this.disabled,
'input-has-value': this.hasValue(),
'input-has-focus': this.hasFocus()
};
this.styleTmr = setTimeout(() => {
this.ionStyle.emit(styles);
});
}
clearTextInput(ev: Event) {
private clearTextInput() {
this.value = '';
this.ionInput.emit(ev);
}
inputBlurred(ev: Event) {
this.ionBlur.emit(ev);
this.focusChange(this.hasFocus());
this.emitStyle();
}
inputChanged(ev: Event) {
private onInput(ev: KeyboardEvent) {
this.value = ev.target && (ev.target as HTMLInputElement).value || '';
this.emitStyle();
this.ionInput.emit(ev);
this.emitStyle();
}
inputFocused(ev: Event) {
this.ionFocus.emit(ev);
this.focusChange(this.hasFocus());
private onFocus() {
this.focusChange();
this.emitStyle();
this.ionFocus.emit();
}
inputKeydown(ev: Event) {
this.checkClearOnEdit(ev);
private onBlur() {
this.focusChange();
this.emitStyle();
this.ionBlur.emit();
}
private onKeyDown() {
this.checkClearOnEdit();
}
/**
* Check if we need to clear the text input if clearOnEdit is enabled
*/
checkClearOnEdit(ev: Event) {
private checkClearOnEdit() {
if (!this.clearOnEdit) {
return;
}
@ -217,27 +216,27 @@ export class Textarea implements TextareaComponent {
// Did the input value change after it was blurred and edited?
if (this.didBlurAfterEdit && this.hasValue()) {
// Clear the input
this.clearTextInput(ev);
this.clearTextInput();
}
// Reset the flag
this.didBlurAfterEdit = false;
}
focusChange(inputHasFocus: boolean) {
private focusChange() {
// If clearOnEdit is enabled and the input blurred but has a value, set a flag
if (this.clearOnEdit && !inputHasFocus && this.hasValue()) {
if (this.clearOnEdit && !this.hasFocus() && this.hasValue()) {
this.didBlurAfterEdit = true;
}
}
hasFocus(): boolean {
private hasFocus(): boolean {
// check if an input has focus or not
return this.el && (this.el.querySelector(':focus') === this.el.querySelector('textarea'));
}
hasValue(): boolean {
return (this.value !== null && this.value !== undefined && this.value !== '');
private hasValue(): boolean {
return this.value !== '';
}
render() {
@ -261,10 +260,10 @@ export class Textarea implements TextareaComponent {
rows={this.rows}
wrap={this.wrap}
class={themedClasses}
onBlur={this.inputBlurred.bind(this)}
onInput={this.inputChanged.bind(this)}
onFocus={this.inputFocused.bind(this)}
onKeyDown={this.inputKeydown.bind(this)}
onInput={this.onInput.bind(this)}
onBlur={this.onBlur.bind(this)}
onFocus={this.onFocus.bind(this)}
onKeyDown={this.onKeyDown.bind(this)}
>
{this.value}
</textarea>

2
core/src/components/toggle/readme.md
View File

@ -88,7 +88,6 @@ The name of the control, which is submitted with the form data.
string
// TODO!
the value of the toggle.
@ -137,7 +136,6 @@ The name of the control, which is submitted with the form data.
string
// TODO!
the value of the toggle.

39
core/src/components/toggle/toggle.tsx
View File

@ -1,4 +1,4 @@
import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
import { CheckboxInput, CheckedInputChangeEvent, StyleEvent } from '../../utils/input-interfaces';
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { GestureDetail, Mode } from '../../index';
import { hapticSelection } from '../../utils/haptic';
@ -18,7 +18,6 @@ import { deferEvent } from '../../utils/helpers';
export class Toggle implements CheckboxInput {
private inputId = `ion-tg-${toggleIds++}`;
private gestureConfig: any;
private nativeInput!: HTMLInputElement;
private pivotX = 0;
@ -53,10 +52,9 @@ export class Toggle implements CheckboxInput {
/*
* If true, the user cannot interact with the toggle. Default false.
*/
@Prop({ mutable: true }) disabled = false;
@Prop() disabled = false;
/**
* // TODO!
* the value of the toggle.
*/
@Prop() value = 'on';
@ -69,12 +67,12 @@ export class Toggle implements CheckboxInput {
/**
* Emitted when the toggle has focus.
*/
@Event() ionFocus!: EventEmitter<FocusEvent>;
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the toggle loses focus.
*/
@Event() ionBlur!: EventEmitter<BlurEvent>;
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the styles change.
@ -100,21 +98,6 @@ export class Toggle implements CheckboxInput {
});
}
constructor() {
this.gestureConfig = {
'onStart': this.onDragStart.bind(this),
'onMove': this.onDragMove.bind(this),
'onEnd': this.onDragEnd.bind(this),
'gestureName': 'toggle',
'passive': false,
'gesturePriority': 30,
'type': 'pan',
'direction': 'x',
'threshold': 0,
'attachTo': 'parent'
};
}
componentWillLoad() {
this.ionStyle = deferEvent(this.ionStyle);
this.emitStyle();
@ -190,8 +173,18 @@ export class Toggle implements CheckboxInput {
render() {
return [
<ion-gesture {...this.gestureConfig}
disabled={this.disabled} tabIndex={-1}>
<ion-gesture
onStart={this.onDragStart.bind(this)}
onMove={this.onDragMove.bind(this)}
onEnd={this.onDragEnd.bind(this)}
gestureName="toggle"
passive={false}
gesturePriority={30}
direction="x"
threshold={0}
attachTo="parent"
disabled={this.disabled}
tabIndex={-1}>
<div class="toggle-icon">
<div class="toggle-inner"/>
</div>

2
core/src/index.d.ts vendored
View File

@ -67,7 +67,7 @@ export { PickerController } from './components/picker-controller/picker-controll
export * from './components/popover/popover';
export { PopoverController } from './components/popover-controller/popover-controller';
export { RadioGroup } from './components/radio-group/radio-group';
export { Radio, HTMLIonRadioElementEvent } from './components/radio/radio';
export { Radio } from './components/radio/radio';
export { Range, RangeEvent } from './components/range/range';
export { RangeKnob } from './components/range-knob/range-knob';
export { ReorderGroup, reorderArray } from './components/reorder-group/reorder-group';

29
core/src/utils/input-interfaces.ts
View File

@ -39,12 +39,12 @@ export interface CheckboxInput extends BaseInput {
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
@ -77,12 +77,12 @@ export interface RadioButtonInput extends BaseInput {
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
ionFocus: EventEmitter<void>;
}
export interface RadioGroupInput extends BaseInput {
@ -119,12 +119,12 @@ export interface SelectInput extends BaseInput {
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
@ -151,12 +151,12 @@ export interface TextInput extends BaseInput {
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
@ -179,12 +179,12 @@ export interface TextMultiLineInput extends TextInput {
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<BlurEvent>;
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<FocusEvent>;
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
@ -204,6 +204,11 @@ export interface CheckedInputChangeEvent extends InputChangeEvent {
checked: boolean;
}
export interface RangeInputChangeEvent {
value: any;
}
export interface SelectInputChangeEvent {
value: string|string[]|undefined;
text: string;
@ -212,7 +217,3 @@ export interface SelectInputChangeEvent {
export interface StyleEvent {
[styleName: string]: boolean;
}
export interface FocusEvent {}
export interface BlurEvent {}

8
core/src/utils/overlays.ts
View File

@ -181,10 +181,10 @@ export interface OverlayInterface {
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
didPresent: EventEmitter;
willPresent: EventEmitter;
willDismiss: EventEmitter;
didDismiss: EventEmitter;
didPresent: EventEmitter<void>;
willPresent: EventEmitter<void>;
willDismiss: EventEmitter<OverlayEventDetail>;
didDismiss: EventEmitter<OverlayEventDetail>;
present(): Promise<void>;
dismiss(data?: any, role?: string): Promise<void>;