update delta to allow different thresholds for each side

Author: Bruno Macabeus

README.md

@@ -55,6 +55,16 @@ Spread `handlers` onto the element you wish to track swipes on.
 }
 ```
 
+#### Delta
+
+You can also set a different delta for each side:
+
+```js
+{
+  delta: { right: 10, left: 10, top: 20, bottom: 20 } // right and left starts when ">= 10", top and bottom when ">= 20"
+}
+```
+
 ## Swipe Event Data
 
 All Event Handlers are called with the below event data, `SwipeEventData`.

__tests__/useSwipeable.spec.tsx

@@ -351,6 +351,81 @@ describe("useSwipeable", () => {
     expect(onSwipedRight).not.toHaveBeenCalled();
   });
 
+  it("allows different delta for each side", () => {
+    const onSwipedRight = jest.fn();
+    const onSwipedLeft = jest.fn();
+    const onSwipedUp = jest.fn();
+    const onSwipedDown = jest.fn();
+    const { getByText } = render(
+      <SwipeableUsingHook
+        onSwipedRight={onSwipedRight}
+        onSwipedLeft={onSwipedLeft}
+        onSwipedUp={onSwipedUp}
+        onSwipedDown={onSwipedDown}
+        delta={{
+          right: 10,
+          left: 20,
+          up: 30,
+          down: 40,
+        }}
+      />
+    );
+
+    const touchArea = getByText(TESTING_TEXT);
+
+    // check right
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 105, y: 100 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedRight).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 110, y: 100 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedRight).toHaveBeenCalledTimes(1);
+
+    // check left
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 90, y: 100 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedLeft).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 80, y: 100 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedLeft).toHaveBeenCalledTimes(1);
+
+    // check up
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 80 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedUp).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 70 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedUp).toHaveBeenCalledTimes(1);
+
+    // check down
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 130 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedDown).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 140 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedDown).toHaveBeenCalledTimes(1);
+  });
+
   it("Handle Rotation by 90 degree", () => {
     const swipeFuncsRight = getMockedSwipeFunctions();
     const { getByText, rerender } = render(

src/index.ts

@@ -70,6 +70,21 @@ function getDirection(
   return UP;
 }
 
+function uncapitalizeDirection(
+  dir: SwipeDirections
+): Uncapitalize<SwipeDirections> {
+  switch (dir) {
+    case "Down":
+      return "down";
+    case "Left":
+      return "left";
+    case "Right":
+      return "right";
+    case "Up":
+      return "up";
+  }
+}
+
 function rotateXYByAngle(pos: Vector2, angle: number): Vector2 {
   if (angle === 0) return pos;
   const angleInRadians = (Math.PI / 180) * angle;
@@ -131,11 +146,15 @@ function getHandlers(
       const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
       const vxvy: Vector2 = [deltaX / (time || 1), deltaY / (time || 1)];
 
+      const dir = getDirection(absX, absY, deltaX, deltaY);
+
       // if swipe is under delta and we have not started to track a swipe: skip update
-      if (absX < props.delta && absY < props.delta && !state.swiping)
-        return state;
+      const delta =
+        typeof props.delta === "number"
+          ? props.delta
+          : props.delta[uncapitalizeDirection(dir)];
+      if (absX < delta && absY < delta && !state.swiping) return state;
 
-      const dir = getDirection(absX, absY, deltaX, deltaY);
       const eventData = {
         absX,
         absY,

src/types.ts

@@ -40,8 +40,11 @@ export type SwipeableCallbacks = {
 };
 
 // Configuration Options
+export type ConfigurationOptionDelta =
+  | number
+  | { [key in Uncapitalize<SwipeDirections>]: number };
 export interface ConfigurationOptions {
-  delta: number;
+  delta: ConfigurationOptionDelta;
   preventDefaultTouchmoveEvent: boolean;
   rotationAngle: number;
   trackMouse: boolean;