refactor(gesture): update Gesture API to latest (#19671)

core/src/components/content/content.tsx

@@ -36,14 +36,14 @@ export class Content implements ComponentInterface {
     event: undefined!,
     startX: 0,
     startY: 0,
-    startTimeStamp: 0,
+    startTime: 0,
     currentX: 0,
     currentY: 0,
     velocityX: 0,
     velocityY: 0,
     deltaX: 0,
     deltaY: 0,
-    timeStamp: 0,
+    currentTime: 0,
     data: undefined,
     isScrolling: true,
   };
@@ -379,19 +379,19 @@ const updateScrollDetail = (
 ) => {
   const prevX = detail.currentX;
   const prevY = detail.currentY;
-  const prevT = detail.timeStamp;
+  const prevT = detail.currentTime;
   const currentX = el.scrollLeft;
   const currentY = el.scrollTop;
   const timeDelta = timestamp - prevT;
 
   if (shouldStart) {
     // remember the start positions
-    detail.startTimeStamp = timestamp;
+    detail.startTime = timestamp;
     detail.startX = currentX;
     detail.startY = currentY;
     detail.velocityX = detail.velocityY = 0;
   }
-  detail.timeStamp = timestamp;
+  detail.currentTime = timestamp;
   detail.currentX = detail.scrollLeft = currentX;
   detail.currentY = detail.scrollTop = currentY;
   detail.deltaX = currentX - detail.startX;

core/src/components/item-sliding/item-sliding.tsx

@@ -55,7 +55,7 @@ export class ItemSliding implements ComponentInterface {
   @Watch('disabled')
   disabledChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
   }
 

core/src/components/menu/menu.tsx

@@ -229,7 +229,7 @@ AFTER:
 
   @Listen('click', { capture: true })
   onBackdropClick(ev: any) {
-    if (this._isOpen && this.lastOnEnd < ev.timeStamp - 100) {
+    if (this._isOpen && this.lastOnEnd < ev.currentTime - 100) {
       const shouldClose = (ev.composedPath)
         ? !ev.composedPath().includes(this.menuInnerEl)
         : false;
@@ -428,7 +428,7 @@ AFTER:
       shouldOpen = true;
     }
 
-    this.lastOnEnd = detail.timeStamp;
+    this.lastOnEnd = detail.currentTime;
 
     // Account for rounding errors in JS
     let newStepValue = (shouldComplete) ? 0.001 : -0.001;
@@ -520,7 +520,7 @@ AFTER:
   private updateState() {
     const isActive = this._isActive();
     if (this.gesture) {
-      this.gesture.setDisabled(!isActive || !this.swipeGesture);
+      this.gesture.enable(isActive && this.swipeGesture);
     }
 
     // Close menu immediately

core/src/components/nav/nav.tsx

@@ -38,7 +38,7 @@ export class Nav implements NavOutlet {
   @Watch('swipeGesture')
   swipeGestureChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.swipeGesture !== true);
+      this.gesture.enable(this.swipeGesture === true);
     }
   }
 

core/src/components/picker-column/picker-column.tsx

@@ -70,7 +70,7 @@ export class PickerColumnCmp implements ComponentInterface {
       onMove: ev => this.onMove(ev),
       onEnd: ev => this.onEnd(ev),
     });
-    this.gesture.setDisabled(false);
+    this.gesture.enable();
     this.tmrId = setTimeout(() => {
       this.noAnimate = false;
       this.refresh(true);

core/src/components/range/range.tsx

@@ -113,7 +113,7 @@ export class Range implements ComponentInterface {
   @Watch('disabled')
   protected disabledChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
     this.emitStyle();
   }
@@ -194,7 +194,7 @@ export class Range implements ComponentInterface {
         onMove: ev => this.onMove(ev),
         onEnd: ev => this.onEnd(ev),
       });
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
   }
 

core/src/components/refresher/refresher.tsx

@@ -75,7 +75,7 @@ export class Refresher implements ComponentInterface {
   @Watch('disabled')
   disabledChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
   }
 

core/src/components/reorder-group/reorder-group.tsx

@@ -41,7 +41,7 @@ export class ReorderGroup implements ComponentInterface {
   @Watch('disabled')
   disabledChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
   }
 

core/src/components/router-outlet/route-outlet.tsx

@@ -47,7 +47,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   @Watch('swipeHandler')
   swipeHandlerChanged() {
     if (this.gesture) {
-      this.gesture.setDisabled(this.swipeHandler === undefined);
+      this.gesture.enable(this.swipeHandler !== undefined);
     }
   }
 

core/src/components/toggle/toggle.tsx

@@ -92,7 +92,7 @@ export class Toggle implements ComponentInterface {
   disabledChanged() {
     this.emitStyle();
     if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
     }
   }
 

core/src/utils/gesture/index.ts

@@ -31,14 +31,14 @@ export const createGesture = (config: GestureConfig): Gesture => {
     type: 'pan',
     startX: 0,
     startY: 0,
-    startTimeStamp: 0,
+    startTime: 0,
     currentX: 0,
     currentY: 0,
     velocityX: 0,
     velocityY: 0,
     deltaX: 0,
     deltaY: 0,
-    timeStamp: 0,
+    currentTime: 0,
     event: undefined as any,
     data: undefined
   };
@@ -59,7 +59,7 @@ export const createGesture = (config: GestureConfig): Gesture => {
     updateDetail(ev, detail);
     detail.startX = detail.currentX;
     detail.startY = detail.currentY;
-    detail.startTimeStamp = detail.timeStamp = timeStamp;
+    detail.startTime = detail.currentTime = timeStamp;
     detail.velocityX = detail.velocityY = detail.deltaX = detail.deltaY = 0;
     detail.event = ev;
 
@@ -131,7 +131,7 @@ export const createGesture = (config: GestureConfig): Gesture => {
     // more accurate value of the velocity.
     detail.startX = detail.currentX;
     detail.startY = detail.currentY;
-    detail.startTimeStamp = detail.timeStamp;
+    detail.startTime = detail.currentTime;
 
     if (onWillStart) {
       onWillStart(detail).then(fireOnStart);
@@ -202,11 +202,11 @@ export const createGesture = (config: GestureConfig): Gesture => {
   };
 
   return {
-    setDisabled(disabled: boolean) {
+    enable(enable = true) {
-      if (disabled && hasCapturedPan) {
+      if (!enable && hasCapturedPan) {
         pointerUp(undefined);
       }
-      pointerEvents.setDisabled(disabled);
+      pointerEvents.enable(enable);
     },
     destroy() {
       gesture.destroy();
@@ -221,13 +221,13 @@ const calcGestureData = (detail: GestureDetail, ev: UIEvent | undefined) => {
   }
   const prevX = detail.currentX;
   const prevY = detail.currentY;
-  const prevT = detail.timeStamp;
+  const prevT = detail.currentTime;
 
   updateDetail(ev, detail);
 
   const currentX = detail.currentX;
   const currentY = detail.currentY;
-  const timestamp = detail.timeStamp = now(ev);
+  const timestamp = detail.currentTime = now(ev);
   const timeDelta = timestamp - prevT;
   if (timeDelta > 0 && timeDelta < 100) {
     const velocityX = (currentX - prevX) / timeDelta;
@@ -268,14 +268,14 @@ export interface GestureDetail {
   type: string;
   startX: number;
   startY: number;
-  startTimeStamp: number;
+  startTime: number;
   currentX: number;
   currentY: number;
   velocityX: number;
   velocityY: number;
   deltaX: number;
   deltaY: number;
-  timeStamp: number;
+  currentTime: number;
   event: UIEvent;
   data?: any;
 }
@@ -283,7 +283,7 @@ export interface GestureDetail {
 export type GestureCallback = (detail: GestureDetail) => boolean | void;
 
 export interface Gesture {
-  setDisabled(disabled: boolean): void;
+  enable(enable?: boolean): void;
   destroy(): void;
 }
 

core/src/utils/gesture/pointer-events.ts

@@ -92,8 +92,8 @@ export const createPointerEvents = (
     stopMouse();
   };
 
-  const setDisabled = (disabled: boolean) => {
+  const enable = (enable = true) => {
-    if (disabled) {
+    if (!enable) {
       if (rmTouchStart) {
         rmTouchStart();
       }
@@ -114,12 +114,12 @@ export const createPointerEvents = (
   };
 
   const destroy = () => {
-    setDisabled(true);
+    enable(false);
     pointerUp = pointerMove = pointerDown = undefined;
   };
 
   return {
-    setDisabled,
+    enable,
     stop,
     destroy
   };