even more refactoring

Author: akwasniewski

packages/react-native-gesture-handler/src/RNGestureHandlerModule.web.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { ActionType } from './ActionType';
 import { Gestures } from './web/Gestures';
-import type { Config } from './web/interfaces';
+import type { Config, PropsRef } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
@@ -48,7 +48,7 @@ export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newView: any,
     actionType: ActionType,
-    propsRef: React.RefObject<unknown>
+    propsRef: React.RefObject<PropsRef>
   ) {
     if (!(newView instanceof Element || newView instanceof React.Component)) {
       shouldPreventDrop = true;

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -8,20 +8,21 @@ 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 { AttachedGestureState } from './types';
 import {
   extractGestureRelations,
   checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
 } from './utils';
 import { MountRegistry } from '../../../mountRegistry';
+import { PropsRef } from '../../../web/interfaces';
 
 interface AttachHandlersConfig {
   preparedGesture: AttachedGestureState;
   gestureConfig: ComposedGesture | GestureType;
   gesturesToAttach: GestureType[];
   viewTag: number;
-  webEventHandlersRef: React.RefObject<WebEventHandler>;
+  webEventHandlersRef: React.RefObject<PropsRef>;
 }
 
 export function attachHandlers({

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/types.ts

@@ -1,6 +1,5 @@
 import { GestureType, HandlerCallbacks } from '../gesture';
 import { SharedValue } from '../reanimatedWrapper';
-import { HandlerStateChangeEvent } from '../../gestureHandlerCommon';
 
 export interface AttachedGestureState {
   // Array of gestures that should be attached to the view under that gesture detector
@@ -23,10 +22,3 @@ export interface GestureDetectorState {
   previousViewTag: number;
   forceRebuildReanimatedEvent: boolean;
 }
-
-export interface WebEventHandler {
-  onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
-  onGestureHandlerStateChange?: (
-    event: HandlerStateChangeEvent<unknown>
-  ) => void;
-}

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/useDetectorUpdater.ts

@@ -2,17 +2,14 @@ import React, { useCallback } from 'react';
 import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 
-import {
-  AttachedGestureState,
-  GestureDetectorState,
-  WebEventHandler,
-} from './types';
+import { AttachedGestureState, GestureDetectorState } from './types';
 import { attachHandlers } from './attachHandlers';
 import { updateHandlers } from './updateHandlers';
 import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
 import { useForceRender, validateDetectorChildren } from './utils';
 import findNodeHandle from '../../../findNodeHandle';
+import { PropsRef } from '../../../web/interfaces';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view
@@ -22,7 +19,7 @@ export function useDetectorUpdater(
   preparedGesture: AttachedGestureState,
   gesturesToAttach: GestureType[],
   gestureConfig: ComposedGesture | GestureType,
-  webEventHandlersRef: React.RefObject<WebEventHandler>
+  webEventHandlersRef: React.RefObject<PropsRef>
 ) {
   const forceRender = useForceRender();
   const updateAttachedGestures = useCallback(

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts

@@ -21,7 +21,7 @@ import { RNRenderer } from '../../../RNRenderer';
 import { useCallback, useRef, useState } from 'react';
 import { Reanimated } from '../reanimatedWrapper';
 import { onGestureHandlerEvent } from '../eventReceiver';
-import { WebEventHandler } from './types';
+import { PropsRef } from '../../../web/interfaces';
 
 export const ALLOWED_PROPS = [
   ...baseGestureHandlerWithDetectorProps,
@@ -167,7 +167,7 @@ export function useForceRender() {
 }
 
 export function useWebEventHandlers() {
-  return useRef<WebEventHandler>({
+  return useRef<PropsRef>({
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

@@ -2,18 +2,23 @@ import { useEffect, useRef, useCallback } from 'react';
 import { View } from 'react-native';
 import RNGestureHandlerModule from '../RNGestureHandlerModule.web';
 import { ActionType } from '../ActionType';
+import { PropsRef } from '../web/interfaces';
 export interface GestureHandlerDetectorProps {
   handlerTags: number[];
   dispatchesAnimatedEvents: boolean;
   moduleId: number;
   children?: React.ReactNode;
+  onGestureHandlerEvent: () => void;
+  onGestureHandlerAnimatedEvent?: () => void;
+  onGestureHandlerStateChange: () => void;
+  onGestureHandlerTouchEvent?: () => void;
 }
 
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const { handlerTags, dispatchesAnimatedEvents, children } = props;
 
   const viewRef = useRef(null);
-  const propsRef = useRef<GestureHandlerDetectorProps>(props);
+  const propsRef = useRef<PropsRef>(props);
   const oldHandlerTags = useRef<Set<number>>(new Set<number>());
 
   const detachHandlers = useCallback(() => {

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -31,7 +31,7 @@ export default abstract class GestureHandler implements IGestureHandler {
   private _enabled = false;
 
   private viewRef: number | null = null;
-  private propsRef: React.RefObject<unknown> | null = null;
+  private propsRef: React.RefObject<PropsRef> | null = null;
   private actionType: ActionType | null = null;
   private _handlerTag!: number;
   private _config: Config = { enabled: false };
@@ -61,7 +61,7 @@ export default abstract class GestureHandler implements IGestureHandler {
 
   protected init(
     viewRef: number,
-    propsRef: React.RefObject<unknown>,
+    propsRef: React.RefObject<PropsRef>,
     actionType: ActionType
   ) {
     this.propsRef = propsRef;
@@ -356,21 +356,21 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
-    const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef = this
-      .propsRef.current as PropsRef;
+    const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
+      this.propsRef.current;
 
     const touchEvent: ResultTouchEvent | undefined =
       this.transformTouchEvent(event);
 
     if (touchEvent) {
       if (
-        this.actionType === ActionType.NATIVE_DETECTOR ||
-        this.actionType === ActionType.NATIVE_DETECTOR_ANIMATED_EVENT
+        onGestureHandlerTouchEvent &&
+        (this.actionType === ActionType.NATIVE_DETECTOR ||
+          this.actionType === ActionType.NATIVE_DETECTOR_ANIMATED_EVENT)
       ) {
         invokeNullableMethod(onGestureHandlerTouchEvent, touchEvent);
-      } else {
-        invokeNullableMethod(onGestureHandlerEvent, touchEvent);
       }
+      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
     }
   }
 
@@ -386,7 +386,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       onGestureHandlerEvent,
       onGestureHandlerStateChange,
       onGestureHandlerAnimatedEvent,
-    }: PropsRef = this.propsRef.current as PropsRef;
+    }: PropsRef = this.propsRef.current;
     const resultEvent: ResultEvent = this.transformEventData(
       newState,
       oldState
@@ -404,13 +404,13 @@ export default abstract class GestureHandler implements IGestureHandler {
     if (this.state === State.ACTIVE) {
       resultEvent.nativeEvent.oldState = undefined;
       if (
-        this.actionType === ActionType.NATIVE_ANIMATED_EVENT ||
-        this.actionType === ActionType.NATIVE_DETECTOR_ANIMATED_EVENT
+        onGestureHandlerAnimatedEvent &&
+        (this.actionType === ActionType.NATIVE_ANIMATED_EVENT ||
+          this.actionType === ActionType.NATIVE_DETECTOR_ANIMATED_EVENT)
       ) {
         invokeNullableMethod(onGestureHandlerAnimatedEvent, resultEvent);
-      } else {
-        invokeNullableMethod(onGestureHandlerEvent, resultEvent);
       }
+      invokeNullableMethod(onGestureHandlerEvent, resultEvent);
     }
   };
 
@@ -582,8 +582,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       timeStamp: Date.now(),
     };
 
-    const { onGestureHandlerEvent }: PropsRef = this.propsRef
-      .current as PropsRef;
+    const { onGestureHandlerEvent }: PropsRef = this.propsRef.current;
 
     invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
   }

packages/react-native-gesture-handler/src/web/handlers/LongPressGestureHandler.ts

@@ -1,6 +1,6 @@
 import { ActionType } from '../../ActionType';
 import { State } from '../../State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, PropsRef } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -24,7 +24,7 @@ export default class LongPressGestureHandler extends GestureHandler {
 
   public init(
     ref: number,
-    propsRef: React.RefObject<unknown>,
+    propsRef: React.RefObject<PropsRef>,
     actionType: ActionType
   ) {
     if (this.config.enableContextMenu === undefined) {

packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, PropsRef } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import { ActionType } from '../../ActionType';
@@ -19,7 +19,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
   public init(
     ref: number,
-    propsRef: React.RefObject<unknown>,
+    propsRef: React.RefObject<PropsRef>,
     actionType: ActionType
   ): void {
     super.init(ref, propsRef, actionType);

packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, PropsRef } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import ScaleGestureDetector, {
@@ -51,7 +51,7 @@ export default class PinchGestureHandler extends GestureHandler {
 
   public init(
     ref: number,
-    propsRef: React.RefObject<unknown>,
+    propsRef: React.RefObject<PropsRef>,
     actionType: ActionType
   ) {
     super.init(ref, propsRef, actionType);