react-native-gesture-handler 2.7.0 → 2.8.0

package/src/handlers/gestures/gestureComposition.ts

@@ -69,14 +69,24 @@ export class ComposedGesture extends Gesture {
 
 export class SimultaneousGesture extends ComposedGesture {
   prepare() {
-    const simultaneousArray = this.gestures
-      .flatMap((gesture) => gesture.toGestureArray())
-      .concat(this.simultaneousGestures);
+    // 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 (const gesture of this.gestures) {
+    for (let i = 0; i < this.gestures.length; i++) {
       this.prepareSingleGesture(
-        gesture,
-        simultaneousArray,
+        this.gestures[i],
+        simultaneousArrays[i],
         this.requireGesturesToFail
       );
     }
@@ -85,6 +95,8 @@ export class SimultaneousGesture extends ComposedGesture {
 
 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()
     );
@@ -98,6 +110,7 @@ export class ExclusiveGesture extends ComposedGesture {
         this.requireGesturesToFail.concat(requireToFail)
       );
 
+      // every group gets to wait for all groups before it
       requireToFail = requireToFail.concat(gestureArrays[i]);
     }
   }

package/src/jestUtils/jestUtils.ts

@@ -464,9 +464,8 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
-  const { emitEvent, handlerType, handlerTag } = getHandlerData(
-    componentOrGesture
-  );
+  const { emitEvent, handlerType, handlerTag } =
+    getHandlerData(componentOrGesture);
 
   let _ = fillMissingStatesTransitions(
     eventList,
@@ -478,7 +477,7 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   // @ts-ignore TODO
   _ = _.map(wrapWithNativeEvent);
 
-  const events = (_ as unknown) as WrappedGestureHandlerTestEvent[];
+  const events = _ as unknown as WrappedGestureHandlerTestEvent[];
 
   const firstEvent = events.shift()!;
 

package/src/web/detectors/RotationGestureDetector.ts

@@ -8,7 +8,8 @@ export interface RotationGestureListener {
 }
 
 export default class RotationGestureDetector
-  implements RotationGestureListener {
+  implements RotationGestureListener
+{
   onRotationBegin: (detector: RotationGestureDetector) => boolean;
   onRotation: (detector: RotationGestureDetector) => boolean;
   onRotationEnd: (detector: RotationGestureDetector) => void;

package/src/web/handlers/FlingGestureHandler.ts

@@ -21,6 +21,7 @@ export default class FlingGestureHandler extends GestureHandler {
   private startY = 0;
 
   private maxNumberOfPointersSimultaneously = 0;
+  private keyPointer = NaN;
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
@@ -29,8 +30,6 @@ export default class FlingGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.direction) {
       this.direction = this.config.direction;
     }
@@ -51,9 +50,9 @@ export default class FlingGestureHandler extends GestureHandler {
     };
   }
 
-  private startFling(event: AdaptedEvent): void {
-    this.startX = event.x;
-    this.startY = event.y;
+  private startFling(): void {
+    this.startX = this.tracker.getLastX(this.keyPointer);
+    this.startY = this.tracker.getLastY(this.keyPointer);
 
     this.begin();
 
@@ -62,18 +61,22 @@ export default class FlingGestureHandler extends GestureHandler {
     this.delayTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
   }
 
-  private tryEndFling(event: AdaptedEvent): boolean {
+  private tryEndFling(): boolean {
     if (
       this.maxNumberOfPointersSimultaneously ===
         this.numberOfPointersRequired &&
       ((this.direction & Direction.RIGHT &&
-        event.x - this.startX > this.minAcceptableDelta) ||
+        this.tracker.getLastX(this.keyPointer) - this.startX >
+          this.minAcceptableDelta) ||
         (this.direction & Direction.LEFT &&
-          this.startX - event.x > this.minAcceptableDelta) ||
+          this.startX - this.tracker.getLastX(this.keyPointer) >
+            this.minAcceptableDelta) ||
         (this.direction & Direction.UP &&
-          this.startY - event.y > this.minAcceptableDelta) ||
+          this.startY - this.tracker.getLastY(this.keyPointer) >
+            this.minAcceptableDelta) ||
         (this.direction & Direction.DOWN &&
-          event.y - this.startY > this.minAcceptableDelta))
+          this.tracker.getLastY(this.keyPointer) - this.startY >
+            this.minAcceptableDelta))
     ) {
       clearTimeout(this.delayTimeout);
       this.activate();
@@ -84,40 +87,43 @@ export default class FlingGestureHandler extends GestureHandler {
     return false;
   }
 
-  private endFling(event: AdaptedEvent) {
-    if (!this.tryEndFling(event)) {
+  private endFling() {
+    if (!this.tryEndFling()) {
       this.fail();
     }
   }
 
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    this.keyPointer = event.pointerId;
+
     super.onPointerDown(event);
-    this.newPointerAction(event);
+    this.newPointerAction();
   }
 
   protected onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerAdd(event);
-    this.newPointerAction(event);
+    this.newPointerAction();
   }
 
-  private newPointerAction(event: AdaptedEvent): void {
+  private newPointerAction(): void {
     if (this.currentState === State.UNDETERMINED) {
-      this.startFling(event);
+      this.startFling();
     }
 
     if (this.currentState !== State.BEGAN) {
       return;
     }
 
-    this.tryEndFling(event);
+    this.tryEndFling();
 
     if (
       this.tracker.getTrackedPointersCount() >
       this.maxNumberOfPointersSimultaneously
     ) {
-      this.maxNumberOfPointersSimultaneously = this.tracker.getTrackedPointersCount();
+      this.maxNumberOfPointersSimultaneously =
+        this.tracker.getTrackedPointersCount();
     }
   }
 
@@ -128,7 +134,7 @@ export default class FlingGestureHandler extends GestureHandler {
       return;
     }
 
-    this.tryEndFling(event);
+    this.tryEndFling();
 
     super.onPointerMove(event);
   }
@@ -136,6 +142,8 @@ export default class FlingGestureHandler extends GestureHandler {
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.onUp(event);
+
+    this.keyPointer = NaN;
   }
 
   protected onPointerRemove(event: AdaptedEvent): void {
@@ -148,7 +156,7 @@ export default class FlingGestureHandler extends GestureHandler {
     if (this.currentState !== State.BEGAN) {
       return;
     }
-    this.endFling(event);
+    this.endFling();
   }
 
   protected onPointerCancel(event: AdaptedEvent): void {

package/src/web/handlers/GestureHandler.ts

@@ -70,13 +70,18 @@ export default abstract class GestureHandler {
       );
     }
 
-    this.view = (findNodeHandle(this.ref) as unknown) as HTMLElement;
+    this.view = findNodeHandle(this.ref) as unknown as HTMLElement;
     this.view.style['touchAction'] = 'none';
-    this.view.style['webkitUserSelect'] = 'none';
-    this.view.style['userSelect'] = 'none';
-
     //@ts-ignore This one disables default events on Safari
     this.view.style['WebkitTouchCallout'] = 'none';
+
+    if (!this.config.userSelect) {
+      this.view.style['webkitUserSelect'] = 'none';
+      this.view.style['userSelect'] = 'none';
+    } else {
+      this.view.style['webkitUserSelect'] = this.config.userSelect;
+      this.view.style['userSelect'] = this.config.userSelect;
+    }
   }
 
   private addEventManager(manager: EventManager): void {
@@ -121,19 +126,17 @@ export default abstract class GestureHandler {
       return;
     }
 
+    const oldState = this.currentState;
+    this.currentState = newState;
+
     if (
       this.tracker.getTrackedPointersCount() > 0 &&
       this.config.needsPointerData &&
-      (newState === State.END ||
-        newState === State.CANCELLED ||
-        newState === State.FAILED)
+      this.isFinished()
     ) {
       this.cancelTouches();
     }
 
-    const oldState = this.currentState;
-    this.currentState = newState;
-
     GestureHandlerOrchestrator.getInstance().onHandlerStateChange(
       this,
       newState,
@@ -324,6 +327,18 @@ export default abstract class GestureHandler {
     }
   }
   protected onPointerOut(event: AdaptedEvent): void {
+    if (this.shouldCancellWhenOutside) {
+      switch (this.currentState) {
+        case State.ACTIVE:
+          this.cancel();
+          break;
+        case State.BEGAN:
+          this.fail();
+          break;
+      }
+      return;
+    }
+
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
@@ -362,9 +377,8 @@ export default abstract class GestureHandler {
     const { onGestureHandlerEvent }: PropsRef = this.propsRef
       .current as PropsRef;
 
-    const touchEvent: ResultTouchEvent | undefined = this.transformTouchEvent(
-      event
-    );
+    const touchEvent: ResultTouchEvent | undefined =
+      this.transformTouchEvent(event);
 
     if (touchEvent) {
       invokeNullableMethod(onGestureHandlerEvent, touchEvent);
@@ -376,10 +390,8 @@ export default abstract class GestureHandler {
   //
 
   public sendEvent = (newState: State, oldState: State): void => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange,
-    }: PropsRef = this.propsRef.current as PropsRef;
+    const { onGestureHandlerEvent, onGestureHandlerStateChange }: PropsRef =
+      this.propsRef.current as PropsRef;
 
     const resultEvent: ResultEvent = this.transformEventData(
       newState,
@@ -578,6 +590,11 @@ export default abstract class GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
+
+    if (this.config.shouldCancelWhenOutside !== undefined) {
+      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
+    }
+
     this.validateHitSlops();
 
     if (this.enabled) {
@@ -775,6 +792,14 @@ export default abstract class GestureHandler {
     return this.enabled;
   }
 
+  private isFinished(): boolean {
+    return (
+      this.currentState === State.END ||
+      this.currentState === State.FAILED ||
+      this.currentState === State.CANCELLED
+    );
+  }
+
   protected setShouldCancelWhenOutside(shouldCancel: boolean) {
     this.shouldCancellWhenOutside = shouldCancel;
   }

package/src/web/handlers/LongPressGestureHandler.ts

@@ -23,6 +23,8 @@ export default class LongPressGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
     this.setShouldCancelWhenOutside(true);
+
+    this.view.oncontextmenu = () => false;
   }
 
   protected transformNativeEvent() {
@@ -40,8 +42,6 @@ export default class LongPressGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.minDurationMs !== undefined) {
       this.minDurationMs = this.config.minDurationMs;
     }

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,4 +1,4 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
@@ -6,6 +6,10 @@ export default class ManualGestureHandler extends GestureHandler {
     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);
@@ -22,6 +26,11 @@ export default class ManualGestureHandler extends GestureHandler {
     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);

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -30,11 +30,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     } else {
       this.buttonRole = false;
     }
-
-    if (this.view.tagName.toLowerCase() === 'input') {
-      //Enables text input on Safari
-      this.view.style['webkitUserSelect'] = 'auto';
-    }
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {

package/src/web/handlers/PanGestureHandler.ts

@@ -65,8 +65,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.updateGestureConfig({ enabled: enabled, ...props });
     this.checkCustomActivationCriteria(this.customActivationProperties);
 
-    this.enabled = enabled;
-
     if (this.config.minDist !== undefined) {
       this.minDistSq = this.config.minDist * this.config.minDist;
     } else if (this.hasCustomActivationCriteria) {
@@ -98,10 +96,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.activateAfterLongPress = this.config.activateAfterLongPress;
     }
 
-    if (this.config.shouldCancelWhenOutside) {
-      this.setShouldCancelWhenOutside(false);
-    }
-
     if (this.config.activeOffsetXStart !== undefined) {
       this.activeOffsetXStart = this.config.activeOffsetXStart;
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -57,8 +57,6 @@ export default class PinchGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/RotationGestureHandler.ts

@@ -41,9 +41,8 @@ export default class RotationGestureHandler extends GestureHandler {
     },
   };
 
-  private rotationGestureDetector: RotationGestureDetector = new RotationGestureDetector(
-    this.rotationGestureListener
-  );
+  private rotationGestureDetector: RotationGestureDetector =
+    new RotationGestureDetector(this.rotationGestureListener);
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
@@ -53,8 +52,6 @@ export default class RotationGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/TapGestureHandler.ts

@@ -39,8 +39,6 @@ export default class TapGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.numberOfTaps !== undefined) {
       this.numberOfTaps = this.config.numberOfTaps;
     }

package/src/web/interfaces.ts

@@ -1,3 +1,4 @@
+import { UserSelect } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 
@@ -20,6 +21,7 @@ type ConfigArgs =
   | number
   | boolean
   | HitSlop
+  | UserSelect
   | Directions
   | Handler[]
   | null
@@ -31,6 +33,7 @@ export interface Config extends Record<string, ConfigArgs> {
   waitFor?: Handler[] | null;
   hitSlop?: HitSlop;
   shouldCancelWhenOutside?: boolean;
+  userSelect?: UserSelect;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;

package/src/web/tools/InteractionManager.ts

@@ -69,9 +69,8 @@ export default class InteractionManager {
     handler: GestureHandler,
     otherHandler: GestureHandler
   ): boolean {
-    const simultaneousHandlers:
-      | number[]
-      | undefined = this.simultaneousRelations.get(handler.getTag());
+    const simultaneousHandlers: number[] | undefined =
+      this.simultaneousRelations.get(handler.getTag());
     if (!simultaneousHandlers) {
       return false;
     }

package/src/web_hammer/GestureHandler.ts

@@ -206,10 +206,8 @@ abstract class GestureHandler {
   }
 
   sendEvent = (nativeEvent: HammerInputExt) => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange,
-    } = this.propsRef.current;
+    const { onGestureHandlerEvent, onGestureHandlerStateChange } =
+      this.propsRef.current;
 
     const event = this.transformEventData(nativeEvent);
 
@@ -312,7 +310,7 @@ abstract class GestureHandler {
         return;
       }
 
-      this.onRawEvent((ev as unknown) as HammerInputExt);
+      this.onRawEvent(ev as unknown as HammerInputExt);
 
       // TODO: Bacon: Check against something other than null
       // The isFirst value is not called when the first rotation is calculated.
@@ -336,17 +334,17 @@ abstract class GestureHandler {
     // TODO(TS) Hammer types aren't exactly that what we get in runtime
     if (!this.isDiscrete) {
       this.hammer!.on(`${this.name}start`, (event: HammerInput) =>
-        this.onStart((event as unknown) as HammerInputExt)
+        this.onStart(event as unknown as HammerInputExt)
       );
       this.hammer!.on(
         `${this.name}end ${this.name}cancel`,
         (event: HammerInput) => {
-          this.onGestureEnded((event as unknown) as HammerInputExt);
+          this.onGestureEnded(event as unknown as HammerInputExt);
         }
       );
     }
     this.hammer!.on(this.name, (ev: HammerInput) =>
-      this.onGestureActivated((ev as unknown) as HammerInputExt)
+      this.onGestureActivated(ev as unknown as HammerInputExt)
     ); // TODO(TS) remove cast after https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50438 is merged
   }
 

package/src/web_hammer/NodeManager.ts

@@ -7,7 +7,9 @@ const gestures: Record<
 > = {};
 
 export function getHandler(tag: number) {
-  if (tag in gestures) return gestures[tag];
+  if (tag in gestures) {
+    return gestures[tag];
+  }
 
   throw new Error(`No handler for tag ${tag}`);
 }

package/src/web_hammer/PanGestureHandler.ts

@@ -54,23 +54,29 @@ class PanGestureHandler extends DraggingGestureHandler {
       return Hammer.DIRECTION_ALL;
     }
 
-    if (!isnan(activeOffsetXStart))
+    if (!isnan(activeOffsetXStart)) {
       horizontalDirections.push(Hammer.DIRECTION_LEFT);
-    if (!isnan(activeOffsetXEnd))
+    }
+    if (!isnan(activeOffsetXEnd)) {
       horizontalDirections.push(Hammer.DIRECTION_RIGHT);
-    if (horizontalDirections.length === 2)
+    }
+    if (horizontalDirections.length === 2) {
       horizontalDirections = [Hammer.DIRECTION_HORIZONTAL];
+    }
 
     directions = directions.concat(horizontalDirections);
     let verticalDirections = [];
 
-    if (!isnan(activeOffsetYStart))
+    if (!isnan(activeOffsetYStart)) {
       verticalDirections.push(Hammer.DIRECTION_UP);
-    if (!isnan(activeOffsetYEnd))
+    }
+    if (!isnan(activeOffsetYEnd)) {
       verticalDirections.push(Hammer.DIRECTION_DOWN);
+    }
 
-    if (verticalDirections.length === 2)
+    if (verticalDirections.length === 2) {
       verticalDirections = [Hammer.DIRECTION_VERTICAL];
+    }
 
     directions = directions.concat(verticalDirections);
 

package/android/lib/build.gradle

@@ -1,28 +0,0 @@
-apply plugin: 'com.android.library'
-
-repositories {
-    maven { url 'https://repo1.maven.org/maven2' }
-}
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion '25.0.0'
-
-    defaultConfig {
-        minSdkVersion 16
-        targetSdkVersion 23
-        versionCode 1
-        versionName "1.0"
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    testCompile 'junit:junit:4.12'
-    compile 'com.android.support:appcompat-v7:23.4.0'
-}

package/ios/RNGestureHandler.xcodeproj/xcuserdata/jakubpiasecki.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>RNGestureHandler-tvOS.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-		<key>RNGestureHandler.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>1</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>