@amazon-devices/react-native-gesture-handler 4.0.1 → 4.0.2

package/lib/module/components/Pressable/Pressable.js

@@ -1,268 +0,0 @@
-"use strict";
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObjects';
-import { GestureDetector } from '../../handlers/gestures/GestureDetector';
-import { Platform, processColor } from 'react-native';
-import NativeButton from '../GestureHandlerButton';
-import { gestureToPressableEvent, addInsets, numberAsInset, gestureTouchToPressableEvent, isTouchWithinInset } from './utils';
-import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
-import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
-import { applyRelationProp } from '../utils';
-import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
-import { PressableStateMachine } from './StateMachine';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_LONG_PRESS_DURATION = 500;
-const IS_TEST_ENV = isTestEnv();
-let IS_FABRIC = null;
-const Pressable = props => {
-  const {
-    testOnly_pressed,
-    hitSlop,
-    pressRetentionOffset,
-    delayHoverIn,
-    delayHoverOut,
-    delayLongPress,
-    unstable_pressDelay,
-    onHoverIn,
-    onHoverOut,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
-    onLayout,
-    style,
-    children,
-    android_disableSound,
-    android_ripple,
-    disabled,
-    accessible,
-    simultaneousWithExternalGesture,
-    requireExternalGestureToFail,
-    blocksExternalGesture,
-    ...remainingProps
-  } = props;
-  const relationProps = {
-    simultaneousWithExternalGesture,
-    requireExternalGestureToFail,
-    blocksExternalGesture
-  };
-  const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
-  const longPressTimeoutRef = useRef(null);
-  const pressDelayTimeoutRef = useRef(null);
-  const isOnPressAllowed = useRef(true);
-  const isCurrentlyPressed = useRef(false);
-  const dimensions = useRef({
-    width: 0,
-    height: 0
-  });
-  const normalizedHitSlop = useMemo(() => typeof hitSlop === 'number' ? numberAsInset(hitSlop) : hitSlop ?? {}, [hitSlop]);
-  const normalizedPressRetentionOffset = useMemo(() => typeof pressRetentionOffset === 'number' ? numberAsInset(pressRetentionOffset) : pressRetentionOffset ?? {}, [pressRetentionOffset]);
-  const appliedHitSlop = addInsets(normalizedHitSlop, normalizedPressRetentionOffset);
-  const cancelLongPress = useCallback(() => {
-    if (longPressTimeoutRef.current) {
-      clearTimeout(longPressTimeoutRef.current);
-      longPressTimeoutRef.current = null;
-      isOnPressAllowed.current = true;
-    }
-  }, []);
-  const cancelDelayedPress = useCallback(() => {
-    if (pressDelayTimeoutRef.current) {
-      clearTimeout(pressDelayTimeoutRef.current);
-      pressDelayTimeoutRef.current = null;
-    }
-  }, []);
-  const startLongPress = useCallback(event => {
-    if (onLongPress) {
-      cancelLongPress();
-      longPressTimeoutRef.current = setTimeout(() => {
-        isOnPressAllowed.current = false;
-        onLongPress(event);
-      }, delayLongPress ?? DEFAULT_LONG_PRESS_DURATION);
-    }
-  }, [onLongPress, cancelLongPress, delayLongPress]);
-  const innerHandlePressIn = useCallback(event => {
-    onPressIn?.(event);
-    startLongPress(event);
-    setPressedState(true);
-    if (pressDelayTimeoutRef.current) {
-      clearTimeout(pressDelayTimeoutRef.current);
-      pressDelayTimeoutRef.current = null;
-    }
-  }, [onPressIn, startLongPress]);
-  const handleFinalize = useCallback(() => {
-    isCurrentlyPressed.current = false;
-    cancelLongPress();
-    cancelDelayedPress();
-    setPressedState(false);
-  }, [cancelDelayedPress, cancelLongPress]);
-  const handlePressIn = useCallback(event => {
-    if (!isTouchWithinInset(dimensions.current, normalizedHitSlop, event.nativeEvent.changedTouches.at(-1))) {
-      // Ignoring pressIn within pressRetentionOffset
-      return;
-    }
-    isCurrentlyPressed.current = true;
-    if (unstable_pressDelay) {
-      pressDelayTimeoutRef.current = setTimeout(() => {
-        innerHandlePressIn(event);
-      }, unstable_pressDelay);
-    } else {
-      innerHandlePressIn(event);
-    }
-  }, [innerHandlePressIn, normalizedHitSlop, unstable_pressDelay]);
-  const handlePressOut = useCallback((event, success = true) => {
-    if (!isCurrentlyPressed.current) {
-      // Some prop configurations may lead to handlePressOut being called mutliple times.
-      return;
-    }
-    isCurrentlyPressed.current = false;
-    if (pressDelayTimeoutRef.current) {
-      innerHandlePressIn(event);
-    }
-    onPressOut?.(event);
-    if (isOnPressAllowed.current && success) {
-      onPress?.(event);
-    }
-    handleFinalize();
-  }, [handleFinalize, innerHandlePressIn, onPress, onPressOut]);
-  const stateMachine = useMemo(() => new PressableStateMachine(), []);
-  useEffect(() => {
-    const configuration = getStatesConfig(handlePressIn, handlePressOut);
-    stateMachine.setStates(configuration);
-  }, [handlePressIn, handlePressOut, stateMachine]);
-  const hoverInTimeout = useRef(null);
-  const hoverOutTimeout = useRef(null);
-  const hoverGesture = useMemo(() => Gesture.Hover().manualActivation(true) // Prevents Hover blocking Gesture.Native() on web
-  .cancelsTouchesInView(false).onBegin(event => {
-    if (hoverOutTimeout.current) {
-      clearTimeout(hoverOutTimeout.current);
-    }
-    if (delayHoverIn) {
-      hoverInTimeout.current = setTimeout(() => onHoverIn?.(gestureToPressableEvent(event)), delayHoverIn);
-      return;
-    }
-    onHoverIn?.(gestureToPressableEvent(event));
-  }).onFinalize(event => {
-    if (hoverInTimeout.current) {
-      clearTimeout(hoverInTimeout.current);
-    }
-    if (delayHoverOut) {
-      hoverOutTimeout.current = setTimeout(() => onHoverOut?.(gestureToPressableEvent(event)), delayHoverOut);
-      return;
-    }
-    onHoverOut?.(gestureToPressableEvent(event));
-  }), [delayHoverIn, delayHoverOut, onHoverIn, onHoverOut]);
-  const pressAndTouchGesture = useMemo(() => Gesture.LongPress().minDuration(INT32_MAX) // Stops long press from blocking Gesture.Native()
-  .maxDistance(INT32_MAX) // Stops long press from cancelling on touch move
-  .cancelsTouchesInView(false).onTouchesDown(event => {
-    const pressableEvent = gestureTouchToPressableEvent(event);
-    stateMachine.handleEvent(StateMachineEvent.LONG_PRESS_TOUCHES_DOWN, pressableEvent);
-  }).onTouchesUp(() => {
-    if (Platform.OS === 'android') {
-      // Prevents potential soft-locks
-      stateMachine.reset();
-      handleFinalize();
-    }
-  }).onTouchesCancelled(event => {
-    const pressableEvent = gestureTouchToPressableEvent(event);
-    stateMachine.reset();
-    handlePressOut(pressableEvent, false);
-  }).onFinalize((_event, success) => {
-    if (Platform.OS === 'web') {
-      if (success) {
-        stateMachine.handleEvent(StateMachineEvent.FINALIZE);
-      } else {
-        stateMachine.handleEvent(StateMachineEvent.CANCEL);
-      }
-      handleFinalize();
-    }
-  }), [stateMachine, handleFinalize, handlePressOut]);
-
-  // RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events
-  const buttonGesture = useMemo(() => Gesture.Native().onTouchesCancelled(event => {
-    if (Platform.OS !== 'macos' && Platform.OS !== 'web') {
-      // On MacOS cancel occurs in middle of gesture
-      // On Web cancel occurs on mouse move, which is unwanted
-      const pressableEvent = gestureTouchToPressableEvent(event);
-      stateMachine.reset();
-      handlePressOut(pressableEvent, false);
-    }
-  }).onBegin(() => {
-    stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
-  }).onStart(() => {
-    if (Platform.OS !== 'android') {
-      // Gesture.Native().onStart() is broken with Android + hitSlop
-      stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
-    }
-  }).onFinalize((_event, success) => {
-    if (Platform.OS !== 'web') {
-      // On Web we use LongPress().onFinalize() instead of Native().onFinalize(),
-      // as Native cancels on mouse move, and LongPress does not.
-      if (success) {
-        stateMachine.handleEvent(StateMachineEvent.FINALIZE);
-      } else {
-        stateMachine.handleEvent(StateMachineEvent.CANCEL);
-      }
-      handleFinalize();
-    }
-  }), [stateMachine, handlePressOut, handleFinalize]);
-  const isPressableEnabled = disabled !== true;
-  const gestures = [buttonGesture, pressAndTouchGesture, hoverGesture];
-  for (const gesture of gestures) {
-    gesture.enabled(isPressableEnabled);
-    gesture.runOnJS(true);
-    gesture.hitSlop(appliedHitSlop);
-    gesture.shouldCancelWhenOutside(Platform.OS !== 'web');
-    Object.entries(relationProps).forEach(([relationName, relation]) => {
-      applyRelationProp(gesture, relationName, relation);
-    });
-  }
-  const gesture = Gesture.Simultaneous(...gestures);
-
-  // `cursor: 'pointer'` on `RNButton` crashes iOS
-  const pointerStyle = Platform.OS === 'web' ? {
-    cursor: 'pointer'
-  } : {};
-  const styleProp = typeof style === 'function' ? style({
-    pressed: pressedState
-  }) : style;
-  const childrenProp = typeof children === 'function' ? children({
-    pressed: pressedState
-  }) : children;
-  const rippleColor = useMemo(() => {
-    if (IS_FABRIC === null) {
-      IS_FABRIC = isFabric();
-    }
-    const defaultRippleColor = android_ripple ? undefined : 'transparent';
-    const unprocessedRippleColor = android_ripple?.color ?? defaultRippleColor;
-    return IS_FABRIC ? unprocessedRippleColor : processColor(unprocessedRippleColor);
-  }, [android_ripple]);
-  const setDimensions = useCallback(event => {
-    onLayout?.(event);
-    dimensions.current = event.nativeEvent.layout;
-  }, [onLayout]);
-  return /*#__PURE__*/_jsx(GestureDetector, {
-    gesture: gesture,
-    children: /*#__PURE__*/_jsxs(NativeButton, {
-      ...remainingProps,
-      onLayout: setDimensions,
-      accessible: accessible !== false,
-      hitSlop: appliedHitSlop,
-      enabled: isPressableEnabled,
-      touchSoundDisabled: android_disableSound ?? undefined,
-      rippleColor: rippleColor,
-      rippleRadius: android_ripple?.radius ?? undefined,
-      style: [pointerStyle, styleProp],
-      testOnly_onPress: IS_TEST_ENV ? onPress : undefined,
-      testOnly_onPressIn: IS_TEST_ENV ? onPressIn : undefined,
-      testOnly_onPressOut: IS_TEST_ENV ? onPressOut : undefined,
-      testOnly_onLongPress: IS_TEST_ENV ? onLongPress : undefined,
-      children: [childrenProp, __DEV__ ? /*#__PURE__*/_jsx(PressabilityDebugView, {
-        color: "red",
-        hitSlop: normalizedHitSlop
-      }) : null]
-    })
-  });
-};
-export default Pressable;
-//# sourceMappingURL=Pressable.js.map

package/lib/module/components/Pressable/PressableProps.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export {};
-//# sourceMappingURL=PressableProps.js.map

package/lib/module/components/Pressable/StateMachine.js

@@ -1,40 +0,0 @@
-"use strict";
-
-class PressableStateMachine {
-  constructor() {
-    this.states = null;
-    this.currentStepIndex = 0;
-    this.eventPayload = null;
-  }
-  setStates(states) {
-    this.states = states;
-  }
-  reset() {
-    this.currentStepIndex = 0;
-    this.eventPayload = null;
-  }
-  handleEvent(eventName, eventPayload) {
-    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 };
-//# sourceMappingURL=StateMachine.js.map

package/lib/module/components/Pressable/index.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { default } from './Pressable';
-//# sourceMappingURL=index.js.map

package/lib/module/components/Pressable/stateDefinitions.js

@@ -1,83 +0,0 @@
-"use strict";
-
-import { Platform } from 'react-native';
-export let StateMachineEvent = /*#__PURE__*/function (StateMachineEvent) {
-  StateMachineEvent["NATIVE_BEGIN"] = "nativeBegin";
-  StateMachineEvent["NATIVE_START"] = "nativeStart";
-  StateMachineEvent["FINALIZE"] = "finalize";
-  StateMachineEvent["LONG_PRESS_TOUCHES_DOWN"] = "longPressTouchesDown";
-  StateMachineEvent["CANCEL"] = "cancel";
-  return StateMachineEvent;
-}({});
-function getAndroidStatesConfig(handlePressIn, handlePressOut) {
-  return [{
-    eventName: StateMachineEvent.NATIVE_BEGIN
-  }, {
-    eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
-    callback: handlePressIn
-  }, {
-    eventName: StateMachineEvent.FINALIZE,
-    callback: handlePressOut
-  }];
-}
-function getIosStatesConfig(handlePressIn, handlePressOut) {
-  return [{
-    eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN
-  }, {
-    eventName: StateMachineEvent.NATIVE_START,
-    callback: handlePressIn
-  }, {
-    eventName: StateMachineEvent.FINALIZE,
-    callback: handlePressOut
-  }];
-}
-function getWebStatesConfig(handlePressIn, handlePressOut) {
-  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, handlePressOut) {
-  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, handlePressOut) {
-  return [{
-    eventName: StateMachineEvent.FINALIZE,
-    callback: event => {
-      handlePressIn(event);
-      handlePressOut(event);
-    }
-  }];
-}
-export function getStatesConfig(handlePressIn, handlePressOut) {
-  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);
-  }
-}
-//# sourceMappingURL=stateDefinitions.js.map

package/lib/module/components/Pressable/utils.js

@@ -1,84 +0,0 @@
-"use strict";
-
-const numberAsInset = value => ({
-  left: value,
-  right: value,
-  top: value,
-  bottom: value
-});
-const addInsets = (a, b) => ({
-  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, timestamp, targetId) => ({
-  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, timestamp, targetId) => ({
-  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, inset, touch) => (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 => {
-  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 => {
-  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 => touchDataToPressEvent(touch, timestamp, targetId));
-  const changedTouchesList = event.changedTouches.map(touch => 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 };
-//# sourceMappingURL=utils.js.map