Implement button press state machine on web

Author: j-piasecki

packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,6 +1,7 @@
 import { Platform } from 'react-native';
 
 import { type ActionType } from '../../ActionType';
+import type { ButtonEvent } from '../../specs/RNGestureHandlerButtonNativeComponent';
 import { State } from '../../State';
 import type { NativeHandlerData } from '../../v3/hooks/gestures/native/NativeTypes';
 import type { HandlerData } from '../../v3/types';
@@ -17,6 +18,7 @@ import type {
 } from '../interfaces';
 import { NativeGestureRole } from '../interfaces';
 import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import { ButtonEventName, dispatchButtonEvent } from '../tools/ButtonEvents';
 import {
   dispatchGestureLifecycleEvent,
   GestureLifecycleEvent,
@@ -39,6 +41,12 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
   private lastActiveHandlerData: HandlerData<NativeHandlerData> | null = null;
 
+  private hasLongPressHandler = false;
+  private longPressDuration = -1;
+  private longPressDetected = false;
+  private lastEventWasInside = false;
+  private pendingLongPress: ReturnType<typeof setTimeout> | null = null;
+
   public constructor(
     delegate: GestureHandlerDelegate<unknown, IGestureHandler>
   ) {
@@ -90,6 +98,12 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (config.yieldsToContinuousGestures !== undefined) {
       this.yieldsToContinuousGestures = config.yieldsToContinuousGestures;
     }
+    if (config.hasLongPressHandler !== undefined) {
+      this.hasLongPressHandler = config.hasLongPressHandler;
+    }
+    if (config.longPressDuration !== undefined) {
+      this.longPressDuration = config.longPressDuration;
+    }
 
     const view = this.delegate.view as HTMLElement;
     this.restoreViewStyles(view);
@@ -165,9 +179,33 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
   }
 
-  protected override onPointerLeave(): void {
+  protected override onPointerLeave(event: AdaptedEvent): void {
+    this.tracker.track(event);
+
+    if (
+      this.role === NativeGestureRole.Button &&
+      !this.shouldCancelWhenOutside &&
+      this.lastEventWasInside
+    ) {
+      this.dispatchButtonEvent(ButtonEventName.PressOut);
+      this.clearLongPressTimer();
+    }
+
     if (this.state === State.BEGAN || this.state === State.ACTIVE) {
-      this.cancel();
+      super.onPointerLeave(event);
+    }
+  }
+
+  protected override onPointerEnter(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerEnter(event);
+
+    if (
+      this.role === NativeGestureRole.Button &&
+      (this.state === State.BEGAN || this.state === State.ACTIVE) &&
+      !this.lastEventWasInside
+    ) {
+      this.dispatchButtonEvent(ButtonEventName.PressIn);
     }
   }
 
@@ -234,6 +272,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   public override detach(): void {
+    this.clearLongPressTimer();
     super.detach();
     this.role = null;
   }
@@ -282,6 +321,88 @@ export default class NativeViewGestureHandler extends GestureHandler {
     );
   }
 
+  protected override onStateChange(newState: State): void {
+    if (this.role !== NativeGestureRole.Button) {
+      return;
+    }
+
+    if (newState === State.BEGAN) {
+      if (!this.getButtonEventData().pointerInside) {
+        return;
+      }
+
+      this.dispatchButtonEvent(ButtonEventName.PressIn);
+      this.longPressDetected = false;
+
+      if (this.hasLongPressHandler && this.longPressDuration >= 0) {
+        this.pendingLongPress = setTimeout(() => {
+          this.pendingLongPress = null;
+          this.longPressDetected = true;
+          this.dispatchButtonEvent(ButtonEventName.LongPress);
+        }, this.longPressDuration);
+      }
+      return;
+    }
+
+    if (
+      newState !== State.END &&
+      newState !== State.FAILED &&
+      newState !== State.CANCELLED
+    ) {
+      return;
+    }
+
+    const endedInside = this.lastEventWasInside;
+
+    if (endedInside) {
+      this.dispatchButtonEvent(ButtonEventName.PressOut);
+    }
+    this.clearLongPressTimer();
+
+    if (newState === State.END && !this.longPressDetected && endedInside) {
+      this.dispatchButtonEvent(ButtonEventName.Press);
+    }
+
+    this.dispatchButtonEvent(ButtonEventName.InteractionFinished);
+    this.longPressDetected = false;
+  }
+
+  private dispatchButtonEvent(name: ButtonEventName): void {
+    if (name === ButtonEventName.PressIn) {
+      this.lastEventWasInside = true;
+    } else if (name === ButtonEventName.PressOut) {
+      this.lastEventWasInside = false;
+    }
+
+    dispatchButtonEvent(
+      this.delegate.view as HTMLElement | null,
+      name,
+      this.getButtonEventData()
+    );
+  }
+
+  private getButtonEventData(): ButtonEvent {
+    const absolute = this.tracker.getAbsoluteCoordsAverage();
+    const relative = this.tracker.getRelativeCoordsAverage();
+
+    return {
+      pointerInside: this.delegate.isPointerInBounds(absolute),
+      x: relative.x,
+      y: relative.y,
+      absoluteX: absolute.x,
+      absoluteY: absolute.y,
+      numberOfPointers: this.tracker.trackedPointersCount,
+      pointerType: this.pointerType,
+    };
+  }
+
+  private clearLongPressTimer(): void {
+    if (this.pendingLongPress !== null) {
+      clearTimeout(this.pendingLongPress);
+      this.pendingLongPress = null;
+    }
+  }
+
   protected override transformNativeEvent(): Record<string, unknown> {
     const absolute = this.tracker.getAbsoluteCoordsAverage();
     const relative = this.tracker.getRelativeCoordsAverage();
@@ -317,7 +438,15 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   public override reset(): void {
+    this.clearLongPressTimer();
     super.reset();
     this.lastActiveHandlerData = null;
+    this.lastEventWasInside = false;
+    this.longPressDetected = false;
+  }
+
+  public override onDestroy(): void {
+    this.clearLongPressTimer();
+    super.onDestroy();
   }
 }

packages/react-native-gesture-handler/src/web/interfaces.ts

@@ -91,6 +91,8 @@ export interface Config extends Record<string, ConfigArgs> {
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
   yieldsToContinuousGestures?: boolean;
+  hasLongPressHandler?: boolean;
+  longPressDuration?: number;
   direction?: Directions;
   enableTrackpadTwoFingerGesture?: boolean;
 }

packages/react-native-gesture-handler/src/web/tools/ButtonEvents.ts

@@ -0,0 +1,20 @@
+import type { ButtonEvent } from '../../specs/RNGestureHandlerButtonNativeComponent';
+
+export const ButtonEventName = {
+  Press: 'gh:buttonPress',
+  PressIn: 'gh:buttonPressIn',
+  PressOut: 'gh:buttonPressOut',
+  LongPress: 'gh:buttonLongPress',
+  InteractionFinished: 'gh:buttonInteractionFinished',
+} as const;
+
+export type ButtonEventName =
+  (typeof ButtonEventName)[keyof typeof ButtonEventName];
+
+export function dispatchButtonEvent(
+  view: HTMLElement | null | undefined,
+  name: ButtonEventName,
+  event: ButtonEvent
+): void {
+  view?.dispatchEvent(new CustomEvent(name, { detail: event }));
+}