1 | import * as React from "react";
|
2 |
|
3 | export const LEFT = "Left";
|
4 | export const RIGHT = "Right";
|
5 | export const UP = "Up";
|
6 | export const DOWN = "Down";
|
7 | export type HandledEvents = React.MouseEvent | TouchEvent | MouseEvent;
|
8 | export type Vector2 = [number, number];
|
9 | export type SwipeDirections =
|
10 | | typeof LEFT
|
11 | | typeof RIGHT
|
12 | | typeof UP
|
13 | | typeof DOWN;
|
14 | export interface SwipeEventData {
|
15 | |
16 |
|
17 |
|
18 | absX: number;
|
19 | |
20 |
|
21 |
|
22 | absY: number;
|
23 | |
24 |
|
25 |
|
26 | deltaX: number;
|
27 | |
28 |
|
29 |
|
30 | deltaY: number;
|
31 | |
32 |
|
33 |
|
34 | dir: SwipeDirections;
|
35 | |
36 |
|
37 |
|
38 | event: HandledEvents;
|
39 | |
40 |
|
41 |
|
42 | first: boolean;
|
43 | |
44 |
|
45 |
|
46 | initial: Vector2;
|
47 | |
48 |
|
49 |
|
50 | velocity: number;
|
51 | |
52 |
|
53 |
|
54 | vxvy: Vector2;
|
55 | }
|
56 |
|
57 | export type SwipeCallback = (eventData: SwipeEventData) => void;
|
58 | export type TapCallback = ({ event }: { event: HandledEvents }) => void;
|
59 |
|
60 | export type SwipeableDirectionCallbacks = {
|
61 | |
62 |
|
63 |
|
64 | onSwipedDown: SwipeCallback;
|
65 | |
66 |
|
67 |
|
68 | onSwipedLeft: SwipeCallback;
|
69 | |
70 |
|
71 |
|
72 | onSwipedRight: SwipeCallback;
|
73 | |
74 |
|
75 |
|
76 | onSwipedUp: SwipeCallback;
|
77 | };
|
78 |
|
79 | export type SwipeableCallbacks = SwipeableDirectionCallbacks & {
|
80 | |
81 |
|
82 |
|
83 | onSwipeStart: SwipeCallback;
|
84 | |
85 |
|
86 |
|
87 | onSwiped: SwipeCallback;
|
88 | |
89 |
|
90 |
|
91 | onSwiping: SwipeCallback;
|
92 | |
93 |
|
94 |
|
95 | onTap: TapCallback;
|
96 | |
97 |
|
98 |
|
99 | onTouchStartOrOnMouseDown: TapCallback;
|
100 | |
101 |
|
102 |
|
103 | onTouchEndOrOnMouseUp: TapCallback;
|
104 | };
|
105 |
|
106 |
|
107 | export type ConfigurationOptionDelta =
|
108 | | number
|
109 | | { [key in Lowercase<SwipeDirections>]?: number };
|
110 |
|
111 | export interface ConfigurationOptions {
|
112 | |
113 |
|
114 |
|
115 | delta: ConfigurationOptionDelta;
|
116 | |
117 |
|
118 |
|
119 | preventScrollOnSwipe: boolean;
|
120 | |
121 |
|
122 |
|
123 | rotationAngle: number;
|
124 | |
125 |
|
126 |
|
127 | trackMouse: boolean;
|
128 | |
129 |
|
130 |
|
131 | trackTouch: boolean;
|
132 | |
133 |
|
134 |
|
135 | swipeDuration: number;
|
136 | |
137 |
|
138 |
|
139 | touchEventOptions: { passive: boolean };
|
140 | }
|
141 |
|
142 | export type SwipeableProps = Partial<SwipeableCallbacks & ConfigurationOptions>;
|
143 |
|
144 | export type SwipeablePropsWithDefaultOptions = Partial<SwipeableCallbacks> &
|
145 | ConfigurationOptions;
|
146 |
|
147 | export interface SwipeableHandlers {
|
148 | ref(element: HTMLElement | null): void;
|
149 | onMouseDown?(event: React.MouseEvent): void;
|
150 | }
|
151 |
|
152 | export 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 |
|
163 | export type StateSetter = (
|
164 | state: SwipeableState,
|
165 | props: SwipeablePropsWithDefaultOptions
|
166 | ) => SwipeableState;
|
167 | export type Setter = (stateSetter: StateSetter) => void;
|
168 | export type AttachTouch = (
|
169 | el: HTMLElement,
|
170 | props: SwipeablePropsWithDefaultOptions
|
171 | ) => () => void;
|