UNPKG

3.93 kBPlain TextView Raw
1import * as React from "react";
2
3export const LEFT = "Left";
4export const RIGHT = "Right";
5export const UP = "Up";
6export const DOWN = "Down";
7export type HandledEvents = React.MouseEvent | TouchEvent | MouseEvent;
8export type Vector2 = [number, number];
9export type SwipeDirections =
10 | typeof LEFT
11 | typeof RIGHT
12 | typeof UP
13 | typeof DOWN;
14export interface SwipeEventData {
15 /**
16 * Absolute displacement of swipe in x. Math.abs(deltaX);
17 */
18 absX: number;
19 /**
20 * Absolute displacement of swipe in y. Math.abs(deltaY);
21 */
22 absY: number;
23 /**
24 * Displacement of swipe in x. (current.x - initial.x)
25 */
26 deltaX: number;
27 /**
28 * Displacement of swipe in y. (current.y - initial.y)
29 */
30 deltaY: number;
31 /**
32 * Direction of swipe - Left | Right | Up | Down
33 */
34 dir: SwipeDirections;
35 /**
36 * Source event.
37 */
38 event: HandledEvents;
39 /**
40 * True for the first event of a tracked swipe.
41 */
42 first: boolean;
43 /**
44 * Location where swipe started - [x, y].
45 */
46 initial: Vector2;
47 /**
48 * "Absolute velocity" (speed) - √(absX^2 + absY^2) / time
49 */
50 velocity: number;
51 /**
52 * Velocity per axis - [ deltaX/time, deltaY/time ]
53 */
54 vxvy: Vector2;
55}
56
57export type SwipeCallback = (eventData: SwipeEventData) => void;
58export type TapCallback = ({ event }: { event: HandledEvents }) => void;
59
60export type SwipeableDirectionCallbacks = {
61 /**
62 * Called after a DOWN swipe
63 */
64 onSwipedDown: SwipeCallback;
65 /**
66 * Called after a LEFT swipe
67 */
68 onSwipedLeft: SwipeCallback;
69 /**
70 * Called after a RIGHT swipe
71 */
72 onSwipedRight: SwipeCallback;
73 /**
74 * Called after a UP swipe
75 */
76 onSwipedUp: SwipeCallback;
77};
78
79export type SwipeableCallbacks = SwipeableDirectionCallbacks & {
80 /**
81 * Called at start of a tracked swipe.
82 */
83 onSwipeStart: SwipeCallback;
84 /**
85 * Called after any swipe.
86 */
87 onSwiped: SwipeCallback;
88 /**
89 * Called for each move event during a tracked swipe.
90 */
91 onSwiping: SwipeCallback;
92 /**
93 * Called after a tap. A touch under the min distance, `delta`.
94 */
95 onTap: TapCallback;
96 /**
97 * Called for `touchstart` and `mousedown`.
98 */
99 onTouchStartOrOnMouseDown: TapCallback;
100 /**
101 * Called for `touchend` and `mouseup`.
102 */
103 onTouchEndOrOnMouseUp: TapCallback;
104};
105
106// Configuration Options
107export type ConfigurationOptionDelta =
108 | number
109 | { [key in Lowercase<SwipeDirections>]?: number };
110
111export interface ConfigurationOptions {
112 /**
113 * Min distance(px) before a swipe starts. **Default**: `10`
114 */
115 delta: ConfigurationOptionDelta;
116 /**
117 * Prevents scroll during swipe in most cases. **Default**: `false`
118 */
119 preventScrollOnSwipe: boolean;
120 /**
121 * Set a rotation angle. **Default**: `0`
122 */
123 rotationAngle: number;
124 /**
125 * Track mouse input. **Default**: `false`
126 */
127 trackMouse: boolean;
128 /**
129 * Track touch input. **Default**: `true`
130 */
131 trackTouch: boolean;
132 /**
133 * Allowable duration of a swipe (ms). **Default**: `Infinity`
134 */
135 swipeDuration: number;
136 /**
137 * Options for touch event listeners
138 */
139 touchEventOptions: { passive: boolean };
140}
141
142export type SwipeableProps = Partial<SwipeableCallbacks & ConfigurationOptions>;
143
144export type SwipeablePropsWithDefaultOptions = Partial<SwipeableCallbacks> &
145 ConfigurationOptions;
146
147export interface SwipeableHandlers {
148 ref(element: HTMLElement | null): void;
149 onMouseDown?(event: React.MouseEvent): void;
150}
151
152export type SwipeableState = {
153 cleanUpTouch?: () => void;
154 el?: HTMLElement;
155 eventData?: SwipeEventData;
156 first: boolean;
157 initial: Vector2;
158 start: number;
159 swiping: boolean;
160 xy: Vector2;
161};
162
163export type StateSetter = (
164 state: SwipeableState,
165 props: SwipeablePropsWithDefaultOptions
166) => SwipeableState;
167export type Setter = (stateSetter: StateSetter) => void;
168export type AttachTouch = (
169 el: HTMLElement,
170 props: SwipeablePropsWithDefaultOptions
171) => () => void;