Suggestion: different delta for each side

[macabeus]

Firstly, thank you for this component! It's very useful and well written!

So, on my project, I would like to have a different delta for each side. For example...
Instead of only:

const conf = { delta: 10 } // all sides will start when `> 10`

I would like to have:

const conf = { delta: { right: 10, left: 10, top: 20, bottom: 20 } } // right and left starts when `> 10`, top and bottom when `> 20`

Looking by the code, it should be simple to add. Something like here with:

      // 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 dir = getDirection(absX, absY, deltaX, deltaY);
+      const delta = typeof props.delta === "number" ? props.delta : props.delta[dir]
+      if (absX < delta && absY < delta && !state.swiping)
+        return state;

I could open a PR doing that.
It's not a breaking change since we can continue to write only { delta: number }. It's only an additional on the API.

Thanks!

[hartzis]

@macabeus Thank you for the issue and suggesting with the excellent write up!

I love the proposed backwards compatible API approach 👍

If you need this functionality i'm sure there are others that could find it useful if not now then also in the future. We'd absolutely be open to a PR.

The approach you suggest looks straightforward.

There is a caveat around dir as it should be one of the exported directions:

react-swipeable/src/types.ts

Lines 3 to 6 in a7e596a

	export const LEFT = "Left";
	export const RIGHT = "Right";
	export const UP = "Up";
	export const DOWN = "Down";

Which are "Pascal" case, so the first letter is capitalized. For better or worse, this is because they are used to concat the handlers:

react-swipeable/src/index.ts

Lines 190 to 193 in a7e596a

	const onSwipedDir = `onSwiped${eventData.dir}`;
	if (onSwipedDir in props) {
	((props as any)[onSwipedDir] as SwipeCallback)(eventData);
	}

So the delta API could look like this:

type deltaConfigObject = {
  [LEFT]: number;
  [RIGHT]: number;
  [UP]: number;
  [DOWN]: number;
}
type deltaConfig = number | deltaConfigObject;

💭 🤔 how does that look to you? I like it tied to the dir but i dont necessarily like the Pascal case for the keys... 🤷

[macabeus]

Thanks for the reply!
I will test some approaches to binding it to dir while avoiding the Pascal case. Then I open a PR 😄