javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): apply validation classes properly

Browse Source 
* fix(angular): add validation classes to ion-item

* fix(inputs): focus handling

fixes #17171
fixes #16052
fixes #15572
fixes #16452
fixes #17063
This commit is contained in:
Manu MA
2019-01-19 22:56:00 +01:00
committed by GitHub
parent 7832be3f1c
commit 2b4d7b7be9
14 changed files with 241 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,8 +16,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
export class Toggle implements ComponentInterface {
private inputId = `ion-tg-${toggleIds++}`;
private pivotX = 0;
private gesture?: Gesture;
private buttonEl?: HTMLElement;
private lastDrag = 0;
@Element() el!: HTMLElement;
@ -108,8 +109,9 @@ export class Toggle implements ComponentInterface {
queue: this.queue,
gestureName: 'toggle',
gesturePriority: 100,
threshold: 0,
onStart: ev => this.onStart(ev),
threshold: 5,
passive: false,
onStart: () => this.onStart(),
onMove: ev => this.onMove(ev),
onEnd: ev => this.onEnd(ev),
});
@ -118,7 +120,9 @@ export class Toggle implements ComponentInterface {
@Listen('click')
onClick() {
this.checked = !this.checked;
if (this.lastDrag + 300 < Date.now()) {
this.checked = !this.checked;
}
}
private emitStyle() {
@ -127,38 +131,37 @@ export class Toggle implements ComponentInterface {
});
}
private onStart(detail: GestureDetail) {
this.pivotX = detail.currentX;
private onStart() {
this.activated = true;
// touch-action does not work in iOS
detail.event.preventDefault();
return true;
this.setFocus();
}
private onMove(detail: GestureDetail) {
const currentX = detail.currentX;
if (shouldToggle(this.checked, currentX - this.pivotX, -15)) {
if (shouldToggle(this.checked, detail.deltaX, -10)) {
this.checked = !this.checked;
this.pivotX = currentX;
hapticSelection();
}
}
private onEnd(detail: GestureDetail) {
const delta = detail.currentX - this.pivotX;
if (shouldToggle(this.checked, delta, 4)) {
this.checked = !this.checked;
hapticSelection();
}
private onEnd(ev: GestureDetail) {
this.activated = false;
this.lastDrag = Date.now();
ev.event.preventDefault();
ev.event.stopImmediatePropagation();
}
private getValue() {
return this.value || '';
}
private setFocus() {
if (this.buttonEl) {
this.buttonEl.focus();
}
}
private onFocus = () => {
this.ionFocus.emit();
}
@ -205,6 +208,7 @@ export class Toggle implements ComponentInterface {
onFocus={this.onFocus}
onBlur={this.onBlur}
disabled={this.disabled}
ref={el => this.buttonEl = el}
>
</button>
];