From 2d921f4e656b2668fa096727aacd88016fae1de3 Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Tue, 18 Aug 2020 15:19:02 -0400 Subject: [PATCH 1/6] redefining deltas --- src/index.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index f7a67baa..92152dda 100644 --- a/src/index.ts +++ b/src/index.ts @@ -110,13 +110,13 @@ function getDirection( ) { if (absX > absY) { if (deltaX > 0) { - return LEFT; + return RIGHT; } - return RIGHT; + return LEFT; } else if (deltaY > 0) { - return UP; + return DOWN; } - return DOWN; + return UP; } function rotateXYByAngle(pos: Vector2, angle: number): Vector2 { @@ -176,8 +176,10 @@ function getHandlers( const { clientX, clientY } = "touches" in event ? event.touches[0] : event; const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle); - const deltaX = state.xy[0] - x; - const deltaY = state.xy[1] - y; + // const deltaX = state.xy[0] - x; + // const deltaY = state.xy[1] - y; + const deltaX = x - state.xy[0]; + const deltaY = y - state.xy[1]; const absX = Math.abs(deltaX); const absY = Math.abs(deltaY); const time = (event.timeStamp || 0) - state.start; @@ -188,6 +190,7 @@ function getHandlers( return state; const dir = getDirection(absX, absY, deltaX, deltaY); + console.log(dir); const eventData: EventData = { ...state.eventData, event, From b24b485230a7a7766ab974451df1ac2756733249 Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Thu, 20 Aug 2020 11:58:29 -0400 Subject: [PATCH 2/6] adjusted the snapshot to reflect the new coordinate system --- __tests__/__snapshots__/useSwipeable.spec.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/__tests__/__snapshots__/useSwipeable.spec.tsx.snap b/__tests__/__snapshots__/useSwipeable.spec.tsx.snap index 318a98c6..70b13b87 100644 --- a/__tests__/__snapshots__/useSwipeable.spec.tsx.snap +++ b/__tests__/__snapshots__/useSwipeable.spec.tsx.snap @@ -4,7 +4,7 @@ exports[`useSwipeable handles mouse events with trackMouse prop and fires correc Object { "absX": 100, "absY": 0, - "deltaX": -100, + "deltaX": 100, "deltaY": 0, "dir": "Right", "event": MouseEvent { @@ -23,7 +23,7 @@ exports[`useSwipeable handles mouse events with trackMouse prop and fires correc Object { "absX": 25, "absY": 0, - "deltaX": -25, + "deltaX": 25, "deltaY": 0, "dir": "Right", "event": MouseEvent { @@ -43,7 +43,7 @@ Object { "absX": 0, "absY": 100, "deltaX": 0, - "deltaY": -100, + "deltaY": 100, "dir": "Down", "event": TouchEvent { "isTrusted": false, @@ -62,7 +62,7 @@ Object { "absX": 0, "absY": 25, "deltaX": 0, - "deltaY": -25, + "deltaY": 25, "dir": "Down", "event": TouchEvent { "isTrusted": false, From c5a3a6792d40dc7da91f662f730aa0f80187e554 Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Thu, 20 Aug 2020 11:59:16 -0400 Subject: [PATCH 3/6] removed comments and console.log() --- src/index.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index 92152dda..ad9ba95c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -176,8 +176,6 @@ function getHandlers( const { clientX, clientY } = "touches" in event ? event.touches[0] : event; const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle); - // const deltaX = state.xy[0] - x; - // const deltaY = state.xy[1] - y; const deltaX = x - state.xy[0]; const deltaY = y - state.xy[1]; const absX = Math.abs(deltaX); @@ -190,7 +188,6 @@ function getHandlers( return state; const dir = getDirection(absX, absY, deltaX, deltaY); - console.log(dir); const eventData: EventData = { ...state.eventData, event, From 2ea8c253e1860b8974289948c1fdc07746bfb94f Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Mon, 24 Aug 2020 17:07:54 -0400 Subject: [PATCH 4/6] update readme with new delta definitions --- README.md | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index fccb81f2..5063f905 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -React Swipeable -========================= +# React Swipeable React swipe event handler hook @@ -12,11 +11,17 @@ React swipe event handler hook [Github Pages Demo](http://stack.formidable.com/react-swipeable/) ### Api + Use the hook and set your swipe(d) handlers. + ```jsx -const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config }) -return (
You can swipe here
) +const handlers = useSwipeable({ + onSwiped: (eventData) => eventHandler, + ...config, +}); +return
You can swipe here
; ``` + Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details). ## Props / Config Options @@ -35,14 +40,16 @@ Spread `handlers` onto the element you wish to track swipes inside of. [Details ``` ### Event data + All Event Handlers are called with the below event data. + ``` { event, // source event initial, // initial swipe [x,y] first, // true for first event - deltaX, // x offset (initial.x - current.x) - deltaY, // y offset (initial.y - current.y) + deltaX, // x offset (current.x - initial.x) + deltaY, // y offset (current.y - initial.y) absX, // absolute deltaX absY, // absolute deltaY velocity, // √(absX^2 + absY^2) / time @@ -65,6 +72,7 @@ All Event Handlers are called with the below event data. **None of the props/config options are required.** ### Hook details + - Hook use requires **react >= 16.8.0** - The props contained in `handlers` are currently `ref` and `onMouseDown` - Please spread `handlers` as the props contained in it could change as react improves event listening capabilities @@ -73,16 +81,17 @@ All Event Handlers are called with the below event data. ### preventDefaultTouchmoveEvent Details **`preventDefaultTouchmoveEvent`** prevents the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event. Use this to stop the browser from scrolling while a user swipes. -* `e.preventDefault()` is only called when: - * `preventDefaultTouchmoveEvent: true` - * `trackTouch: true` - * the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop + +- `e.preventDefault()` is only called when: + - `preventDefaultTouchmoveEvent: true` + - `trackTouch: true` + - the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop Example: - * If a user is swiping right with `` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called. -Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`. +- If a user is swiping right with `` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called. +Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`. ### passive listener issue @@ -106,7 +115,7 @@ Initial set up, with `node 10+`, run `npm install`. Make changes/updates to the `src/index.js` file. -***Please add tests if PR adds/changes functionality.*** +**_Please add tests if PR adds/changes functionality._** #### Verify updates with the examples From 1327b87d3d7347046e6f762485b6f5eeea66b65a Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Tue, 25 Aug 2020 16:17:12 -0400 Subject: [PATCH 5/6] adding details to migration doc --- migration.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/migration.md b/migration.md index c5c35c39..77a9cb31 100644 --- a/migration.md +++ b/migration.md @@ -1,8 +1,11 @@ -React Swipeable v6 changes and migration -========================= +# React Swipeable v6 changes and migration ## Major Changes + - removal of `` component - _TODO_ add example for creating one and migrating ## Migrate Swipeable v5 to v6 + +- update calculation of `deltaX` and `deltaY` from `initial - current` to `current - initial` + - Example: `const deltaX = state.xy[0] - x;` is now `const deltaX = x - state.xy[0];` From 837b6e7e0ce979029b8fea5e15ebb1894d0f210b Mon Sep 17 00:00:00 2001 From: Urmit Patel Date: Thu, 27 Aug 2020 16:36:38 -0400 Subject: [PATCH 6/6] adjust migration doc --- migration.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/migration.md b/migration.md index 77a9cb31..c406c4c2 100644 --- a/migration.md +++ b/migration.md @@ -4,8 +4,7 @@ - removal of `` component - _TODO_ add example for creating one and migrating - -## Migrate Swipeable v5 to v6 - - update calculation of `deltaX` and `deltaY` from `initial - current` to `current - initial` - Example: `const deltaX = state.xy[0] - x;` is now `const deltaX = x - state.xy[0];` + +## Migrate Swipeable v5 to v6