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: https://github.com/FormidableLabs/react-swipeable/blob/a7e596a75167cd5efd92f30818ecb1d9044d76cd/src/types.ts#L3-L6 Which are "Pascal" case, so the first letter is capitalized. For better or worse, this is because they are used to concat the handlers: https://github.com/FormidableLabs/react-swipeable/blob/a7e596a75167cd5efd92f30818ecb1d9044d76cd/src/index.ts#L190-L193

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 😄