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

package/src/web/handlers/HoverGestureHandler.ts

@@ -0,0 +1,43 @@
+import { State } from '../../State';
+import { AdaptedEvent, Config } from '../interfaces';
+import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
+import GestureHandler from './GestureHandler';
+
+export default class HoverGestureHandler extends GestureHandler {
+  public init(ref: number, propsRef: React.RefObject<unknown>) {
+    super.init(ref, propsRef);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
+  protected onPointerMoveOver(event: AdaptedEvent): void {
+    GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
+
+    this.tracker.addToTracker(event);
+    super.onPointerMoveOver(event);
+
+    if (this.getState() === State.UNDETERMINED) {
+      this.begin();
+      this.activate();
+    }
+  }
+
+  protected onPointerMoveOut(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerMoveOut(event);
+
+    this.end();
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerMove(event);
+  }
+
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.reset();
+  }
+}

package/src/web/handlers/LongPressGestureHandler.ts

@@ -0,0 +1,125 @@
+import { Platform } from 'react-native';
+import { State } from '../../State';
+import { AdaptedEvent, Config } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+
+const DEFAULT_MIN_DURATION_MS = 500;
+const DEFAULT_MAX_DIST_DP = 10;
+const SCALING_FACTOR = 10;
+
+export default class LongPressGestureHandler extends GestureHandler {
+  private minDurationMs = DEFAULT_MIN_DURATION_MS;
+  private defaultMaxDistSq = DEFAULT_MAX_DIST_DP * SCALING_FACTOR;
+
+  private maxDistSq = this.defaultMaxDistSq;
+  private startX = 0;
+  private startY = 0;
+
+  private startTime = 0;
+  private previousTime = 0;
+
+  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;
+    }
+  }
+
+  protected transformNativeEvent() {
+    return {
+      ...super.transformNativeEvent(),
+      duration: Date.now() - this.startTime,
+    };
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    if (this.config.minDurationMs !== undefined) {
+      this.minDurationMs = this.config.minDurationMs;
+    }
+
+    if (this.config.maxDist !== undefined) {
+      this.maxDistSq = this.config.maxDist * this.config.maxDist;
+    }
+  }
+
+  protected resetConfig(): void {
+    super.resetConfig();
+    this.minDurationMs = DEFAULT_MIN_DURATION_MS;
+    this.maxDistSq = this.defaultMaxDistSq;
+  }
+
+  protected onStateChange(_newState: State, _oldState: State): void {
+    clearTimeout(this.activationTimeout);
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.tryBegin(event);
+    this.tryActivate();
+    this.checkDistanceFail(event);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    super.onPointerMove(event);
+    this.tracker.track(event);
+    this.checkDistanceFail(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (this.currentState === State.ACTIVE) {
+      this.end();
+    } else {
+      this.fail();
+    }
+  }
+
+  private tryBegin(event: AdaptedEvent): void {
+    if (this.currentState !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.previousTime = Date.now();
+    this.startTime = this.previousTime;
+
+    this.begin();
+
+    this.startX = event.x;
+    this.startY = event.y;
+  }
+
+  private tryActivate(): void {
+    if (this.minDurationMs > 0) {
+      this.activationTimeout = setTimeout(() => {
+        this.activate();
+      }, this.minDurationMs);
+    } else if (this.minDurationMs === 0) {
+      this.activate();
+    }
+  }
+
+  private checkDistanceFail(event: AdaptedEvent): void {
+    const dx = event.x - this.startX;
+    const dy = event.y - this.startY;
+    const distSq = dx * dx + dy * dy;
+
+    if (distSq <= this.maxDistSq) {
+      return;
+    }
+
+    if (this.currentState === State.ACTIVE) {
+      this.cancel();
+    } else {
+      this.fail();
+    }
+  }
+}

package/src/web/handlers/ManualGestureHandler.ts

@@ -0,0 +1,43 @@
+import { AdaptedEvent, Config } from '../interfaces';
+import GestureHandler from './GestureHandler';
+
+export default class ManualGestureHandler extends GestureHandler {
+  public init(ref: number, propsRef: React.RefObject<unknown>) {
+    super.init(ref, propsRef);
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.begin();
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerMove(event);
+  }
+
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerOutOfBounds(event);
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+  }
+}

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -0,0 +1,167 @@
+import { Platform } from 'react-native';
+import { State } from '../../State';
+import { DEFAULT_TOUCH_SLOP } from '../constants';
+import { AdaptedEvent, Config } from '../interfaces';
+
+import GestureHandler from './GestureHandler';
+export default class NativeViewGestureHandler extends GestureHandler {
+  private buttonRole!: boolean;
+
+  //TODO: Implement logic for activation on start
+  //@ts-ignore Logic yet to be implemented
+  private shouldActivateOnStart = false;
+  private disallowInterruption = false;
+
+  private startX = 0;
+  private startY = 0;
+  private minDistSq = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
+
+  public init(ref: number, propsRef: React.RefObject<unknown>): void {
+    super.init(ref, propsRef);
+
+    this.setShouldCancelWhenOutside(true);
+
+    if (Platform.OS !== 'web') {
+      return;
+    }
+
+    const view = this.delegate.getView() as HTMLElement;
+
+    view.style['touchAction'] = 'auto';
+
+    //@ts-ignore Turns on defualt touch behavior on Safari
+    view.style['WebkitTouchCallout'] = 'auto';
+
+    if (view.hasAttribute('role')) {
+      this.buttonRole = true;
+    } else {
+      this.buttonRole = false;
+    }
+  }
+
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+
+    if (this.config.shouldActivateOnStart !== undefined) {
+      this.shouldActivateOnStart = this.config.shouldActivateOnStart;
+    }
+    if (this.config.disallowInterruption !== undefined) {
+      this.disallowInterruption = this.config.disallowInterruption;
+    }
+  }
+
+  protected resetConfig(): void {
+    super.resetConfig();
+  }
+
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerDown(event);
+    this.newPointerAction();
+  }
+
+  protected onPointerAdd(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+    this.newPointerAction();
+  }
+
+  private newPointerAction(): void {
+    this.startX = this.tracker.getLastAvgX();
+    this.startY = this.tracker.getLastAvgY();
+
+    if (this.currentState !== State.UNDETERMINED) {
+      return;
+    }
+
+    this.begin();
+    if (this.buttonRole) {
+      this.activate();
+    }
+  }
+
+  protected onPointerMove(event: AdaptedEvent): void {
+    this.tracker.track(event);
+
+    const dx = this.startX - this.tracker.getLastAvgX();
+    const dy = this.startY - this.tracker.getLastAvgY();
+    const distSq = dx * dx + dy * dy;
+
+    if (distSq >= this.minDistSq) {
+      if (this.buttonRole && this.currentState === State.ACTIVE) {
+        this.cancel();
+      } else if (!this.buttonRole && this.currentState === State.BEGAN) {
+        this.activate();
+      }
+    }
+  }
+
+  protected onPointerLeave(): void {
+    if (
+      this.currentState === State.BEGAN ||
+      this.currentState === State.ACTIVE
+    ) {
+      this.cancel();
+    }
+  }
+
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
+  }
+
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.onUp(event);
+  }
+
+  private onUp(event: AdaptedEvent): void {
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (this.tracker.getTrackedPointersCount() === 0) {
+      if (this.currentState === State.ACTIVE) {
+        this.end();
+      } else {
+        this.fail();
+      }
+    }
+  }
+
+  public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
+    if (super.shouldRecognizeSimultaneously(handler)) {
+      return true;
+    }
+
+    if (
+      handler instanceof NativeViewGestureHandler &&
+      handler.getState() === State.ACTIVE &&
+      handler.disallowsInterruption()
+    ) {
+      return false;
+    }
+
+    const canBeInterrupted = !this.disallowInterruption;
+
+    if (
+      this.currentState === State.ACTIVE &&
+      handler.getState() === State.ACTIVE &&
+      canBeInterrupted
+    ) {
+      return false;
+    }
+
+    return (
+      this.currentState === State.ACTIVE &&
+      canBeInterrupted &&
+      handler.getTag() > 0
+    );
+  }
+
+  public shouldBeCancelledByOther(_handler: GestureHandler): boolean {
+    return !this.disallowInterruption;
+  }
+
+  public disallowsInterruption(): boolean {
+    return this.disallowInterruption;
+  }
+}