Merge pull request #200 from FormidableLabs/v6-fix-deltas

V6 fix deltas

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 (<div {...handlers}> You can swipe here </div>)
+const handlers = useSwipeable({
+  onSwiped: (eventData) => eventHandler,
+  ...config,
+});
+return <div {...handlers}> You can swipe here </div>;
 ```
+
 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 `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` 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 `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` 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
 

__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,

migration.md

@@ -1,8 +1,10 @@
-React Swipeable v6 changes and migration
-=========================
+# React Swipeable v6 changes and migration
 
 ## Major Changes
+
 - removal of `<Swipeable>` component
   - _TODO_ add example for creating one and migrating
+- 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

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 {
@@ -174,8 +174,8 @@ 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);
       const absY = Math.abs(deltaY);
       const time = (event.timeStamp || 0) - state.start;