@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1

package/src/jestUtils/jestUtils.ts

@@ -0,0 +1,505 @@
+import invariant from 'invariant';
+import { DeviceEventEmitter } from 'react-native';
+import { ReactTestInstance } from 'react-test-renderer';
+import {
+  FlingGestureHandler,
+  FlingGestureHandlerEventPayload,
+  flingHandlerName,
+} from '../handlers/FlingGestureHandler';
+import {
+  ForceTouchGestureHandler,
+  ForceTouchGestureHandlerEventPayload,
+  forceTouchHandlerName,
+} from '../handlers/ForceTouchGestureHandler';
+import {
+  BaseGestureHandlerProps,
+  GestureEvent,
+  HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import { FlingGesture } from '../handlers/gestures/flingGesture';
+import { ForceTouchGesture } from '../handlers/gestures/forceTouchGesture';
+import { BaseGesture, GestureType } from '../handlers/gestures/gesture';
+import { LongPressGesture } from '../handlers/gestures/longPressGesture';
+import { NativeGesture } from '../handlers/gestures/nativeGesture';
+import { PanGesture } from '../handlers/gestures/panGesture';
+import { PinchGesture } from '../handlers/gestures/pinchGesture';
+import { RotationGesture } from '../handlers/gestures/rotationGesture';
+import { TapGesture } from '../handlers/gestures/tapGesture';
+import { findHandlerByTestID } from '../handlers/handlersRegistry';
+import {
+  LongPressGestureHandler,
+  LongPressGestureHandlerEventPayload,
+  longPressHandlerName,
+} from '../handlers/LongPressGestureHandler';
+import {
+  NativeViewGestureHandler,
+  NativeViewGestureHandlerPayload,
+  nativeViewHandlerName,
+} from '../handlers/NativeViewGestureHandler';
+import {
+  PanGestureHandler,
+  PanGestureHandlerEventPayload,
+  panHandlerName,
+} from '../handlers/PanGestureHandler';
+import {
+  PinchGestureHandler,
+  PinchGestureHandlerEventPayload,
+  pinchHandlerName,
+} from '../handlers/PinchGestureHandler';
+import {
+  RotationGestureHandler,
+  RotationGestureHandlerEventPayload,
+  rotationHandlerName,
+} from '../handlers/RotationGestureHandler';
+import {
+  TapGestureHandler,
+  TapGestureHandlerEventPayload,
+  tapHandlerName,
+} from '../handlers/TapGestureHandler';
+import { State } from '../State';
+import { hasProperty, withPrevAndCurrent } from '../utils';
+
+// load fireEvent conditionally, so RNGH may be used in setups without testing-library
+let fireEvent = (
+  _element: ReactTestInstance,
+  _name: string,
+  ..._data: any[]
+) => {
+  // NOOP
+};
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  fireEvent = require('@testing-library/react-native').fireEvent;
+} catch (_e) {
+  // do nothing if not available
+}
+
+type GestureHandlerTestEvent<
+  TEventPayload extends Record<string, unknown> = Record<string, unknown>
+> = (
+  | GestureEvent<TEventPayload>
+  | HandlerStateChangeEvent<TEventPayload>
+)['nativeEvent'];
+
+type HandlerNames = keyof DefaultEventsMapping;
+
+type WithNumberOfPointers<T> = {
+  [P in keyof T]: T[P] & { numberOfPointers: number };
+};
+type DefaultEventsMapping = WithNumberOfPointers<{
+  [flingHandlerName]: FlingGestureHandlerEventPayload;
+  [forceTouchHandlerName]: ForceTouchGestureHandlerEventPayload;
+  [longPressHandlerName]: LongPressGestureHandlerEventPayload;
+  [nativeViewHandlerName]: NativeViewGestureHandlerPayload;
+  [panHandlerName]: PanGestureHandlerEventPayload;
+  [pinchHandlerName]: PinchGestureHandlerEventPayload;
+  [rotationHandlerName]: RotationGestureHandlerEventPayload;
+  [tapHandlerName]: TapGestureHandlerEventPayload;
+}>;
+
+const handlersDefaultEvents: DefaultEventsMapping = {
+  [flingHandlerName]: {
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    numberOfPointers: 1,
+  },
+  [forceTouchHandlerName]: {
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    force: 1,
+    numberOfPointers: 1,
+  },
+  [longPressHandlerName]: {
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    duration: 100,
+    numberOfPointers: 1,
+  },
+  [nativeViewHandlerName]: {
+    pointerInside: true,
+    numberOfPointers: 1,
+  },
+  [panHandlerName]: {
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    translationX: 100,
+    translationY: 0,
+    velocityX: 3,
+    velocityY: 0,
+    numberOfPointers: 1,
+  },
+  [pinchHandlerName]: {
+    focalX: 0,
+    focalY: 0,
+    scale: 2,
+    velocity: 1,
+    numberOfPointers: 2,
+  },
+  [rotationHandlerName]: {
+    anchorX: 0,
+    anchorY: 0,
+    rotation: 3.14,
+    velocity: 2,
+    numberOfPointers: 2,
+  },
+  [tapHandlerName]: {
+    x: 0,
+    y: 0,
+    absoluteX: 0,
+    absoluteY: 0,
+    numberOfPointers: 1,
+  },
+};
+
+function isGesture(
+  componentOrGesture: ReactTestInstance | GestureType
+): componentOrGesture is GestureType {
+  return componentOrGesture instanceof BaseGesture;
+}
+
+interface WrappedGestureHandlerTestEvent {
+  nativeEvent: GestureHandlerTestEvent;
+}
+function wrapWithNativeEvent(
+  event: GestureHandlerTestEvent
+): WrappedGestureHandlerTestEvent {
+  return { nativeEvent: event };
+}
+
+function fillOldStateChanges(
+  previousEvent: GestureHandlerTestEvent | null,
+  currentEvent: Omit<GestureHandlerTestEvent, 'oldState'>
+): GestureHandlerTestEvent {
+  const isFirstEvent = previousEvent === null;
+  if (isFirstEvent) {
+    return {
+      oldState: State.UNDETERMINED,
+      ...currentEvent,
+    } as GestureHandlerTestEvent;
+  }
+
+  const isGestureStateEvent = previousEvent.state !== currentEvent.state;
+  if (isGestureStateEvent) {
+    return {
+      oldState: previousEvent?.state,
+      ...currentEvent,
+    } as GestureHandlerTestEvent;
+  } else {
+    return currentEvent as GestureHandlerTestEvent;
+  }
+}
+
+type EventWithStates = Partial<
+  Pick<GestureHandlerTestEvent, 'oldState' | 'state'>
+>;
+function validateStateTransitions(
+  previousEvent: EventWithStates | null,
+  currentEvent: EventWithStates
+) {
+  function stringify(event: Record<string, unknown> | null) {
+    return JSON.stringify(event, null, 2);
+  }
+  function errorMsgWithBothEvents(description: string) {
+    return `${description}, invalid event: ${stringify(
+      currentEvent
+    )}, previous event: ${stringify(previousEvent)}`;
+  }
+
+  function errorMsgWithCurrentEvent(description: string) {
+    return `${description}, invalid event: ${stringify(currentEvent)}`;
+  }
+
+  invariant(
+    hasProperty(currentEvent, 'state'),
+    errorMsgWithCurrentEvent('every event must have state')
+  );
+
+  const isFirstEvent = previousEvent === null;
+  if (isFirstEvent) {
+    invariant(
+      currentEvent.state === State.BEGAN,
+      errorMsgWithCurrentEvent('first event must have BEGAN state')
+    );
+  }
+
+  if (previousEvent !== null) {
+    if (previousEvent.state !== currentEvent.state) {
+      invariant(
+        hasProperty(currentEvent, 'oldState'),
+        errorMsgWithCurrentEvent(
+          'when state changes, oldState field should be present'
+        )
+      );
+      invariant(
+        currentEvent.oldState === previousEvent.state,
+        errorMsgWithBothEvents(
+          "when state changes, oldState should be the same as previous event' state"
+        )
+      );
+    }
+  }
+
+  return currentEvent;
+}
+
+type EventWithoutStates = Omit<GestureHandlerTestEvent, 'oldState' | 'state'>;
+interface HandlerInfo {
+  handlerType: HandlerNames;
+  handlerTag: number;
+}
+function fillMissingDefaultsFor({
+  handlerType,
+  handlerTag,
+}: HandlerInfo): (
+  event: Partial<GestureHandlerTestEvent>
+) => EventWithoutStates {
+  return (event) => {
+    return {
+      ...handlersDefaultEvents[handlerType],
+      ...event,
+      handlerTag,
+    };
+  };
+}
+
+function isDiscreteHandler(handlerType: HandlerNames) {
+  return (
+    handlerType === 'TapGestureHandler' ||
+    handlerType === 'LongPressGestureHandler'
+  );
+}
+
+function fillMissingStatesTransitions(
+  events: EventWithoutStates[],
+  isDiscreteHandler: boolean
+): EventWithoutStates[] {
+  type Event = EventWithoutStates | null;
+  const _events = [...events];
+  const lastEvent = _events[_events.length - 1] ?? null;
+  const firstEvent = _events[0] ?? null;
+
+  const shouldDuplicateFirstEvent =
+    !isDiscreteHandler && !hasState(State.BEGAN)(firstEvent);
+  if (shouldDuplicateFirstEvent) {
+    const duplicated = { ...firstEvent, state: State.BEGAN };
+    // @ts-ignore badly typed, property may exist and we don't want to copy it
+    delete duplicated.oldState;
+    _events.unshift(duplicated);
+  }
+
+  const shouldDuplicateLastEvent =
+    !hasState(State.END)(lastEvent) ||
+    !hasState(State.FAILED)(lastEvent) ||
+    !hasState(State.CANCELLED)(lastEvent);
+
+  if (shouldDuplicateLastEvent) {
+    const duplicated = { ...lastEvent, state: State.END };
+    // @ts-ignore badly typed, property may exist and we don't want to copy it
+    delete duplicated.oldState;
+    _events.push(duplicated);
+  }
+
+  function isWithoutState(event: Event) {
+    return event !== null && !hasProperty(event, 'state');
+  }
+  function hasState(state: State) {
+    return (event: Event) => event !== null && event.state === state;
+  }
+  function noEventsLeft(event: Event) {
+    return event === null;
+  }
+
+  function trueFn() {
+    return true;
+  }
+  interface Args {
+    shouldConsumeEvent?: (event: Event) => boolean;
+    shouldTransitionToNextState?: (nextEvent: Event) => boolean;
+  }
+  function fillEventsForCurrentState({
+    shouldConsumeEvent = trueFn,
+    shouldTransitionToNextState = trueFn,
+  }: Args) {
+    function peekCurrentEvent(): Event {
+      return _events[0] ?? null;
+    }
+    function peekNextEvent(): Event {
+      return _events[1] ?? null;
+    }
+    function consumeCurrentEvent() {
+      _events.shift();
+    }
+    const currentEvent = peekCurrentEvent();
+    const nextEvent = peekNextEvent();
+    const currentRequiredState = REQUIRED_EVENTS[currentStateIdx];
+
+    let eventData = {};
+    const shouldUseEvent = shouldConsumeEvent(currentEvent);
+    if (shouldUseEvent) {
+      eventData = currentEvent!;
+      consumeCurrentEvent();
+    }
+    transformedEvents.push({ state: currentRequiredState, ...eventData });
+    if (shouldTransitionToNextState(nextEvent)) {
+      currentStateIdx++;
+    }
+  }
+
+  const REQUIRED_EVENTS = [State.BEGAN, State.ACTIVE, State.END];
+
+  let currentStateIdx = 0;
+  const transformedEvents: EventWithoutStates[] = [];
+  let hasAllStates;
+  let iterations = 0;
+  do {
+    const nextRequiredState = REQUIRED_EVENTS[currentStateIdx];
+    if (nextRequiredState === State.BEGAN) {
+      fillEventsForCurrentState({
+        shouldConsumeEvent: (e: Event) =>
+          isWithoutState(e) || hasState(State.BEGAN)(e),
+      });
+    } else if (nextRequiredState === State.ACTIVE) {
+      const shouldConsumeEvent = (e: Event) =>
+        isWithoutState(e) || hasState(State.ACTIVE)(e);
+      const shouldTransitionToNextState = (nextEvent: Event) =>
+        noEventsLeft(nextEvent) ||
+        hasState(State.END)(nextEvent) ||
+        hasState(State.FAILED)(nextEvent) ||
+        hasState(State.CANCELLED)(nextEvent);
+
+      fillEventsForCurrentState({
+        shouldConsumeEvent,
+        shouldTransitionToNextState,
+      });
+    } else if (nextRequiredState === State.END) {
+      fillEventsForCurrentState({});
+    }
+    hasAllStates = currentStateIdx === REQUIRED_EVENTS.length;
+
+    invariant(
+      iterations++ <= 500,
+      'exceeded max number of iterations, please report a bug in RNGH repository with your test case'
+    );
+  } while (!hasAllStates);
+
+  return transformedEvents;
+}
+
+type EventEmitter = (
+  eventName: string,
+  args: { nativeEvent: GestureHandlerTestEvent }
+) => void;
+interface HandlerData {
+  emitEvent: EventEmitter;
+  handlerType: HandlerNames;
+  handlerTag: number;
+}
+function getHandlerData(
+  componentOrGesture: ReactTestInstance | GestureType
+): HandlerData {
+  if (isGesture(componentOrGesture)) {
+    const gesture = componentOrGesture;
+    return {
+      emitEvent: (eventName, args) => {
+        DeviceEventEmitter.emit(eventName, args.nativeEvent);
+      },
+      handlerType: gesture.handlerName as HandlerNames,
+      handlerTag: gesture.handlerTag,
+    };
+  }
+  const gestureHandlerComponent = componentOrGesture;
+  return {
+    emitEvent: (eventName, args) => {
+      fireEvent(gestureHandlerComponent, eventName, args);
+    },
+    handlerType: gestureHandlerComponent.props.handlerType as HandlerNames,
+    handlerTag: gestureHandlerComponent.props.handlerTag as number,
+  };
+}
+type AllGestures =
+  | TapGesture
+  | PanGesture
+  | LongPressGesture
+  | RotationGesture
+  | PinchGesture
+  | FlingGesture
+  | ForceTouchGesture
+  | NativeGesture;
+
+type AllHandlers =
+  | TapGestureHandler
+  | PanGestureHandler
+  | LongPressGestureHandler
+  | RotationGestureHandler
+  | PinchGestureHandler
+  | FlingGestureHandler
+  | ForceTouchGestureHandler
+  | NativeViewGestureHandler;
+
+// prettier-ignore
+type ClassComponentConstructor<P> = new (props: P) => React.Component<P, any, any>;
+
+type ExtractPayloadFromProps<T> = T extends BaseGestureHandlerProps<
+  infer TPayload
+>
+  ? TPayload
+  : never;
+
+type ExtractConfig<T> = T extends BaseGesture<infer TGesturePayload>
+  ? TGesturePayload
+  : T extends ClassComponentConstructor<infer THandlerProps>
+  ? ExtractPayloadFromProps<THandlerProps>
+  : Record<string, unknown>;
+
+export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
+  componentOrGesture: ReactTestInstance | GestureType,
+  eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
+): void {
+  const { emitEvent, handlerType, handlerTag } =
+    getHandlerData(componentOrGesture);
+
+  let _ = fillMissingStatesTransitions(
+    eventList,
+    isDiscreteHandler(handlerType)
+  );
+  _ = _.map(fillMissingDefaultsFor({ handlerTag, handlerType }));
+  _ = withPrevAndCurrent(_, fillOldStateChanges);
+  _ = withPrevAndCurrent(_, validateStateTransitions);
+  // @ts-ignore TODO
+  _ = _.map(wrapWithNativeEvent);
+
+  const events = _ as unknown as WrappedGestureHandlerTestEvent[];
+
+  const firstEvent = events.shift()!;
+
+  emitEvent('onGestureHandlerStateChange', firstEvent);
+  let lastSentEvent = firstEvent;
+  for (const event of events) {
+    const hasChangedState =
+      lastSentEvent.nativeEvent.state !== event.nativeEvent.state;
+
+    if (hasChangedState) {
+      emitEvent('onGestureHandlerStateChange', event);
+    } else {
+      emitEvent('onGestureHandlerEvent', event);
+    }
+    lastSentEvent = event;
+  }
+}
+
+export function getByGestureTestId(testID: string) {
+  const handler = findHandlerByTestID(testID);
+  if (handler === null) {
+    throw new Error(`Handler with id: '${testID}' cannot be found`);
+  }
+  return handler;
+}

package/src/mocks.ts

@@ -0,0 +1,67 @@
+import {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  ScrollView,
+  FlatList,
+  Switch,
+  TextInput,
+  DrawerLayoutAndroid,
+  View,
+} from 'react-native';
+import { State } from './State';
+import { Directions } from './Directions';
+
+const NOOP = () => {
+  // do nothing
+};
+const PanGestureHandler = View;
+const attachGestureHandler = NOOP;
+const createGestureHandler = NOOP;
+const dropGestureHandler = NOOP;
+const updateGestureHandler = NOOP;
+const flushOperations = NOOP;
+const NativeViewGestureHandler = View;
+const TapGestureHandler = View;
+const ForceTouchGestureHandler = View;
+const LongPressGestureHandler = View;
+const PinchGestureHandler = View;
+const RotationGestureHandler = View;
+const FlingGestureHandler = View;
+const RawButton = TouchableNativeFeedback;
+const BaseButton = TouchableNativeFeedback;
+const RectButton = TouchableNativeFeedback;
+const BorderlessButton = TouchableNativeFeedback;
+
+export default {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  ScrollView,
+  FlatList,
+  Switch,
+  TextInput,
+  DrawerLayoutAndroid,
+  NativeViewGestureHandler,
+  TapGestureHandler,
+  ForceTouchGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  RawButton,
+  BaseButton,
+  RectButton,
+  BorderlessButton,
+  PanGestureHandler,
+  attachGestureHandler,
+  createGestureHandler,
+  dropGestureHandler,
+  updateGestureHandler,
+  flushOperations,
+  // probably can be removed
+  Directions,
+  State,
+} as const;

package/src/specs/RNGestureHandlerButtonNativeComponent.ts

@@ -0,0 +1,18 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps, ColorValue } from 'react-native';
+
+interface NativeProps extends ViewProps {
+  exclusive?: WithDefault<boolean, true>;
+  foreground?: boolean;
+  borderless?: boolean;
+  enabled?: WithDefault<boolean, true>;
+  rippleColor?: ColorValue;
+  rippleRadius?: Int32;
+  touchSoundDisabled?: WithDefault<boolean, false>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -0,0 +1,6 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');

package/src/typeUtils.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/src/utils.ts

@@ -0,0 +1,54 @@
+export function toArray<T>(object: T | T[]): T[] {
+  if (!Array.isArray(object)) {
+    return [object];
+  }
+
+  return object;
+}
+
+export type withPrevAndCurrentMapFn<T, Transformed> = (
+  previous: Transformed | null,
+  current: T
+) => Transformed;
+export function withPrevAndCurrent<T, Transformed>(
+  array: T[],
+  mapFn: withPrevAndCurrentMapFn<T, Transformed>
+): Transformed[] {
+  const previousArr: (null | Transformed)[] = [null];
+  const currentArr = [...array];
+  const transformedArr: Transformed[] = [];
+  currentArr.forEach((current, i) => {
+    const previous = previousArr[i];
+    const transformed = mapFn(previous, current);
+    previousArr.push(transformed);
+    transformedArr.push(transformed);
+  });
+  return transformedArr;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function hasProperty(object: object, key: string) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}
+
+export function isJestEnv(): boolean {
+  // @ts-ignore Do not use `@types/node` because it will prioritise Node types over RN types which breaks the types (ex. setTimeout) in React Native projects.
+  return hasProperty(global, 'process') && !!process.env.JEST_WORKER_ID;
+}
+
+export function tagMessage(msg: string) {
+  return `[react-native-gesture-handler] ${msg}`;
+}
+
+// helper method to check whether Fabric is enabled, however global.nativeFabricUIManager
+// may not be initialized before the first render
+export function isFabric(): boolean {
+  // @ts-expect-error nativeFabricUIManager is not yet included in the RN types
+  return !!global?.nativeFabricUIManager;
+}
+
+export function isRemoteDebuggingEnabled(): boolean {
+  // react-native-reanimated checks if in remote debugging in the same way
+  // @ts-ignore global is available but node types are not included
+  return !(global as any).nativeCallSyncHook || (global as any).__REMOTEDEV__;
+}

package/src/web/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_TOUCH_SLOP = 15;
+
+export const Direction = {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+};