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

package/src/handlers/gestures/gestureComposition.ts

@@ -0,0 +1,122 @@
+import { BaseGesture, Gesture, GestureRef, GestureType } from './gesture';
+
+function extendRelation(
+  currentRelation: GestureRef[] | undefined,
+  extendWith: GestureType[]
+) {
+  if (currentRelation === undefined) {
+    return [...extendWith];
+  } else {
+    return [...currentRelation, ...extendWith];
+  }
+}
+
+export class ComposedGesture extends Gesture {
+  protected gestures: Gesture[] = [];
+  protected simultaneousGestures: GestureType[] = [];
+  protected requireGesturesToFail: GestureType[] = [];
+
+  constructor(...gestures: Gesture[]) {
+    super();
+    this.gestures = gestures;
+  }
+
+  protected prepareSingleGesture(
+    gesture: Gesture,
+    simultaneousGestures: GestureType[],
+    requireGesturesToFail: GestureType[]
+  ) {
+    if (gesture instanceof BaseGesture) {
+      const newConfig = { ...gesture.config };
+
+      newConfig.simultaneousWith = extendRelation(
+        newConfig.simultaneousWith,
+        simultaneousGestures
+      );
+      newConfig.requireToFail = extendRelation(
+        newConfig.requireToFail,
+        requireGesturesToFail
+      );
+
+      gesture.config = newConfig;
+    } else if (gesture instanceof ComposedGesture) {
+      gesture.simultaneousGestures = simultaneousGestures;
+      gesture.requireGesturesToFail = requireGesturesToFail;
+      gesture.prepare();
+    }
+  }
+
+  prepare() {
+    for (const gesture of this.gestures) {
+      this.prepareSingleGesture(
+        gesture,
+        this.simultaneousGestures,
+        this.requireGesturesToFail
+      );
+    }
+  }
+
+  initialize() {
+    for (const gesture of this.gestures) {
+      gesture.initialize();
+    }
+  }
+
+  toGestureArray(): GestureType[] {
+    return this.gestures.flatMap((gesture) => gesture.toGestureArray());
+  }
+}
+
+export class SimultaneousGesture extends ComposedGesture {
+  prepare() {
+    // this piece of magic works something like this:
+    // for every gesture in the array
+    const simultaneousArrays = this.gestures.map((gesture) =>
+      // we take the array it's in
+      this.gestures
+        // and make a copy without it
+        .filter((x) => x !== gesture)
+        // then we flatmap the result to get list of raw (not composed) gestures
+        // this way we don't make the gestures simultaneous with themselves, which is
+        // important when the gesture is `ExclusiveGesture` - we don't want to make
+        // exclusive gestures simultaneous
+        .flatMap((x) => x.toGestureArray())
+    );
+
+    for (let i = 0; i < this.gestures.length; i++) {
+      this.prepareSingleGesture(
+        this.gestures[i],
+        simultaneousArrays[i],
+        this.requireGesturesToFail
+      );
+    }
+  }
+}
+
+export class ExclusiveGesture extends ComposedGesture {
+  prepare() {
+    // transforms the array of gestures into array of grouped raw (not composed) gestures
+    // i.e. [gesture1, gesture2, ComposedGesture(gesture3, gesture4)] -> [[gesture1], [gesture2], [gesture3, gesture4]]
+    const gestureArrays = this.gestures.map((gesture) =>
+      gesture.toGestureArray()
+    );
+
+    let requireToFail: GestureType[] = [];
+
+    for (let i = 0; i < this.gestures.length; i++) {
+      this.prepareSingleGesture(
+        this.gestures[i],
+        this.simultaneousGestures,
+        this.requireGesturesToFail.concat(requireToFail)
+      );
+
+      // every group gets to wait for all groups before it
+      requireToFail = requireToFail.concat(gestureArrays[i]);
+    }
+  }
+}
+
+export type ComposedGestureType = InstanceType<typeof ComposedGesture>;
+export type RaceGestureType = ComposedGestureType;
+export type SimultaneousGestureType = InstanceType<typeof SimultaneousGesture>;
+export type ExclusiveGestureType = InstanceType<typeof ExclusiveGesture>;

package/src/handlers/gestures/gestureObjects.ts

@@ -0,0 +1,84 @@
+import { FlingGesture } from './flingGesture';
+import { ForceTouchGesture } from './forceTouchGesture';
+import { Gesture } from './gesture';
+import {
+  ComposedGesture,
+  ExclusiveGesture,
+  SimultaneousGesture,
+} from './gestureComposition';
+import { LongPressGesture } from './longPressGesture';
+import { PanGesture } from './panGesture';
+import { PinchGesture } from './pinchGesture';
+import { RotationGesture } from './rotationGesture';
+import { TapGesture } from './tapGesture';
+import { NativeGesture } from './nativeGesture';
+import { ManualGesture } from './manualGesture';
+import { HoverGesture } from './hoverGesture';
+
+export const GestureObjects = {
+  Tap: () => {
+    return new TapGesture();
+  },
+
+  Pan: () => {
+    return new PanGesture();
+  },
+
+  Pinch: () => {
+    return new PinchGesture();
+  },
+
+  Rotation: () => {
+    return new RotationGesture();
+  },
+
+  Fling: () => {
+    return new FlingGesture();
+  },
+
+  LongPress: () => {
+    return new LongPressGesture();
+  },
+
+  ForceTouch: () => {
+    return new ForceTouchGesture();
+  },
+
+  Native: () => {
+    return new NativeGesture();
+  },
+
+  Manual: () => {
+    return new ManualGesture();
+  },
+
+  Hover: () => {
+    return new HoverGesture();
+  },
+
+  /**
+   * Builds a composed gesture consisting of gestures provided as parameters.
+   * The first one that becomes active cancels the rest of gestures.
+   */
+  Race: (...gestures: Gesture[]) => {
+    return new ComposedGesture(...gestures);
+  },
+
+  /**
+   * Builds a composed gesture that allows all base gestures to run simultaneously.
+   */
+  Simultaneous(...gestures: Gesture[]) {
+    return new SimultaneousGesture(...gestures);
+  },
+
+  /**
+   * Builds a composed gesture where only one of the provided gestures can become active.
+   * Priority is decided through the order of gestures: the first one has higher priority
+   * than the second one, second one has higher priority than the third one, and so on.
+   * For example, to make a gesture that recognizes both single and double tap you need
+   * to call Exclusive(doubleTap, singleTap).
+   */
+  Exclusive(...gestures: Gesture[]) {
+    return new ExclusiveGesture(...gestures);
+  },
+};

package/src/handlers/gestures/gestureStateManager.ts

@@ -0,0 +1,62 @@
+import { Reanimated } from './reanimatedWrapper';
+import { State } from '../../State';
+import { tagMessage } from '../../utils';
+
+export interface GestureStateManagerType {
+  begin: () => void;
+  activate: () => void;
+  fail: () => void;
+  end: () => void;
+}
+
+const warningMessage = tagMessage(
+  'react-native-reanimated is required in order to use synchronous state management'
+);
+
+// check if reanimated module is available, but look for useSharedValue as conditional
+// require of reanimated can sometimes return content of `utils.ts` file (?)
+const REANIMATED_AVAILABLE = Reanimated?.useSharedValue !== undefined;
+const setGestureState = Reanimated?.setGestureState;
+
+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);
+        }
+      },
+    };
+  },
+};

package/src/handlers/gestures/gestureStateManager.web.ts

@@ -0,0 +1,24 @@
+import NodeManager from '../../web/tools/NodeManager';
+import { GestureStateManagerType } from './gestureStateManager';
+
+export const GestureStateManager = {
+  create(handlerTag: number): GestureStateManagerType {
+    return {
+      begin: () => {
+        NodeManager.getHandler(handlerTag).begin();
+      },
+
+      activate: () => {
+        NodeManager.getHandler(handlerTag).activate();
+      },
+
+      fail: () => {
+        NodeManager.getHandler(handlerTag).fail();
+      },
+
+      end: () => {
+        NodeManager.getHandler(handlerTag).end();
+      },
+    };
+  },
+};

package/src/handlers/gestures/hoverGesture.ts

@@ -0,0 +1,83 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+export type HoverGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type HoverGestureChangeEventPayload = {
+  changeX: number;
+  changeY: number;
+};
+
+export enum HoverEffect {
+  NONE = 0,
+  LIFT = 1,
+  HIGHLIGHT = 2,
+}
+
+export interface HoverGestureConfig {
+  hoverEffect?: HoverEffect;
+}
+
+export const hoverGestureHandlerProps = ['hoverEffect'] as const;
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<HoverGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<HoverGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: HoverGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      changeX: current.x,
+      changeY: current.y,
+    };
+  } else {
+    changePayload = {
+      changeX: current.x - previous.x,
+      changeY: current.y - previous.y,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class HoverGesture extends ContinousBaseGesture<
+  HoverGestureHandlerEventPayload,
+  HoverGestureChangeEventPayload
+> {
+  public config: BaseGestureConfig & HoverGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'HoverGestureHandler';
+  }
+
+  /**
+   * Sets the visual hover effect.
+   * iOS only
+   */
+  effect(effect: HoverEffect) {
+    this.config.hoverEffect = effect;
+    return this;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        HoverGestureHandlerEventPayload & HoverGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, HoverGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type HoverGestureType = InstanceType<typeof HoverGesture>;

package/src/handlers/gestures/longPressGesture.ts

@@ -0,0 +1,28 @@
+import { BaseGesture, BaseGestureConfig } from './gesture';
+import {
+  LongPressGestureConfig,
+  LongPressGestureHandlerEventPayload,
+} from '../LongPressGestureHandler';
+
+export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPayload> {
+  public config: BaseGestureConfig & LongPressGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'LongPressGestureHandler';
+    this.shouldCancelWhenOutside(true);
+  }
+
+  minDuration(duration: number) {
+    this.config.minDurationMs = duration;
+    return this;
+  }
+
+  maxDistance(distance: number) {
+    this.config.maxDist = distance;
+    return this;
+  }
+}
+
+export type LongPressGestureType = InstanceType<typeof LongPressGesture>;

package/src/handlers/gestures/manualGesture.ts

@@ -0,0 +1,31 @@
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+import { ContinousBaseGesture } from './gesture';
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<Record<string, never>>,
+  _previous?: GestureUpdateEvent<Record<string, never>>
+) {
+  'worklet';
+  return current;
+}
+
+export class ManualGesture extends ContinousBaseGesture<
+  Record<string, never>,
+  Record<string, never>
+> {
+  constructor() {
+    super();
+
+    this.handlerName = 'ManualGestureHandler';
+  }
+
+  onChange(
+    callback: (event: GestureUpdateEvent<Record<string, never>>) => void
+  ) {
+    // @ts-ignore TS being overprotective, Record<string, never> is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type ManualGestureType = InstanceType<typeof ManualGesture>;

package/src/handlers/gestures/nativeGesture.ts

@@ -0,0 +1,27 @@
+import { BaseGestureConfig, BaseGesture } from './gesture';
+import {
+  NativeViewGestureConfig,
+  NativeViewGestureHandlerPayload,
+} from '../NativeViewGestureHandler';
+
+export class NativeGesture extends BaseGesture<NativeViewGestureHandlerPayload> {
+  public config: BaseGestureConfig & NativeViewGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'NativeViewGestureHandler';
+  }
+
+  shouldActivateOnStart(value: boolean) {
+    this.config.shouldActivateOnStart = value;
+    return this;
+  }
+
+  disallowInterruption(value: boolean) {
+    this.config.disallowInterruption = value;
+    return this;
+  }
+}
+
+export type NativeGestureType = InstanceType<typeof NativeGesture>;

package/src/handlers/gestures/panGesture.ts

@@ -0,0 +1,152 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+import {
+  PanGestureConfig,
+  PanGestureHandlerEventPayload,
+} from '../PanGestureHandler';
+
+export type PanGestureChangeEventPayload = {
+  changeX: number;
+  changeY: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PanGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PanGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PanGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      changeX: current.translationX,
+      changeY: current.translationY,
+    };
+  } else {
+    changePayload = {
+      changeX: current.translationX - previous.translationX,
+      changeY: current.translationY - previous.translationY,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PanGesture extends ContinousBaseGesture<
+  PanGestureHandlerEventPayload,
+  PanGestureChangeEventPayload
+> {
+  public config: BaseGestureConfig & PanGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'PanGestureHandler';
+  }
+
+  activeOffsetY(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.activeOffsetYStart = offset[0];
+      this.config.activeOffsetYEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.activeOffsetYStart = offset;
+    } else {
+      this.config.activeOffsetYEnd = offset;
+    }
+    return this;
+  }
+
+  activeOffsetX(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.activeOffsetXStart = offset[0];
+      this.config.activeOffsetXEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.activeOffsetXStart = offset;
+    } else {
+      this.config.activeOffsetXEnd = offset;
+    }
+    return this;
+  }
+
+  failOffsetY(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.failOffsetYStart = offset[0];
+      this.config.failOffsetYEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.failOffsetYStart = offset;
+    } else {
+      this.config.failOffsetYEnd = offset;
+    }
+    return this;
+  }
+
+  failOffsetX(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.failOffsetXStart = offset[0];
+      this.config.failOffsetXEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.failOffsetXStart = offset;
+    } else {
+      this.config.failOffsetXEnd = offset;
+    }
+    return this;
+  }
+
+  minPointers(minPointers: number) {
+    this.config.minPointers = minPointers;
+    return this;
+  }
+
+  maxPointers(maxPointers: number) {
+    this.config.maxPointers = maxPointers;
+    return this;
+  }
+
+  minDistance(distance: number) {
+    this.config.minDist = distance;
+    return this;
+  }
+
+  minVelocity(velocity: number) {
+    this.config.minVelocity = velocity;
+    return this;
+  }
+
+  minVelocityX(velocity: number) {
+    this.config.minVelocityX = velocity;
+    return this;
+  }
+
+  minVelocityY(velocity: number) {
+    this.config.minVelocityY = velocity;
+    return this;
+  }
+
+  averageTouches(value: boolean) {
+    this.config.avgTouches = value;
+    return this;
+  }
+
+  enableTrackpadTwoFingerGesture(value: boolean) {
+    this.config.enableTrackpadTwoFingerGesture = value;
+    return this;
+  }
+
+  activateAfterLongPress(duration: number) {
+    this.config.activateAfterLongPress = duration;
+    return this;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PanGestureHandlerEventPayload & PanGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PanGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type PanGestureType = InstanceType<typeof PanGesture>;

package/src/handlers/gestures/pinchGesture.ts

@@ -0,0 +1,51 @@
+import { ContinousBaseGesture } from './gesture';
+import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+export type PinchGestureChangeEventPayload = {
+  scaleChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PinchGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PinchGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PinchGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      scaleChange: current.scale,
+    };
+  } else {
+    changePayload = {
+      scaleChange: current.scale / previous.scale,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PinchGesture extends ContinousBaseGesture<
+  PinchGestureHandlerEventPayload,
+  PinchGestureChangeEventPayload
+> {
+  constructor() {
+    super();
+
+    this.handlerName = 'PinchGestureHandler';
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PinchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type PinchGestureType = InstanceType<typeof PinchGesture>;