@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1 → 2.12.6-2

package/src/handlers/createNativeWrapper.tsx

@@ -1,80 +1,81 @@
-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;
-}
+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

@@ -1,250 +1,15 @@
-// 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;
-    });
-  }
-}
+import { RNGestureHandlerModule } from '../RNGestureHandlerModule'; // RNGH: patch
+
+let flushOperationsScheduled = false;
+
+export function scheduleFlushOperations() {
+  if (!flushOperationsScheduled) {
+    flushOperationsScheduled = true;
+    queueMicrotask(() => {
+      if (RNGestureHandlerModule) {
+        RNGestureHandlerModule.flushOperations();
+      }
+      flushOperationsScheduled = false;
+    });
+  }
+}