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

package/src/handlers/createNativeWrapper.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useImperativeHandle, useRef } from 'react';
+
+import {
+  NativeViewGestureHandler,
+  NativeViewGestureHandlerProps,
+  nativeViewProps,
+} from './NativeViewGestureHandler';
+
+/*
+ * This array should consist of:
+ *   - All keys in propTypes from NativeGestureHandler
+ *     (and all keys in GestureHandlerPropTypes)
+ *   - 'onGestureHandlerEvent'
+ *   - 'onGestureHandlerStateChange'
+ */
+const NATIVE_WRAPPER_PROPS_FILTER = [
+  ...nativeViewProps,
+  'onGestureHandlerEvent',
+  'onGestureHandlerStateChange',
+] as const;
+
+export default function createNativeWrapper<P>(
+  Component: React.ComponentType<P>,
+  config: Readonly<NativeViewGestureHandlerProps> = {}
+) {
+  const ComponentWrapper = React.forwardRef<
+    React.ComponentType<any>,
+    P & NativeViewGestureHandlerProps
+  >((props, ref) => {
+    // filter out props that should be passed to gesture handler wrapper
+    const gestureHandlerProps = Object.keys(props).reduce(
+      (res, key) => {
+        // TS being overly protective with it's types, see https://github.com/microsoft/TypeScript/issues/26255#issuecomment-458013731 for more info
+        const allowedKeys: readonly string[] = NATIVE_WRAPPER_PROPS_FILTER;
+        if (allowedKeys.includes(key)) {
+          // @ts-ignore FIXME(TS)
+          res[key] = props[key];
+        }
+        return res;
+      },
+      { ...config } // watch out not to modify config
+    );
+    const _ref = useRef<React.ComponentType<P>>();
+    const _gestureHandlerRef = useRef<React.ComponentType<P>>();
+    useImperativeHandle(
+      ref,
+      // @ts-ignore TODO(TS) decide how nulls work in this context
+      () => {
+        const node = _gestureHandlerRef.current;
+        // add handlerTag for relations config
+        if (_ref.current && node) {
+          // @ts-ignore FIXME(TS) think about createHandler return type
+          _ref.current.handlerTag = node.handlerTag;
+          return _ref.current;
+        }
+        return null;
+      },
+      [_ref, _gestureHandlerRef]
+    );
+    return (
+      <NativeViewGestureHandler
+        {...gestureHandlerProps}
+        // @ts-ignore TODO(TS)
+        ref={_gestureHandlerRef}>
+        <Component {...props} ref={_ref} />
+      </NativeViewGestureHandler>
+    );
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  ComponentWrapper.displayName =
+    Component?.displayName ||
+    // @ts-ignore if render doesn't exist it will return undefined and go further
+    Component?.render?.name ||
+    (typeof Component === 'string' && Component) ||
+    'ComponentWrapper';
+
+  return ComponentWrapper;
+}

package/src/handlers/gestureHandlerCommon.ts

@@ -0,0 +1,250 @@
+// 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 { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
+
+import { State } from '../State';
+import { TouchEventType } from '../TouchEventType';
+import { ValueOf } from '../typeUtils';
+import { handlerIDToTag } from './handlersRegistry';
+import { toArray } from '../utils';
+import RNGestureHandlerModule from '../RNGestureHandlerModule';
+import { ghQueueMicrotask } from '../ghQueueMicrotask';
+
+const commonProps = [
+  'id',
+  'enabled',
+  'shouldCancelWhenOutside',
+  'hitSlop',
+  'cancelsTouchesInView',
+  'userSelect',
+  'activeCursor',
+] 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 baseGestureHandlerWithMonitorProps = [
+  ...commonProps,
+  'needsPointerData',
+  'manualActivation',
+];
+
+export interface GestureEventPayload {
+  handlerTag: number;
+  numberOfPointers: number;
+  state: ValueOf<typeof State>;
+}
+export interface HandlerStateChangeEventPayload extends GestureEventPayload {
+  oldState: ValueOf<typeof State>;
+}
+
+export type HitSlop =
+  | number
+  | 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';
+
+//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[];
+};
+
+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;
+};
+
+// 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;
+};
+
+function isConfigParam(param: unknown, name: string) {
+  // param !== Object(param) returns false if `param` is a function
+  // or an object and returns true if `param` is null
+  return (
+    param !== undefined &&
+    (param !== Object(param) ||
+      !('__isNative' in (param as Record<string, unknown>))) &&
+    name !== 'onHandlerStateChange' &&
+    name !== 'onGestureEvent'
+  );
+}
+
+export function filterConfig(
+  props: Record<string, unknown>,
+  validProps: string[],
+  defaults: Record<string, unknown> = {}
+) {
+  const filteredConfig = { ...defaults };
+  for (const key of validProps) {
+    let value = props[key];
+    if (isConfigParam(value, key)) {
+      if (key === 'simultaneousHandlers' || key === 'waitFor') {
+        value = transformIntoHandlerTags(props[key]);
+      } else if (key === 'hitSlop' && typeof value !== 'object') {
+        value = { top: value, left: value, bottom: value, right: value };
+      }
+      filteredConfig[key] = value;
+    }
+  }
+  return filteredConfig;
+}
+
+function transformIntoHandlerTags(handlerIDs: any) {
+  handlerIDs = toArray(handlerIDs);
+
+  if (Platform.OS === 'web') {
+    return handlerIDs
+      .map(({ current }: { current: any }) => current)
+      .filter((handle: any) => handle);
+  }
+  // converts handler string IDs into their numeric tags
+  return handlerIDs
+    .map(
+      (handlerID: any) =>
+        handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1
+    )
+    .filter((handlerTag: number) => handlerTag > 0);
+}
+
+export function findNodeHandle(
+  node: null | number | React.Component<any, any> | React.ComponentClass<any>
+): null | number | React.Component<any, any> | React.ComponentClass<any> {
+  if (Platform.OS === 'web') {
+    return node;
+  }
+  return findNodeHandleRN(node);
+}
+
+let flushOperationsScheduled = false;
+
+export function scheduleFlushOperations() {
+  if (!flushOperationsScheduled) {
+    flushOperationsScheduled = true;
+    ghQueueMicrotask(() => {
+      RNGestureHandlerModule.flushOperations();
+
+      flushOperationsScheduled = false;
+    });
+  }
+}

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -0,0 +1,106 @@
+import {
+  BaseButtonProps,
+  BorderlessButtonProps,
+  RawButtonProps,
+  RectButtonProps,
+} from '../components/GestureButtons';
+import {
+  GestureEvent,
+  GestureEventPayload,
+  HandlerStateChangeEvent,
+  HandlerStateChangeEventPayload,
+} from './gestureHandlerCommon';
+import {
+  FlingGestureHandlerEventPayload,
+  FlingGestureHandlerProps,
+} from './FlingGestureHandler';
+import {
+  ForceTouchGestureHandlerEventPayload,
+  ForceTouchGestureHandlerProps,
+} from './ForceTouchGestureHandler';
+import {
+  LongPressGestureHandlerEventPayload,
+  LongPressGestureHandlerProps,
+} from './LongPressGestureHandler';
+import {
+  PanGestureHandlerEventPayload,
+  PanGestureHandlerProps,
+} from './PanGestureHandler';
+import {
+  PinchGestureHandlerEventPayload,
+  PinchGestureHandlerProps,
+} from './PinchGestureHandler';
+import {
+  RotationGestureHandlerEventPayload,
+  RotationGestureHandlerProps,
+} from './RotationGestureHandler';
+import {
+  TapGestureHandlerEventPayload,
+  TapGestureHandlerProps,
+} from './TapGestureHandler';
+import {
+  NativeViewGestureHandlerPayload,
+  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>;
+
+export type ForceTouchGestureHandlerGestureEvent =
+  GestureEvent<ForceTouchGestureHandlerEventPayload>;
+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;
+export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
+// button props
+export type RawButtonProperties = RawButtonProps;
+export type BaseButtonProperties = BaseButtonProps;
+export type RectButtonProperties = RectButtonProps;
+export type BorderlessButtonProperties = BorderlessButtonProps;