size refinement and delta default (#262)

Author: hartzis

Diff for: README.md

@@ -47,7 +47,7 @@ Spread `handlers` onto the element you wish to track swipes on.
 
 ```js
 {
-  delta: 10,                            // min distance(px) before a swipe starts
+  delta: 10,                            // min distance(px) before a swipe starts. *See Notes*
   preventDefaultTouchmoveEvent: false,  // call e.preventDefault *See Details*
   trackTouch: true,                     // track touch input
   trackMouse: false,                    // track mouse input
@@ -57,11 +57,11 @@ Spread `handlers` onto the element you wish to track swipes on.
 
 #### Delta
 
-You can also set a different delta for each side:
+`delta` can be either a `number` or an `object` specifying different deltas for each direction, [`left`, `right`, `up`, `down`], direction values are optional and will default to `10`;
 
 ```js
 {
-  delta: { right: 10, left: 10, top: 20, bottom: 20 } // right and left starts when ">= 10", top and bottom when ">= 20"
+  delta: { top: 20, bottom: 20 } // top and bottom when ">= 20", left and right default to ">= 10"
 }
 ```
 

Diff for: __tests__/useSwipeable.spec.tsx

@@ -426,6 +426,53 @@ describe("useSwipeable", () => {
     expect(onSwipedDown).toHaveBeenCalledTimes(1);
   });
 
+  it("defaults delta for 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: 40,
+          down: 40,
+        }}
+      />
+    );
+
+    const touchArea = getByText(TESTING_TEXT);
+
+    // check left
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 95, y: 100 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedLeft).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 90, 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: 95 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedUp).not.toHaveBeenCalled();
+
+    fireEvent[TS](touchArea, cte({ x: 100, y: 100 }));
+    fireEvent[TM](touchArea, cte({ x: 100, y: 90 }));
+    fireEvent[TE](touchArea, cte({}));
+
+    expect(onSwipedUp).toHaveBeenCalledTimes(1);
+  });
+
   it("Handle Rotation by 90 degree", () => {
     const swipeFuncsRight = getMockedSwipeFunctions();
     const { getByText, rerender } = render(

Diff for: src/index.ts

@@ -9,6 +9,7 @@ import {
   LEFT,
   RIGHT,
   Setter,
+  SwipeableCallbacks,
   SwipeableHandlers,
   SwipeableProps,
   SwipeablePropsWithDefaultOptions,
@@ -137,7 +138,8 @@ function getHandlers(
       const delta =
         typeof props.delta === "number"
           ? props.delta
-          : props.delta[dir.toLowerCase() as Lowercase<SwipeDirections>];
+          : props.delta[dir.toLowerCase() as Lowercase<SwipeDirections>] ||
+            defaultProps.delta;
       if (absX < delta && absY < delta && !state.swiping) return state;
 
       const eventData = {
@@ -191,10 +193,9 @@ function getHandlers(
         eventData = { ...state.eventData, event };
         props.onSwiped && props.onSwiped(eventData);
 
-        const onSwipedDir = `onSwiped${eventData.dir}`;
-        if (onSwipedDir in props) {
-          ((props as any)[onSwipedDir] as SwipeCallback)(eventData);
-        }
+        const onSwipedDir =
+          props[`onSwiped${eventData.dir}` as keyof SwipeableCallbacks];
+        onSwipedDir && onSwipedDir(eventData);
       } else {
         props.onTap && props.onTap({ event });
       }

Diff for: src/types.ts

@@ -42,7 +42,7 @@ export type SwipeableCallbacks = {
 // Configuration Options
 export type ConfigurationOptionDelta =
   | number
-  | { [key in Uncapitalize<SwipeDirections>]: number };
+  | { [key in Lowercase<SwipeDirections>]?: number };
 export interface ConfigurationOptions {
   delta: ConfigurationOptionDelta;
   preventDefaultTouchmoveEvent: boolean;

Diff for: tsconfig.base.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
+    "removeComments": true,
     "baseUrl": ".",
     "esModuleInterop": true,
     "jsx": "react",