react-native-gesture-handler 1.2.1 → 1.4.1

package/web/PanGestureHandler.js

@@ -0,0 +1,213 @@
+import Hammer from 'hammerjs';
+
+import {
+  MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD,
+  MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD,
+} from './constants';
+import DraggingGestureHandler from './DraggingGestureHandler';
+import { isnan, TEST_MIN_IF_NOT_NAN, VEC_LEN_SQ } from './utils';
+
+class PanGestureHandler extends DraggingGestureHandler {
+  get name() {
+    return 'pan';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Pan;
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      direction: this.getDirection(),
+    };
+  }
+
+  getDirection() {
+    const config = this.getConfig();
+    const {
+      activeOffsetXStart,
+      activeOffsetXEnd,
+      activeOffsetYStart,
+      activeOffsetYEnd,
+      minDist,
+    } = config;
+    let directions = [];
+    let horizontalDirections = [];
+
+    if (!isnan(minDist)) {
+      return Hammer.DIRECTION_ALL;
+    }
+
+    if (!isnan(activeOffsetXStart)) horizontalDirections.push(Hammer.DIRECTION_LEFT);
+    if (!isnan(activeOffsetXEnd)) horizontalDirections.push(Hammer.DIRECTION_RIGHT);
+    if (horizontalDirections.length === 2) horizontalDirections = [Hammer.DIRECTION_HORIZONTAL];
+
+    directions = directions.concat(horizontalDirections);
+    let verticalDirections = [];
+
+    if (!isnan(activeOffsetYStart)) verticalDirections.push(Hammer.DIRECTION_UP);
+    if (!isnan(activeOffsetYEnd)) verticalDirections.push(Hammer.DIRECTION_DOWN);
+
+    if (verticalDirections.length === 2) verticalDirections = [Hammer.DIRECTION_VERTICAL];
+
+    directions = directions.concat(verticalDirections);
+
+    if (!directions.length) {
+      return Hammer.DIRECTION_NONE;
+    }
+    if (
+      directions[0] === Hammer.DIRECTION_HORIZONTAL &&
+      directions[1] === Hammer.DIRECTION_VERTICAL
+    ) {
+      return Hammer.DIRECTION_ALL;
+    }
+    if (horizontalDirections.length && verticalDirections.length) {
+      return Hammer.DIRECTION_ALL;
+    }
+
+    return directions[0];
+  }
+
+  getConfig() {
+    if (!this._hasCustomActivationCriteria) {
+      // Default config
+      // If no params have been defined then this config should emulate the native gesture as closely as possible.
+      return {
+        minDistSq: 10,
+      };
+    }
+    return this.config;
+  }
+
+  shouldFailUnderCustomCriteria({ deltaX, deltaY }, criteria) {
+    return (
+      (!isnan(criteria.failOffsetXStart) && deltaX < criteria.failOffsetXStart) ||
+      (!isnan(criteria.failOffsetXEnd) && deltaX > criteria.failOffsetXEnd) ||
+      (!isnan(criteria.failOffsetYStart) && deltaY < criteria.failOffsetYStart) ||
+      (!isnan(criteria.failOffsetYEnd) && deltaY > criteria.failOffsetYEnd)
+    );
+  }
+
+  shouldActivateUnderCustomCriteria({ deltaX, deltaY, velocity }, criteria) {
+    return (
+      (!isnan(criteria.activeOffsetXStart) && deltaX < criteria.activeOffsetXStart) ||
+      (!isnan(criteria.activeOffsetXEnd) && deltaX > criteria.activeOffsetXEnd) ||
+      (!isnan(criteria.activeOffsetYStart) && deltaY < criteria.activeOffsetYStart) ||
+      (!isnan(criteria.activeOffsetYEnd) && deltaY > criteria.activeOffsetYEnd) ||
+      TEST_MIN_IF_NOT_NAN(VEC_LEN_SQ({ x: deltaX, y: deltaY }), criteria.minDistSq) ||
+      TEST_MIN_IF_NOT_NAN(velocity.x, criteria.minVelocityX) ||
+      TEST_MIN_IF_NOT_NAN(velocity.y, criteria.minVelocityY) ||
+      TEST_MIN_IF_NOT_NAN(VEC_LEN_SQ(velocity), criteria.minVelocitySq)
+    );
+  }
+
+  shouldMultiFingerPanFail({ pointerLength, scale, deltaRotation }) {
+    if (pointerLength <= 1) {
+      return false;
+    }
+
+    // Test if the pan had too much pinching or rotating.
+    const deltaScale = Math.abs(scale - 1);
+    const absDeltaRotation = Math.abs(deltaRotation);
+    if (deltaScale > MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD) {
+      // > If the threshold doesn't seem right.
+      // You can log the value which it failed at here:
+      return true;
+    }
+    if (absDeltaRotation > MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD) {
+      // > If the threshold doesn't seem right.
+      // You can log the value which it failed at here:
+      return true;
+    }
+
+    return false;
+  }
+
+  updateHasCustomActivationCriteria(criteria) {
+    return (
+      !isnan(criteria.minDistSq) ||
+      !isnan(criteria.minVelocityX) ||
+      !isnan(criteria.minVelocityY) ||
+      !isnan(criteria.minVelocitySq) ||
+      !isnan(criteria.activeOffsetXStart) ||
+      !isnan(criteria.activeOffsetXEnd) ||
+      !isnan(criteria.activeOffsetYStart) ||
+      !isnan(criteria.activeOffsetYEnd)
+    );
+  }
+
+  isGestureEnabledForEvent(props, recognizer, inputData) {
+    if (this.shouldFailUnderCustomCriteria(inputData, props)) {
+      return { failed: true };
+    }
+
+    const velocity = { x: inputData.velocityX, y: inputData.velocityY };
+    if (
+      this._hasCustomActivationCriteria &&
+      this.shouldActivateUnderCustomCriteria(
+        { deltaX: inputData.deltaX, deltaY: inputData.deltaY, velocity },
+        props
+      )
+    ) {
+      if (
+        this.shouldMultiFingerPanFail({
+          pointerLength: inputData.maxPointers,
+          scale: inputData.scale,
+          deltaRotation: inputData.deltaRotation,
+        })
+      ) {
+        return {
+          failed: true,
+        };
+      }
+      return { success: true };
+    }
+    return { success: false };
+  }
+}
+
+function validateConfig(config = {}) {
+  const isNum = v => isnan(v) || typeof v === 'number';
+  const isBool = v => typeof v === 'boolean';
+
+  const valid = {
+    enabled: isBool,
+    minDistSq: isNum,
+    minVelocityX: isNum,
+    minVelocityY: isNum,
+    // TODO: Bacon: remove `minVelocity`
+    minVelocity: isNum,
+    minVelocitySq: isNum,
+    activeOffsetXStart: isNum,
+    activeOffsetXEnd: isNum,
+    failOffsetXStart: isNum,
+    failOffsetXEnd: isNum,
+    activeOffsetYStart: isNum,
+    activeOffsetYEnd: isNum,
+    failOffsetYStart: isNum,
+    failOffsetYEnd: isNum,
+    hasCustomActivationCriteria: isBool,
+    minPointers: isNum,
+    maxPointers: isNum,
+  };
+  const keys = Object.keys(valid);
+
+  let invalidKeys = [];
+  for (const key of Object.keys(config)) {
+    if (keys.includes(key)) {
+      if (valid[key](config[key])) {
+        console.warn('Invalid type: ' + key + ': ' + config[key]);
+      }
+    } else {
+      invalidKeys.push(key);
+    }
+  }
+
+  if (invalidKeys.length) {
+    throw new Error('Invalid config props found: ' + invalidKeys.join(', '));
+  }
+  return config;
+}
+
+export default PanGestureHandler;

package/web/PinchGestureHandler.js

@@ -0,0 +1,24 @@
+import Hammer from 'hammerjs';
+
+import IndiscreteGestureHandler from './IndiscreteGestureHandler';
+
+class PinchGestureHandler extends IndiscreteGestureHandler {
+  get name() {
+    return 'pinch';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Pinch;
+  }
+
+  transformNativeEvent({ scale, velocity, center }) {
+    return {
+      focalX: center.x,
+      focalY: center.y,
+      velocity,
+      scale,
+    };
+  }
+}
+
+export default PinchGestureHandler;

package/web/PressGestureHandler.js

@@ -0,0 +1,147 @@
+import Hammer from 'hammerjs';
+
+import State from '../State';
+import { CONTENT_TOUCHES_DELAY, CONTENT_TOUCHES_QUICK_TAP_END_DELAY } from './constants';
+import DiscreteGestureHandler from './DiscreteGestureHandler';
+import { fireAfterInterval, isnan } from './utils';
+
+class PressGestureHandler extends DiscreteGestureHandler {
+  get name() {
+    return 'press';
+  }
+
+  get minDurationMs() {
+    return isnan(this.config.minDurationMs) ? 5 : this.config.minDurationMs;
+  }
+
+  get maxDist() {
+    return isnan(this.config.maxDist) ? 9 : this.config.maxDist;
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Press;
+  }
+
+  shouldDelayTouches = true;
+
+  simulateCancelEvent(inputData) {
+    // Long press never starts so we can't rely on the running event boolean.
+    this.hasGestureFailed = true;
+    this.cancelEvent(inputData);
+  }
+
+  updateHasCustomActivationCriteria({ shouldCancelWhenOutside, maxDistSq }) {
+    return shouldCancelWhenOutside || !isnan(maxDistSq);
+  }
+
+  getState(type) {
+    return {
+      [Hammer.INPUT_START]: State.BEGAN,
+      [Hammer.INPUT_MOVE]: State.ACTIVE,
+      [Hammer.INPUT_END]: State.END,
+      [Hammer.INPUT_CANCEL]: State.CANCELLED,
+    }[type];
+  }
+
+  getConfig() {
+    if (!this._hasCustomActivationCriteria) {
+      // Default config
+      // If no params have been defined then this config should emulate the native gesture as closely as possible.
+      return {
+        shouldCancelWhenOutside: true,
+        maxDistSq: 10,
+      };
+    }
+    return this.config;
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      // threshold: this.maxDist,
+      time: this.minDurationMs,
+    };
+  }
+
+  onGestureActivated(ev) {
+    this.onGestureStart(ev);
+  }
+
+  shouldDelayTouchForEvent({ pointerType }) {
+    // Don't disable event for mouse input
+    return this.shouldDelayTouches && pointerType === 'touch';
+  }
+
+  onGestureStart(ev) {
+    this.isGestureRunning = true;
+    clearTimeout(this.visualFeedbackTimer);
+    this.initialEvent = ev;
+    this.visualFeedbackTimer = fireAfterInterval(() => {
+      this.sendGestureStartedEvent(this.initialEvent);
+      this.initialEvent = null;
+    }, this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY);
+  }
+
+  sendGestureStartedEvent(ev) {
+    clearTimeout(this.visualFeedbackTimer);
+    this.visualFeedbackTimer = null;
+    this.sendEvent({
+      ...ev,
+      eventType: Hammer.INPUT_MOVE,
+      isFirst: true,
+    });
+  }
+
+  forceInvalidate(event) {
+    super.forceInvalidate(event);
+    clearTimeout(this.visualFeedbackTimer);
+    this.visualFeedbackTimer = null;
+    this.initialEvent = null;
+  }
+
+  onRawEvent(ev) {
+    super.onRawEvent(ev);
+    if (ev.isFinal && this.isGestureRunning) {
+      let timeout;
+      if (this.visualFeedbackTimer) {
+        // Aesthetic timing for a quick tap.
+        // We haven't activated the tap right away to emulate iOS `delaysContentTouches`
+        // Now we must send the initial activation event and wait a set amount of time before firing the end event.
+        timeout = CONTENT_TOUCHES_QUICK_TAP_END_DELAY;
+        this.sendGestureStartedEvent(this.initialEvent);
+        this.initialEvent = null;
+      }
+      fireAfterInterval(() => {
+        this.sendEvent({
+          ...ev,
+          eventType: Hammer.INPUT_END,
+          isFinal: true,
+        });
+        this.onGestureEnded();
+      }, timeout);
+    }
+  }
+
+  updateGestureConfig({
+    shouldActivateOnStart = false,
+    disallowInterruption = false,
+    shouldCancelWhenOutside = true,
+    minDurationMs = Number.NaN,
+    maxDist = Number.NaN,
+    minPointers = 1,
+    maxPointers = 1,
+    ...props
+  }) {
+    return super.updateGestureConfig({
+      shouldActivateOnStart,
+      disallowInterruption,
+      shouldCancelWhenOutside,
+      minDurationMs,
+      maxDist,
+      minPointers,
+      maxPointers,
+      ...props,
+    });
+  }
+}
+export default PressGestureHandler;

package/web/RotationGestureHandler.js

@@ -0,0 +1,24 @@
+import Hammer from 'hammerjs';
+
+import { DEG_RAD } from './constants';
+import IndiscreteGestureHandler from './IndiscreteGestureHandler';
+
+class RotationGestureHandler extends IndiscreteGestureHandler {
+  get name() {
+    return 'rotate';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Rotate;
+  }
+
+  transformNativeEvent({ rotation, velocity, center }) {
+    return {
+      rotation: (rotation - this.initialRotation) * DEG_RAD,
+      anchorX: center.x,
+      anchorY: center.y,
+      velocity,
+    };
+  }
+}
+export default RotationGestureHandler;

package/web/TapGestureHandler.js

@@ -0,0 +1,160 @@
+import Hammer from 'hammerjs';
+
+import DiscreteGestureHandler from './DiscreteGestureHandler';
+import { isnan } from './utils';
+
+class TapGestureHandler extends DiscreteGestureHandler {
+  get name() {
+    return 'tap';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Tap;
+  }
+
+  get maxDelayMs() {
+    return isnan(this.config.maxDelayMs) ? 300 : this.config.maxDelayMs;
+  }
+
+  simulateCancelEvent(inputData) {
+    if (this.isGestureRunning) {
+      this.cancelEvent(inputData);
+    }
+  }
+
+  onGestureActivated(ev) {
+    if (this.isGestureRunning) {
+      this.onSuccessfulTap(ev);
+    }
+  }
+
+  onSuccessfulTap = ev => {
+    if (this._getPendingGestures().length) {
+      this._shouldFireEndEvent = ev;
+      return;
+    }
+    if (ev.eventType === Hammer.INPUT_END) {
+      this.sendEvent({ ...ev, eventType: Hammer.INPUT_MOVE });
+    }
+    // When handler gets activated it will turn into State.END immediately.
+    this.sendEvent({ ...ev, isFinal: true });
+    this.onGestureEnded(ev);
+  };
+
+  onRawEvent(ev) {
+    super.onRawEvent(ev);
+
+    // Attempt to create a touch-down event by checking if a valid tap hasn't started yet, then validating the input.
+    if (
+      !this.hasGestureFailed &&
+      !this.isGestureRunning &&
+      // Prevent multi-pointer events from misfiring.
+      !ev.isFinal
+    ) {
+      // Tap Gesture start event
+      const gesture = this.hammer.get(this.name);
+      if (gesture.options.enable(gesture, ev)) {
+        clearTimeout(this._multiTapTimer);
+
+        this.onStart(ev);
+        this.sendEvent(ev);
+      }
+    }
+    if (ev.isFinal && ev.maxPointers > 1) {
+      setTimeout(() => {
+        // Handle case where one finger presses slightly
+        // after the first finger on a multi-tap event
+        if (this.isGestureRunning) {
+          this.cancelEvent(ev);
+        }
+      });
+    }
+
+    if (this.hasGestureFailed) {
+      return;
+    }
+    // Hammer doesn't send a `cancel` event for taps.
+    // Manually fail the event.
+    if (ev.isFinal) {
+      // Handle case where one finger presses slightly
+      // after the first finger on a multi-tap event
+      if (ev.maxPointers > 1) {
+        setTimeout(() => {
+          if (this.isGestureRunning) {
+            this.cancelEvent(ev);
+          }
+        });
+      }
+
+      // Clear last timer
+      clearTimeout(this._timer);
+      // Create time out for multi-taps.
+      this._timer = setTimeout(() => {
+        this.hasGestureFailed = true;
+        this.cancelEvent(ev);
+      }, this.maxDelayMs);
+    } else if (!this.hasGestureFailed && !this.isGestureRunning) {
+      // Tap Gesture start event
+      const gesture = this.hammer.get(this.name);
+      if (gesture.options.enable(gesture, ev)) {
+        clearTimeout(this._multiTapTimer);
+
+        this.onStart(ev);
+        this.sendEvent(ev);
+      }
+    }
+  }
+
+  getHammerConfig() {
+    return {
+      ...super.getHammerConfig(),
+      event: this.name,
+      taps: isnan(this.config.numberOfTaps) ? 1 : this.config.numberOfTaps,
+      interval: this.maxDelayMs,
+      time:
+        isnan(this.config.maxDurationMs) || this.config.maxDurationMs == null
+          ? 250
+          : this.config.maxDurationMs,
+    };
+  }
+
+  updateGestureConfig({
+    shouldCancelWhenOutside = true,
+    maxDeltaX = Number.NaN,
+    maxDeltaY = Number.NaN,
+    numberOfTaps = 1,
+    minDurationMs = 525,
+    maxDelayMs = Number.NaN,
+    maxDurationMs = Number.NaN,
+    maxDist = 2,
+    minPointers = 1,
+    maxPointers = 1,
+    ...props
+  }) {
+    return super.updateGestureConfig({
+      shouldCancelWhenOutside,
+      numberOfTaps,
+      maxDeltaX,
+      maxDeltaY,
+      minDurationMs,
+      maxDelayMs,
+      maxDist,
+      minPointers,
+      maxPointers,
+      ...props,
+    });
+  }
+
+  onGestureEnded(...props) {
+    clearTimeout(this._timer);
+    super.onGestureEnded(...props);
+  }
+
+  onWaitingEnded(gesture) {
+    if (this._shouldFireEndEvent) {
+      this.onSuccessfulTap(this._shouldFireEndEvent);
+      this._shouldFireEndEvent = null;
+    }
+  }
+}
+export default TapGestureHandler;

package/web/constants.js

@@ -0,0 +1,48 @@
+import Hammer from 'hammerjs';
+
+import State from '../State';
+
+export const CONTENT_TOUCHES_DELAY = 240;
+export const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
+export const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;
+export const MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD = 7;
+export const DEG_RAD = Math.PI / 180;
+
+// Map Hammer values to RNGH
+export const EventMap = {
+  [Hammer.INPUT_START]: State.BEGAN,
+  [Hammer.INPUT_MOVE]: State.ACTIVE,
+  [Hammer.INPUT_END]: State.END,
+  [Hammer.INPUT_CANCEL]: State.FAILED,
+};
+
+export const Direction = {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+};
+
+export const DirectionMap = {
+  [Hammer.DIRECTION_RIGHT]: Direction.RIGHT,
+  [Hammer.DIRECTION_LEFT]: Direction.LEFT,
+  [Hammer.DIRECTION_UP]: Direction.UP,
+  [Hammer.DIRECTION_DOWN]: Direction.DOWN,
+};
+
+export const HammerInputNames = {
+  [Hammer.INPUT_START]: 'START',
+  [Hammer.INPUT_MOVE]: 'MOVE',
+  [Hammer.INPUT_END]: 'END',
+  [Hammer.INPUT_CANCEL]: 'CANCEL',
+};
+export const HammerDirectionNames = {
+  [Hammer.DIRECTION_HORIZONTAL]: 'HORIZONTAL',
+  [Hammer.DIRECTION_UP]: 'UP',
+  [Hammer.DIRECTION_DOWN]: 'DOWN',
+  [Hammer.DIRECTION_VERTICAL]: 'VERTICAL',
+  [Hammer.DIRECTION_NONE]: 'NONE',
+  [Hammer.DIRECTION_ALL]: 'ALL',
+  [Hammer.DIRECTION_RIGHT]: 'RIGHT',
+  [Hammer.DIRECTION_LEFT]: 'LEFT',
+};

package/web/utils.js

@@ -0,0 +1,14 @@
+export const isnan = v => Number.isNaN(v);
+export const TEST_MIN_IF_NOT_NAN = (value, limit) =>
+  !isnan(limit) && ((limit < 0 && value <= limit) || (limit >= 0 && value >= limit));
+export const VEC_LEN_SQ = ({ x = 0, y = 0 } = {}) => x * x + y * y;
+export const TEST_MAX_IF_NOT_NAN = (value, max) =>
+  !isnan(max) && ((max < 0 && value < max) || (max >= 0 && value > max));
+
+export function fireAfterInterval(method, interval) {
+  if (!interval) {
+    method();
+    return null;
+  }
+  return setTimeout(() => method(), interval);
+}

package/Directions.web.js

@@ -1,6 +0,0 @@
-export default {
-  RIGHT: 1,
-  LEFT: 2,
-  UP: 4,
-  DOWN: 8,
-};

package/Swipeable.web.js

@@ -1,4 +0,0 @@
-export default function Swipeable({ children }) {
-  console.warn('Swipeable is not yet supported on web.');
-  return children;
-}