Skip to content

Commit ff4043f

Browse files
hartzishartzis
authored
add initial xy to eventData (#151)
* add initial xy to eventData * update tests, update types
1 parent 597ebe5 commit ff4043f

File tree

4 files changed

+118
-7
lines changed

4 files changed

+118
-7
lines changed

‎src/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ Array [
1010
"deltaY": 0,
1111
"dir": "Right",
1212
"event": Object {},
13+
"initial": Array [
14+
100,
15+
100,
16+
],
1317
"velocity": 1.5624999996816769,
1418
},
1519
],
@@ -31,6 +35,10 @@ Array [
3135
"preventDefault": [MockFunction],
3236
"timeStamp": 1374825.199999963,
3337
},
38+
"initial": Array [
39+
100,
40+
100,
41+
],
3442
"velocity": 1.592356689012699,
3543
},
3644
],
@@ -47,6 +55,10 @@ Array [
4755
"preventDefault": [MockFunction],
4856
"timeStamp": 1374841.3999999757,
4957
},
58+
"initial": Array [
59+
100,
60+
100,
61+
],
5062
"velocity": 1.5673981190353126,
5163
},
5264
],
@@ -63,6 +75,10 @@ Array [
6375
"preventDefault": [MockFunction],
6476
"timeStamp": 1374857.399999979,
6577
},
78+
"initial": Array [
79+
100,
80+
100,
81+
],
6682
"velocity": 1.565762004010972,
6783
},
6884
],
@@ -79,6 +95,10 @@ Array [
7995
"preventDefault": [MockFunction],
8096
"timeStamp": 1374873.499999987,
8197
},
98+
"initial": Array [
99+
100,
100+
100,
101+
],
82102
"velocity": 1.5624999996816769,
83103
},
84104
],
@@ -103,6 +123,10 @@ Array [
103123
},
104124
],
105125
},
126+
"initial": Array [
127+
100,
128+
100,
129+
],
106130
"velocity": 1.8903591679142773,
107131
},
108132
],
@@ -128,6 +152,10 @@ Array [
128152
},
129153
],
130154
},
155+
"initial": Array [
156+
100,
157+
100,
158+
],
131159
"velocity": 1.0548523197963273,
132160
},
133161
],
@@ -148,6 +176,10 @@ Array [
148176
},
149177
],
150178
},
179+
"initial": Array [
180+
100,
181+
100,
182+
],
151183
"velocity": 1.2626262620442454,
152184
},
153185
],
@@ -168,6 +200,10 @@ Array [
168200
},
169201
],
170202
},
203+
"initial": Array [
204+
100,
205+
100,
206+
],
171207
"velocity": 1.6483516480817324,
172208
},
173209
],
@@ -188,6 +224,10 @@ Array [
188224
},
189225
],
190226
},
227+
"initial": Array [
228+
100,
229+
100,
230+
],
191231
"velocity": 1.8903591679142773,
192232
},
193233
],
@@ -204,6 +244,10 @@ Array [
204244
"deltaY": 0,
205245
"dir": "Right",
206246
"event": Object {},
247+
"initial": Array [
248+
100,
249+
100,
250+
],
207251
"velocity": 1.5624999996816769,
208252
},
209253
],
@@ -225,6 +269,10 @@ Array [
225269
"preventDefault": [MockFunction],
226270
"timeStamp": 1374825.199999963,
227271
},
272+
"initial": Array [
273+
100,
274+
100,
275+
],
228276
"velocity": 1.592356689012699,
229277
},
230278
],
@@ -241,6 +289,10 @@ Array [
241289
"preventDefault": [MockFunction],
242290
"timeStamp": 1374841.3999999757,
243291
},
292+
"initial": Array [
293+
100,
294+
100,
295+
],
244296
"velocity": 1.5673981190353126,
245297
},
246298
],
@@ -257,6 +309,10 @@ Array [
257309
"preventDefault": [MockFunction],
258310
"timeStamp": 1374857.399999979,
259311
},
312+
"initial": Array [
313+
100,
314+
100,
315+
],
260316
"velocity": 1.565762004010972,
261317
},
262318
],
@@ -273,6 +329,10 @@ Array [
273329
"preventDefault": [MockFunction],
274330
"timeStamp": 1374873.499999987,
275331
},
332+
"initial": Array [
333+
100,
334+
100,
335+
],
276336
"velocity": 1.5624999996816769,
277337
},
278338
],
@@ -297,6 +357,10 @@ Array [
297357
},
298358
],
299359
},
360+
"initial": Array [
361+
100,
362+
100,
363+
],
300364
"velocity": 1.8903591679142773,
301365
},
302366
],
@@ -322,6 +386,10 @@ Array [
322386
},
323387
],
324388
},
389+
"initial": Array [
390+
100,
391+
100,
392+
],
325393
"velocity": 1.0548523197963273,
326394
},
327395
],
@@ -342,6 +410,10 @@ Array [
342410
},
343411
],
344412
},
413+
"initial": Array [
414+
100,
415+
100,
416+
],
345417
"velocity": 1.2626262620442454,
346418
},
347419
],
@@ -362,6 +434,10 @@ Array [
362434
},
363435
],
364436
},
437+
"initial": Array [
438+
100,
439+
100,
440+
],
365441
"velocity": 1.6483516480817324,
366442
},
367443
],
@@ -382,6 +458,10 @@ Array [
382458
},
383459
],
384460
},
461+
"initial": Array [
462+
100,
463+
100,
464+
],
385465
"velocity": 1.8903591679142773,
386466
},
387467
],

‎src/index.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const defaultProps = {
1212
const initialState = {
1313
xy: [0, 0],
1414
swiping: false,
15-
lastEventData: undefined,
15+
eventData: undefined,
1616
start: undefined
1717
}
1818
export const LEFT = 'Left'
@@ -58,7 +58,13 @@ function getHandlers(set, handlerProps) {
5858
}
5959
const { clientX, clientY } = event.touches ? event.touches[0] : event
6060
const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle)
61-
return { ...state, ...initialState, xy, start: event.timeStamp || 0 }
61+
return {
62+
...state,
63+
...initialState,
64+
eventData: { initial: [...xy] },
65+
xy,
66+
start: event.timeStamp || 0
67+
}
6268
})
6369
}
6470

@@ -80,7 +86,7 @@ function getHandlers(set, handlerProps) {
8086
if (absX < props.delta && absY < props.delta && !state.swiping) return state
8187

8288
const dir = getDirection(absX, absY, deltaX, deltaY)
83-
const eventData = { event, absX, absY, deltaX, deltaY, velocity, dir }
89+
const eventData = { ...state.eventData, event, absX, absY, deltaX, deltaY, velocity, dir }
8490

8591
props.onSwiping && props.onSwiping(eventData)
8692

@@ -99,20 +105,21 @@ function getHandlers(set, handlerProps) {
99105
)
100106
event.preventDefault()
101107

102-
return { ...state, lastEventData: eventData, swiping: true }
108+
return { ...state, eventData, swiping: true }
103109
})
104110
}
105111

106112
const onEnd = event => {
107113
set((state, props) => {
114+
let eventData
108115
if (state.swiping) {
109-
const eventData = { ...state.lastEventData, event }
116+
eventData = { ...state.eventData, event }
110117

111118
props.onSwiped && props.onSwiped(eventData)
112119

113120
props[`onSwiped${eventData.dir}`] && props[`onSwiped${eventData.dir}`](eventData)
114121
}
115-
return { ...state, ...initialState }
122+
return { ...state, ...initialState, eventData }
116123
})
117124
}
118125

‎types/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22

33
import * as React from 'react'
44

5+
export type Vector2 = [number, number]
56
export interface EventData {
67
event: MouseEvent | TouchEvent
78
deltaX: number
89
deltaY: number
910
absX: number
1011
absY: number
12+
initial: Vector2
1113
velocity: number
1214
dir: 'Left' | 'Right' | 'Up' | 'Down'
1315
}

‎types/test.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import * as React from 'react'
22
import { Swipeable, SwipeableHandlers, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
33

4+
interface CopyOfEventData {
5+
event: MouseEvent | TouchEvent
6+
deltaX: number
7+
deltaY: number
8+
absX: number
9+
absY: number
10+
// initial: Vector2
11+
velocity: number
12+
dir: 'Left' | 'Right' | 'Up' | 'Down'
13+
}
14+
415
class SampleComponent extends React.PureComponent<SwipeableProps> {
516
private readonly handleSwiped: SwipeCallback = () => {}
617
private readonly handleSwipedLeft: SwipeCallback = () => {}
@@ -59,7 +70,18 @@ const TestHook = () => {
5970

6071
const handlers: SwipeableHandlers = useSwipeable({
6172
onSwipedLeft: (data) => {
62-
data // $ExpectType EventData
73+
// verify EventData properties
74+
const {
75+
event, // $ExpectType MouseEvent | TouchEvent
76+
deltaX, // $ExpectType number
77+
deltaY, // $ExpectType number
78+
absX, // $ExpectType number
79+
absY, // $ExpectType number
80+
initial, // $ExpectType [number, number]
81+
velocity, // $ExpectType number
82+
dir, // $ExpectType "Left" | "Right" | "Up" | "Down"
83+
...rest // $ExpectType {}
84+
} = data;
6385
},
6486
preventDefaultTouchmoveEvent: true,
6587
trackTouch: true,

0 commit comments

Comments
 (0)