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

fix(picker): haptics now work properly (#21268)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-05-11 15:10:19 -04:00
committed by GitHub
parent 1fbdb2255e
commit 8e11ecc136
4 changed files with 6 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global';
import { Gesture, GestureDetail, PickerColumn } from '../../interface';
import { hapticSelectionChanged } from '../../utils/haptic';
import { clamp } from '../../utils/helpers';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
/**
* @internal
@ -226,6 +226,7 @@ export class PickerColumnCmp implements ComponentInterface {
} else {
this.velocity = 0;
this.emitColChange();
hapticSelectionEnd();
}
} else if (this.y % this.optHeight !== 0) {
@ -252,6 +253,8 @@ export class PickerColumnCmp implements ComponentInterface {
detail.event.preventDefault();
detail.event.stopPropagation();
hapticSelectionStart();
// reset everything
cancelAnimationFrame(this.rafId);
const options = this.col.options;

2
core/src/components/reorder-group/reorder-group.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { getIonMode } from '../../global/ionic-global';
import { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
const enum ReorderGroupState {
Idle = 0,

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

@ -2,8 +2,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
import { hapticSelection } from '../../utils/haptic';
import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { hapticSelection } from '../../utils/native/haptic';
import { createColorClasses, hostContext } from '../../utils/theme';
/**

72
core/src/utils/haptic.ts
View File

@ -1,72 +0,0 @@
/**
* Check to see if the Haptic Plugin is available
* @return Returns `true` or false if the plugin is available
*/
export const hapticAvailable = (): boolean => {
const engine = (window as any).TapticEngine;
return !!engine;
};
/**
* Trigger a selection changed haptic event. Good for one-time events
* (not for gestures)
*/
export const hapticSelection = () => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.selection();
}
};
/**
* Tell the haptic engine that a gesture for a selection change is starting.
*/
export const hapticSelectionStart = () => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.gestureSelectionStart();
}
};
/**
* Tell the haptic engine that a selection changed during a gesture.
*/
export const hapticSelectionChanged = () => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.gestureSelectionChanged();
}
};
/**
* Tell the haptic engine we are done with a gesture. This needs to be
* called lest resources are not properly recycled.
*/
export const hapticSelectionEnd = () => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.gestureSelectionEnd();
}
};
/**
* Use this to indicate success/failure/warning to the user.
* options should be of the type `{ type: 'success' }` (or `warning`/`error`)
*/
export const hapticNotification = (options: { type: 'success' | 'warning' | 'error' }) => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.notification(options);
}
};
/**
* Use this to indicate success/failure/warning to the user.
* options should be of the type `{ style: 'light' }` (or `medium`/`heavy`)
*/
export const hapticImpact = (options: { style: 'light' | 'medium' | 'heavy' }) => {
const engine = (window as any).TapticEngine;
if (engine) {
engine.impact(options);
}
};