@wix/site-ui 1.185.0 → 1.187.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/1763.js +836 -0
- package/dist/2205.js +26 -0
- package/dist/2445.js +470 -0
- package/dist/285.js +1 -1
- package/dist/3485.js +4 -3
- package/dist/4863.js +61 -0
- package/dist/{4388.js → 487.js} +5 -57
- package/dist/5992.js +5 -471
- package/dist/6046.js +2 -26
- package/dist/6089.js +6 -3
- package/dist/6270.js +5 -3
- package/dist/6535.js +2 -1
- package/dist/6588.js +2 -1
- package/dist/6882.js +8 -4
- package/dist/6917.js +55 -0
- package/dist/7871.js +1 -1
- package/dist/8052.js +2 -1
- package/dist/8106.js +3 -2
- package/dist/8171.js +1 -1
- package/dist/8750.js +3 -2
- package/dist/8960.js +1 -1
- package/dist/904.js +1 -1
- package/dist/9352.js +2 -2
- package/dist/{880.js → 9369.js} +2 -60
- package/dist/Accordion/index.js +1 -1
- package/dist/Avatar/index.js +2 -1
- package/dist/Checkbox/index.js +2 -1
- package/dist/Collapsible/index.js +1 -1
- package/dist/Combobox/index.js +3 -2
- package/dist/ContextMenu/index.js +2 -2
- package/dist/Drawer/index.js +10 -836
- package/dist/Field/index.js +2 -1
- package/dist/Menu/index.js +3 -2
- package/dist/NavigationMenu/index.js +6 -3
- package/dist/Popover/index.js +5 -3
- package/dist/PreviewCard/index.js +5 -3
- package/dist/Radio/index.js +2 -1
- package/dist/Select/index.js +6 -3
- package/dist/Tabs/index.js +2 -1
- package/dist/Toast/index.css +111 -0
- package/dist/Toast/index.d.ts +846 -0
- package/dist/Toast/index.js +1204 -0
- package/dist/Tooltip/index.js +5 -3
- package/dist/index.d.ts +501 -0
- package/dist/index.js +1 -0
- package/package.json +2 -2
- /package/dist/{5992.js.LICENSE.txt → 2445.js.LICENSE.txt} +0 -0
package/dist/1763.js
ADDED
|
@@ -0,0 +1,836 @@
|
|
|
1
|
+
import { getWindow, getComputedStyle, isHTMLElement } from "./3829.js";
|
|
2
|
+
import { useStableCallback } from "./7541.js";
|
|
3
|
+
import { clamp } from "./3296.js";
|
|
4
|
+
import { ownerDocument } from "./9829.js";
|
|
5
|
+
import { getTarget, contains } from "./4549.js";
|
|
6
|
+
import * as __rspack_external_react from "react";
|
|
7
|
+
function isScrollable(element, axis) {
|
|
8
|
+
const style = getComputedStyle(element);
|
|
9
|
+
if ('vertical' === axis) {
|
|
10
|
+
const overflowY = style.overflowY;
|
|
11
|
+
return ('auto' === overflowY || 'scroll' === overflowY) && element.scrollHeight > element.clientHeight;
|
|
12
|
+
}
|
|
13
|
+
const overflowX = style.overflowX;
|
|
14
|
+
return ('auto' === overflowX || 'scroll' === overflowX) && element.scrollWidth > element.clientWidth;
|
|
15
|
+
}
|
|
16
|
+
function hasScrollableAncestor(target, root, axes) {
|
|
17
|
+
let node = target;
|
|
18
|
+
while(node && node !== root){
|
|
19
|
+
for (const axis of axes)if (isScrollable(node, axis)) return true;
|
|
20
|
+
node = node.parentElement;
|
|
21
|
+
}
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
function findScrollableTouchTarget(target, root, axis = 'vertical') {
|
|
25
|
+
let node = isHTMLElement(target) ? target : null;
|
|
26
|
+
while(node && node !== root){
|
|
27
|
+
if (isScrollable(node, axis)) return node;
|
|
28
|
+
node = node.parentElement;
|
|
29
|
+
}
|
|
30
|
+
return isScrollable(root, axis) ? root : null;
|
|
31
|
+
}
|
|
32
|
+
function getElementAtPoint(doc, x, y) {
|
|
33
|
+
return 'function' == typeof doc?.elementFromPoint ? doc.elementFromPoint(x, y) : null;
|
|
34
|
+
}
|
|
35
|
+
const DEFAULT_SWIPE_THRESHOLD = 40;
|
|
36
|
+
const REVERSE_CANCEL_THRESHOLD = 10;
|
|
37
|
+
const MIN_DRAG_THRESHOLD = 1;
|
|
38
|
+
const MIN_VELOCITY_DURATION_MS = 50;
|
|
39
|
+
const MIN_RELEASE_VELOCITY_DURATION_MS = 16;
|
|
40
|
+
const MAX_RELEASE_VELOCITY_AGE_MS = 80;
|
|
41
|
+
const DEFAULT_IGNORE_SELECTOR = 'button,a,input,select,textarea,label,[role="button"]';
|
|
42
|
+
function getDisplacement(direction, deltaX, deltaY) {
|
|
43
|
+
switch(direction){
|
|
44
|
+
case 'up':
|
|
45
|
+
return -deltaY;
|
|
46
|
+
case 'down':
|
|
47
|
+
return deltaY;
|
|
48
|
+
case 'left':
|
|
49
|
+
return -deltaX;
|
|
50
|
+
case 'right':
|
|
51
|
+
return deltaX;
|
|
52
|
+
default:
|
|
53
|
+
return 0;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function getElementTransform(element) {
|
|
57
|
+
const computedStyle = getWindow(element).getComputedStyle(element);
|
|
58
|
+
const transform = computedStyle.transform;
|
|
59
|
+
let translateX = 0;
|
|
60
|
+
let translateY = 0;
|
|
61
|
+
let scale = 1;
|
|
62
|
+
if (transform && 'none' !== transform) {
|
|
63
|
+
const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
|
|
64
|
+
if (matrix) {
|
|
65
|
+
const values = matrix[1].split(', ').map(parseFloat);
|
|
66
|
+
if (6 === values.length) {
|
|
67
|
+
translateX = values[4];
|
|
68
|
+
translateY = values[5];
|
|
69
|
+
scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
|
|
70
|
+
} else if (16 === values.length) {
|
|
71
|
+
translateX = values[12];
|
|
72
|
+
translateY = values[13];
|
|
73
|
+
scale = values[0];
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return {
|
|
78
|
+
x: translateX,
|
|
79
|
+
y: translateY,
|
|
80
|
+
scale
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
function getValidTimeStamp(timeStamp) {
|
|
84
|
+
return Number.isFinite(timeStamp) && timeStamp > 0 ? timeStamp : null;
|
|
85
|
+
}
|
|
86
|
+
function hasPrimaryMouseButton(buttons) {
|
|
87
|
+
return buttons % 2 === 1;
|
|
88
|
+
}
|
|
89
|
+
function safelyChangePointerCapture(element, pointerId, method) {
|
|
90
|
+
const pointerCaptureMethod = element[method];
|
|
91
|
+
if ('function' != typeof pointerCaptureMethod) return;
|
|
92
|
+
try {
|
|
93
|
+
pointerCaptureMethod.call(element, pointerId);
|
|
94
|
+
} catch (error) {
|
|
95
|
+
if (error && 'object' == typeof error && 'name' in error && 'NotFoundError' === error.name) return;
|
|
96
|
+
throw error;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
function useSwipeDismiss(options) {
|
|
100
|
+
const { enabled, directions, elementRef, movementCssVars, canStart, ignoreSelectorWhenTouch = true, ignoreScrollableAncestors = false, swipeThreshold: swipeThresholdProp, onDismiss, onProgress, onCancel, onSwipeStart, onRelease, onSwipingChange, trackDrag = true } = options;
|
|
101
|
+
const ignoreSelector = DEFAULT_IGNORE_SELECTOR;
|
|
102
|
+
const primaryDirection = 1 === directions.length ? directions[0] : void 0;
|
|
103
|
+
const swipeThresholdDefault = Math.max(0, 'number' == typeof swipeThresholdProp ? swipeThresholdProp : DEFAULT_SWIPE_THRESHOLD);
|
|
104
|
+
const allowLeft = directions.includes('left');
|
|
105
|
+
const allowRight = directions.includes('right');
|
|
106
|
+
const allowUp = directions.includes('up');
|
|
107
|
+
const allowDown = directions.includes('down');
|
|
108
|
+
const hasHorizontal = allowLeft || allowRight;
|
|
109
|
+
const hasVertical = allowUp || allowDown;
|
|
110
|
+
const scrollAxes = __rspack_external_react.useMemo(()=>{
|
|
111
|
+
const axes = [];
|
|
112
|
+
if (hasVertical) axes.push('vertical');
|
|
113
|
+
if (hasHorizontal) axes.push('horizontal');
|
|
114
|
+
return axes;
|
|
115
|
+
}, [
|
|
116
|
+
hasHorizontal,
|
|
117
|
+
hasVertical
|
|
118
|
+
]);
|
|
119
|
+
const [currentSwipeDirection, setCurrentSwipeDirection] = __rspack_external_react.useState(void 0);
|
|
120
|
+
const [isSwiping, setIsSwiping] = __rspack_external_react.useState(false);
|
|
121
|
+
const [isRealSwipe, setIsRealSwipe] = __rspack_external_react.useState(false);
|
|
122
|
+
const [dragDismissed, setDragDismissed] = __rspack_external_react.useState(false);
|
|
123
|
+
const [dragOffset, setDragOffset] = __rspack_external_react.useState({
|
|
124
|
+
x: 0,
|
|
125
|
+
y: 0
|
|
126
|
+
});
|
|
127
|
+
const [initialTransform, setInitialTransform] = __rspack_external_react.useState({
|
|
128
|
+
x: 0,
|
|
129
|
+
y: 0,
|
|
130
|
+
scale: 1
|
|
131
|
+
});
|
|
132
|
+
const [lockedDirection, setLockedDirection] = __rspack_external_react.useState(null);
|
|
133
|
+
const dragStartPosRef = __rspack_external_react.useRef({
|
|
134
|
+
x: 0,
|
|
135
|
+
y: 0
|
|
136
|
+
});
|
|
137
|
+
const dragOffsetRef = __rspack_external_react.useRef({
|
|
138
|
+
x: 0,
|
|
139
|
+
y: 0
|
|
140
|
+
});
|
|
141
|
+
const lastMovePosRef = __rspack_external_react.useRef(null);
|
|
142
|
+
const initialTransformRef = __rspack_external_react.useRef({
|
|
143
|
+
x: 0,
|
|
144
|
+
y: 0,
|
|
145
|
+
scale: 1
|
|
146
|
+
});
|
|
147
|
+
const intendedSwipeDirectionRef = __rspack_external_react.useRef(void 0);
|
|
148
|
+
const maxSwipeDisplacementRef = __rspack_external_react.useRef(0);
|
|
149
|
+
const cancelledSwipeRef = __rspack_external_react.useRef(false);
|
|
150
|
+
const swipeCancelBaselineRef = __rspack_external_react.useRef({
|
|
151
|
+
x: 0,
|
|
152
|
+
y: 0
|
|
153
|
+
});
|
|
154
|
+
const isFirstPointerMoveRef = __rspack_external_react.useRef(false);
|
|
155
|
+
const pendingSwipeRef = __rspack_external_react.useRef(false);
|
|
156
|
+
const pendingSwipeStartPosRef = __rspack_external_react.useRef(null);
|
|
157
|
+
const swipeFromScrollableRef = __rspack_external_react.useRef(false);
|
|
158
|
+
const sawPrimaryButtonsOnMoveRef = __rspack_external_react.useRef(false);
|
|
159
|
+
const elementSizeRef = __rspack_external_react.useRef({
|
|
160
|
+
width: 0,
|
|
161
|
+
height: 0
|
|
162
|
+
});
|
|
163
|
+
const swipeProgressRef = __rspack_external_react.useRef(0);
|
|
164
|
+
const swipeThresholdRef = __rspack_external_react.useRef(swipeThresholdDefault);
|
|
165
|
+
const swipeStartTimeRef = __rspack_external_react.useRef(null);
|
|
166
|
+
const lastDragSampleRef = __rspack_external_react.useRef(null);
|
|
167
|
+
const lastDragVelocityRef = __rspack_external_react.useRef({
|
|
168
|
+
x: 0,
|
|
169
|
+
y: 0
|
|
170
|
+
});
|
|
171
|
+
const lastProgressDetailsRef = __rspack_external_react.useRef(null);
|
|
172
|
+
const isSwipingRef = __rspack_external_react.useRef(false);
|
|
173
|
+
const setSwiping = useStableCallback((nextSwiping)=>{
|
|
174
|
+
if (isSwipingRef.current === nextSwiping) return;
|
|
175
|
+
isSwipingRef.current = nextSwiping;
|
|
176
|
+
setIsSwiping(nextSwiping);
|
|
177
|
+
onSwipingChange?.(nextSwiping);
|
|
178
|
+
});
|
|
179
|
+
function resolveSwipeThreshold(direction) {
|
|
180
|
+
if (!direction) return;
|
|
181
|
+
if ('function' != typeof swipeThresholdProp) {
|
|
182
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const element = elementRef.current;
|
|
186
|
+
if (!element) return;
|
|
187
|
+
const value = swipeThresholdProp({
|
|
188
|
+
element,
|
|
189
|
+
direction
|
|
190
|
+
});
|
|
191
|
+
swipeThresholdRef.current = Math.max(0, value);
|
|
192
|
+
}
|
|
193
|
+
const updateSwipeProgress = useStableCallback((progress, details)=>{
|
|
194
|
+
const nextProgress = Number.isFinite(progress) ? clamp(progress, 0, 1) : 0;
|
|
195
|
+
const progressChanged = nextProgress !== swipeProgressRef.current;
|
|
196
|
+
let detailsChanged = false;
|
|
197
|
+
if (details) {
|
|
198
|
+
const lastDetails = lastProgressDetailsRef.current;
|
|
199
|
+
detailsChanged = !lastDetails || lastDetails.deltaX !== details.deltaX || lastDetails.deltaY !== details.deltaY || lastDetails.direction !== details.direction;
|
|
200
|
+
}
|
|
201
|
+
if (!progressChanged && !detailsChanged) return;
|
|
202
|
+
swipeProgressRef.current = nextProgress;
|
|
203
|
+
if (details) lastProgressDetailsRef.current = details;
|
|
204
|
+
else if (progressChanged) lastProgressDetailsRef.current = null;
|
|
205
|
+
onProgress?.(nextProgress, details);
|
|
206
|
+
});
|
|
207
|
+
function recordDragSample(offset, timeStamp) {
|
|
208
|
+
if (null === timeStamp) return;
|
|
209
|
+
const lastSample = lastDragSampleRef.current;
|
|
210
|
+
if (lastSample && timeStamp > lastSample.time) {
|
|
211
|
+
const durationMs = Math.max(timeStamp - lastSample.time, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
212
|
+
lastDragVelocityRef.current = {
|
|
213
|
+
x: (offset.x - lastSample.x) / durationMs,
|
|
214
|
+
y: (offset.y - lastSample.y) / durationMs
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
lastDragSampleRef.current = {
|
|
218
|
+
x: offset.x,
|
|
219
|
+
y: offset.y,
|
|
220
|
+
time: timeStamp
|
|
221
|
+
};
|
|
222
|
+
}
|
|
223
|
+
const reset = __rspack_external_react.useCallback(()=>{
|
|
224
|
+
setCurrentSwipeDirection(void 0);
|
|
225
|
+
setSwiping(false);
|
|
226
|
+
setIsRealSwipe(false);
|
|
227
|
+
setDragDismissed(false);
|
|
228
|
+
setDragOffset({
|
|
229
|
+
x: 0,
|
|
230
|
+
y: 0
|
|
231
|
+
});
|
|
232
|
+
setInitialTransform({
|
|
233
|
+
x: 0,
|
|
234
|
+
y: 0,
|
|
235
|
+
scale: 1
|
|
236
|
+
});
|
|
237
|
+
setLockedDirection(null);
|
|
238
|
+
updateSwipeProgress(0);
|
|
239
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
240
|
+
dragStartPosRef.current = {
|
|
241
|
+
x: 0,
|
|
242
|
+
y: 0
|
|
243
|
+
};
|
|
244
|
+
dragOffsetRef.current = {
|
|
245
|
+
x: 0,
|
|
246
|
+
y: 0
|
|
247
|
+
};
|
|
248
|
+
initialTransformRef.current = {
|
|
249
|
+
x: 0,
|
|
250
|
+
y: 0,
|
|
251
|
+
scale: 1
|
|
252
|
+
};
|
|
253
|
+
intendedSwipeDirectionRef.current = void 0;
|
|
254
|
+
maxSwipeDisplacementRef.current = 0;
|
|
255
|
+
cancelledSwipeRef.current = false;
|
|
256
|
+
swipeCancelBaselineRef.current = {
|
|
257
|
+
x: 0,
|
|
258
|
+
y: 0
|
|
259
|
+
};
|
|
260
|
+
isFirstPointerMoveRef.current = false;
|
|
261
|
+
lastMovePosRef.current = null;
|
|
262
|
+
pendingSwipeRef.current = false;
|
|
263
|
+
pendingSwipeStartPosRef.current = null;
|
|
264
|
+
swipeFromScrollableRef.current = false;
|
|
265
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
266
|
+
elementSizeRef.current = {
|
|
267
|
+
width: 0,
|
|
268
|
+
height: 0
|
|
269
|
+
};
|
|
270
|
+
swipeStartTimeRef.current = null;
|
|
271
|
+
lastDragSampleRef.current = null;
|
|
272
|
+
lastDragVelocityRef.current = {
|
|
273
|
+
x: 0,
|
|
274
|
+
y: 0
|
|
275
|
+
};
|
|
276
|
+
lastProgressDetailsRef.current = null;
|
|
277
|
+
}, [
|
|
278
|
+
setSwiping,
|
|
279
|
+
swipeThresholdDefault,
|
|
280
|
+
updateSwipeProgress
|
|
281
|
+
]);
|
|
282
|
+
__rspack_external_react.useEffect(()=>{
|
|
283
|
+
if ('function' != typeof swipeThresholdProp) swipeThresholdRef.current = swipeThresholdDefault;
|
|
284
|
+
}, [
|
|
285
|
+
swipeThresholdDefault,
|
|
286
|
+
swipeThresholdProp
|
|
287
|
+
]);
|
|
288
|
+
function getPrimaryPointerPosition(event) {
|
|
289
|
+
if ('touches' in event) {
|
|
290
|
+
const touch = event.touches[0];
|
|
291
|
+
return touch ? {
|
|
292
|
+
x: touch.clientX,
|
|
293
|
+
y: touch.clientY
|
|
294
|
+
} : null;
|
|
295
|
+
}
|
|
296
|
+
return {
|
|
297
|
+
x: event.clientX,
|
|
298
|
+
y: event.clientY
|
|
299
|
+
};
|
|
300
|
+
}
|
|
301
|
+
function isTouchLikeEvent(event) {
|
|
302
|
+
if ('touches' in event) return true;
|
|
303
|
+
return 'touch' === event.pointerType;
|
|
304
|
+
}
|
|
305
|
+
function getTargetAtPoint(position, nativeEvent) {
|
|
306
|
+
const doc = ownerDocument(elementRef.current);
|
|
307
|
+
const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
|
|
308
|
+
const target = elementAtPoint ?? getTarget(nativeEvent);
|
|
309
|
+
return target;
|
|
310
|
+
}
|
|
311
|
+
function findGestureScrollableTouchTarget(target, root) {
|
|
312
|
+
if (hasHorizontal && !hasVertical) return findScrollableTouchTarget(target, root, 'horizontal');
|
|
313
|
+
if (hasVertical && !hasHorizontal) return findScrollableTouchTarget(target, root, 'vertical');
|
|
314
|
+
return findScrollableTouchTarget(target, root, 'vertical') ?? findScrollableTouchTarget(target, root, 'horizontal');
|
|
315
|
+
}
|
|
316
|
+
function startSwipeAtPosition(event, position, startOptions) {
|
|
317
|
+
swipeFromScrollableRef.current = false;
|
|
318
|
+
const touchLike = isTouchLikeEvent(event);
|
|
319
|
+
const target = getTargetAtPoint(position, event.nativeEvent);
|
|
320
|
+
const doc = ownerDocument(elementRef.current);
|
|
321
|
+
const body = doc.body;
|
|
322
|
+
const scrollableTarget = touchLike && body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
323
|
+
const ignoreScrollableTarget = startOptions?.ignoreScrollableTarget ?? false;
|
|
324
|
+
if (scrollableTarget && !ignoreScrollableTarget) return false;
|
|
325
|
+
swipeFromScrollableRef.current = Boolean(scrollableTarget && ignoreScrollableTarget);
|
|
326
|
+
const isInteractiveElement = target ? target.closest(ignoreSelector) : false;
|
|
327
|
+
if (isInteractiveElement && (!touchLike || ignoreSelectorWhenTouch)) return false;
|
|
328
|
+
const element = elementRef.current;
|
|
329
|
+
if (ignoreScrollableAncestors && element && target && scrollAxes.length > 0) {
|
|
330
|
+
const ignoreAncestors = startOptions?.ignoreScrollableAncestors ?? false;
|
|
331
|
+
if (!ignoreAncestors && hasScrollableAncestor(target, element, scrollAxes)) return false;
|
|
332
|
+
}
|
|
333
|
+
cancelledSwipeRef.current = false;
|
|
334
|
+
intendedSwipeDirectionRef.current = void 0;
|
|
335
|
+
maxSwipeDisplacementRef.current = 0;
|
|
336
|
+
dragStartPosRef.current = position;
|
|
337
|
+
swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
|
|
338
|
+
swipeCancelBaselineRef.current = position;
|
|
339
|
+
lastMovePosRef.current = position;
|
|
340
|
+
if (element) {
|
|
341
|
+
elementSizeRef.current = {
|
|
342
|
+
width: element.offsetWidth,
|
|
343
|
+
height: element.offsetHeight
|
|
344
|
+
};
|
|
345
|
+
resolveSwipeThreshold(primaryDirection);
|
|
346
|
+
const transform = getElementTransform(element);
|
|
347
|
+
initialTransformRef.current = transform;
|
|
348
|
+
dragOffsetRef.current = {
|
|
349
|
+
x: transform.x,
|
|
350
|
+
y: transform.y
|
|
351
|
+
};
|
|
352
|
+
setInitialTransform(transform);
|
|
353
|
+
setDragOffset({
|
|
354
|
+
x: transform.x,
|
|
355
|
+
y: transform.y
|
|
356
|
+
});
|
|
357
|
+
recordDragSample({
|
|
358
|
+
x: transform.x,
|
|
359
|
+
y: transform.y
|
|
360
|
+
}, swipeStartTimeRef.current);
|
|
361
|
+
if (!('touches' in event)) safelyChangePointerCapture(element, event.pointerId, 'setPointerCapture');
|
|
362
|
+
}
|
|
363
|
+
onSwipeStart?.(event.nativeEvent);
|
|
364
|
+
setSwiping(true);
|
|
365
|
+
setIsRealSwipe(false);
|
|
366
|
+
setLockedDirection(null);
|
|
367
|
+
isFirstPointerMoveRef.current = true;
|
|
368
|
+
updateSwipeProgress(0);
|
|
369
|
+
return true;
|
|
370
|
+
}
|
|
371
|
+
function resetPendingSwipeState() {
|
|
372
|
+
clearPendingSwipeStartState();
|
|
373
|
+
swipeFromScrollableRef.current = false;
|
|
374
|
+
lastMovePosRef.current = null;
|
|
375
|
+
}
|
|
376
|
+
function clearPendingSwipeStartState() {
|
|
377
|
+
pendingSwipeRef.current = false;
|
|
378
|
+
pendingSwipeStartPosRef.current = null;
|
|
379
|
+
}
|
|
380
|
+
function cancelSwipeInteraction(event) {
|
|
381
|
+
resetPendingSwipeState();
|
|
382
|
+
if (!isSwipingRef.current) return;
|
|
383
|
+
setSwiping(false);
|
|
384
|
+
setIsRealSwipe(false);
|
|
385
|
+
setLockedDirection(null);
|
|
386
|
+
const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
|
|
387
|
+
dragOffsetRef.current = {
|
|
388
|
+
x: resolvedInitialTransform.x,
|
|
389
|
+
y: resolvedInitialTransform.y
|
|
390
|
+
};
|
|
391
|
+
setDragOffset({
|
|
392
|
+
x: resolvedInitialTransform.x,
|
|
393
|
+
y: resolvedInitialTransform.y
|
|
394
|
+
});
|
|
395
|
+
setCurrentSwipeDirection(void 0);
|
|
396
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
397
|
+
const element = elementRef.current;
|
|
398
|
+
if (element) safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
399
|
+
updateSwipeProgress(0, {
|
|
400
|
+
deltaX: 0,
|
|
401
|
+
deltaY: 0,
|
|
402
|
+
direction: void 0
|
|
403
|
+
});
|
|
404
|
+
onCancel?.(event.nativeEvent);
|
|
405
|
+
}
|
|
406
|
+
function applyDirectionalDamping(deltaX, deltaY) {
|
|
407
|
+
const exponent = (value)=>value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
|
|
408
|
+
const dampAxis = (delta, allowNegative, allowPositive)=>{
|
|
409
|
+
if (!allowNegative && delta < 0) return exponent(delta);
|
|
410
|
+
if (!allowPositive && delta > 0) return exponent(delta);
|
|
411
|
+
return delta;
|
|
412
|
+
};
|
|
413
|
+
const newDeltaX = hasHorizontal ? dampAxis(deltaX, allowLeft, allowRight) : exponent(deltaX);
|
|
414
|
+
const newDeltaY = hasVertical ? dampAxis(deltaY, allowUp, allowDown) : exponent(deltaY);
|
|
415
|
+
return {
|
|
416
|
+
x: newDeltaX,
|
|
417
|
+
y: newDeltaY
|
|
418
|
+
};
|
|
419
|
+
}
|
|
420
|
+
function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
|
|
421
|
+
const absDeltaX = Math.abs(deltaX);
|
|
422
|
+
const absDeltaY = Math.abs(deltaY);
|
|
423
|
+
const useVerticalAxis = hasVertical && 0 !== deltaY && (!hasHorizontal || absDeltaY >= absDeltaX);
|
|
424
|
+
if (useVerticalAxis) {
|
|
425
|
+
const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
|
|
426
|
+
const atTop = scrollTarget.scrollTop <= 0;
|
|
427
|
+
const atBottom = scrollTarget.scrollTop >= maxScrollTop;
|
|
428
|
+
const movingDown = deltaY > 0;
|
|
429
|
+
const movingUp = deltaY < 0;
|
|
430
|
+
const canSwipeDown = movingDown && atTop && allowDown;
|
|
431
|
+
const canSwipeUp = movingUp && atBottom && allowUp;
|
|
432
|
+
return canSwipeDown || canSwipeUp;
|
|
433
|
+
}
|
|
434
|
+
const useHorizontalAxis = hasHorizontal && 0 !== deltaX && (!hasVertical || absDeltaX > absDeltaY);
|
|
435
|
+
if (useHorizontalAxis) {
|
|
436
|
+
const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
|
|
437
|
+
const atLeft = scrollTarget.scrollLeft <= 0;
|
|
438
|
+
const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
|
|
439
|
+
const movingRight = deltaX > 0;
|
|
440
|
+
const movingLeft = deltaX < 0;
|
|
441
|
+
const canSwipeRight = movingRight && atLeft && allowRight;
|
|
442
|
+
const canSwipeLeft = movingLeft && atRight && allowLeft;
|
|
443
|
+
return canSwipeRight || canSwipeLeft;
|
|
444
|
+
}
|
|
445
|
+
return null;
|
|
446
|
+
}
|
|
447
|
+
const handleStart = useStableCallback((event)=>{
|
|
448
|
+
if (!enabled) return;
|
|
449
|
+
if (event.defaultPrevented || event.nativeEvent.defaultPrevented) return;
|
|
450
|
+
if (!('touches' in event) && 0 !== event.button) return;
|
|
451
|
+
const startPos = getPrimaryPointerPosition(event);
|
|
452
|
+
if (!startPos) return;
|
|
453
|
+
pendingSwipeRef.current = true;
|
|
454
|
+
pendingSwipeStartPosRef.current = startPos;
|
|
455
|
+
swipeFromScrollableRef.current = false;
|
|
456
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
457
|
+
const allowedToStart = canStart ? canStart(startPos, {
|
|
458
|
+
nativeEvent: event.nativeEvent,
|
|
459
|
+
direction: primaryDirection
|
|
460
|
+
}) : true;
|
|
461
|
+
if (!allowedToStart) return;
|
|
462
|
+
if (startSwipeAtPosition(event, startPos)) clearPendingSwipeStartState();
|
|
463
|
+
});
|
|
464
|
+
function handleMoveCore(event, position, movement) {
|
|
465
|
+
if (!enabled || !isSwipingRef.current) return;
|
|
466
|
+
const target = getTarget(event.nativeEvent);
|
|
467
|
+
if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
|
|
468
|
+
const boundaryElement = event.currentTarget;
|
|
469
|
+
if (findGestureScrollableTouchTarget(target, boundaryElement)) return;
|
|
470
|
+
}
|
|
471
|
+
if (!('touches' in event)) event.preventDefault();
|
|
472
|
+
if (isFirstPointerMoveRef.current) {
|
|
473
|
+
dragStartPosRef.current = position;
|
|
474
|
+
const moveTime = getValidTimeStamp(event.timeStamp);
|
|
475
|
+
if (null !== moveTime) swipeStartTimeRef.current = moveTime;
|
|
476
|
+
isFirstPointerMoveRef.current = false;
|
|
477
|
+
}
|
|
478
|
+
const clientX = position.x;
|
|
479
|
+
const clientY = position.y;
|
|
480
|
+
const movementX = movement.x;
|
|
481
|
+
const movementY = movement.y;
|
|
482
|
+
if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) swipeCancelBaselineRef.current = {
|
|
483
|
+
x: swipeCancelBaselineRef.current.x,
|
|
484
|
+
y: clientY
|
|
485
|
+
};
|
|
486
|
+
if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) swipeCancelBaselineRef.current = {
|
|
487
|
+
x: clientX,
|
|
488
|
+
y: swipeCancelBaselineRef.current.y
|
|
489
|
+
};
|
|
490
|
+
const deltaX = clientX - dragStartPosRef.current.x;
|
|
491
|
+
const deltaY = clientY - dragStartPosRef.current.y;
|
|
492
|
+
const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
|
|
493
|
+
const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
|
|
494
|
+
if (!isRealSwipe) {
|
|
495
|
+
const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
496
|
+
if (movementDistance >= MIN_DRAG_THRESHOLD) {
|
|
497
|
+
setIsRealSwipe(true);
|
|
498
|
+
if (null === lockedDirection) {
|
|
499
|
+
if (hasHorizontal && hasVertical) {
|
|
500
|
+
const absX = Math.abs(deltaX);
|
|
501
|
+
const absY = Math.abs(deltaY);
|
|
502
|
+
setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
let candidate;
|
|
508
|
+
if (intendedSwipeDirectionRef.current) {
|
|
509
|
+
const direction = intendedSwipeDirectionRef.current;
|
|
510
|
+
const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
|
|
511
|
+
if (currentDisplacement > swipeThresholdRef.current) {
|
|
512
|
+
cancelledSwipeRef.current = false;
|
|
513
|
+
setCurrentSwipeDirection(direction);
|
|
514
|
+
} else if (!(allowLeft && allowRight) && !(allowUp && allowDown) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) cancelledSwipeRef.current = true;
|
|
515
|
+
} else {
|
|
516
|
+
if ('vertical' === lockedDirection) {
|
|
517
|
+
if (deltaY > 0) candidate = 'down';
|
|
518
|
+
else if (deltaY < 0) candidate = 'up';
|
|
519
|
+
} else if ('horizontal' === lockedDirection) {
|
|
520
|
+
if (deltaX > 0) candidate = 'right';
|
|
521
|
+
else if (deltaX < 0) candidate = 'left';
|
|
522
|
+
} else candidate = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX > 0 ? 'right' : 'left' : deltaY > 0 ? 'down' : 'up';
|
|
523
|
+
if (candidate) {
|
|
524
|
+
const isAllowed = 'left' === candidate && allowLeft || 'right' === candidate && allowRight || 'up' === candidate && allowUp || 'down' === candidate && allowDown;
|
|
525
|
+
if (isAllowed) {
|
|
526
|
+
intendedSwipeDirectionRef.current = candidate;
|
|
527
|
+
maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
|
|
528
|
+
setCurrentSwipeDirection(candidate);
|
|
529
|
+
resolveSwipeThreshold(candidate);
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
|
|
534
|
+
let newOffsetX = initialTransformRef.current.x;
|
|
535
|
+
let newOffsetY = initialTransformRef.current.y;
|
|
536
|
+
if ('horizontal' === lockedDirection) {
|
|
537
|
+
if (hasHorizontal) newOffsetX += dampedDelta.x;
|
|
538
|
+
} else if ('vertical' === lockedDirection) {
|
|
539
|
+
if (hasVertical) newOffsetY += dampedDelta.y;
|
|
540
|
+
} else {
|
|
541
|
+
if (hasHorizontal) newOffsetX += dampedDelta.x;
|
|
542
|
+
if (hasVertical) newOffsetY += dampedDelta.y;
|
|
543
|
+
}
|
|
544
|
+
dragOffsetRef.current = {
|
|
545
|
+
x: newOffsetX,
|
|
546
|
+
y: newOffsetY
|
|
547
|
+
};
|
|
548
|
+
if (trackDrag) setDragOffset({
|
|
549
|
+
x: newOffsetX,
|
|
550
|
+
y: newOffsetY
|
|
551
|
+
});
|
|
552
|
+
recordDragSample({
|
|
553
|
+
x: newOffsetX,
|
|
554
|
+
y: newOffsetY
|
|
555
|
+
}, getValidTimeStamp(event.timeStamp));
|
|
556
|
+
const dragDeltaX = newOffsetX - initialTransformRef.current.x;
|
|
557
|
+
const dragDeltaY = newOffsetY - initialTransformRef.current.y;
|
|
558
|
+
const swipeDirectionDetails = intendedSwipeDirectionRef.current;
|
|
559
|
+
const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
|
|
560
|
+
if (!progressDirection) return void updateSwipeProgress(0, {
|
|
561
|
+
deltaX: dragDeltaX,
|
|
562
|
+
deltaY: dragDeltaY,
|
|
563
|
+
direction: swipeDirectionDetails
|
|
564
|
+
});
|
|
565
|
+
const size = 'left' === progressDirection || 'right' === progressDirection ? elementSizeRef.current.width : elementSizeRef.current.height;
|
|
566
|
+
const scale = initialTransformRef.current.scale || 1;
|
|
567
|
+
if (size <= 0 || scale <= 0) return void updateSwipeProgress(0, {
|
|
568
|
+
deltaX: dragDeltaX,
|
|
569
|
+
deltaY: dragDeltaY,
|
|
570
|
+
direction: swipeDirectionDetails
|
|
571
|
+
});
|
|
572
|
+
const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
|
|
573
|
+
if (progressDisplacement <= 0) return void updateSwipeProgress(0, {
|
|
574
|
+
deltaX: dragDeltaX,
|
|
575
|
+
deltaY: dragDeltaY,
|
|
576
|
+
direction: swipeDirectionDetails
|
|
577
|
+
});
|
|
578
|
+
updateSwipeProgress(progressDisplacement / (size * scale), {
|
|
579
|
+
deltaX: dragDeltaX,
|
|
580
|
+
deltaY: dragDeltaY,
|
|
581
|
+
direction: swipeDirectionDetails
|
|
582
|
+
});
|
|
583
|
+
}
|
|
584
|
+
const handleMove = useStableCallback((event)=>{
|
|
585
|
+
const currentPos = getPrimaryPointerPosition(event);
|
|
586
|
+
if (!currentPos) return;
|
|
587
|
+
if (!('touches' in event)) {
|
|
588
|
+
const hasPrimaryButton = hasPrimaryMouseButton(event.buttons);
|
|
589
|
+
if (hasPrimaryButton) sawPrimaryButtonsOnMoveRef.current = true;
|
|
590
|
+
const lostPrimaryButtonDuringSwipe = 0 === event.buttons && sawPrimaryButtonsOnMoveRef.current;
|
|
591
|
+
if (0 !== event.buttons && !hasPrimaryButton || lostPrimaryButtonDuringSwipe) return void cancelSwipeInteraction(event);
|
|
592
|
+
}
|
|
593
|
+
if (!isSwiping && pendingSwipeRef.current) {
|
|
594
|
+
if (!isTouchLikeEvent(event) && (event.defaultPrevented || event.nativeEvent.defaultPrevented)) return void resetPendingSwipeState();
|
|
595
|
+
const allowedToStart = canStart ? canStart(currentPos, {
|
|
596
|
+
nativeEvent: event.nativeEvent,
|
|
597
|
+
direction: primaryDirection
|
|
598
|
+
}) : true;
|
|
599
|
+
if (allowedToStart) {
|
|
600
|
+
const pendingStartPos = pendingSwipeStartPosRef.current;
|
|
601
|
+
let ignoreScrollableOnStart = false;
|
|
602
|
+
if (isTouchLikeEvent(event)) {
|
|
603
|
+
const element = elementRef.current;
|
|
604
|
+
if (pendingStartPos && element) {
|
|
605
|
+
const target = getTargetAtPoint(currentPos, event.nativeEvent);
|
|
606
|
+
const doc = ownerDocument(element);
|
|
607
|
+
const body = doc.body;
|
|
608
|
+
const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
609
|
+
if (scrollTarget && (contains(element, scrollTarget) || contains(scrollTarget, element))) {
|
|
610
|
+
const deltaX = currentPos.x - pendingStartPos.x;
|
|
611
|
+
const deltaY = currentPos.y - pendingStartPos.y;
|
|
612
|
+
const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
|
|
613
|
+
if (false === canSwipeFromEdge) return;
|
|
614
|
+
if (true === canSwipeFromEdge) ignoreScrollableOnStart = true;
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
const started = startSwipeAtPosition(event, currentPos, {
|
|
619
|
+
ignoreScrollableTarget: ignoreScrollableOnStart,
|
|
620
|
+
ignoreScrollableAncestors: ignoreScrollableOnStart
|
|
621
|
+
});
|
|
622
|
+
if (started) if (pendingStartPos && ignoreScrollableOnStart) {
|
|
623
|
+
clearPendingSwipeStartState();
|
|
624
|
+
dragStartPosRef.current = pendingStartPos;
|
|
625
|
+
swipeCancelBaselineRef.current = pendingStartPos;
|
|
626
|
+
lastMovePosRef.current = pendingStartPos;
|
|
627
|
+
isFirstPointerMoveRef.current = false;
|
|
628
|
+
} else {
|
|
629
|
+
clearPendingSwipeStartState();
|
|
630
|
+
swipeFromScrollableRef.current = false;
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
const previousPos = lastMovePosRef.current;
|
|
635
|
+
const movement = null === previousPos ? {
|
|
636
|
+
x: 0,
|
|
637
|
+
y: 0
|
|
638
|
+
} : {
|
|
639
|
+
x: currentPos.x - previousPos.x,
|
|
640
|
+
y: currentPos.y - previousPos.y
|
|
641
|
+
};
|
|
642
|
+
lastMovePosRef.current = currentPos;
|
|
643
|
+
handleMoveCore(event, currentPos, movement);
|
|
644
|
+
});
|
|
645
|
+
const handleEnd = useStableCallback((event)=>{
|
|
646
|
+
if (!enabled) return;
|
|
647
|
+
const resolvedDragOffset = dragOffsetRef.current;
|
|
648
|
+
const resolvedInitialTransform = initialTransformRef.current;
|
|
649
|
+
const releaseDeltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
|
|
650
|
+
const releaseDeltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
|
|
651
|
+
const progressDetails = {
|
|
652
|
+
deltaX: releaseDeltaX,
|
|
653
|
+
deltaY: releaseDeltaY,
|
|
654
|
+
direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current
|
|
655
|
+
};
|
|
656
|
+
if (!isSwipingRef.current) {
|
|
657
|
+
resetPendingSwipeState();
|
|
658
|
+
updateSwipeProgress(0, progressDetails);
|
|
659
|
+
return;
|
|
660
|
+
}
|
|
661
|
+
setSwiping(false);
|
|
662
|
+
setIsRealSwipe(false);
|
|
663
|
+
setLockedDirection(null);
|
|
664
|
+
resetPendingSwipeState();
|
|
665
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
666
|
+
const element = elementRef.current;
|
|
667
|
+
if (element) {
|
|
668
|
+
if (!('touches' in event)) safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
669
|
+
}
|
|
670
|
+
const deltaX = releaseDeltaX;
|
|
671
|
+
const deltaY = releaseDeltaY;
|
|
672
|
+
const startTime = swipeStartTimeRef.current;
|
|
673
|
+
const endTime = getValidTimeStamp(event.timeStamp);
|
|
674
|
+
const durationMs = null !== startTime && null !== endTime && endTime > startTime ? endTime - startTime : 0;
|
|
675
|
+
const velocityDurationMs = durationMs > 0 ? Math.max(durationMs, MIN_VELOCITY_DURATION_MS) : 0;
|
|
676
|
+
const velocityX = velocityDurationMs > 0 ? deltaX / velocityDurationMs : 0;
|
|
677
|
+
const velocityY = velocityDurationMs > 0 ? deltaY / velocityDurationMs : 0;
|
|
678
|
+
let releaseVelocityX = lastDragVelocityRef.current.x;
|
|
679
|
+
let releaseVelocityY = lastDragVelocityRef.current.y;
|
|
680
|
+
const lastSample = lastDragSampleRef.current;
|
|
681
|
+
if (lastSample && null !== endTime && endTime >= lastSample.time) {
|
|
682
|
+
const ageMs = endTime - lastSample.time;
|
|
683
|
+
if (ageMs <= MAX_RELEASE_VELOCITY_AGE_MS) {
|
|
684
|
+
const sampleDurationMs = Math.max(ageMs, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
685
|
+
const deltaFromLastSampleX = resolvedDragOffset.x - lastSample.x;
|
|
686
|
+
const deltaFromLastSampleY = resolvedDragOffset.y - lastSample.y;
|
|
687
|
+
const sampleVelocityX = deltaFromLastSampleX / sampleDurationMs;
|
|
688
|
+
const sampleVelocityY = deltaFromLastSampleY / sampleDurationMs;
|
|
689
|
+
if (0 !== sampleVelocityX) releaseVelocityX = sampleVelocityX;
|
|
690
|
+
if (0 !== sampleVelocityY) releaseVelocityY = sampleVelocityY;
|
|
691
|
+
} else {
|
|
692
|
+
releaseVelocityX = 0;
|
|
693
|
+
releaseVelocityY = 0;
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
const releaseDecision = onRelease?.({
|
|
697
|
+
event: event.nativeEvent,
|
|
698
|
+
direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current,
|
|
699
|
+
deltaX,
|
|
700
|
+
deltaY,
|
|
701
|
+
velocityX,
|
|
702
|
+
velocityY,
|
|
703
|
+
releaseVelocityX,
|
|
704
|
+
releaseVelocityY
|
|
705
|
+
});
|
|
706
|
+
const hasReleaseDecision = 'boolean' == typeof releaseDecision;
|
|
707
|
+
if (cancelledSwipeRef.current && !hasReleaseDecision) {
|
|
708
|
+
dragOffsetRef.current = {
|
|
709
|
+
x: resolvedInitialTransform.x,
|
|
710
|
+
y: resolvedInitialTransform.y
|
|
711
|
+
};
|
|
712
|
+
setDragOffset({
|
|
713
|
+
x: resolvedInitialTransform.x,
|
|
714
|
+
y: resolvedInitialTransform.y
|
|
715
|
+
});
|
|
716
|
+
setCurrentSwipeDirection(void 0);
|
|
717
|
+
updateSwipeProgress(0, progressDetails);
|
|
718
|
+
return;
|
|
719
|
+
}
|
|
720
|
+
let shouldClose = false;
|
|
721
|
+
let dismissDirection;
|
|
722
|
+
if (hasReleaseDecision) {
|
|
723
|
+
shouldClose = releaseDecision;
|
|
724
|
+
dismissDirection = currentSwipeDirection ?? intendedSwipeDirectionRef.current ?? primaryDirection;
|
|
725
|
+
} else for (const direction of directions){
|
|
726
|
+
switch(direction){
|
|
727
|
+
case 'right':
|
|
728
|
+
if (deltaX > swipeThresholdRef.current) {
|
|
729
|
+
shouldClose = true;
|
|
730
|
+
dismissDirection = 'right';
|
|
731
|
+
}
|
|
732
|
+
break;
|
|
733
|
+
case 'left':
|
|
734
|
+
if (deltaX < -swipeThresholdRef.current) {
|
|
735
|
+
shouldClose = true;
|
|
736
|
+
dismissDirection = 'left';
|
|
737
|
+
}
|
|
738
|
+
break;
|
|
739
|
+
case 'down':
|
|
740
|
+
if (deltaY > swipeThresholdRef.current) {
|
|
741
|
+
shouldClose = true;
|
|
742
|
+
dismissDirection = 'down';
|
|
743
|
+
}
|
|
744
|
+
break;
|
|
745
|
+
case 'up':
|
|
746
|
+
if (deltaY < -swipeThresholdRef.current) {
|
|
747
|
+
shouldClose = true;
|
|
748
|
+
dismissDirection = 'up';
|
|
749
|
+
}
|
|
750
|
+
break;
|
|
751
|
+
default:
|
|
752
|
+
break;
|
|
753
|
+
}
|
|
754
|
+
if (shouldClose) break;
|
|
755
|
+
}
|
|
756
|
+
if (shouldClose && dismissDirection) {
|
|
757
|
+
setCurrentSwipeDirection(dismissDirection);
|
|
758
|
+
setDragDismissed(true);
|
|
759
|
+
onDismiss?.(event.nativeEvent, {
|
|
760
|
+
direction: dismissDirection
|
|
761
|
+
});
|
|
762
|
+
} else {
|
|
763
|
+
dragOffsetRef.current = {
|
|
764
|
+
x: resolvedInitialTransform.x,
|
|
765
|
+
y: resolvedInitialTransform.y
|
|
766
|
+
};
|
|
767
|
+
setDragOffset({
|
|
768
|
+
x: resolvedInitialTransform.x,
|
|
769
|
+
y: resolvedInitialTransform.y
|
|
770
|
+
});
|
|
771
|
+
setCurrentSwipeDirection(void 0);
|
|
772
|
+
updateSwipeProgress(0, progressDetails);
|
|
773
|
+
}
|
|
774
|
+
});
|
|
775
|
+
const getDragStyles = __rspack_external_react.useCallback(()=>{
|
|
776
|
+
const resolvedDragOffset = trackDrag ? dragOffset : dragOffsetRef.current;
|
|
777
|
+
const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
|
|
778
|
+
if (!isSwiping && resolvedDragOffset.x === resolvedInitialTransform.x && resolvedDragOffset.y === resolvedInitialTransform.y && !dragDismissed) return {
|
|
779
|
+
[movementCssVars.x]: '0px',
|
|
780
|
+
[movementCssVars.y]: '0px'
|
|
781
|
+
};
|
|
782
|
+
const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
|
|
783
|
+
const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
|
|
784
|
+
return {
|
|
785
|
+
transition: isSwiping ? 'none' : void 0,
|
|
786
|
+
transform: isSwiping ? `translateX(${resolvedDragOffset.x}px) translateY(${resolvedDragOffset.y}px) scale(${resolvedInitialTransform.scale})` : void 0,
|
|
787
|
+
[movementCssVars.x]: `${deltaX}px`,
|
|
788
|
+
[movementCssVars.y]: `${deltaY}px`
|
|
789
|
+
};
|
|
790
|
+
}, [
|
|
791
|
+
dragDismissed,
|
|
792
|
+
dragOffset,
|
|
793
|
+
initialTransform,
|
|
794
|
+
isSwiping,
|
|
795
|
+
movementCssVars,
|
|
796
|
+
trackDrag
|
|
797
|
+
]);
|
|
798
|
+
const getPointerProps = __rspack_external_react.useCallback(()=>{
|
|
799
|
+
if (!enabled) return {};
|
|
800
|
+
return {
|
|
801
|
+
onPointerDown: handleStart,
|
|
802
|
+
onPointerMove: handleMove,
|
|
803
|
+
onPointerUp: handleEnd,
|
|
804
|
+
onPointerCancel: handleEnd
|
|
805
|
+
};
|
|
806
|
+
}, [
|
|
807
|
+
enabled,
|
|
808
|
+
handleEnd,
|
|
809
|
+
handleMove,
|
|
810
|
+
handleStart
|
|
811
|
+
]);
|
|
812
|
+
const getTouchProps = __rspack_external_react.useCallback(()=>{
|
|
813
|
+
if (!enabled) return {};
|
|
814
|
+
return {
|
|
815
|
+
onTouchStart: handleStart,
|
|
816
|
+
onTouchMove: handleMove,
|
|
817
|
+
onTouchEnd: handleEnd,
|
|
818
|
+
onTouchCancel: handleEnd
|
|
819
|
+
};
|
|
820
|
+
}, [
|
|
821
|
+
enabled,
|
|
822
|
+
handleEnd,
|
|
823
|
+
handleMove,
|
|
824
|
+
handleStart
|
|
825
|
+
]);
|
|
826
|
+
return {
|
|
827
|
+
swiping: isSwiping,
|
|
828
|
+
swipeDirection: currentSwipeDirection,
|
|
829
|
+
dragDismissed,
|
|
830
|
+
getPointerProps,
|
|
831
|
+
getTouchProps,
|
|
832
|
+
getDragStyles,
|
|
833
|
+
reset
|
|
834
|
+
};
|
|
835
|
+
}
|
|
836
|
+
export { findScrollableTouchTarget, getDisplacement, getElementAtPoint, getElementTransform, useSwipeDismiss };
|