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

package/src/handlers/gestureHandlerCommon.ts

@@ -1,211 +0,0 @@
-// Previous types exported gesture handlers as classes which creates an interface and variable, both named the same as class.
-// Without those types, we'd introduce breaking change, forcing users to prefix every handler type specification with typeof
-// e.g. React.createRef<TapGestureHandler> -> React.createRef<typeof TapGestureHandler>.
-// See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference.
-import * as React from 'react';
-
-import { State } from '../State';
-import { TouchEventType } from '../TouchEventType';
-import { ValueOf } from '../typeUtils';
-import { PointerType } from '../PointerType';
-
-const commonProps = [
-  'id',
-  'enabled',
-  'shouldCancelWhenOutside',
-  'hitSlop',
-  'cancelsTouchesInView',
-  'userSelect',
-  'activeCursor',
-  'mouseButton',
-  'enableContextMenu',
-  'touchAction',
-] as const;
-
-const componentInteractionProps = [
-  'waitFor',
-  'simultaneousHandlers',
-  'blocksHandlers',
-] as const;
-
-export const baseGestureHandlerProps = [
-  ...commonProps,
-  ...componentInteractionProps,
-  'onBegan',
-  'onFailed',
-  'onCancelled',
-  'onActivated',
-  'onEnded',
-  'onGestureEvent',
-  'onHandlerStateChange',
-] as const;
-
-export const baseGestureHandlerWithDetectorProps = [
-  ...commonProps,
-  'needsPointerData',
-  'manualActivation',
-];
-
-export interface GestureEventPayload {
-  handlerTag: number;
-  numberOfPointers: number;
-  state: ValueOf<typeof State>;
-  pointerType: PointerType;
-}
-export interface HandlerStateChangeEventPayload extends GestureEventPayload {
-  oldState: ValueOf<typeof State>;
-}
-
-export type HitSlop =
-  | number
-  | null
-  | undefined
-  | Partial<
-      Record<
-        'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
-        number
-      >
-    >
-  | Record<'width' | 'left', number>
-  | Record<'width' | 'right', number>
-  | Record<'height' | 'top', number>
-  | Record<'height' | 'bottom', number>;
-
-export type UserSelect = 'none' | 'auto' | 'text';
-export type ActiveCursor =
-  | 'auto'
-  | 'default'
-  | 'none'
-  | 'context-menu'
-  | 'help'
-  | 'pointer'
-  | 'progress'
-  | 'wait'
-  | 'cell'
-  | 'crosshair'
-  | 'text'
-  | 'vertical-text'
-  | 'alias'
-  | 'copy'
-  | 'move'
-  | 'no-drop'
-  | 'not-allowed'
-  | 'grab'
-  | 'grabbing'
-  | 'e-resize'
-  | 'n-resize'
-  | 'ne-resize'
-  | 'nw-resize'
-  | 's-resize'
-  | 'se-resize'
-  | 'sw-resize'
-  | 'w-resize'
-  | 'ew-resize'
-  | 'ns-resize'
-  | 'nesw-resize'
-  | 'nwse-resize'
-  | 'col-resize'
-  | 'row-resize'
-  | 'all-scroll'
-  | 'zoom-in'
-  | 'zoom-out';
-
-export enum MouseButton {
-  LEFT = 1,
-  RIGHT = 2,
-  MIDDLE = 4,
-  BUTTON_4 = 8,
-  BUTTON_5 = 16,
-  ALL = 31,
-}
-
-export type TouchAction =
-  | 'auto'
-  | 'none'
-  | 'pan-x'
-  | 'pan-left'
-  | 'pan-right'
-  | 'pan-y'
-  | 'pan-up'
-  | 'pan-down'
-  | 'pinch-zoom'
-  | 'manipulation'
-  | 'inherit'
-  | 'initial'
-  | 'revert'
-  | 'revert-layer'
-  | 'unset';
-
-// TODO(TS) events in handlers
-
-export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
-  nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
-}
-export interface HandlerStateChangeEvent<
-  ExtraEventPayloadT = Record<string, unknown>,
-> {
-  nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;
-}
-
-export type TouchData = {
-  id: number;
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
-
-export type GestureTouchEvent = {
-  handlerTag: number;
-  numberOfTouches: number;
-  state: ValueOf<typeof State>;
-  eventType: TouchEventType;
-  allTouches: TouchData[];
-  changedTouches: TouchData[];
-  pointerType: PointerType;
-};
-
-export type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
-  GestureEventPayload & GestureEventPayloadT;
-
-export type GestureStateChangeEvent<
-  GestureStateChangeEventPayloadT = Record<string, unknown>,
-> = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;
-
-export type CommonGestureConfig = {
-  enabled?: boolean;
-  shouldCancelWhenOutside?: boolean;
-  hitSlop?: HitSlop;
-  userSelect?: UserSelect;
-  activeCursor?: ActiveCursor;
-  mouseButton?: MouseButton;
-  enableContextMenu?: boolean;
-  touchAction?: TouchAction;
-};
-
-// Events payloads are types instead of interfaces due to TS limitation.
-// See https://github.com/microsoft/TypeScript/issues/15300 for more info.
-export type BaseGestureHandlerProps<
-  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>,
-> = CommonGestureConfig & {
-  id?: string;
-  waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
-  simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
-  blocksHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
-  testID?: string;
-  cancelsTouchesInView?: boolean;
-  // TODO(TS) - fix event types
-  onBegan?: (event: HandlerStateChangeEvent) => void;
-  onFailed?: (event: HandlerStateChangeEvent) => void;
-  onCancelled?: (event: HandlerStateChangeEvent) => void;
-  onActivated?: (event: HandlerStateChangeEvent) => void;
-  onEnded?: (event: HandlerStateChangeEvent) => void;
-
-  // TODO(TS) consider using NativeSyntheticEvent
-  onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
-  onHandlerStateChange?: (
-    event: HandlerStateChangeEvent<ExtraEventPayloadT>
-  ) => void;
-  // Implicit `children` prop has been removed in @types/react^18.0.0
-  children?: React.ReactNode;
-};

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -1,101 +0,0 @@
-import type {
-  BaseButtonProps,
-  BorderlessButtonProps,
-  RawButtonProps,
-  RectButtonProps,
-} from '../components/GestureButtonsProps';
-import {
-  GestureEvent,
-  GestureEventPayload,
-  HandlerStateChangeEvent,
-  HandlerStateChangeEventPayload,
-} from './gestureHandlerCommon';
-import type { FlingGestureHandlerProps } from './FlingGestureHandler';
-import type {
-  FlingGestureHandlerEventPayload,
-  ForceTouchGestureHandlerEventPayload,
-  LongPressGestureHandlerEventPayload,
-  PanGestureHandlerEventPayload,
-  PinchGestureHandlerEventPayload,
-  RotationGestureHandlerEventPayload,
-  TapGestureHandlerEventPayload,
-  NativeViewGestureHandlerPayload,
-} from './GestureHandlerEventPayload';
-import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler';
-import type { LongPressGestureHandlerProps } from './LongPressGestureHandler';
-import type { PanGestureHandlerProps } from './PanGestureHandler';
-import type { PinchGestureHandlerProps } from './PinchGestureHandler';
-import type { RotationGestureHandlerProps } from './RotationGestureHandler';
-import type { TapGestureHandlerProps } from './TapGestureHandler';
-import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler';
-
-// Events
-export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;
-export type GestureHandlerStateChangeNativeEvent =
-  HandlerStateChangeEventPayload;
-export type GestureHandlerGestureEvent = GestureEvent;
-export type GestureHandlerStateChangeEvent = HandlerStateChangeEvent;
-// Gesture handlers events
-export type NativeViewGestureHandlerGestureEvent =
-  GestureEvent<NativeViewGestureHandlerPayload>;
-export type NativeViewGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<NativeViewGestureHandlerPayload>;
-
-export type TapGestureHandlerGestureEvent =
-  GestureEvent<TapGestureHandlerEventPayload>;
-export type TapGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<TapGestureHandlerEventPayload>;
-
-/**
- * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
- */
-export type ForceTouchGestureHandlerGestureEvent =
-  GestureEvent<ForceTouchGestureHandlerEventPayload>;
-/**
- * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
- */
-export type ForceTouchGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;
-
-export type LongPressGestureHandlerGestureEvent =
-  GestureEvent<LongPressGestureHandlerEventPayload>;
-export type LongPressGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<LongPressGestureHandlerEventPayload>;
-
-export type PanGestureHandlerGestureEvent =
-  GestureEvent<PanGestureHandlerEventPayload>;
-export type PanGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<PanGestureHandlerEventPayload>;
-
-export type PinchGestureHandlerGestureEvent =
-  GestureEvent<PinchGestureHandlerEventPayload>;
-export type PinchGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<PinchGestureHandlerEventPayload>;
-
-export type RotationGestureHandlerGestureEvent =
-  GestureEvent<RotationGestureHandlerEventPayload>;
-export type RotationGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<RotationGestureHandlerEventPayload>;
-
-export type FlingGestureHandlerGestureEvent =
-  GestureEvent<FlingGestureHandlerEventPayload>;
-export type FlingGestureHandlerStateChangeEvent =
-  HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
-
-// Handlers properties
-export type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;
-export type TapGestureHandlerProperties = TapGestureHandlerProps;
-export type LongPressGestureHandlerProperties = LongPressGestureHandlerProps;
-export type PanGestureHandlerProperties = PanGestureHandlerProps;
-export type PinchGestureHandlerProperties = PinchGestureHandlerProps;
-export type RotationGestureHandlerProperties = RotationGestureHandlerProps;
-export type FlingGestureHandlerProperties = FlingGestureHandlerProps;
-/**
- * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
- */
-export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
-// Button props
-export type RawButtonProperties = RawButtonProps;
-export type BaseButtonProperties = BaseButtonProps;
-export type RectButtonProperties = RectButtonProps;
-export type BorderlessButtonProperties = BorderlessButtonProps;

package/src/handlers/gestures/GestureDetector/Wrap.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Reanimated } from '../reanimatedWrapper';
-import { tagMessage } from '../../../utils';
-
-export class Wrap extends React.Component<{
-  onGestureHandlerEvent?: unknown;
-  // Implicit `children` prop has been removed in @types/react^18.0.0
-  children?: React.ReactNode;
-}> {
-  render() {
-    try {
-      // I don't think that fighting with types over such a simple function is worth it
-      // The only thing it does is add 'collapsable: false' to the child component
-      // to make sure it is in the native view hierarchy so the detector can find
-      // correct viewTag to attach to.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const child: any = React.Children.only(this.props.children);
-      return React.cloneElement(
-        child,
-        { collapsable: false },
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        child.props.children
-      );
-    } catch (e) {
-      throw new Error(
-        tagMessage(
-          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
-        )
-      );
-    }
-  }
-}
-
-export const AnimatedWrap =
-  Reanimated?.default?.createAnimatedComponent(Wrap) ?? Wrap;

package/src/handlers/gestures/GestureDetector/Wrap.web.tsx

@@ -1,42 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { LegacyRef, PropsWithChildren } from 'react';
-import { tagMessage } from '../../../utils';
-import { isRNSVGNode } from '../../../web/utils';
-
-export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
-  ({ children }, ref) => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const child: any = React.Children.only(children);
-
-      if (isRNSVGNode(child)) {
-        const clone = React.cloneElement(
-          child,
-          { ref },
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          child.props.children
-        );
-
-        return clone;
-      }
-
-      return (
-        <div
-          ref={ref as LegacyRef<HTMLDivElement>}
-          style={{ display: 'contents' }}>
-          {child}
-        </div>
-      );
-    } catch (e) {
-      throw new Error(
-        tagMessage(
-          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
-        )
-      );
-    }
-  }
-);
-
-// On web we never take a path with Reanimated,
-// therefore we can simply export Wrap
-export const AnimatedWrap = Wrap;

package/src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -1,112 +0,0 @@
-import React from 'react';
-import { GestureType, HandlerCallbacks } from '../gesture';
-import { registerHandler } from '../../handlersRegistry';
-import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import { filterConfig, scheduleFlushOperations } from '../../utils';
-import { ComposedGesture } from '../gestureComposition';
-import { ActionType } from '../../../ActionType';
-import { Platform } from 'react-native';
-import type RNGestureHandlerModuleWeb from '../../../RNGestureHandlerModule.web';
-import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
-import { AttachedGestureState, WebEventHandler } from './types';
-import {
-  extractGestureRelations,
-  checkGestureCallbacksForWorklets,
-  ALLOWED_PROPS,
-} from './utils';
-import { MountRegistry } from '../../../mountRegistry';
-
-interface AttachHandlersConfig {
-  preparedGesture: AttachedGestureState;
-  gestureConfig: ComposedGesture | GestureType;
-  gesturesToAttach: GestureType[];
-  viewTag: number;
-  webEventHandlersRef: React.RefObject<WebEventHandler>;
-}
-
-export function attachHandlers({
-  preparedGesture,
-  gestureConfig,
-  gesturesToAttach,
-  viewTag,
-  webEventHandlersRef,
-}: AttachHandlersConfig) {
-  gestureConfig.initialize();
-
-  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
-  // when it's ran
-  ghQueueMicrotask(() => {
-    if (!preparedGesture.isMounted) {
-      return;
-    }
-    gestureConfig.prepare();
-  });
-
-  for (const handler of gesturesToAttach) {
-    checkGestureCallbacksForWorklets(handler);
-    RNGestureHandlerModule.createGestureHandler(
-      handler.handlerName,
-      handler.handlerTag,
-      filterConfig(handler.config, ALLOWED_PROPS)
-    );
-
-    registerHandler(handler.handlerTag, handler, handler.config.testId);
-  }
-
-  // Use queueMicrotask to extract handlerTags, because all refs should be initialized
-  // when it's ran
-  ghQueueMicrotask(() => {
-    if (!preparedGesture.isMounted) {
-      return;
-    }
-    for (const handler of gesturesToAttach) {
-      RNGestureHandlerModule.updateGestureHandler(
-        handler.handlerTag,
-        filterConfig(
-          handler.config,
-          ALLOWED_PROPS,
-          extractGestureRelations(handler)
-        )
-      );
-    }
-
-    scheduleFlushOperations();
-  });
-
-  for (const gesture of gesturesToAttach) {
-    const actionType = gesture.shouldUseReanimated
-      ? ActionType.REANIMATED_WORKLET
-      : ActionType.JS_FUNCTION_NEW_API;
-
-    if (Platform.OS === 'web') {
-      (
-        RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
-      )(
-        gesture.handlerTag,
-        viewTag,
-        ActionType.JS_FUNCTION_OLD_API, // Ignored on web
-        webEventHandlersRef
-      );
-    } else {
-      RNGestureHandlerModule.attachGestureHandler(
-        gesture.handlerTag,
-        viewTag,
-        actionType
-      );
-    }
-
-    MountRegistry.gestureWillMount(gesture);
-  }
-
-  preparedGesture.attachedGestures = gesturesToAttach;
-
-  if (preparedGesture.animatedHandlers) {
-    const isAnimatedGesture = (g: GestureType) => g.shouldUseReanimated;
-
-    preparedGesture.animatedHandlers.value = gesturesToAttach
-      .filter(isAnimatedGesture)
-      .map((g) => g.handlers) as unknown as HandlerCallbacks<
-      Record<string, unknown>
-    >[];
-  }
-}

package/src/handlers/gestures/GestureDetector/dropHandlers.ts

@@ -1,17 +0,0 @@
-import { unregisterHandler } from '../../handlersRegistry';
-import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
-import { scheduleFlushOperations } from '../../utils';
-import { AttachedGestureState } from './types';
-import { MountRegistry } from '../../../mountRegistry';
-
-export function dropHandlers(preparedGesture: AttachedGestureState) {
-  for (const handler of preparedGesture.attachedGestures) {
-    RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
-
-    unregisterHandler(handler.handlerTag, handler.config.testId);
-
-    MountRegistry.gestureWillUnmount(handler);
-  }
-
-  scheduleFlushOperations();
-}