@amazon-devices/react-native-gesture-handler 2.0.9000000000 → 4.0.0-rn-83

package/src/RNGestureHandlerModule.windows.ts

@@ -1,11 +1,8 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
-//GestureHandlers
-import InteractionManager from './web/tools/InteractionManager';
-import NodeManager from './web/tools/NodeManager';
+// GestureHandlers
 import PanGestureHandler from './web/handlers/PanGestureHandler';
 import TapGestureHandler from './web/handlers/TapGestureHandler';
 import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
@@ -14,18 +11,7 @@ import RotationGestureHandler from './web/handlers/RotationGestureHandler';
 import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
 import ManualGestureHandler from './web/handlers/ManualGestureHandler';
-
-//Hammer Handlers
-import * as HammerNodeManager from './web_hammer/NodeManager';
-import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
-import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
-import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
-import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
-import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
-import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
-import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
 import { Config } from './web/interfaces';
-import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -38,16 +24,6 @@ export const Gestures = {
   ManualGestureHandler,
 };
 
-export const HammerGestures = {
-  NativeViewGestureHandler: HammerNativeViewGestureHandler,
-  PanGestureHandler: HammerPanGestureHandler,
-  TapGestureHandler: HammerTapGestureHandler,
-  LongPressGestureHandler: HammerLongPressGestureHandler,
-  PinchGestureHandler: HammerPinchGestureHandler,
-  RotationGestureHandler: HammerRotationGestureHandler,
-  FlingGestureHandler: HammerFlingGestureHandler,
-};
-
 export default {
   handleSetJSResponder(_tag: number, _blockNativeResponder: boolean) {
     // NO-OP
@@ -56,89 +32,31 @@ export default {
     // NO-OP
   },
   createGestureHandler<T>(
-    handlerName: keyof typeof Gestures,
-    handlerTag: number,
-    config: T
+    _handlerName: keyof typeof Gestures,
+    _handlerTag: number,
+    _config: T
   ) {
-    if (isNewWebImplementationEnabled()) {
-      if (!(handlerName in Gestures)) {
-        throw new Error(
-          `react-native-gesture-handler: ${handlerName} is not supported on web.`
-        );
-      }
-
-      const GestureClass = Gestures[handlerName];
-      NodeManager.createGestureHandler(
-        handlerTag,
-        new GestureClass(new GestureHandlerWebDelegate())
-      );
-      InteractionManager.getInstance().configureInteractions(
-        NodeManager.getHandler(handlerTag),
-        config as unknown as Config
-      );
-    } else {
-      if (!(handlerName in HammerGestures)) {
-        throw new Error(
-          `react-native-gesture-handler: ${handlerName} is not supported on web.`
-        );
-      }
-
-      // @ts-ignore If it doesn't exist, the error is thrown
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const GestureClass = HammerGestures[handlerName];
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
-    }
-
-    this.updateGestureHandler(handlerTag, config as unknown as Config);
+    // NO-OP
   },
   attachGestureHandler(
-    handlerTag: number,
+    _handlerTag: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    newView: any,
+    _newView: any,
     _actionType: ActionType,
-    propsRef: React.RefObject<unknown>
+    _propsRef: React.RefObject<unknown>
   ) {
-    if (
-      !(newView instanceof HTMLElement || newView instanceof React.Component)
-    ) {
-      return;
-    }
-
-    if (isNewWebImplementationEnabled()) {
-      //@ts-ignore Types should be HTMLElement or React.Component
-      NodeManager.getHandler(handlerTag).init(newView, propsRef);
-    } else {
-      //@ts-ignore Types should be HTMLElement or React.Component
-      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
-    }
+    // NO-OP
   },
-  updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isNewWebImplementationEnabled()) {
-      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
-
-      InteractionManager.getInstance().configureInteractions(
-        NodeManager.getHandler(handlerTag),
-        newConfig
-      );
-    } else {
-      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
-    }
+  updateGestureHandler(_handlerTag: number, _newConfig: Config) {
+    // NO-OP
   },
-  getGestureHandlerNode(handlerTag: number) {
-    if (isNewWebImplementationEnabled()) {
-      return NodeManager.getHandler(handlerTag);
-    } else {
-      return HammerNodeManager.getHandler(handlerTag);
-    }
+  getGestureHandlerNode(_handlerTag: number) {
+    // NO-OP
   },
-  dropGestureHandler(handlerTag: number) {
-    if (isNewWebImplementationEnabled()) {
-      NodeManager.dropGestureHandler(handlerTag);
-    } else {
-      HammerNodeManager.dropGestureHandler(handlerTag);
-    }
+  dropGestureHandler(_handlerTag: number) {
+    // NO-OP
+  },
+  flushOperations() {
+    // NO-OP
   },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  flushOperations() {},
 };

package/src/State.ts

@@ -10,4 +10,4 @@ export const State = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type State = typeof State[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];

package/src/TouchEventType.ts

@@ -7,4 +7,5 @@ export const TouchEventType = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type TouchEventType = typeof TouchEventType[keyof typeof TouchEventType];
+export type TouchEventType =
+  (typeof TouchEventType)[keyof typeof TouchEventType];

package/src/components/DrawerLayout.tsx

@@ -28,15 +28,14 @@ import {
   HandlerStateChangeEvent,
   UserSelect,
   ActiveCursor,
+  MouseButton,
 } from '../handlers/gestureHandlerCommon';
-import {
-  PanGestureHandler,
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+import type {
   PanGestureHandlerEventPayload,
-} from '../handlers/PanGestureHandler';
-import {
-  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -45,20 +44,39 @@ const IDLE: DrawerState = 'Idle';
 const DRAGGING: DrawerState = 'Dragging';
 const SETTLING: DrawerState = 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerPosition = 'left' | 'right';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerType = 'front' | 'back' | 'slide';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 // Animated.AnimatedInterpolation has been converted to a generic type
 // in @types/react-native 0.70. This way we can maintain compatibility
 // with all versions of @types/react-native`
 type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export interface DrawerLayoutProps {
   /**
    * This attribute is present in the standard implementation already and is one
@@ -155,10 +173,10 @@ export interface DrawerLayoutProps {
 
   onGestureRef?: (ref: PanGestureHandler) => void;
 
-  // implicit `children` prop has been removed in @types/react^18.0.0
+  // Implicit `children` prop has been removed in @types/react^18.0.0
   children?:
-    | React.ReactNode
-    | ((openValue?: AnimatedInterpolation) => React.ReactNode);
+  | React.ReactNode
+  | ((openValue?: AnimatedInterpolation) => React.ReactNode);
 
   /**
    * @default 'none'
@@ -173,8 +191,23 @@ export interface DrawerLayoutProps {
    * Values: see CSS cursor values
    */
   activeCursor?: ActiveCursor;
+
+  /**
+   * @default 'MouseButton.LEFT'
+   * Allows to choose which mouse button should underlying pan handler react to.
+   */
+  mouseButton?: MouseButton;
+
+  /**
+   * @default 'false if MouseButton.RIGHT is specified'
+   * Allows to enable/disable context menu.
+   */
+  enableContextMenu?: boolean;
 }
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLayoutState = {
   dragX: Animated.Value;
   touchX: Animated.Value;
@@ -184,10 +217,17 @@ export type DrawerLayoutState = {
   drawerOpened: boolean;
 };
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerMovementOption = {
   velocity?: number;
   speed?: number;
 };
+
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
 export default class DrawerLayout extends Component<
   DrawerLayoutProps,
   DrawerLayoutState
@@ -240,8 +280,10 @@ export default class DrawerLayout extends Component<
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
-  private accessibilityIsModalView = React.createRef<View>();
-  private pointerEventsView = React.createRef<View>();
+  private accessibilityIsModalView =
+    React.createRef<React.ComponentRef<typeof View>>();
+  private pointerEventsView =
+    React.createRef<React.ComponentRef<typeof View>>();
   private panGestureHandler = React.createRef<PanGestureHandler | null>();
   private drawerShown = false;
 
@@ -508,7 +550,7 @@ export default class DrawerLayout extends Component<
         this.emitStateChanged(IDLE, willShow);
         this.setState({ drawerOpened: willShow });
         if (this.state.drawerState !== DRAGGING) {
-          // it's possilbe that user started drag while the drawer
+          // It's possilbe that user started drag while the drawer
           // was settling, don't override state in this case
           this.setState({ drawerState: IDLE });
         }
@@ -521,6 +563,7 @@ export default class DrawerLayout extends Component<
     });
   };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
   openDrawer = (options: DrawerMovementOption = {}) => {
     this.animateDrawer(
       // TODO: decide if it should be null or undefined is the proper value
@@ -590,7 +633,7 @@ export default class DrawerLayout extends Component<
     const drawerSlide = drawerType !== 'back';
     const containerSlide = drawerType !== 'front';
 
-    // we rely on row and row-reverse flex directions to position the drawer
+    // We rely on row and row-reverse flex directions to position the drawer
     // properly. Apparently for RTL these are flipped which requires us to use
     // the opposite setting for the drawer to appear from left or right
     // according to the drawerPosition prop
@@ -700,6 +743,8 @@ export default class DrawerLayout extends Component<
         // @ts-ignore could be fixed in handler types
         userSelect={this.props.userSelect}
         activeCursor={this.props.activeCursor}
+        mouseButton={this.props.mouseButton}
+        enableContextMenu={this.props.enableContextMenu}
         ref={this.setPanGestureRef}
         hitSlop={hitSlop}
         activeOffsetX={gestureOrientation * minSwipeDistance!}

package/src/components/GestureButtons.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  processColor,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Platform, processColor, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 import GestureHandlerButton from './GestureHandlerButton';
@@ -16,114 +9,26 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
-import {
-  NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from '../handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-}
-
-export interface BaseButtonProps extends RawButtonProps {
-  /**
-   * Called when the button gets pressed (analogous to `onPress` in
-   * `TouchableHighlight` from RN core).
-   */
-  onPress?: (pointerInside: boolean) => void;
-
-  /**
-   * Called when the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => void;
-
-  /**
-   * Called when button changes from inactive to active and vice versa. It
-   * passes active state as a boolean variable as a first parameter for that
-   * method.
-   */
-  onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-
-export interface RectButtonProps extends BaseButtonProps {
-  /**
-   * Background color that will be dimmed when button is in active state.
-   */
-  underlayColor?: string;
-
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the underlay when button is in active state.
-   */
-  activeOpacity?: number;
-}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
+import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
+import type {
+  BaseButtonWithRefProps,
+  BaseButtonProps,
+  RectButtonWithRefProps,
+  RectButtonProps,
+  BorderlessButtonWithRefProps,
+  BorderlessButtonProps,
+} from './GestureButtonsProps';
+import { isFabric } from '../utils';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
-  // @ts-ignore types not correct?
+  // @ts-ignore
   shouldCancelWhenOutside: Platform.OS === 'kepler',
   shouldActivateOnStart: false,
 });
 
-export class BaseButton extends React.Component<BaseButtonProps> {
+let IS_FABRIC: null | boolean = null;
+
+class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   static defaultProps = {
     delayLongPress: 600,
   };
@@ -132,7 +37,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
   private longPressDetected: boolean;
 
-  constructor(props: BaseButtonProps) {
+  constructor(props: BaseButtonWithRefProps) {
     super(props);
     this.lastActive = false;
     this.longPressDetected = false;
@@ -156,7 +61,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       this.lastActive &&
       this.props.onPress
     ) {
-      this.props.onPress(active);
+      this.props.onPress(pointerInside);
     }
 
     if (
@@ -173,7 +78,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
         );
       }
     } else if (
-      // cancel longpress timeout if it's set and the finger moved out of the view
+      // Cancel longpress timeout if it's set and the finger moved out of the view
       state === State.ACTIVE &&
       !pointerInside &&
       this.longPressTimeout !== undefined
@@ -181,7 +86,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       clearTimeout(this.longPressTimeout);
       this.longPressTimeout = undefined;
     } else if (
-      // cancel longpress timeout if it's set and the gesture has finished
+      // Cancel longpress timeout if it's set and the gesture has finished
       this.longPressTimeout !== undefined &&
       (state === State.END ||
         state === State.CANCELLED ||
@@ -220,11 +125,21 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   };
 
   render() {
-    const { rippleColor, ...rest } = this.props;
+    const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
+
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const rippleColor = IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor ?? undefined);
 
     return (
       <RawButton
-        rippleColor={processColor(rippleColor)}
+        ref={this.props.innerRef}
+        rippleColor={rippleColor}
+        style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}
@@ -233,7 +148,18 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   }
 }
 
-const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+const AnimatedInnerBaseButton =
+  Animated.createAnimatedComponent<typeof InnerBaseButton>(InnerBaseButton);
+
+export const BaseButton = React.forwardRef<
+  React.ComponentType,
+  Omit<BaseButtonProps, 'innerRef'>
+>((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);
+
+const AnimatedBaseButton = React.forwardRef<
+  React.ComponentType,
+  Animated.AnimatedProps<BaseButtonWithRefProps>
+>((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
 
 const btnStyles = StyleSheet.create({
   underlay: {
@@ -245,7 +171,7 @@ const btnStyles = StyleSheet.create({
   },
 });
 
-export class RectButton extends React.Component<RectButtonProps> {
+class InnerRectButton extends React.Component<RectButtonWithRefProps> {
   static defaultProps = {
     activeOpacity: 0.105,
     underlayColor: 'black',
@@ -253,7 +179,7 @@ export class RectButton extends React.Component<RectButtonProps> {
 
   private opacity: Animated.Value;
 
-  constructor(props: RectButtonProps) {
+  constructor(props: RectButtonWithRefProps) {
     super(props);
     this.opacity = new Animated.Value(0);
   }
@@ -269,11 +195,12 @@ export class RectButton extends React.Component<RectButtonProps> {
   render() {
     const { children, style, ...rest } = this.props;
 
-    const resolvedStyle = StyleSheet.flatten(style ?? {});
+    const resolvedStyle = StyleSheet.flatten(style) ?? {};
 
     return (
       <BaseButton
         {...rest}
+        ref={this.props.innerRef}
         style={resolvedStyle}
         onActiveStateChange={this.onActiveStateChange}>
         <Animated.View
@@ -296,7 +223,12 @@ export class RectButton extends React.Component<RectButtonProps> {
   }
 }
 
-export class BorderlessButton extends React.Component<BorderlessButtonProps> {
+export const RectButton = React.forwardRef<
+  React.ComponentType,
+  Omit<RectButtonProps, 'innerRef'>
+>((props, ref) => <InnerRectButton innerRef={ref} {...props} />);
+
+class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
   static defaultProps = {
     activeOpacity: 0.3,
     borderless: true,
@@ -304,7 +236,7 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
 
   private opacity: Animated.Value;
 
-  constructor(props: BorderlessButtonProps) {
+  constructor(props: BorderlessButtonWithRefProps) {
     super(props);
     this.opacity = new Animated.Value(1);
   }
@@ -318,11 +250,12 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
   };
 
   render() {
-    const { children, style, ...rest } = this.props;
+    const { children, style, innerRef, ...rest } = this.props;
 
     return (
       <AnimatedBaseButton
         {...rest}
+        innerRef={innerRef}
         onActiveStateChange={this.onActiveStateChange}
         style={[style, Platform.OS === 'ios' && { opacity: this.opacity }]}>
         {children}
@@ -331,4 +264,9 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
   }
 }
 
+export const BorderlessButton = React.forwardRef<
+  React.ComponentType,
+  Omit<BorderlessButtonProps, 'innerRef'>
+>((props, ref) => <InnerBorderlessButton innerRef={ref} {...props} />);
+
 export { default as PureNativeButton } from './GestureHandlerButton';