@amazon-devices/react-native-gesture-handler 2.0.1758683737 → 4.0.0

package/src/components/Pressable/StateMachine.tsx

@@ -0,0 +1,57 @@
+import { PressableEvent } from './PressableProps';
+
+export interface StateDefinition {
+  eventName: string;
+  callback?: (event: PressableEvent) => void;
+}
+
+class PressableStateMachine {
+  private states: StateDefinition[] | null;
+  private currentStepIndex: number;
+  private eventPayload: PressableEvent | null;
+
+  constructor() {
+    this.states = null;
+    this.currentStepIndex = 0;
+    this.eventPayload = null;
+  }
+
+  public setStates(states: StateDefinition[]) {
+    this.states = states;
+  }
+
+  public reset() {
+    this.currentStepIndex = 0;
+    this.eventPayload = null;
+  }
+
+  public handleEvent(eventName: string, eventPayload?: PressableEvent) {
+    if (!this.states) {
+      return;
+    }
+
+    const step = this.states[this.currentStepIndex];
+    this.eventPayload = eventPayload || this.eventPayload;
+
+    if (step.eventName !== eventName) {
+      if (this.currentStepIndex > 0) {
+        // retry with position at index 0
+        this.reset();
+        this.handleEvent(eventName, eventPayload);
+      }
+      return;
+    }
+
+    if (this.eventPayload && step.callback) {
+      step.callback(this.eventPayload);
+    }
+
+    this.currentStepIndex++;
+
+    if (this.currentStepIndex === this.states.length) {
+      this.reset();
+    }
+  }
+}
+
+export { PressableStateMachine };

package/src/components/Pressable/index.ts

@@ -0,0 +1,5 @@
+export type {
+  PressableProps,
+  PressableStateCallbackType,
+} from './PressableProps';
+export { default } from './Pressable';

package/src/components/Pressable/stateDefinitions.ts

@@ -0,0 +1,126 @@
+import { Platform } from 'react-native';
+import { PressableEvent } from './PressableProps';
+import { StateDefinition } from './StateMachine';
+
+export enum StateMachineEvent {
+  NATIVE_BEGIN = 'nativeBegin',
+  NATIVE_START = 'nativeStart',
+  FINALIZE = 'finalize',
+  LONG_PRESS_TOUCHES_DOWN = 'longPressTouchesDown',
+  CANCEL = 'cancel',
+}
+
+function getAndroidStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
+function getIosStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
+function getWebStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+    },
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
+function getMacosStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
+function getUniversalStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: (event: PressableEvent) => {
+        handlePressIn(event);
+        handlePressOut(event);
+      },
+    },
+  ];
+}
+
+export function getStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+): StateDefinition[] {
+  if (Platform.OS === 'android') {
+    return getAndroidStatesConfig(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'ios') {
+    return getIosStatesConfig(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'web') {
+    return getWebStatesConfig(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'macos') {
+    return getMacosStatesConfig(handlePressIn, handlePressOut);
+  } else {
+    // Unknown platform - using minimal universal setup.
+    return getUniversalStatesConfig(handlePressIn, handlePressOut);
+  }
+}

package/src/components/Pressable/utils.ts

@@ -0,0 +1,140 @@
+import { Insets } from 'react-native';
+import {
+  HoverGestureHandlerEventPayload,
+  LongPressGestureHandlerEventPayload,
+} from '../../handlers/GestureHandlerEventPayload';
+import {
+  TouchData,
+  GestureStateChangeEvent,
+  GestureTouchEvent,
+} from '../../handlers/gestureHandlerCommon';
+import {
+  PressableDimensions,
+  InnerPressableEvent,
+  PressableEvent,
+} from './PressableProps';
+
+const numberAsInset = (value: number): Insets => ({
+  left: value,
+  right: value,
+  top: value,
+  bottom: value,
+});
+
+const addInsets = (a: Insets, b: Insets): Insets => ({
+  left: (a.left ?? 0) + (b.left ?? 0),
+  right: (a.right ?? 0) + (b.right ?? 0),
+  top: (a.top ?? 0) + (b.top ?? 0),
+  bottom: (a.bottom ?? 0) + (b.bottom ?? 0),
+});
+
+const touchDataToPressEvent = (
+  data: TouchData,
+  timestamp: number,
+  targetId: number
+): InnerPressableEvent => ({
+  identifier: data.id,
+  locationX: data.x,
+  locationY: data.y,
+  pageX: data.absoluteX,
+  pageY: data.absoluteY,
+  target: targetId,
+  timestamp: timestamp,
+  touches: [], // Always empty - legacy compatibility
+  changedTouches: [], // Always empty - legacy compatibility
+});
+
+const gestureToPressEvent = (
+  event: GestureStateChangeEvent<
+    HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
+  >,
+  timestamp: number,
+  targetId: number
+): InnerPressableEvent => ({
+  identifier: event.handlerTag,
+  locationX: event.x,
+  locationY: event.y,
+  pageX: event.absoluteX,
+  pageY: event.absoluteY,
+  target: targetId,
+  timestamp: timestamp,
+  touches: [], // Always empty - legacy compatibility
+  changedTouches: [], // Always empty - legacy compatibility
+});
+
+const isTouchWithinInset = (
+  dimensions: PressableDimensions,
+  inset: Insets,
+  touch?: InnerPressableEvent
+) =>
+  (touch?.locationX ?? 0) < (inset.right ?? 0) + dimensions.width &&
+  (touch?.locationY ?? 0) < (inset.bottom ?? 0) + dimensions.height &&
+  (touch?.locationX ?? 0) > -(inset.left ?? 0) &&
+  (touch?.locationY ?? 0) > -(inset.top ?? 0);
+
+const gestureToPressableEvent = (
+  event: GestureStateChangeEvent<
+    HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
+  >
+): PressableEvent => {
+  const timestamp = Date.now();
+
+  // As far as I can see, there isn't a conventional way of getting targetId with the data we get
+  const targetId = 0;
+
+  const pressEvent = gestureToPressEvent(event, timestamp, targetId);
+
+  return {
+    nativeEvent: {
+      touches: [pressEvent],
+      changedTouches: [pressEvent],
+      identifier: pressEvent.identifier,
+      locationX: event.x,
+      locationY: event.y,
+      pageX: event.absoluteX,
+      pageY: event.absoluteY,
+      target: targetId,
+      timestamp: timestamp,
+      force: undefined,
+    },
+  };
+};
+
+const gestureTouchToPressableEvent = (
+  event: GestureTouchEvent
+): PressableEvent => {
+  const timestamp = Date.now();
+
+  // As far as I can see, there isn't a conventional way of getting targetId with the data we get
+  const targetId = 0;
+
+  const touchesList = event.allTouches.map((touch: TouchData) =>
+    touchDataToPressEvent(touch, timestamp, targetId)
+  );
+  const changedTouchesList = event.changedTouches.map((touch: TouchData) =>
+    touchDataToPressEvent(touch, timestamp, targetId)
+  );
+
+  return {
+    nativeEvent: {
+      touches: touchesList,
+      changedTouches: changedTouchesList,
+      identifier: event.handlerTag,
+      locationX: event.allTouches.at(0)?.x ?? -1,
+      locationY: event.allTouches.at(0)?.y ?? -1,
+      pageX: event.allTouches.at(0)?.absoluteX ?? -1,
+      pageY: event.allTouches.at(0)?.absoluteY ?? -1,
+      target: targetId,
+      timestamp: timestamp,
+      force: undefined,
+    },
+  };
+};
+
+export {
+  numberAsInset,
+  addInsets,
+  isTouchWithinInset,
+  gestureToPressableEvent,
+  gestureTouchToPressableEvent,
+};