diff --git a/src/__tests__/__snapshots__/index.spec.js.snap b/src/__tests__/__snapshots__/index.spec.js.snap index 99a4d23a..dfb28378 100644 --- 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 index 91d4dd17..f7d79d6e 100644 --- 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 index 49482f95..fd8f677a 100644 --- 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 index ef06493a..93aac26a 100644 --- 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 { 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,