update delta to allow different thresholds for each side

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(

package.json

@@ -34,7 +34,7 @@
   },
   "size-limit": [
     {
-      "limit": "1.15 KB",
+      "limit": "1.4 KB",
       "path": "dist/react-swipeable.js"
     }
   ],
@@ -86,7 +86,7 @@
     "eslint-plugin-react-hooks": "^4.0.5",
     "gh-pages": "^3.0.0",
     "jest": "^26.1.0",
-    "microbundle": "^0.12.3",
+    "microbundle": "^0.13.3",
     "prettier": "^2.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/index.ts

@@ -131,11 +131,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[dir.toLowerCase() as Lowercase<SwipeDirections>];
+      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;

tsconfig.base.json

@@ -12,7 +12,6 @@
     "noUnusedParameters": true,
     "outDir": "lib/",
     "pretty": true,
-    "rootDirs": ["./src"],
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,

tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.base.json",
   "include": ["src/**/*"],
- }
+}