react-native-gesture-handler 2.14.0 → 2.15.0

package/src/handlers/gestures/gestureStateManager.ts

@@ -18,45 +18,47 @@ const warningMessage = tagMessage(
 const REANIMATED_AVAILABLE = Reanimated?.useSharedValue !== undefined;
 const setGestureState = Reanimated?.setGestureState;
 
+function create(handlerTag: number): GestureStateManagerType {
+  'worklet';
+  return {
+    begin: () => {
+      'worklet';
+      if (REANIMATED_AVAILABLE) {
+        setGestureState(handlerTag, State.BEGAN);
+      } else {
+        console.warn(warningMessage);
+      }
+    },
+
+    activate: () => {
+      'worklet';
+      if (REANIMATED_AVAILABLE) {
+        setGestureState(handlerTag, State.ACTIVE);
+      } else {
+        console.warn(warningMessage);
+      }
+    },
+
+    fail: () => {
+      'worklet';
+      if (REANIMATED_AVAILABLE) {
+        setGestureState(handlerTag, State.FAILED);
+      } else {
+        console.warn(warningMessage);
+      }
+    },
+
+    end: () => {
+      'worklet';
+      if (REANIMATED_AVAILABLE) {
+        setGestureState(handlerTag, State.END);
+      } else {
+        console.warn(warningMessage);
+      }
+    },
+  };
+}
+
 export const GestureStateManager = {
-  create(handlerTag: number): GestureStateManagerType {
-    'worklet';
-    return {
-      begin: () => {
-        'worklet';
-        if (REANIMATED_AVAILABLE) {
-          setGestureState(handlerTag, State.BEGAN);
-        } else {
-          console.warn(warningMessage);
-        }
-      },
-
-      activate: () => {
-        'worklet';
-        if (REANIMATED_AVAILABLE) {
-          setGestureState(handlerTag, State.ACTIVE);
-        } else {
-          console.warn(warningMessage);
-        }
-      },
-
-      fail: () => {
-        'worklet';
-        if (REANIMATED_AVAILABLE) {
-          setGestureState(handlerTag, State.FAILED);
-        } else {
-          console.warn(warningMessage);
-        }
-      },
-
-      end: () => {
-        'worklet';
-        if (REANIMATED_AVAILABLE) {
-          setGestureState(handlerTag, State.END);
-        } else {
-          console.warn(warningMessage);
-        }
-      },
-    };
-  },
+  create,
 };

package/src/index.ts

@@ -2,6 +2,7 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
+export { MouseButton } from './web/interfaces';
 export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type {

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -0,0 +1,26 @@
+import { TurboModuleRegistry, TurboModule } from 'react-native';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Spec extends TurboModule {
+  handleSetJSResponder: (tag: Int32, blockNativeResponder: boolean) => void;
+  handleClearJSResponder: () => void;
+  createGestureHandler: (
+    handlerName: string,
+    handlerTag: Int32,
+    // Record<> is not supported by codegen
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    config: Object
+  ) => void;
+  attachGestureHandler: (
+    handlerTag: Int32,
+    newView: Int32,
+    actionType: Int32
+  ) => void;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  updateGestureHandler: (handlerTag: Int32, newConfig: Object) => void;
+  dropGestureHandler: (handlerTag: Int32) => void;
+  install: () => boolean;
+  flushOperations: () => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNGestureHandlerModule');

package/src/web/handlers/FlingGestureHandler.ts

@@ -5,7 +5,7 @@ import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 const DEFAULT_MAX_DURATION_MS = 800;
-const DEFAULT_MIN_ACCEPTABLE_DELTA = 160;
+const DEFAULT_MIN_ACCEPTABLE_DELTA = 32;
 const DEFAULT_DIRECTION = Direction.RIGHT;
 const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;
 
@@ -83,6 +83,10 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     this.keyPointer = event.pointerId;
 
@@ -141,11 +145,11 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private onUp(event: AdaptedEvent): void {
-    this.tracker.removeFromTracker(event.pointerId);
-    if (this.currentState !== State.BEGAN) {
-      return;
+    if (this.currentState === State.BEGAN) {
+      this.endFling();
     }
-    this.endFling();
+
+    this.tracker.removeFromTracker(event.pointerId);
   }
 
   public activate(force?: boolean): void {

package/src/web/handlers/GestureHandler.ts

@@ -10,6 +10,7 @@ import {
   PointerType,
   TouchEventType,
   EventTypes,
+  MouseButton,
 } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
@@ -117,6 +118,10 @@ export default abstract class GestureHandler {
     );
 
     this.onStateChange(newState, oldState);
+
+    if (!this.enabled && this.isFinished()) {
+      this.currentState = State.UNDETERMINED;
+    }
   }
 
   protected onStateChange(_newState: State, _oldState: State): void {}
@@ -736,8 +741,20 @@ export default abstract class GestureHandler {
     return false;
   }
 
+  public isButtonInConfig(mouseButton: MouseButton | undefined) {
+    return (
+      !mouseButton ||
+      (!this.config.mouseButton && mouseButton === MouseButton.LEFT) ||
+      (this.config.mouseButton && mouseButton & this.config.mouseButton)
+    );
+  }
+
   protected resetConfig(): void {}
 
+  public onDestroy(): void {
+    this.delegate.destroy(this.config);
+  }
+
   //
   // Getters and setters
   //

package/src/web/handlers/LongPressGestureHandler.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { State } from '../../State';
 import { AdaptedEvent, Config } from '../interfaces';
 
@@ -22,11 +21,11 @@ export default class LongPressGestureHandler extends GestureHandler {
   private activationTimeout: number | undefined;
 
   public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-
-    if (Platform.OS === 'web') {
-      (this.delegate.getView() as HTMLElement).oncontextmenu = () => false;
+    if (this.config.enableContextMenu === undefined) {
+      this.config.enableContextMenu = false;
     }
+
+    super.init(ref, propsRef);
   }
 
   protected transformNativeEvent() {
@@ -59,6 +58,10 @@ export default class LongPressGestureHandler extends GestureHandler {
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
     this.tryBegin(event);

package/src/web/handlers/PanGestureHandler.ts

@@ -211,6 +211,10 @@ export default class PanGestureHandler extends GestureHandler {
 
   //EventsHandling
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 

package/src/web/handlers/TapGestureHandler.ts

@@ -105,6 +105,10 @@ export default class TapGestureHandler extends GestureHandler {
 
   //Handling Events
   protected onPointerDown(event: AdaptedEvent): void {
+    if (!this.isButtonInConfig(event.button)) {
+      return;
+    }
+
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
 

package/src/web/interfaces.ts

@@ -37,6 +37,8 @@ export interface Config extends Record<string, ConfigArgs> {
   shouldCancelWhenOutside?: boolean;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
+  enableContextMenu?: boolean;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;
@@ -122,22 +124,20 @@ export interface AdaptedEvent {
   pointerId: number;
   eventType: EventTypes;
   pointerType: PointerType;
-  buttons: number;
   time: number;
+  button?: MouseButton;
   allTouches?: TouchList;
   changedTouches?: TouchList;
   touchEventType?: TouchEventType;
 }
 
-export enum MouseButtons {
-  NONE,
-  LEFT,
-  RIGHT,
-  LEFT_RIGHT,
-  SCROLL,
-  SCROLL_LEFT,
-  SCROLL_RIGHT,
-  SCROLL_LEFT_RIGHT,
+export enum MouseButton {
+  LEFT = 1,
+  MIDDLE = 2,
+  RIGHT = 4,
+  BUTTON_4 = 8,
+  BUTTON_5 = 16,
+  ALL = 31,
 }
 
 export enum EventTypes {

package/src/web/tools/GestureHandlerDelegate.ts

@@ -1,4 +1,5 @@
 import type GestureHandler from '../handlers/GestureHandler';
+import { Config } from '../interfaces';
 
 export interface MeasureResult {
   pageX: number;
@@ -20,4 +21,6 @@ export interface GestureHandlerDelegate<T> {
   onEnd(): void;
   onCancel(): void;
   onFail(): void;
+
+  destroy(config: Config): void;
 }

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -9,6 +9,7 @@ import TouchEventManager from './TouchEventManager';
 import { State } from '../../State';
 import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
+import { Config, MouseButton } from '../interfaces';
 
 export class GestureHandlerWebDelegate
   implements GestureHandlerDelegate<HTMLElement>
@@ -37,6 +38,8 @@ export class GestureHandlerWebDelegate
 
     const config = handler.getConfig();
 
+    this.addContextMenuListeners(config);
+
     if (!config.userSelect) {
       this.view.style['webkitUserSelect'] = 'none';
       this.view.style['userSelect'] = 'none';
@@ -86,6 +89,38 @@ export class GestureHandlerWebDelegate
     }
   }
 
+  private shouldDisableContextMenu(config: Config) {
+    return (
+      (config.enableContextMenu === undefined &&
+        this.gestureHandler.isButtonInConfig(MouseButton.RIGHT)) ||
+      config.enableContextMenu === false
+    );
+  }
+
+  private addContextMenuListeners(config: Config): void {
+    if (this.shouldDisableContextMenu(config)) {
+      this.view.addEventListener('contextmenu', this.disableContextMenu);
+    } else if (config.enableContextMenu) {
+      this.view.addEventListener('contextmenu', this.enableContextMenu);
+    }
+  }
+
+  private removeContextMenuListeners(config: Config): void {
+    if (this.shouldDisableContextMenu(config)) {
+      this.view.removeEventListener('contextmenu', this.disableContextMenu);
+    } else if (config.enableContextMenu) {
+      this.view.removeEventListener('contextmenu', this.enableContextMenu);
+    }
+  }
+
+  private disableContextMenu(this: void, e: MouseEvent): void {
+    e.preventDefault();
+  }
+
+  private enableContextMenu(this: void, e: MouseEvent): void {
+    e.stopPropagation();
+  }
+
   onBegin(): void {
     // no-op for now
   }
@@ -112,4 +147,8 @@ export class GestureHandlerWebDelegate
   onFail(): void {
     this.tryResetCursor();
   }
+
+  public destroy(config: Config): void {
+    this.removeContextMenuListeners(config);
+  }
 }

package/src/web/tools/NodeManager.ts

@@ -21,7 +21,9 @@ export default abstract class NodeManager {
     handler: InstanceType<ValueOf<typeof Gestures>>
   ): void {
     if (handlerTag in this.gestures) {
-      throw new Error(`Handler with tag ${handlerTag} already exists`);
+      throw new Error(
+        `Handler with tag ${handlerTag} already exists. Please ensure that no Gesture instance is used across multiple GestureDetectors.`
+      );
     }
 
     this.gestures[handlerTag] = handler;
@@ -33,6 +35,8 @@ export default abstract class NodeManager {
       return;
     }
 
+    this.gestures[handlerTag].onDestroy();
+
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.gestures[handlerTag];
   }

package/src/web/tools/PointerEventManager.ts

@@ -1,9 +1,27 @@
-import { AdaptedEvent, EventTypes, PointerType } from '../interfaces';
+import {
+  AdaptedEvent,
+  EventTypes,
+  MouseButton,
+  PointerType,
+} from '../interfaces';
 import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
 
+const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
+
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
+  private readonly mouseButtonsMapper = new Map<number, MouseButton>();
+
+  constructor(view: HTMLElement) {
+    super(view);
+
+    this.mouseButtonsMapper.set(0, MouseButton.LEFT);
+    this.mouseButtonsMapper.set(1, MouseButton.MIDDLE);
+    this.mouseButtonsMapper.set(2, MouseButton.RIGHT);
+    this.mouseButtonsMapper.set(3, MouseButton.BUTTON_4);
+    this.mouseButtonsMapper.set(4, MouseButton.BUTTON_5);
+  }
 
   public setListeners(): void {
     this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
@@ -19,7 +37,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.DOWN);
       const target = event.target as HTMLElement;
 
-      if (target instanceof HTMLDivElement) {
+      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
         target.setPointerCapture(adaptedEvent.pointerId);
       }
 
@@ -50,7 +68,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.UP);
       const target = event.target as HTMLElement;
 
-      if (target instanceof HTMLDivElement) {
+      if (!POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)) {
         target.releasePointerCapture(adaptedEvent.pointerId);
       }
 
@@ -87,7 +105,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       // God, I do love web development.
       if (
         !target.hasPointerCapture(event.pointerId) &&
-        target instanceof HTMLDivElement
+        !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
       ) {
         target.setPointerCapture(event.pointerId);
       }
@@ -190,7 +208,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
       pointerId: event.pointerId,
       eventType: eventType,
       pointerType: event.pointerType as PointerType,
-      buttons: event.buttons,
+      button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
     };
   }

package/src/web/tools/TouchEventManager.ts

@@ -1,7 +1,6 @@
 import {
   AdaptedEvent,
   EventTypes,
-  MouseButtons,
   PointerType,
   TouchEventType,
 } from '../interfaces';
@@ -157,7 +156,6 @@ export default class TouchEventManager extends EventManager<HTMLElement> {
       pointerId: event.changedTouches[index].identifier,
       eventType: eventType,
       pointerType: PointerType.TOUCH,
-      buttons: MouseButtons.NONE,
       time: event.timeStamp,
       allTouches: event.touches,
       changedTouches: event.changedTouches,

package/ios/Handlers/RNPinchHandler.m

@@ -1,95 +0,0 @@
-
-
-//
-//  RNPinchHandler.m
-//  RNGestureHandler
-//
-//  Created by Krzysztof Magiera on 12/10/2017.
-//  Copyright © 2017 Software Mansion. All rights reserved.
-//
-
-#import "RNPinchHandler.h"
-
-#if !TARGET_OS_TV
-@interface RNBetterPinchRecognizer : UIPinchGestureRecognizer
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler;
-
-@end
-
-@implementation RNBetterPinchRecognizer {
-  __weak RNGestureHandler *_gestureHandler;
-}
-
-- (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler
-{
-  if ((self = [super initWithTarget:self action:@selector(handleGesture:)])) {
-    _gestureHandler = gestureHandler;
-  }
-  return self;
-}
-
-- (void)handleGesture:(UIGestureRecognizer *)recognizer
-{
-  if (self.state == UIGestureRecognizerStateBegan) {
-    self.scale = 1;
-  }
-  [_gestureHandler handleGesture:recognizer];
-}
-
-- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesBegan:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesBegan:touches withEvent:event];
-}
-
-- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesMoved:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesMoved:touches withEvent:event];
-}
-
-- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesEnded:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesEnded:touches withEvent:event];
-}
-
-- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
-{
-  [super touchesCancelled:touches withEvent:event];
-  [_gestureHandler.pointerTracker touchesCancelled:touches withEvent:event];
-}
-
-- (void)reset
-{
-  [_gestureHandler.pointerTracker reset];
-  [super reset];
-}
-
-@end
-#endif
-
-@implementation RNPinchGestureHandler
-
-- (instancetype)initWithTag:(NSNumber *)tag
-{
-  if ((self = [super initWithTag:tag])) {
-#if !TARGET_OS_TV
-    _recognizer = [[RNBetterPinchRecognizer alloc] initWithGestureHandler:self];
-#endif
-  }
-  return self;
-}
-
-#if !TARGET_OS_TV
-- (RNGestureHandlerEventExtraData *)eventExtraData:(UIPinchGestureRecognizer *)recognizer
-{
-  return [RNGestureHandlerEventExtraData forPinch:recognizer.scale
-                                   withFocalPoint:[recognizer locationInView:recognizer.view]
-                                     withVelocity:recognizer.velocity
-                              withNumberOfTouches:recognizer.numberOfTouches];
-}
-#endif
-
-@end

package/ios/RNGestureHandlerModule.h

@@ -1,7 +0,0 @@
-#import <React/RCTBridgeModule.h>
-#import <React/RCTEventEmitter.h>
-#import <React/RCTUIManager.h>
-
-@interface RNGestureHandlerModule : RCTEventEmitter <RCTBridgeModule>
-
-@end