add initial xy to eventData (#151)

* add initial xy to eventData * update tests, update types
FormidableLabs · Jul 30, 2019 · ff4043f · ff4043f
1 parent 597ebe5
commit ff4043f
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 7 deletions.
diff --git a/src/__tests__/__snapshots__/index.spec.js.snap b/src/__tests__/__snapshots__/index.spec.js.snap
@@ -10,6 +10,10 @@ Array [
       "deltaY": 0,
       "dir": "Right",
       "event": Object {},
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5624999996816769,
     },
   ],
@@ -31,6 +35,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374825.199999963,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.592356689012699,
     },
   ],
@@ -47,6 +55,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374841.3999999757,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5673981190353126,
     },
   ],
@@ -63,6 +75,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374857.399999979,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.565762004010972,
     },
   ],
@@ -79,6 +95,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374873.499999987,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5624999996816769,
     },
   ],
@@ -103,6 +123,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.8903591679142773,
     },
   ],
@@ -128,6 +152,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.0548523197963273,
     },
   ],
@@ -148,6 +176,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.2626262620442454,
     },
   ],
@@ -168,6 +200,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.6483516480817324,
     },
   ],
@@ -188,6 +224,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.8903591679142773,
     },
   ],
@@ -204,6 +244,10 @@ Array [
       "deltaY": 0,
       "dir": "Right",
       "event": Object {},
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5624999996816769,
     },
   ],
@@ -225,6 +269,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374825.199999963,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.592356689012699,
     },
   ],
@@ -241,6 +289,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374841.3999999757,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5673981190353126,
     },
   ],
@@ -257,6 +309,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374857.399999979,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.565762004010972,
     },
   ],
@@ -273,6 +329,10 @@ Array [
         "preventDefault": [MockFunction],
         "timeStamp": 1374873.499999987,
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.5624999996816769,
     },
   ],
@@ -297,6 +357,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.8903591679142773,
     },
   ],
@@ -322,6 +386,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.0548523197963273,
     },
   ],
@@ -342,6 +410,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.2626262620442454,
     },
   ],
@@ -362,6 +434,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.6483516480817324,
     },
   ],
@@ -382,6 +458,10 @@ Array [
           },
         ],
       },
+      "initial": Array [
+        100,
+        100,
+      ],
       "velocity": 1.8903591679142773,
     },
   ],

diff --git a/src/index.js b/src/index.js
@@ -12,7 +12,7 @@ const defaultProps = {
 const initialState = {
   xy: [0, 0],
   swiping: false,
-  lastEventData: undefined,
+  eventData: undefined,
   start: undefined
 }
 export const LEFT = 'Left'
@@ -58,7 +58,13 @@ function getHandlers(set, handlerProps) {
       }
       const { clientX, clientY } = event.touches ? event.touches[0] : event
       const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle)
-      return { ...state, ...initialState, xy, start: event.timeStamp || 0 }
+      return {
+        ...state,
+        ...initialState,
+        eventData: { initial: [...xy] },
+        xy,
+        start: event.timeStamp || 0
+      }
     })
   }
 
@@ -80,7 +86,7 @@ function getHandlers(set, handlerProps) {
       if (absX < props.delta && absY < props.delta && !state.swiping) return state
 
       const dir = getDirection(absX, absY, deltaX, deltaY)
-      const eventData = { event, absX, absY, deltaX, deltaY, velocity, dir }
+      const eventData = { ...state.eventData, event, absX, absY, deltaX, deltaY, velocity, dir }
 
       props.onSwiping && props.onSwiping(eventData)
 
@@ -99,20 +105,21 @@ function getHandlers(set, handlerProps) {
       )
         event.preventDefault()
 
-      return { ...state, lastEventData: eventData, swiping: true }
+      return { ...state, eventData, swiping: true }
     })
   }
 
   const onEnd = event => {
     set((state, props) => {
+      let eventData
       if (state.swiping) {
-        const eventData = { ...state.lastEventData, event }
+        eventData = { ...state.eventData, event }
 
         props.onSwiped && props.onSwiped(eventData)
 
         props[`onSwiped${eventData.dir}`] && props[`onSwiped${eventData.dir}`](eventData)
       }
-      return { ...state, ...initialState }
+      return { ...state, ...initialState, eventData }
     })
   }
 

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -2,12 +2,14 @@
 
 import * as React from 'react'
 
+export type Vector2 = [number, number]
 export interface EventData {
   event: MouseEvent | TouchEvent
   deltaX: number
   deltaY: number
   absX: number
   absY: number
+  initial: Vector2
   velocity: number
   dir: 'Left' | 'Right' | 'Up' | 'Down'
 }

diff --git a/types/test.tsx b/types/test.tsx
@@ -1,6 +1,17 @@
 import * as React from 'react'
 import { Swipeable, SwipeableHandlers, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
 
+interface CopyOfEventData {
+  event: MouseEvent | TouchEvent
+  deltaX: number
+  deltaY: number
+  absX: number
+  absY: number
+  // initial: Vector2
+  velocity: number
+  dir: 'Left' | 'Right' | 'Up' | 'Down'
+}
+
 class SampleComponent extends React.PureComponent<SwipeableProps> {
   private readonly handleSwiped: SwipeCallback = () => {}
   private readonly handleSwipedLeft: SwipeCallback = () => {}
@@ -59,7 +70,18 @@ const TestHook = () => {
 
 const handlers: SwipeableHandlers = useSwipeable({
   onSwipedLeft: (data) => {
-    data // $ExpectType EventData
+    // verify EventData properties
+    const {
+      event, // $ExpectType MouseEvent | TouchEvent
+      deltaX, // $ExpectType number
+      deltaY, // $ExpectType number
+      absX, // $ExpectType number
+      absY, // $ExpectType number
+      initial, // $ExpectType [number, number]
+      velocity, // $ExpectType number
+      dir, // $ExpectType "Left" | "Right" | "Up" | "Down"
+      ...rest // $ExpectType {}
+    } = data;
   },
   preventDefaultTouchmoveEvent: true,
   trackTouch: true,