@reactuses/core 5.0.15 → 5.0.17
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/README.md +21 -8
- package/dist/index-client-DJgtg2U_.cjs +30 -0
- package/dist/index-client-Qon46B4S.js +28 -0
- package/dist/index.cjs +375 -338
- package/dist/index.d.cts +141 -95
- package/dist/index.d.mts +141 -95
- package/dist/index.d.ts +141 -95
- package/dist/index.mjs +372 -340
- package/package.json +4 -4
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
|
|
1
|
+
import React, { useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
|
|
2
2
|
import { isEqual, debounce, throttle } from 'lodash-es';
|
|
3
3
|
import Cookies from 'js-cookie';
|
|
4
4
|
import screenfull from 'screenfull';
|
|
5
5
|
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
|
|
6
|
+
export { a as assignRef, m as mergeRefs, u as useMergedRefs } from './index-client-Qon46B4S.js';
|
|
6
7
|
|
|
7
8
|
const useLatest = (value)=>{
|
|
8
9
|
const ref = useRef(value);
|
|
@@ -11,13 +12,17 @@ const useLatest = (value)=>{
|
|
|
11
12
|
};
|
|
12
13
|
|
|
13
14
|
var _window_navigator, _window;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const
|
|
15
|
+
function isFunction(val) {
|
|
16
|
+
return typeof val === 'function';
|
|
17
|
+
}
|
|
18
|
+
function isString(val) {
|
|
19
|
+
return typeof val === 'string';
|
|
20
|
+
}
|
|
21
|
+
const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
|
|
22
|
+
const isBrowser = typeof window !== 'undefined';
|
|
23
|
+
const isNavigator = typeof navigator !== 'undefined';
|
|
24
|
+
function noop() {}
|
|
25
|
+
const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
|
|
21
26
|
|
|
22
27
|
function on(obj, ...args) {
|
|
23
28
|
if (obj && obj.addEventListener) {
|
|
@@ -32,9 +37,9 @@ function off(obj, ...args) {
|
|
|
32
37
|
const defaultWindow = isBrowser ? window : undefined;
|
|
33
38
|
|
|
34
39
|
const defaultOptions$1 = {};
|
|
35
|
-
|
|
40
|
+
function defaultOnError(e) {
|
|
36
41
|
console.error(e);
|
|
37
|
-
}
|
|
42
|
+
}
|
|
38
43
|
|
|
39
44
|
function getTargetElement(target, defaultElement) {
|
|
40
45
|
if (!isBrowser) {
|
|
@@ -46,7 +51,7 @@ function getTargetElement(target, defaultElement) {
|
|
|
46
51
|
let targetElement;
|
|
47
52
|
if (isFunction(target)) {
|
|
48
53
|
targetElement = target();
|
|
49
|
-
} else if (
|
|
54
|
+
} else if ('current' in target) {
|
|
50
55
|
targetElement = target.current;
|
|
51
56
|
} else {
|
|
52
57
|
targetElement = target;
|
|
@@ -55,12 +60,12 @@ function getTargetElement(target, defaultElement) {
|
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
58
|
-
if (process.env.NODE_ENV !==
|
|
63
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
59
64
|
if (!Array.isArray(deps) || !deps.length) {
|
|
60
|
-
console.warn(
|
|
65
|
+
console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
61
66
|
}
|
|
62
|
-
if (typeof depsEqual !==
|
|
63
|
-
console.warn(
|
|
67
|
+
if (typeof depsEqual !== 'function') {
|
|
68
|
+
console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
71
|
const ref = useRef(undefined);
|
|
@@ -72,9 +77,9 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
|
72
77
|
};
|
|
73
78
|
|
|
74
79
|
const useDeepCompareEffect = (effect, deps)=>{
|
|
75
|
-
if (process.env.NODE_ENV !==
|
|
80
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
76
81
|
if (!Array.isArray(deps) || !deps.length) {
|
|
77
|
-
console.warn(
|
|
82
|
+
console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
78
83
|
}
|
|
79
84
|
}
|
|
80
85
|
useCustomCompareEffect(effect, deps, isEqual);
|
|
@@ -108,12 +113,12 @@ const useActiveElement = ()=>{
|
|
|
108
113
|
var _window;
|
|
109
114
|
setActive((_window = window) == null ? void 0 : _window.document.activeElement);
|
|
110
115
|
}, []);
|
|
111
|
-
useEventListener(
|
|
112
|
-
useEventListener(
|
|
116
|
+
useEventListener('blur', listener, ()=>window, true);
|
|
117
|
+
useEventListener('focus', listener, ()=>window, true);
|
|
113
118
|
return active;
|
|
114
119
|
};
|
|
115
120
|
|
|
116
|
-
|
|
121
|
+
function useMountedState() {
|
|
117
122
|
const mountedRef = useRef(false);
|
|
118
123
|
const get = useCallback(()=>mountedRef.current, []);
|
|
119
124
|
useEffect(()=>{
|
|
@@ -123,7 +128,7 @@ const useMountedState = ()=>{
|
|
|
123
128
|
};
|
|
124
129
|
}, []);
|
|
125
130
|
return get;
|
|
126
|
-
}
|
|
131
|
+
}
|
|
127
132
|
|
|
128
133
|
function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
|
|
129
134
|
try {
|
|
@@ -190,11 +195,11 @@ const useClickOutside = (target, handler, enabled = true)=>{
|
|
|
190
195
|
}
|
|
191
196
|
savedHandler.current(event);
|
|
192
197
|
};
|
|
193
|
-
useEventListener(
|
|
194
|
-
useEventListener(
|
|
198
|
+
useEventListener('mousedown', listener, defaultWindow, listerOptions);
|
|
199
|
+
useEventListener('touchstart', listener, defaultWindow, listerOptions);
|
|
195
200
|
};
|
|
196
201
|
|
|
197
|
-
|
|
202
|
+
function getInitialState$4(key, defaultValue) {
|
|
198
203
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
199
204
|
if (defaultValue !== undefined) {
|
|
200
205
|
return defaultValue;
|
|
@@ -202,11 +207,11 @@ const getInitialState$4 = (key, defaultValue)=>{
|
|
|
202
207
|
if (isBrowser) {
|
|
203
208
|
return Cookies.get(key);
|
|
204
209
|
}
|
|
205
|
-
if (process.env.NODE_ENV !==
|
|
206
|
-
console.warn(
|
|
210
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
211
|
+
console.warn('`useCookie` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
207
212
|
}
|
|
208
|
-
return
|
|
209
|
-
}
|
|
213
|
+
return '';
|
|
214
|
+
}
|
|
210
215
|
const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
|
|
211
216
|
const [cookieValue, setCookieValue] = useState(getInitialState$4(key, defaultValue));
|
|
212
217
|
useEffect(()=>{
|
|
@@ -323,22 +328,22 @@ const useInterval = (callback, delay, options = defaultOptions$1)=>{
|
|
|
323
328
|
};
|
|
324
329
|
};
|
|
325
330
|
|
|
326
|
-
|
|
331
|
+
function padZero(time) {
|
|
327
332
|
return `${time}`.length < 2 ? `0${time}` : `${time}`;
|
|
328
|
-
}
|
|
329
|
-
|
|
333
|
+
}
|
|
334
|
+
function getHMSTime(timeDiff) {
|
|
330
335
|
if (timeDiff <= 0) {
|
|
331
336
|
return [
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
337
|
+
'00',
|
|
338
|
+
'00',
|
|
339
|
+
'00'
|
|
335
340
|
];
|
|
336
341
|
}
|
|
337
342
|
if (timeDiff > 100 * 3600) {
|
|
338
343
|
return [
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
344
|
+
'99',
|
|
345
|
+
'59',
|
|
346
|
+
'59'
|
|
342
347
|
];
|
|
343
348
|
}
|
|
344
349
|
const hour = Math.floor(timeDiff / 3600);
|
|
@@ -349,7 +354,7 @@ const getHMSTime = (timeDiff)=>{
|
|
|
349
354
|
padZero(minute),
|
|
350
355
|
padZero(second)
|
|
351
356
|
];
|
|
352
|
-
}
|
|
357
|
+
}
|
|
353
358
|
const useCountDown = (time, format = getHMSTime, callback)=>{
|
|
354
359
|
const [remainTime, setRemainTime] = useState(time);
|
|
355
360
|
const [delay, setDelay] = useState(1000);
|
|
@@ -380,14 +385,14 @@ const useCountDown = (time, format = getHMSTime, callback)=>{
|
|
|
380
385
|
const useCounter = (initialValue = 0, max = null, min = null)=>{
|
|
381
386
|
// avoid exec init code every render
|
|
382
387
|
const initFunc = ()=>{
|
|
383
|
-
let init = typeof initialValue ===
|
|
384
|
-
typeof init !==
|
|
385
|
-
if (typeof min ===
|
|
388
|
+
let init = typeof initialValue === 'function' ? initialValue() : initialValue;
|
|
389
|
+
typeof init !== 'number' && console.error(`initialValue has to be a number, got ${typeof initialValue}`);
|
|
390
|
+
if (typeof min === 'number') {
|
|
386
391
|
init = Math.max(init, min);
|
|
387
392
|
} else if (min !== null) {
|
|
388
393
|
console.error(`min has to be a number, got ${typeof min}`);
|
|
389
394
|
}
|
|
390
|
-
if (typeof max ===
|
|
395
|
+
if (typeof max === 'number') {
|
|
391
396
|
init = Math.min(init, max);
|
|
392
397
|
} else if (max !== null) {
|
|
393
398
|
console.error(`max has to be a number, got ${typeof max}`);
|
|
@@ -397,11 +402,11 @@ const useCounter = (initialValue = 0, max = null, min = null)=>{
|
|
|
397
402
|
const [value, setValue] = useState(initFunc);
|
|
398
403
|
const set = useEvent((newState)=>{
|
|
399
404
|
setValue((v)=>{
|
|
400
|
-
let nextValue = typeof newState ===
|
|
401
|
-
if (typeof min ===
|
|
405
|
+
let nextValue = typeof newState === 'function' ? newState(v) : newState;
|
|
406
|
+
if (typeof min === 'number') {
|
|
402
407
|
nextValue = Math.max(nextValue, min);
|
|
403
408
|
}
|
|
404
|
-
if (typeof max ===
|
|
409
|
+
if (typeof max === 'number') {
|
|
405
410
|
nextValue = Math.min(nextValue, max);
|
|
406
411
|
}
|
|
407
412
|
return nextValue;
|
|
@@ -429,19 +434,19 @@ const defaultOptions = {
|
|
|
429
434
|
observe: false
|
|
430
435
|
};
|
|
431
436
|
|
|
432
|
-
|
|
437
|
+
function getInitialState$3(defaultValue) {
|
|
433
438
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
434
439
|
if (defaultValue !== undefined) {
|
|
435
440
|
return defaultValue;
|
|
436
441
|
}
|
|
437
442
|
if (isBrowser) {
|
|
438
|
-
return
|
|
443
|
+
return '';
|
|
439
444
|
}
|
|
440
|
-
if (process.env.NODE_ENV !==
|
|
441
|
-
console.warn(
|
|
445
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
446
|
+
console.warn('`useCssVar` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
442
447
|
}
|
|
443
|
-
return
|
|
444
|
-
}
|
|
448
|
+
return '';
|
|
449
|
+
}
|
|
445
450
|
const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
|
|
446
451
|
const { observe } = options;
|
|
447
452
|
const [variable, setVariable] = useState(getInitialState$3(defaultValue));
|
|
@@ -485,8 +490,8 @@ const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
|
|
|
485
490
|
observerRef.current = new MutationObserver(updateCssVar);
|
|
486
491
|
observerRef.current.observe(element, {
|
|
487
492
|
attributeFilter: [
|
|
488
|
-
|
|
489
|
-
|
|
493
|
+
'style',
|
|
494
|
+
'class'
|
|
490
495
|
]
|
|
491
496
|
});
|
|
492
497
|
return ()=>{
|
|
@@ -529,12 +534,12 @@ const useCycleList = (list, i = 0)=>{
|
|
|
529
534
|
};
|
|
530
535
|
|
|
531
536
|
function guessSerializerType(rawInit) {
|
|
532
|
-
return rawInit == null || rawInit === undefined ?
|
|
537
|
+
return rawInit == null || rawInit === undefined ? 'any' : rawInit instanceof Set ? 'set' : rawInit instanceof Map ? 'map' : rawInit instanceof Date ? 'date' : typeof rawInit === 'boolean' ? 'boolean' : typeof rawInit === 'string' ? 'string' : typeof rawInit === 'object' ? 'object' : Array.isArray(rawInit) ? 'object' : !Number.isNaN(rawInit) ? 'number' : 'any';
|
|
533
538
|
}
|
|
534
539
|
|
|
535
540
|
const StorageSerializers = {
|
|
536
541
|
boolean: {
|
|
537
|
-
read: (v)=>v ===
|
|
542
|
+
read: (v)=>v === 'true',
|
|
538
543
|
write: (v)=>String(v)
|
|
539
544
|
},
|
|
540
545
|
object: {
|
|
@@ -566,7 +571,7 @@ const StorageSerializers = {
|
|
|
566
571
|
write: (v)=>v.toISOString()
|
|
567
572
|
}
|
|
568
573
|
};
|
|
569
|
-
|
|
574
|
+
function getInitialState$2(key, defaultValue, storage, serializer, onError) {
|
|
570
575
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
571
576
|
if (defaultValue !== undefined) {
|
|
572
577
|
return defaultValue;
|
|
@@ -583,11 +588,11 @@ const getInitialState$2 = (key, defaultValue, storage, serializer, onError)=>{
|
|
|
583
588
|
}
|
|
584
589
|
}
|
|
585
590
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
586
|
-
if (process.env.NODE_ENV !==
|
|
587
|
-
console.warn(
|
|
591
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
592
|
+
console.warn('`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
588
593
|
}
|
|
589
594
|
return null;
|
|
590
|
-
}
|
|
595
|
+
}
|
|
591
596
|
function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
|
|
592
597
|
let storage;
|
|
593
598
|
const { onError = defaultOnError, effectStorageValue } = options;
|
|
@@ -644,9 +649,9 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
|
|
|
644
649
|
}
|
|
645
650
|
|
|
646
651
|
const useDarkMode = (options)=>{
|
|
647
|
-
const { selector =
|
|
652
|
+
const { selector = 'html', attribute = 'class', classNameDark = '', classNameLight = '', storageKey = 'reactuses-color-scheme', storage = ()=>isBrowser ? localStorage : undefined, defaultValue = false } = options;
|
|
648
653
|
const value = ()=>{
|
|
649
|
-
return window.matchMedia(
|
|
654
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
650
655
|
};
|
|
651
656
|
const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
|
|
652
657
|
effectStorageValue: value
|
|
@@ -657,7 +662,7 @@ const useDarkMode = (options)=>{
|
|
|
657
662
|
if (!element) {
|
|
658
663
|
return;
|
|
659
664
|
}
|
|
660
|
-
if (attribute ===
|
|
665
|
+
if (attribute === 'class') {
|
|
661
666
|
dark && classNameDark && element.classList.add(classNameDark);
|
|
662
667
|
!dark && classNameLight && element.classList.add(classNameLight);
|
|
663
668
|
} else {
|
|
@@ -668,7 +673,7 @@ const useDarkMode = (options)=>{
|
|
|
668
673
|
if (!element) {
|
|
669
674
|
return;
|
|
670
675
|
}
|
|
671
|
-
if (attribute ===
|
|
676
|
+
if (attribute === 'class') {
|
|
672
677
|
dark && classNameDark && element.classList.remove(classNameDark);
|
|
673
678
|
!dark && classNameLight && element.classList.remove(classNameLight);
|
|
674
679
|
} else {
|
|
@@ -690,7 +695,7 @@ const useDarkMode = (options)=>{
|
|
|
690
695
|
];
|
|
691
696
|
};
|
|
692
697
|
|
|
693
|
-
|
|
698
|
+
function useUnmount(fn) {
|
|
694
699
|
if (isDev) {
|
|
695
700
|
if (!isFunction(fn)) {
|
|
696
701
|
console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
|
|
@@ -702,7 +707,7 @@ const useUnmount = (fn)=>{
|
|
|
702
707
|
}, [
|
|
703
708
|
fnRef
|
|
704
709
|
]);
|
|
705
|
-
}
|
|
710
|
+
}
|
|
706
711
|
|
|
707
712
|
const useDebounceFn = (fn, wait, options)=>{
|
|
708
713
|
if (isDev) {
|
|
@@ -742,7 +747,7 @@ const useDebounce = (value, wait, options)=>{
|
|
|
742
747
|
return debounced;
|
|
743
748
|
};
|
|
744
749
|
|
|
745
|
-
|
|
750
|
+
function getInitialState$1(defaultValue) {
|
|
746
751
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
747
752
|
if (defaultValue !== undefined) {
|
|
748
753
|
return defaultValue;
|
|
@@ -750,28 +755,28 @@ const getInitialState$1 = (defaultValue)=>{
|
|
|
750
755
|
if (isBrowser) {
|
|
751
756
|
return document.visibilityState;
|
|
752
757
|
}
|
|
753
|
-
if (process.env.NODE_ENV !==
|
|
754
|
-
console.warn(
|
|
758
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
759
|
+
console.warn('`useDocumentVisibility` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
755
760
|
}
|
|
756
|
-
return
|
|
757
|
-
}
|
|
758
|
-
|
|
761
|
+
return 'visible';
|
|
762
|
+
}
|
|
763
|
+
function useDocumentVisibility(defaultValue) {
|
|
759
764
|
const [visible, setVisible] = useState(getInitialState$1(defaultValue));
|
|
760
|
-
useEventListener(
|
|
765
|
+
useEventListener('visibilitychange', ()=>{
|
|
761
766
|
setVisible(document.visibilityState);
|
|
762
767
|
}, ()=>document);
|
|
763
768
|
useEffect(()=>{
|
|
764
769
|
setVisible(document.visibilityState);
|
|
765
770
|
}, []);
|
|
766
771
|
return visible;
|
|
767
|
-
}
|
|
772
|
+
}
|
|
768
773
|
|
|
769
774
|
const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubleClick = ()=>{} })=>{
|
|
770
775
|
const handle = useCallback((onSingleClick, onDoubleClick)=>{
|
|
771
776
|
let count = 0;
|
|
772
777
|
return (e)=>{
|
|
773
778
|
// prevent ios double click slide
|
|
774
|
-
if (e.type ===
|
|
779
|
+
if (e.type === 'touchend') {
|
|
775
780
|
e.stopPropagation();
|
|
776
781
|
e.preventDefault();
|
|
777
782
|
}
|
|
@@ -790,24 +795,24 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
|
|
|
790
795
|
]);
|
|
791
796
|
const handleClick = handle(onSingleClick, onDoubleClick);
|
|
792
797
|
const handleTouchEnd = handle(onSingleClick, onDoubleClick);
|
|
793
|
-
useEventListener(
|
|
794
|
-
useEventListener(
|
|
798
|
+
useEventListener('click', handleClick, target);
|
|
799
|
+
useEventListener('touchend', handleTouchEnd, target, {
|
|
795
800
|
passive: false
|
|
796
801
|
});
|
|
797
802
|
};
|
|
798
803
|
|
|
799
|
-
|
|
804
|
+
function isScrollX(node) {
|
|
800
805
|
if (!node) {
|
|
801
806
|
return false;
|
|
802
807
|
}
|
|
803
|
-
return getComputedStyle(node).overflowX ===
|
|
804
|
-
}
|
|
805
|
-
|
|
808
|
+
return getComputedStyle(node).overflowX === 'auto' || getComputedStyle(node).overflowX === 'scroll';
|
|
809
|
+
}
|
|
810
|
+
function isScrollY(node) {
|
|
806
811
|
if (!node) {
|
|
807
812
|
return false;
|
|
808
813
|
}
|
|
809
|
-
return getComputedStyle(node).overflowY ===
|
|
810
|
-
}
|
|
814
|
+
return getComputedStyle(node).overflowY === 'auto' || getComputedStyle(node).overflowY === 'scroll';
|
|
815
|
+
}
|
|
811
816
|
const useDraggable = (target, options = {})=>{
|
|
812
817
|
const { draggingElement, containerElement } = options;
|
|
813
818
|
var _options_handle;
|
|
@@ -900,9 +905,9 @@ const useDraggable = (target, options = {})=>{
|
|
|
900
905
|
options.onEnd == null ? void 0 : options.onEnd.call(options, position, e);
|
|
901
906
|
handleEvent(e);
|
|
902
907
|
};
|
|
903
|
-
useEventListener(
|
|
904
|
-
useEventListener(
|
|
905
|
-
useEventListener(
|
|
908
|
+
useEventListener('pointerdown', start, draggingHandle, true);
|
|
909
|
+
useEventListener('pointermove', move, draggingElement, true);
|
|
910
|
+
useEventListener('pointerup', end, draggingElement, true);
|
|
906
911
|
return [
|
|
907
912
|
position.x,
|
|
908
913
|
position.y,
|
|
@@ -914,22 +919,22 @@ const useDraggable = (target, options = {})=>{
|
|
|
914
919
|
const useDropZone = (target, onDrop)=>{
|
|
915
920
|
const [over, setOver] = useState(false);
|
|
916
921
|
const counter = useRef(0);
|
|
917
|
-
useEventListener(
|
|
922
|
+
useEventListener('dragenter', (event)=>{
|
|
918
923
|
event.preventDefault();
|
|
919
924
|
counter.current += 1;
|
|
920
925
|
setOver(true);
|
|
921
926
|
}, target);
|
|
922
|
-
useEventListener(
|
|
927
|
+
useEventListener('dragover', (event)=>{
|
|
923
928
|
event.preventDefault();
|
|
924
929
|
}, target);
|
|
925
|
-
useEventListener(
|
|
930
|
+
useEventListener('dragleave', (event)=>{
|
|
926
931
|
event.preventDefault();
|
|
927
932
|
counter.current -= 1;
|
|
928
933
|
if (counter.current === 0) {
|
|
929
934
|
setOver(false);
|
|
930
935
|
}
|
|
931
936
|
}, target);
|
|
932
|
-
useEventListener(
|
|
937
|
+
useEventListener('drop', (event)=>{
|
|
933
938
|
var _event_dataTransfer;
|
|
934
939
|
event.preventDefault();
|
|
935
940
|
counter.current = 0;
|
|
@@ -1012,21 +1017,21 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
|
|
|
1012
1017
|
]);
|
|
1013
1018
|
useEffect(()=>{
|
|
1014
1019
|
if (windowScroll) {
|
|
1015
|
-
window.addEventListener(
|
|
1020
|
+
window.addEventListener('scroll', update, {
|
|
1016
1021
|
passive: true
|
|
1017
1022
|
});
|
|
1018
1023
|
}
|
|
1019
1024
|
if (windowResize) {
|
|
1020
|
-
window.addEventListener(
|
|
1025
|
+
window.addEventListener('resize', update, {
|
|
1021
1026
|
passive: true
|
|
1022
1027
|
});
|
|
1023
1028
|
}
|
|
1024
1029
|
return ()=>{
|
|
1025
1030
|
if (windowScroll) {
|
|
1026
|
-
window.removeEventListener(
|
|
1031
|
+
window.removeEventListener('scroll', update);
|
|
1027
1032
|
}
|
|
1028
1033
|
if (windowResize) {
|
|
1029
|
-
window.removeEventListener(
|
|
1034
|
+
window.removeEventListener('resize', update);
|
|
1030
1035
|
}
|
|
1031
1036
|
};
|
|
1032
1037
|
}, [
|
|
@@ -1048,11 +1053,11 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
|
|
|
1048
1053
|
};
|
|
1049
1054
|
|
|
1050
1055
|
const useElementSize = (target, options = defaultOptions$1)=>{
|
|
1051
|
-
const { box =
|
|
1056
|
+
const { box = 'content-box' } = options;
|
|
1052
1057
|
const [width, setWidth] = useState(0);
|
|
1053
1058
|
const [height, setHeight] = useState(0);
|
|
1054
1059
|
useResizeObserver(target, ([entry])=>{
|
|
1055
|
-
const boxSize = box ===
|
|
1060
|
+
const boxSize = box === 'border-box' ? entry.borderBoxSize : box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
|
|
1056
1061
|
if (boxSize) {
|
|
1057
1062
|
setWidth(boxSize.reduce((acc, { inlineSize })=>acc + inlineSize, 0));
|
|
1058
1063
|
setHeight(boxSize.reduce((acc, { blockSize })=>acc + blockSize, 0));
|
|
@@ -1103,7 +1108,7 @@ const useElementVisibility = (target, options = defaultOptions$1)=>{
|
|
|
1103
1108
|
];
|
|
1104
1109
|
};
|
|
1105
1110
|
|
|
1106
|
-
|
|
1111
|
+
function useEventEmitter() {
|
|
1107
1112
|
const listeners = useRef([]);
|
|
1108
1113
|
const _disposed = useRef(false);
|
|
1109
1114
|
const _event = useRef((listener)=>{
|
|
@@ -1142,16 +1147,16 @@ const useEventEmitter = ()=>{
|
|
|
1142
1147
|
fire,
|
|
1143
1148
|
dispose
|
|
1144
1149
|
];
|
|
1145
|
-
}
|
|
1150
|
+
}
|
|
1146
1151
|
|
|
1147
|
-
|
|
1152
|
+
function useSupported(callback, sync = false) {
|
|
1148
1153
|
const [supported, setSupported] = useState(false);
|
|
1149
1154
|
const effect = sync ? useIsomorphicLayoutEffect : useEffect;
|
|
1150
1155
|
effect(()=>{
|
|
1151
1156
|
setSupported(Boolean(callback()));
|
|
1152
1157
|
}, []);
|
|
1153
1158
|
return supported;
|
|
1154
|
-
}
|
|
1159
|
+
}
|
|
1155
1160
|
|
|
1156
1161
|
function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
|
|
1157
1162
|
try {
|
|
@@ -1183,11 +1188,11 @@ function _async_to_generator$5(fn) {
|
|
|
1183
1188
|
};
|
|
1184
1189
|
}
|
|
1185
1190
|
const useEyeDropper = ()=>{
|
|
1186
|
-
const isSupported = useSupported(()=>typeof window !==
|
|
1191
|
+
const isSupported = useSupported(()=>typeof window !== 'undefined' && 'EyeDropper' in window, true);
|
|
1187
1192
|
const open = useCallback(/*#__PURE__*/ _async_to_generator$5(function*(options = {}) {
|
|
1188
1193
|
if (!isSupported) {
|
|
1189
1194
|
return {
|
|
1190
|
-
sRGBHex:
|
|
1195
|
+
sRGBHex: ''
|
|
1191
1196
|
};
|
|
1192
1197
|
}
|
|
1193
1198
|
const eyeDropper = new window.EyeDropper();
|
|
@@ -1201,23 +1206,23 @@ const useEyeDropper = ()=>{
|
|
|
1201
1206
|
];
|
|
1202
1207
|
};
|
|
1203
1208
|
|
|
1204
|
-
|
|
1209
|
+
function useFavicon(href, baseUrl = '', rel = 'icon') {
|
|
1205
1210
|
useEffect(()=>{
|
|
1206
1211
|
const url = `${baseUrl}${href}`;
|
|
1207
1212
|
const element = document.head.querySelectorAll(`link[rel*="${rel}"]`);
|
|
1208
1213
|
element.forEach((el)=>el.href = url);
|
|
1209
1214
|
if (element.length === 0) {
|
|
1210
|
-
const link = document.createElement(
|
|
1215
|
+
const link = document.createElement('link');
|
|
1211
1216
|
link.rel = rel;
|
|
1212
1217
|
link.href = url;
|
|
1213
|
-
document.getElementsByTagName(
|
|
1218
|
+
document.getElementsByTagName('head')[0].appendChild(link);
|
|
1214
1219
|
}
|
|
1215
1220
|
}, [
|
|
1216
1221
|
baseUrl,
|
|
1217
1222
|
href,
|
|
1218
1223
|
rel
|
|
1219
1224
|
]);
|
|
1220
|
-
}
|
|
1225
|
+
}
|
|
1221
1226
|
|
|
1222
1227
|
function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
|
|
1223
1228
|
try {
|
|
@@ -1264,7 +1269,7 @@ function _extends$2() {
|
|
|
1264
1269
|
}
|
|
1265
1270
|
const DEFAULT_OPTIONS = {
|
|
1266
1271
|
multiple: true,
|
|
1267
|
-
accept:
|
|
1272
|
+
accept: '*'
|
|
1268
1273
|
};
|
|
1269
1274
|
const useFileDialog = (options = defaultOptions$1)=>{
|
|
1270
1275
|
const [files, setFiles] = useState(null);
|
|
@@ -1272,11 +1277,11 @@ const useFileDialog = (options = defaultOptions$1)=>{
|
|
|
1272
1277
|
const fileOpenPromiseRef = useRef(null);
|
|
1273
1278
|
const resolveFileOpenPromiseRef = useRef();
|
|
1274
1279
|
const initFn = useCallback(()=>{
|
|
1275
|
-
if (typeof document ===
|
|
1280
|
+
if (typeof document === 'undefined') {
|
|
1276
1281
|
return undefined;
|
|
1277
1282
|
}
|
|
1278
|
-
const input = document.createElement(
|
|
1279
|
-
input.type =
|
|
1283
|
+
const input = document.createElement('input');
|
|
1284
|
+
input.type = 'file';
|
|
1280
1285
|
input.onchange = (event)=>{
|
|
1281
1286
|
const result = event.target;
|
|
1282
1287
|
setFiles(result.files);
|
|
@@ -1303,7 +1308,7 @@ const useFileDialog = (options = defaultOptions$1)=>{
|
|
|
1303
1308
|
setFiles(null);
|
|
1304
1309
|
resolveFileOpenPromiseRef.current == null ? void 0 : resolveFileOpenPromiseRef.current.call(resolveFileOpenPromiseRef, null);
|
|
1305
1310
|
if (inputRef.current) {
|
|
1306
|
-
inputRef.current.value =
|
|
1311
|
+
inputRef.current.value = '';
|
|
1307
1312
|
}
|
|
1308
1313
|
};
|
|
1309
1314
|
return [
|
|
@@ -1336,8 +1341,8 @@ const useMount = (fn)=>{
|
|
|
1336
1341
|
|
|
1337
1342
|
const useFocus = (target, initialValue = false)=>{
|
|
1338
1343
|
const [focus, innerSetFocus] = useState(initialValue);
|
|
1339
|
-
useEventListener(
|
|
1340
|
-
useEventListener(
|
|
1344
|
+
useEventListener('focus', ()=>innerSetFocus(true), target);
|
|
1345
|
+
useEventListener('blur', ()=>innerSetFocus(false), target);
|
|
1341
1346
|
const setFocus = (value)=>{
|
|
1342
1347
|
const element = getTargetElement(target);
|
|
1343
1348
|
if (!element) {
|
|
@@ -1401,7 +1406,7 @@ const useRafFn = (callback, initiallyActive = true)=>{
|
|
|
1401
1406
|
return result;
|
|
1402
1407
|
};
|
|
1403
1408
|
|
|
1404
|
-
|
|
1409
|
+
function useFps(options = defaultOptions$1) {
|
|
1405
1410
|
const [fps, setFps] = useState(0);
|
|
1406
1411
|
var _options_every;
|
|
1407
1412
|
const every = (_options_every = options.every) != null ? _options_every : 10;
|
|
@@ -1418,7 +1423,7 @@ const useFps = (options = defaultOptions$1)=>{
|
|
|
1418
1423
|
}
|
|
1419
1424
|
});
|
|
1420
1425
|
return fps;
|
|
1421
|
-
}
|
|
1426
|
+
}
|
|
1422
1427
|
|
|
1423
1428
|
const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
1424
1429
|
const { onExit, onEnter } = options;
|
|
@@ -1429,7 +1434,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1429
1434
|
if (isFullscreen) {
|
|
1430
1435
|
onEnter == null ? void 0 : onEnter();
|
|
1431
1436
|
} else {
|
|
1432
|
-
screenfull.off(
|
|
1437
|
+
screenfull.off('change', onChange);
|
|
1433
1438
|
onExit == null ? void 0 : onExit();
|
|
1434
1439
|
}
|
|
1435
1440
|
setState(isFullscreen);
|
|
@@ -1443,7 +1448,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1443
1448
|
if (screenfull.isEnabled) {
|
|
1444
1449
|
try {
|
|
1445
1450
|
screenfull.request(el);
|
|
1446
|
-
screenfull.on(
|
|
1451
|
+
screenfull.on('change', onChange);
|
|
1447
1452
|
} catch (error) {
|
|
1448
1453
|
console.error(error);
|
|
1449
1454
|
}
|
|
@@ -1463,7 +1468,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1463
1468
|
};
|
|
1464
1469
|
useUnmount(()=>{
|
|
1465
1470
|
if (screenfull.isEnabled) {
|
|
1466
|
-
screenfull.off(
|
|
1471
|
+
screenfull.off('change', onChange);
|
|
1467
1472
|
}
|
|
1468
1473
|
});
|
|
1469
1474
|
return [
|
|
@@ -1531,18 +1536,18 @@ const useHover = (target)=>{
|
|
|
1531
1536
|
const [hovered, setHovered] = useState(false);
|
|
1532
1537
|
const onMouseEnter = useCallback(()=>setHovered(true), []);
|
|
1533
1538
|
const onMouseLeave = useCallback(()=>setHovered(false), []);
|
|
1534
|
-
useEventListener(
|
|
1535
|
-
useEventListener(
|
|
1539
|
+
useEventListener('mouseenter', onMouseEnter, target);
|
|
1540
|
+
useEventListener('mouseleave', onMouseLeave, target);
|
|
1536
1541
|
return hovered;
|
|
1537
1542
|
};
|
|
1538
1543
|
|
|
1539
1544
|
const defaultEvents$1 = [
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1545
|
+
'mousemove',
|
|
1546
|
+
'mousedown',
|
|
1547
|
+
'resize',
|
|
1548
|
+
'keydown',
|
|
1549
|
+
'touchstart',
|
|
1550
|
+
'wheel'
|
|
1546
1551
|
];
|
|
1547
1552
|
const oneMinute = 60e3;
|
|
1548
1553
|
const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)=>{
|
|
@@ -1572,14 +1577,14 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1572
1577
|
for(let i = 0; i < events.length; i++){
|
|
1573
1578
|
on(window, events[i], onEvent);
|
|
1574
1579
|
}
|
|
1575
|
-
on(document,
|
|
1580
|
+
on(document, 'visibilitychange', onVisibility);
|
|
1576
1581
|
timeout = setTimeout(()=>set(true), ms);
|
|
1577
1582
|
return ()=>{
|
|
1578
1583
|
mounted = false;
|
|
1579
1584
|
for(let i = 0; i < events.length; i++){
|
|
1580
1585
|
off(window, events[i], onEvent);
|
|
1581
1586
|
}
|
|
1582
|
-
off(document,
|
|
1587
|
+
off(document, 'visibilitychange', onVisibility);
|
|
1583
1588
|
};
|
|
1584
1589
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1585
1590
|
}, [
|
|
@@ -1589,7 +1594,7 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1589
1594
|
return state;
|
|
1590
1595
|
};
|
|
1591
1596
|
|
|
1592
|
-
|
|
1597
|
+
function useThrottleFn(fn, wait, options) {
|
|
1593
1598
|
if (isDev) {
|
|
1594
1599
|
if (!isFunction(fn)) {
|
|
1595
1600
|
console.error(`useThrottleFn expected parameter is a function, got ${typeof fn}`);
|
|
@@ -1611,7 +1616,7 @@ const useThrottleFn = (fn, wait, options)=>{
|
|
|
1611
1616
|
cancel: throttled.cancel,
|
|
1612
1617
|
flush: throttled.flush
|
|
1613
1618
|
};
|
|
1614
|
-
}
|
|
1619
|
+
}
|
|
1615
1620
|
|
|
1616
1621
|
/**
|
|
1617
1622
|
* We have to check if the scroll amount is close enough to some threshold in order to
|
|
@@ -1680,7 +1685,7 @@ const useScroll = (target, options = defaultOptions$1)=>{
|
|
|
1680
1685
|
onScroll(e);
|
|
1681
1686
|
});
|
|
1682
1687
|
const { run: throttleOnScroll } = useThrottleFn(onScrollHandler, throttle);
|
|
1683
|
-
useEventListener(
|
|
1688
|
+
useEventListener('scroll', throttle ? throttleOnScroll : onScrollHandler, target, eventListenerOptions);
|
|
1684
1689
|
return [
|
|
1685
1690
|
x,
|
|
1686
1691
|
y,
|
|
@@ -1747,7 +1752,7 @@ function _extends$1() {
|
|
|
1747
1752
|
const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
1748
1753
|
const savedLoadMore = useLatest(onLoadMore);
|
|
1749
1754
|
var _options_direction;
|
|
1750
|
-
const direction = (_options_direction = options.direction) != null ? _options_direction :
|
|
1755
|
+
const direction = (_options_direction = options.direction) != null ? _options_direction : 'bottom';
|
|
1751
1756
|
var _options_distance;
|
|
1752
1757
|
const state = useScroll(target, _extends$1({}, options, {
|
|
1753
1758
|
offset: _extends$1({
|
|
@@ -1780,10 +1785,10 @@ const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
|
1780
1785
|
};
|
|
1781
1786
|
|
|
1782
1787
|
const defaultEvents = [
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1788
|
+
'mousedown',
|
|
1789
|
+
'mouseup',
|
|
1790
|
+
'keydown',
|
|
1791
|
+
'keyup'
|
|
1787
1792
|
];
|
|
1788
1793
|
const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
1789
1794
|
const { events = defaultEvents, initial = false } = options;
|
|
@@ -1791,7 +1796,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1791
1796
|
useMount(()=>{
|
|
1792
1797
|
events.forEach((listenEvent)=>{
|
|
1793
1798
|
on(document, listenEvent, (evt)=>{
|
|
1794
|
-
if (typeof evt.getModifierState ===
|
|
1799
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1795
1800
|
setState(evt.getModifierState(modifier));
|
|
1796
1801
|
}
|
|
1797
1802
|
});
|
|
@@ -1799,7 +1804,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1799
1804
|
return ()=>{
|
|
1800
1805
|
events.forEach((listenerEvent)=>{
|
|
1801
1806
|
off(document, listenerEvent, (evt)=>{
|
|
1802
|
-
if (typeof evt.getModifierState ===
|
|
1807
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1803
1808
|
setState(evt.getModifierState(modifier));
|
|
1804
1809
|
}
|
|
1805
1810
|
});
|
|
@@ -1814,11 +1819,11 @@ function useLocalStorage(key, defaultValue, options = defaultOptions$1) {
|
|
|
1814
1819
|
}
|
|
1815
1820
|
|
|
1816
1821
|
function subscribe$1(callback) {
|
|
1817
|
-
window.addEventListener(
|
|
1818
|
-
window.addEventListener(
|
|
1822
|
+
window.addEventListener('popstate', callback);
|
|
1823
|
+
window.addEventListener('hashchange', callback);
|
|
1819
1824
|
return ()=>{
|
|
1820
|
-
window.removeEventListener(
|
|
1821
|
-
window.removeEventListener(
|
|
1825
|
+
window.removeEventListener('popstate', callback);
|
|
1826
|
+
window.removeEventListener('hashchange', callback);
|
|
1822
1827
|
};
|
|
1823
1828
|
}
|
|
1824
1829
|
const useLocationSelector = (selector, /**
|
|
@@ -1828,24 +1833,24 @@ const useLocationSelector = (selector, /**
|
|
|
1828
1833
|
return useSyncExternalStore(subscribe$1, ()=>selector(location), ()=>fallback);
|
|
1829
1834
|
};
|
|
1830
1835
|
|
|
1831
|
-
|
|
1832
|
-
return
|
|
1833
|
-
}
|
|
1834
|
-
|
|
1836
|
+
function isTouchEvent(ev) {
|
|
1837
|
+
return 'touches' in ev;
|
|
1838
|
+
}
|
|
1839
|
+
function preventDefault$1(ev) {
|
|
1835
1840
|
if (!isTouchEvent(ev)) {
|
|
1836
1841
|
return;
|
|
1837
1842
|
}
|
|
1838
1843
|
if (ev.touches.length < 2 && ev.preventDefault) {
|
|
1839
1844
|
ev.preventDefault();
|
|
1840
1845
|
}
|
|
1841
|
-
}
|
|
1846
|
+
}
|
|
1842
1847
|
const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defaultOptions$1)=>{
|
|
1843
1848
|
const timeout = useRef();
|
|
1844
1849
|
const target = useRef();
|
|
1845
1850
|
const start = useCallback((event)=>{
|
|
1846
1851
|
// prevent ghost click on mobile devices
|
|
1847
1852
|
if (isPreventDefault && event.target) {
|
|
1848
|
-
on(event.target,
|
|
1853
|
+
on(event.target, 'touchend', preventDefault$1, {
|
|
1849
1854
|
passive: false
|
|
1850
1855
|
});
|
|
1851
1856
|
target.current = event.target;
|
|
@@ -1860,7 +1865,7 @@ const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defau
|
|
|
1860
1865
|
// clearTimeout and removeEventListener
|
|
1861
1866
|
timeout.current && clearTimeout(timeout.current);
|
|
1862
1867
|
if (isPreventDefault && target.current) {
|
|
1863
|
-
off(target.current,
|
|
1868
|
+
off(target.current, 'touchend', preventDefault$1);
|
|
1864
1869
|
}
|
|
1865
1870
|
}, [
|
|
1866
1871
|
isPreventDefault
|
|
@@ -1974,12 +1979,12 @@ const useMediaDevices = (options = {})=>{
|
|
|
1974
1979
|
let state;
|
|
1975
1980
|
try {
|
|
1976
1981
|
state = (yield navigator.permissions.query({
|
|
1977
|
-
name:
|
|
1982
|
+
name: 'camera'
|
|
1978
1983
|
})).state;
|
|
1979
1984
|
} catch (error) {
|
|
1980
|
-
state =
|
|
1985
|
+
state = 'prompt';
|
|
1981
1986
|
}
|
|
1982
|
-
if (state !==
|
|
1987
|
+
if (state !== 'granted') {
|
|
1983
1988
|
stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
|
|
1984
1989
|
onChange();
|
|
1985
1990
|
permissionGranted.current = true;
|
|
@@ -1999,10 +2004,10 @@ const useMediaDevices = (options = {})=>{
|
|
|
1999
2004
|
if (requestPermissions) {
|
|
2000
2005
|
ensurePermissions();
|
|
2001
2006
|
}
|
|
2002
|
-
on(navigator.mediaDevices,
|
|
2007
|
+
on(navigator.mediaDevices, 'devicechange', onChange);
|
|
2003
2008
|
onChange();
|
|
2004
2009
|
return ()=>{
|
|
2005
|
-
off(navigator.mediaDevices,
|
|
2010
|
+
off(navigator.mediaDevices, 'devicechange', onChange);
|
|
2006
2011
|
};
|
|
2007
2012
|
}, [
|
|
2008
2013
|
onChange,
|
|
@@ -2016,7 +2021,7 @@ const useMediaDevices = (options = {})=>{
|
|
|
2016
2021
|
];
|
|
2017
2022
|
};
|
|
2018
2023
|
|
|
2019
|
-
|
|
2024
|
+
function getInitialState(query, defaultState) {
|
|
2020
2025
|
// Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
|
|
2021
2026
|
if (defaultState !== undefined) {
|
|
2022
2027
|
return defaultState;
|
|
@@ -2025,11 +2030,11 @@ const getInitialState = (query, defaultState)=>{
|
|
|
2025
2030
|
return window.matchMedia(query).matches;
|
|
2026
2031
|
}
|
|
2027
2032
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
2028
|
-
if (process.env.NODE_ENV !==
|
|
2029
|
-
console.warn(
|
|
2033
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
2034
|
+
console.warn('`useMediaQuery` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
|
|
2030
2035
|
}
|
|
2031
2036
|
return false;
|
|
2032
|
-
}
|
|
2037
|
+
}
|
|
2033
2038
|
const useMediaQuery = (query, defaultState)=>{
|
|
2034
2039
|
const [state, setState] = useState(getInitialState(query, defaultState));
|
|
2035
2040
|
useEffect(()=>{
|
|
@@ -2041,16 +2046,16 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2041
2046
|
}
|
|
2042
2047
|
setState(!!mql.matches);
|
|
2043
2048
|
};
|
|
2044
|
-
if (
|
|
2045
|
-
mql.addEventListener(
|
|
2049
|
+
if ('addEventListener' in mql) {
|
|
2050
|
+
mql.addEventListener('change', onChange);
|
|
2046
2051
|
} else {
|
|
2047
2052
|
mql.addListener == null ? void 0 : mql.addListener.call(mql, onChange);
|
|
2048
2053
|
}
|
|
2049
2054
|
setState(mql.matches);
|
|
2050
2055
|
return ()=>{
|
|
2051
2056
|
mounted = false;
|
|
2052
|
-
if (
|
|
2053
|
-
mql.removeEventListener(
|
|
2057
|
+
if ('removeEventListener' in mql) {
|
|
2058
|
+
mql.removeEventListener('change', onChange);
|
|
2054
2059
|
} else {
|
|
2055
2060
|
mql.removeListener == null ? void 0 : mql.removeListener.call(mql, onChange);
|
|
2056
2061
|
}
|
|
@@ -2061,7 +2066,7 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2061
2066
|
return state;
|
|
2062
2067
|
};
|
|
2063
2068
|
|
|
2064
|
-
|
|
2069
|
+
function useRafState(initialState) {
|
|
2065
2070
|
const frame = useRef(0);
|
|
2066
2071
|
const [state, setState] = useState(initialState);
|
|
2067
2072
|
const setRafState = useCallback((value)=>{
|
|
@@ -2077,7 +2082,7 @@ const useRafState = (initialState)=>{
|
|
|
2077
2082
|
state,
|
|
2078
2083
|
setRafState
|
|
2079
2084
|
];
|
|
2080
|
-
}
|
|
2085
|
+
}
|
|
2081
2086
|
|
|
2082
2087
|
const initState = {
|
|
2083
2088
|
screenX: Number.NaN,
|
|
@@ -2095,7 +2100,7 @@ const initState = {
|
|
|
2095
2100
|
};
|
|
2096
2101
|
const useMouse = (target)=>{
|
|
2097
2102
|
const [state, setState] = useRafState(initState);
|
|
2098
|
-
useEventListener(
|
|
2103
|
+
useEventListener('mousemove', (event)=>{
|
|
2099
2104
|
const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
|
|
2100
2105
|
const newState = {
|
|
2101
2106
|
screenX,
|
|
@@ -2142,30 +2147,30 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
|
|
|
2142
2147
|
setPressed(false);
|
|
2143
2148
|
setSourceType(null);
|
|
2144
2149
|
}, []);
|
|
2145
|
-
useEventListener(
|
|
2146
|
-
useEventListener(
|
|
2147
|
-
useEventListener(
|
|
2150
|
+
useEventListener('mousedown', onPressed('mouse'), target, listenerOptions$2);
|
|
2151
|
+
useEventListener('mouseleave', onReleased, ()=>window, listenerOptions$2);
|
|
2152
|
+
useEventListener('mouseup', onReleased, ()=>window, listenerOptions$2);
|
|
2148
2153
|
useEffect(()=>{
|
|
2149
2154
|
if (drag) {
|
|
2150
|
-
element == null ? void 0 : element.addEventListener(
|
|
2151
|
-
element == null ? void 0 : element.addEventListener(
|
|
2152
|
-
element == null ? void 0 : element.addEventListener(
|
|
2155
|
+
element == null ? void 0 : element.addEventListener('dragstart', onPressed('mouse'), listenerOptions$2);
|
|
2156
|
+
element == null ? void 0 : element.addEventListener('drop', onReleased, listenerOptions$2);
|
|
2157
|
+
element == null ? void 0 : element.addEventListener('dragend', onReleased, listenerOptions$2);
|
|
2153
2158
|
}
|
|
2154
2159
|
if (touch) {
|
|
2155
|
-
element == null ? void 0 : element.addEventListener(
|
|
2156
|
-
element == null ? void 0 : element.addEventListener(
|
|
2157
|
-
element == null ? void 0 : element.addEventListener(
|
|
2160
|
+
element == null ? void 0 : element.addEventListener('touchstart', onPressed('touch'), listenerOptions$2);
|
|
2161
|
+
element == null ? void 0 : element.addEventListener('touchend', onReleased, listenerOptions$2);
|
|
2162
|
+
element == null ? void 0 : element.addEventListener('touchcancel', onReleased, listenerOptions$2);
|
|
2158
2163
|
}
|
|
2159
2164
|
return ()=>{
|
|
2160
2165
|
if (drag) {
|
|
2161
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2162
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2163
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2166
|
+
element == null ? void 0 : element.removeEventListener('dragstart', onPressed('mouse'));
|
|
2167
|
+
element == null ? void 0 : element.removeEventListener('drop', onReleased);
|
|
2168
|
+
element == null ? void 0 : element.removeEventListener('dragend', onReleased);
|
|
2164
2169
|
}
|
|
2165
2170
|
if (touch) {
|
|
2166
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2167
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2168
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2171
|
+
element == null ? void 0 : element.removeEventListener('touchstart', onPressed('touch'));
|
|
2172
|
+
element == null ? void 0 : element.removeEventListener('touchend', onReleased);
|
|
2173
|
+
element == null ? void 0 : element.removeEventListener('touchcancel', onReleased);
|
|
2169
2174
|
}
|
|
2170
2175
|
};
|
|
2171
2176
|
}, [
|
|
@@ -2226,22 +2231,22 @@ const useNetwork = ()=>{
|
|
|
2226
2231
|
const handleStateChange = ()=>{
|
|
2227
2232
|
setState(getConnectionState);
|
|
2228
2233
|
};
|
|
2229
|
-
on(window,
|
|
2234
|
+
on(window, 'online', handleStateChange, {
|
|
2230
2235
|
passive: true
|
|
2231
2236
|
});
|
|
2232
|
-
on(window,
|
|
2237
|
+
on(window, 'offline', handleStateChange, {
|
|
2233
2238
|
passive: true
|
|
2234
2239
|
});
|
|
2235
2240
|
if (conn) {
|
|
2236
|
-
on(conn,
|
|
2241
|
+
on(conn, 'change', handleStateChange, {
|
|
2237
2242
|
passive: true
|
|
2238
2243
|
});
|
|
2239
2244
|
}
|
|
2240
2245
|
return ()=>{
|
|
2241
|
-
off(window,
|
|
2242
|
-
off(window,
|
|
2246
|
+
off(window, 'online', handleStateChange);
|
|
2247
|
+
off(window, 'offline', handleStateChange);
|
|
2243
2248
|
if (conn) {
|
|
2244
|
-
off(conn,
|
|
2249
|
+
off(conn, 'change', handleStateChange);
|
|
2245
2250
|
}
|
|
2246
2251
|
};
|
|
2247
2252
|
}, []);
|
|
@@ -2291,7 +2296,7 @@ const useOnline = ()=>{
|
|
|
2291
2296
|
|
|
2292
2297
|
const defaultState = {
|
|
2293
2298
|
angle: 0,
|
|
2294
|
-
type:
|
|
2299
|
+
type: 'landscape-primary'
|
|
2295
2300
|
};
|
|
2296
2301
|
const useOrientation = (initialState = defaultState)=>{
|
|
2297
2302
|
const [state, setState] = useState(initialState);
|
|
@@ -2309,25 +2314,25 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2309
2314
|
});
|
|
2310
2315
|
} else if (window.orientation !== undefined) {
|
|
2311
2316
|
setState({
|
|
2312
|
-
angle: typeof window.orientation ===
|
|
2317
|
+
angle: typeof window.orientation === 'number' ? window.orientation : 0,
|
|
2313
2318
|
type: void 0
|
|
2314
2319
|
});
|
|
2315
2320
|
}
|
|
2316
2321
|
}
|
|
2317
2322
|
};
|
|
2318
|
-
on(window,
|
|
2323
|
+
on(window, 'orientationchange', onChange);
|
|
2319
2324
|
onChange();
|
|
2320
2325
|
return ()=>{
|
|
2321
2326
|
mounted = false;
|
|
2322
|
-
off(window,
|
|
2327
|
+
off(window, 'orientationchange', onChange);
|
|
2323
2328
|
};
|
|
2324
2329
|
}, []);
|
|
2325
2330
|
const lockOrientation = (type)=>{
|
|
2326
2331
|
if (isBrowser) {
|
|
2327
2332
|
return;
|
|
2328
2333
|
}
|
|
2329
|
-
if (!(window &&
|
|
2330
|
-
return Promise.reject(new Error(
|
|
2334
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2335
|
+
return Promise.reject(new Error('Not supported'));
|
|
2331
2336
|
}
|
|
2332
2337
|
return window.screen.orientation.lock(type);
|
|
2333
2338
|
};
|
|
@@ -2335,7 +2340,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2335
2340
|
if (isBrowser) {
|
|
2336
2341
|
return;
|
|
2337
2342
|
}
|
|
2338
|
-
if (!(window &&
|
|
2343
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2339
2344
|
return;
|
|
2340
2345
|
}
|
|
2341
2346
|
return window.screen.orientation.unlock();
|
|
@@ -2347,7 +2352,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2347
2352
|
];
|
|
2348
2353
|
};
|
|
2349
2354
|
|
|
2350
|
-
|
|
2355
|
+
function usePageLeave() {
|
|
2351
2356
|
const [isLeft, setIsLeft] = useState(false);
|
|
2352
2357
|
const handler = (event)=>{
|
|
2353
2358
|
if (!window) return;
|
|
@@ -2356,23 +2361,23 @@ const usePageLeave = ()=>{
|
|
|
2356
2361
|
const from = event.relatedTarget || event.toElement;
|
|
2357
2362
|
setIsLeft(!from);
|
|
2358
2363
|
};
|
|
2359
|
-
useEventListener(
|
|
2364
|
+
useEventListener('mouseout', handler, ()=>window, {
|
|
2360
2365
|
passive: true
|
|
2361
2366
|
});
|
|
2362
|
-
useEventListener(
|
|
2367
|
+
useEventListener('mouseleave', handler, ()=>document, {
|
|
2363
2368
|
passive: true
|
|
2364
2369
|
});
|
|
2365
|
-
useEventListener(
|
|
2370
|
+
useEventListener('mouseenter', handler, ()=>document, {
|
|
2366
2371
|
passive: true
|
|
2367
2372
|
});
|
|
2368
2373
|
return isLeft;
|
|
2369
|
-
}
|
|
2374
|
+
}
|
|
2370
2375
|
|
|
2371
2376
|
const usePermission = (permissionDesc)=>{
|
|
2372
|
-
const [state, setState] = useState(
|
|
2377
|
+
const [state, setState] = useState('');
|
|
2373
2378
|
useEffect(()=>{
|
|
2374
2379
|
var _navigator_permissions;
|
|
2375
|
-
const desc = typeof permissionDesc ===
|
|
2380
|
+
const desc = typeof permissionDesc === 'string' ? {
|
|
2376
2381
|
name: permissionDesc
|
|
2377
2382
|
} : permissionDesc;
|
|
2378
2383
|
let mounted = true;
|
|
@@ -2383,16 +2388,16 @@ const usePermission = (permissionDesc)=>{
|
|
|
2383
2388
|
}
|
|
2384
2389
|
setState(()=>{
|
|
2385
2390
|
var _permissionStatus_state;
|
|
2386
|
-
return (_permissionStatus_state = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _permissionStatus_state :
|
|
2391
|
+
return (_permissionStatus_state = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _permissionStatus_state : '';
|
|
2387
2392
|
});
|
|
2388
2393
|
};
|
|
2389
2394
|
(_navigator_permissions = navigator.permissions) == null ? void 0 : _navigator_permissions.query(desc).then((status)=>{
|
|
2390
2395
|
permissionStatus = status;
|
|
2391
|
-
on(permissionStatus,
|
|
2396
|
+
on(permissionStatus, 'change', onChange);
|
|
2392
2397
|
onChange();
|
|
2393
2398
|
}).catch(noop);
|
|
2394
2399
|
return ()=>{
|
|
2395
|
-
permissionStatus && off(permissionStatus,
|
|
2400
|
+
permissionStatus && off(permissionStatus, 'change', onChange);
|
|
2396
2401
|
mounted = false;
|
|
2397
2402
|
permissionStatus = null;
|
|
2398
2403
|
};
|
|
@@ -2402,56 +2407,56 @@ const usePermission = (permissionDesc)=>{
|
|
|
2402
2407
|
return state;
|
|
2403
2408
|
};
|
|
2404
2409
|
|
|
2405
|
-
const usePreferredColorScheme = (defaultState =
|
|
2406
|
-
const isLight = useMediaQuery(
|
|
2407
|
-
const isDark = useMediaQuery(
|
|
2408
|
-
return isDark ?
|
|
2410
|
+
const usePreferredColorScheme = (defaultState = 'no-preference')=>{
|
|
2411
|
+
const isLight = useMediaQuery('(prefers-color-scheme: light)', false);
|
|
2412
|
+
const isDark = useMediaQuery('(prefers-color-scheme: dark)', false);
|
|
2413
|
+
return isDark ? 'dark' : isLight ? 'light' : defaultState;
|
|
2409
2414
|
};
|
|
2410
2415
|
|
|
2411
|
-
const usePreferredContrast = (defaultState =
|
|
2412
|
-
const isMore = useMediaQuery(
|
|
2413
|
-
const isLess = useMediaQuery(
|
|
2414
|
-
const isCustom = useMediaQuery(
|
|
2415
|
-
return isMore ?
|
|
2416
|
+
const usePreferredContrast = (defaultState = 'no-preference')=>{
|
|
2417
|
+
const isMore = useMediaQuery('(prefexrs-contrast: more)', false);
|
|
2418
|
+
const isLess = useMediaQuery('(prefers-contrast: less)', false);
|
|
2419
|
+
const isCustom = useMediaQuery('(prefers-contrast: custom)', false);
|
|
2420
|
+
return isMore ? 'more' : isLess ? 'less' : isCustom ? 'custom' : defaultState;
|
|
2416
2421
|
};
|
|
2417
2422
|
|
|
2418
|
-
|
|
2419
|
-
return useMediaQuery(
|
|
2420
|
-
}
|
|
2423
|
+
function usePreferredDark(defaultState) {
|
|
2424
|
+
return useMediaQuery('(prefers-color-scheme: dark)', defaultState);
|
|
2425
|
+
}
|
|
2421
2426
|
|
|
2422
|
-
|
|
2427
|
+
function usePrevious(state) {
|
|
2423
2428
|
const ref = useRef();
|
|
2424
2429
|
useEffect(()=>{
|
|
2425
2430
|
ref.current = state;
|
|
2426
2431
|
});
|
|
2427
2432
|
return ref.current;
|
|
2428
|
-
}
|
|
2433
|
+
}
|
|
2429
2434
|
|
|
2430
|
-
|
|
2431
|
-
return useMediaQuery(
|
|
2432
|
-
}
|
|
2435
|
+
function useReducedMotion(defaultState) {
|
|
2436
|
+
return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState);
|
|
2437
|
+
}
|
|
2433
2438
|
|
|
2434
2439
|
const updateReducer = (num)=>(num + 1) % 1000000;
|
|
2435
|
-
|
|
2440
|
+
function useUpdate() {
|
|
2436
2441
|
const [, update] = useReducer(updateReducer, 0);
|
|
2437
2442
|
return update;
|
|
2438
|
-
}
|
|
2443
|
+
}
|
|
2439
2444
|
|
|
2440
|
-
const topVarName =
|
|
2441
|
-
const rightVarName =
|
|
2442
|
-
const bottomVarName =
|
|
2443
|
-
const leftVarName =
|
|
2445
|
+
const topVarName = '--reactuse-safe-area-top';
|
|
2446
|
+
const rightVarName = '--reactuse-safe-area-right';
|
|
2447
|
+
const bottomVarName = '--reactuse-safe-area-bottom';
|
|
2448
|
+
const leftVarName = '--reactuse-safe-area-left';
|
|
2444
2449
|
const defaultElement = ()=>document.documentElement;
|
|
2445
|
-
|
|
2446
|
-
const top = useRef(
|
|
2447
|
-
const right = useRef(
|
|
2448
|
-
const bottom = useRef(
|
|
2449
|
-
const left = useRef(
|
|
2450
|
+
function useScreenSafeArea() {
|
|
2451
|
+
const top = useRef('');
|
|
2452
|
+
const right = useRef('');
|
|
2453
|
+
const bottom = useRef('');
|
|
2454
|
+
const left = useRef('');
|
|
2450
2455
|
const forceUpdate = useUpdate();
|
|
2451
|
-
useCssVar(topVarName, defaultElement,
|
|
2452
|
-
useCssVar(rightVarName, defaultElement,
|
|
2453
|
-
useCssVar(bottomVarName, defaultElement,
|
|
2454
|
-
useCssVar(leftVarName, defaultElement,
|
|
2456
|
+
useCssVar(topVarName, defaultElement, 'env(safe-area-inset-top, 0px)');
|
|
2457
|
+
useCssVar(rightVarName, defaultElement, 'env(safe-area-inset-right, 0px)');
|
|
2458
|
+
useCssVar(bottomVarName, defaultElement, 'env(safe-area-inset-bottom, 0px)');
|
|
2459
|
+
useCssVar(leftVarName, defaultElement, 'env(safe-area-inset-left, 0px)');
|
|
2455
2460
|
const { run: update } = useDebounceFn(()=>{
|
|
2456
2461
|
top.current = getValue(topVarName);
|
|
2457
2462
|
right.current = getValue(rightVarName);
|
|
@@ -2464,7 +2469,7 @@ const useScreenSafeArea = ()=>{
|
|
|
2464
2469
|
}, [
|
|
2465
2470
|
update
|
|
2466
2471
|
]);
|
|
2467
|
-
useEventListener(
|
|
2472
|
+
useEventListener('resize', update);
|
|
2468
2473
|
return [
|
|
2469
2474
|
top.current,
|
|
2470
2475
|
right.current,
|
|
@@ -2472,16 +2477,16 @@ const useScreenSafeArea = ()=>{
|
|
|
2472
2477
|
left.current,
|
|
2473
2478
|
update
|
|
2474
2479
|
];
|
|
2475
|
-
}
|
|
2480
|
+
}
|
|
2476
2481
|
function getValue(position) {
|
|
2477
2482
|
return getComputedStyle(document.documentElement).getPropertyValue(position);
|
|
2478
2483
|
}
|
|
2479
2484
|
|
|
2480
2485
|
const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
2481
|
-
const { immediate = true, manual = false, type =
|
|
2486
|
+
const { immediate = true, manual = false, type = 'text/javascript', async = true, crossOrigin, referrerPolicy, noModule, defer, attrs = {} } = options;
|
|
2482
2487
|
const scriptTag = useRef(null);
|
|
2483
2488
|
const _promise = useRef(null);
|
|
2484
|
-
const [status, setStatus] = useState(src ?
|
|
2489
|
+
const [status, setStatus] = useState(src ? 'loading' : 'idle');
|
|
2485
2490
|
/**
|
|
2486
2491
|
* Load the script specified via `src`.
|
|
2487
2492
|
*
|
|
@@ -2500,7 +2505,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2500
2505
|
return;
|
|
2501
2506
|
}
|
|
2502
2507
|
if (!src) {
|
|
2503
|
-
setStatus(
|
|
2508
|
+
setStatus('idle');
|
|
2504
2509
|
resolve(false);
|
|
2505
2510
|
return;
|
|
2506
2511
|
}
|
|
@@ -2509,7 +2514,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2509
2514
|
let el = document.querySelector(`script[src="${src}"]`);
|
|
2510
2515
|
// Script tag not found, preparing the element for appending
|
|
2511
2516
|
if (!el) {
|
|
2512
|
-
el = document.createElement(
|
|
2517
|
+
el = document.createElement('script');
|
|
2513
2518
|
el.type = type;
|
|
2514
2519
|
el.async = async;
|
|
2515
2520
|
el.src = src;
|
|
@@ -2529,22 +2534,22 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2529
2534
|
Object.entries(attrs).forEach(([name, value])=>el == null ? void 0 : el.setAttribute(name, value));
|
|
2530
2535
|
// Enables shouldAppend
|
|
2531
2536
|
shouldAppend = true;
|
|
2532
|
-
} else if (el.hasAttribute(
|
|
2533
|
-
setStatus(el.getAttribute(
|
|
2537
|
+
} else if (el.hasAttribute('data-loaded')) {
|
|
2538
|
+
setStatus(el.getAttribute('data-status'));
|
|
2534
2539
|
resolveWithElement(el);
|
|
2535
2540
|
}
|
|
2536
2541
|
// Event listeners
|
|
2537
|
-
el.addEventListener(
|
|
2538
|
-
setStatus(event.type ===
|
|
2542
|
+
el.addEventListener('error', (event)=>{
|
|
2543
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2539
2544
|
return reject(event);
|
|
2540
2545
|
});
|
|
2541
|
-
el.addEventListener(
|
|
2542
|
-
setStatus(event.type ===
|
|
2546
|
+
el.addEventListener('abort', (event)=>{
|
|
2547
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2543
2548
|
return reject(event);
|
|
2544
2549
|
});
|
|
2545
|
-
el.addEventListener(
|
|
2546
|
-
setStatus(event.type ===
|
|
2547
|
-
el.setAttribute(
|
|
2550
|
+
el.addEventListener('load', (event)=>{
|
|
2551
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2552
|
+
el.setAttribute('data-loaded', 'true');
|
|
2548
2553
|
onLoaded(el);
|
|
2549
2554
|
resolveWithElement(el);
|
|
2550
2555
|
});
|
|
@@ -2601,11 +2606,11 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2601
2606
|
];
|
|
2602
2607
|
};
|
|
2603
2608
|
|
|
2604
|
-
|
|
2605
|
-
if (!parent && typeof document ===
|
|
2609
|
+
function setScrollParam({ axis, parent, distance }) {
|
|
2610
|
+
if (!parent && typeof document === 'undefined') {
|
|
2606
2611
|
return;
|
|
2607
2612
|
}
|
|
2608
|
-
const method = axis ===
|
|
2613
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2609
2614
|
if (parent) {
|
|
2610
2615
|
parent[method] = distance;
|
|
2611
2616
|
} else {
|
|
@@ -2613,16 +2618,16 @@ const setScrollParam = ({ axis, parent, distance })=>{
|
|
|
2613
2618
|
body[method] = distance;
|
|
2614
2619
|
documentElement[method] = distance;
|
|
2615
2620
|
}
|
|
2616
|
-
}
|
|
2617
|
-
|
|
2621
|
+
}
|
|
2622
|
+
function isScrollElement(axis, node) {
|
|
2618
2623
|
if (!node) {
|
|
2619
2624
|
return false;
|
|
2620
2625
|
}
|
|
2621
|
-
const AXIS = axis ===
|
|
2622
|
-
return getComputedStyle(node)[`overflow${AXIS}`] ===
|
|
2623
|
-
}
|
|
2626
|
+
const AXIS = axis === 'x' ? 'X' : 'Y';
|
|
2627
|
+
return getComputedStyle(node)[`overflow${AXIS}`] === 'auto' || getComputedStyle(node)[`overflow${AXIS}`] === 'scroll';
|
|
2628
|
+
}
|
|
2624
2629
|
const cache = new Map();
|
|
2625
|
-
|
|
2630
|
+
function getScrollParent(axis, node) {
|
|
2626
2631
|
if (!node || !node.parentElement) {
|
|
2627
2632
|
return null;
|
|
2628
2633
|
}
|
|
@@ -2637,24 +2642,26 @@ const getScrollParent = (axis, node)=>{
|
|
|
2637
2642
|
cache.set(node, parent);
|
|
2638
2643
|
}
|
|
2639
2644
|
return parent;
|
|
2640
|
-
}
|
|
2641
|
-
|
|
2642
|
-
if (!parent && typeof document ===
|
|
2645
|
+
}
|
|
2646
|
+
function getScrollStart({ axis, parent }) {
|
|
2647
|
+
if (!parent && typeof document === 'undefined') {
|
|
2643
2648
|
return 0;
|
|
2644
2649
|
}
|
|
2645
|
-
const method = axis ===
|
|
2650
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2646
2651
|
if (parent) {
|
|
2647
2652
|
return parent[method];
|
|
2648
2653
|
}
|
|
2649
2654
|
const { body, documentElement } = document;
|
|
2650
2655
|
// while one of it has a value the second is equal 0
|
|
2651
2656
|
return body[method] + documentElement[method];
|
|
2652
|
-
}
|
|
2657
|
+
}
|
|
2653
2658
|
|
|
2654
|
-
|
|
2659
|
+
function easeInOutQuad(t) {
|
|
2660
|
+
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
2661
|
+
}
|
|
2655
2662
|
|
|
2656
|
-
|
|
2657
|
-
if (!target || !parent && typeof document ===
|
|
2663
|
+
function getRelativePosition({ axis, target, parent, alignment, offset, isList }) {
|
|
2664
|
+
if (!target || !parent && typeof document === 'undefined') {
|
|
2658
2665
|
return 0;
|
|
2659
2666
|
}
|
|
2660
2667
|
const isCustomParent = !!parent;
|
|
@@ -2662,55 +2669,55 @@ const getRelativePosition = ({ axis, target, parent, alignment, offset, isList }
|
|
|
2662
2669
|
const parentPosition = parentElement.getBoundingClientRect();
|
|
2663
2670
|
const targetPosition = target.getBoundingClientRect();
|
|
2664
2671
|
const getDiff = (property)=>targetPosition[property] - parentPosition[property];
|
|
2665
|
-
if (axis ===
|
|
2666
|
-
const diff = getDiff(
|
|
2672
|
+
if (axis === 'y') {
|
|
2673
|
+
const diff = getDiff('top');
|
|
2667
2674
|
if (diff === 0) {
|
|
2668
2675
|
return 0;
|
|
2669
2676
|
}
|
|
2670
|
-
if (alignment ===
|
|
2677
|
+
if (alignment === 'start') {
|
|
2671
2678
|
const distance = diff - offset;
|
|
2672
2679
|
const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2673
2680
|
return shouldScroll ? distance : 0;
|
|
2674
2681
|
}
|
|
2675
2682
|
const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;
|
|
2676
|
-
if (alignment ===
|
|
2683
|
+
if (alignment === 'end') {
|
|
2677
2684
|
const distance = diff + offset - parentHeight + targetPosition.height;
|
|
2678
2685
|
const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2679
2686
|
return shouldScroll ? distance : 0;
|
|
2680
2687
|
}
|
|
2681
|
-
if (alignment ===
|
|
2688
|
+
if (alignment === 'center') {
|
|
2682
2689
|
return diff - parentHeight / 2 + targetPosition.height / 2;
|
|
2683
2690
|
}
|
|
2684
2691
|
return 0;
|
|
2685
2692
|
}
|
|
2686
|
-
if (axis ===
|
|
2687
|
-
const diff = getDiff(
|
|
2693
|
+
if (axis === 'x') {
|
|
2694
|
+
const diff = getDiff('left');
|
|
2688
2695
|
if (diff === 0) {
|
|
2689
2696
|
return 0;
|
|
2690
2697
|
}
|
|
2691
|
-
if (alignment ===
|
|
2698
|
+
if (alignment === 'start') {
|
|
2692
2699
|
const distance = diff - offset;
|
|
2693
2700
|
const shouldScroll = distance <= targetPosition.width || !isList;
|
|
2694
2701
|
return shouldScroll ? distance : 0;
|
|
2695
2702
|
}
|
|
2696
2703
|
const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;
|
|
2697
|
-
if (alignment ===
|
|
2704
|
+
if (alignment === 'end') {
|
|
2698
2705
|
const distance = diff + offset - parentWidth + targetPosition.width;
|
|
2699
2706
|
const shouldScroll = distance >= -targetPosition.width || !isList;
|
|
2700
2707
|
return shouldScroll ? distance : 0;
|
|
2701
2708
|
}
|
|
2702
|
-
if (alignment ===
|
|
2709
|
+
if (alignment === 'center') {
|
|
2703
2710
|
return diff - parentWidth / 2 + targetPosition.width / 2;
|
|
2704
2711
|
}
|
|
2705
2712
|
return 0;
|
|
2706
2713
|
}
|
|
2707
2714
|
return 0;
|
|
2708
|
-
}
|
|
2715
|
+
}
|
|
2709
2716
|
|
|
2710
2717
|
const listenerOptions$1 = {
|
|
2711
2718
|
passive: true
|
|
2712
2719
|
};
|
|
2713
|
-
const useScrollIntoView = (targetElement, { duration = 1250, axis =
|
|
2720
|
+
const useScrollIntoView = (targetElement, { duration = 1250, axis = 'y', onScrollFinish, easing = easeInOutQuad, offset = 0, cancelable = true, isList = false } = defaultOptions$1, scrollElement)=>{
|
|
2714
2721
|
const frameID = useRef(0);
|
|
2715
2722
|
const startTime = useRef(0);
|
|
2716
2723
|
const shouldStop = useRef(false);
|
|
@@ -2721,7 +2728,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2721
2728
|
}
|
|
2722
2729
|
};
|
|
2723
2730
|
const element = getTargetElement(targetElement);
|
|
2724
|
-
const scrollIntoView = ({ alignment =
|
|
2731
|
+
const scrollIntoView = ({ alignment = 'start' } = {})=>{
|
|
2725
2732
|
const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
|
|
2726
2733
|
shouldStop.current = false;
|
|
2727
2734
|
if (frameID.current) {
|
|
@@ -2757,7 +2764,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2757
2764
|
if (!shouldStop.current && t < 1) {
|
|
2758
2765
|
frameID.current = requestAnimationFrame(animateScroll);
|
|
2759
2766
|
} else {
|
|
2760
|
-
typeof onScrollFinish ===
|
|
2767
|
+
typeof onScrollFinish === 'function' && onScrollFinish();
|
|
2761
2768
|
startTime.current = 0;
|
|
2762
2769
|
frameID.current = 0;
|
|
2763
2770
|
cancel();
|
|
@@ -2770,8 +2777,8 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2770
2777
|
shouldStop.current = true;
|
|
2771
2778
|
}
|
|
2772
2779
|
};
|
|
2773
|
-
useEventListener(
|
|
2774
|
-
useEventListener(
|
|
2780
|
+
useEventListener('wheel', handleStop, null, listenerOptions$1);
|
|
2781
|
+
useEventListener('touchmove', handleStop, null, listenerOptions$1);
|
|
2775
2782
|
useEffect(()=>cancel, []);
|
|
2776
2783
|
return {
|
|
2777
2784
|
scrollIntoView,
|
|
@@ -2792,13 +2799,13 @@ function preventDefault(rawEvent) {
|
|
|
2792
2799
|
}
|
|
2793
2800
|
const useScrollLock = (target, initialState = false)=>{
|
|
2794
2801
|
const [locked, setLocked] = useState(initialState);
|
|
2795
|
-
const initialOverflowRef = useRef(
|
|
2802
|
+
const initialOverflowRef = useRef('scroll');
|
|
2796
2803
|
useEffect(()=>{
|
|
2797
2804
|
const element = getTargetElement(target);
|
|
2798
2805
|
if (element) {
|
|
2799
2806
|
initialOverflowRef.current = element.style.overflow;
|
|
2800
2807
|
if (locked) {
|
|
2801
|
-
element.style.overflow =
|
|
2808
|
+
element.style.overflow = 'hidden';
|
|
2802
2809
|
}
|
|
2803
2810
|
}
|
|
2804
2811
|
}, [
|
|
@@ -2811,7 +2818,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2811
2818
|
return;
|
|
2812
2819
|
}
|
|
2813
2820
|
if (isIOS) {
|
|
2814
|
-
element.addEventListener(
|
|
2821
|
+
element.addEventListener('touchmove', preventDefault, {
|
|
2815
2822
|
passive: false
|
|
2816
2823
|
});
|
|
2817
2824
|
}
|
|
@@ -2823,7 +2830,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2823
2830
|
return;
|
|
2824
2831
|
}
|
|
2825
2832
|
if (isIOS) {
|
|
2826
|
-
element.removeEventListener(
|
|
2833
|
+
element.removeEventListener('touchmove', preventDefault);
|
|
2827
2834
|
}
|
|
2828
2835
|
element.style.overflow = initialOverflowRef.current;
|
|
2829
2836
|
setLocked(false);
|
|
@@ -2861,14 +2868,14 @@ function _extends() {
|
|
|
2861
2868
|
}
|
|
2862
2869
|
const useSetState = (initialState)=>{
|
|
2863
2870
|
const [state, _setState] = useState(initialState);
|
|
2864
|
-
const setState = useCallback((statePartial)=>_setState((current)=>_extends({}, current, typeof statePartial ===
|
|
2871
|
+
const setState = useCallback((statePartial)=>_setState((current)=>_extends({}, current, typeof statePartial === 'function' ? statePartial(current) : statePartial)), []);
|
|
2865
2872
|
return [
|
|
2866
2873
|
state,
|
|
2867
2874
|
setState
|
|
2868
2875
|
];
|
|
2869
2876
|
};
|
|
2870
2877
|
|
|
2871
|
-
|
|
2878
|
+
function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
|
|
2872
2879
|
const [isSticky, setSticky] = useState(false);
|
|
2873
2880
|
const { run: scrollHandler } = useThrottleFn(()=>{
|
|
2874
2881
|
const element = getTargetElement(targetElement);
|
|
@@ -2876,7 +2883,7 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2876
2883
|
return;
|
|
2877
2884
|
}
|
|
2878
2885
|
const rect = element.getBoundingClientRect();
|
|
2879
|
-
if (axis ===
|
|
2886
|
+
if (axis === 'y') {
|
|
2880
2887
|
setSticky((rect == null ? void 0 : rect.top) <= nav);
|
|
2881
2888
|
} else {
|
|
2882
2889
|
setSticky((rect == null ? void 0 : rect.left) <= nav);
|
|
@@ -2888,10 +2895,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2888
2895
|
if (!element || !scrollParent) {
|
|
2889
2896
|
return;
|
|
2890
2897
|
}
|
|
2891
|
-
scrollParent.addEventListener(
|
|
2898
|
+
scrollParent.addEventListener('scroll', scrollHandler);
|
|
2892
2899
|
scrollHandler();
|
|
2893
2900
|
return ()=>{
|
|
2894
|
-
scrollParent.removeEventListener(
|
|
2901
|
+
scrollParent.removeEventListener('scroll', scrollHandler);
|
|
2895
2902
|
};
|
|
2896
2903
|
}, [
|
|
2897
2904
|
axis,
|
|
@@ -2903,10 +2910,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2903
2910
|
isSticky,
|
|
2904
2911
|
setSticky
|
|
2905
2912
|
];
|
|
2906
|
-
}
|
|
2913
|
+
}
|
|
2907
2914
|
|
|
2908
2915
|
const useTextDirection = (options = defaultOptions$1)=>{
|
|
2909
|
-
const { selector =
|
|
2916
|
+
const { selector = 'html', initialValue = 'ltr' } = options;
|
|
2910
2917
|
const getValue = ()=>{
|
|
2911
2918
|
if (initialValue !== undefined) {
|
|
2912
2919
|
return initialValue;
|
|
@@ -2914,11 +2921,11 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2914
2921
|
if (isBrowser) {
|
|
2915
2922
|
var _document_querySelector, _document;
|
|
2916
2923
|
var _document_querySelector_getAttribute;
|
|
2917
|
-
return (_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute(
|
|
2924
|
+
return (_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute('dir')) != null ? _document_querySelector_getAttribute : initialValue;
|
|
2918
2925
|
}
|
|
2919
2926
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
2920
|
-
if (process.env.NODE_ENV !==
|
|
2921
|
-
console.warn(
|
|
2927
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
2928
|
+
console.warn('`useTextDirection` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
|
|
2922
2929
|
}
|
|
2923
2930
|
return initialValue;
|
|
2924
2931
|
};
|
|
@@ -2926,7 +2933,7 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2926
2933
|
useEffect(()=>{
|
|
2927
2934
|
var _document_querySelector, _document;
|
|
2928
2935
|
var _document_querySelector_getAttribute;
|
|
2929
|
-
setValue((_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute(
|
|
2936
|
+
setValue((_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute('dir')) != null ? _document_querySelector_getAttribute : initialValue);
|
|
2930
2937
|
}, [
|
|
2931
2938
|
initialValue,
|
|
2932
2939
|
selector
|
|
@@ -2937,10 +2944,10 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2937
2944
|
}
|
|
2938
2945
|
if (value !== null) {
|
|
2939
2946
|
var _document_querySelector;
|
|
2940
|
-
(_document_querySelector = document.querySelector(selector)) == null ? void 0 : _document_querySelector.setAttribute(
|
|
2947
|
+
(_document_querySelector = document.querySelector(selector)) == null ? void 0 : _document_querySelector.setAttribute('dir', value);
|
|
2941
2948
|
} else {
|
|
2942
2949
|
var _document_querySelector1;
|
|
2943
|
-
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute(
|
|
2950
|
+
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute('dir');
|
|
2944
2951
|
}
|
|
2945
2952
|
setValue(value);
|
|
2946
2953
|
};
|
|
@@ -2958,7 +2965,7 @@ const useTextSelection = ()=>{
|
|
|
2958
2965
|
// this is because `document.getSelection` will always return the same object
|
|
2959
2966
|
forceUpdate();
|
|
2960
2967
|
};
|
|
2961
|
-
useEventListener(
|
|
2968
|
+
useEventListener('selectionchange', handleSelectionChange, ()=>document);
|
|
2962
2969
|
useEffect(()=>{
|
|
2963
2970
|
setSelection(document.getSelection());
|
|
2964
2971
|
}, []);
|
|
@@ -3038,7 +3045,9 @@ const useTitle = (title)=>{
|
|
|
3038
3045
|
]);
|
|
3039
3046
|
};
|
|
3040
3047
|
|
|
3041
|
-
|
|
3048
|
+
function toggleReducer(state, nextValue) {
|
|
3049
|
+
return typeof nextValue === 'boolean' ? nextValue : !state;
|
|
3050
|
+
}
|
|
3042
3051
|
const useToggle = (initialValue)=>{
|
|
3043
3052
|
return useReducer(toggleReducer, initialValue);
|
|
3044
3053
|
};
|
|
@@ -3075,7 +3084,7 @@ function _async_to_generator$1(fn) {
|
|
|
3075
3084
|
};
|
|
3076
3085
|
}
|
|
3077
3086
|
const useWebNotification = (requestPermissions = false)=>{
|
|
3078
|
-
const isSupported = useSupported(()=>!!window &&
|
|
3087
|
+
const isSupported = useSupported(()=>!!window && 'Notification' in window);
|
|
3079
3088
|
const permissionGranted = useRef(false);
|
|
3080
3089
|
const notificationRef = useRef(null);
|
|
3081
3090
|
const show = (title, options = defaultOptions$1)=>{
|
|
@@ -3084,7 +3093,7 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3084
3093
|
if (!isSupported && !permissionGranted.current) {
|
|
3085
3094
|
return;
|
|
3086
3095
|
}
|
|
3087
|
-
notificationRef.current = new Notification(title ||
|
|
3096
|
+
notificationRef.current = new Notification(title || '', options);
|
|
3088
3097
|
return notificationRef.current;
|
|
3089
3098
|
};
|
|
3090
3099
|
const close = useCallback(()=>{
|
|
@@ -3094,15 +3103,15 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3094
3103
|
notificationRef.current = null;
|
|
3095
3104
|
}, []);
|
|
3096
3105
|
useEffect(()=>{
|
|
3097
|
-
permissionGranted.current = isSupported &&
|
|
3106
|
+
permissionGranted.current = isSupported && 'permission' in Notification && Notification.permission === 'granted';
|
|
3098
3107
|
}, [
|
|
3099
3108
|
isSupported
|
|
3100
3109
|
]);
|
|
3101
3110
|
const ensurePermissions = useCallback(/*#__PURE__*/ _async_to_generator$1(function*() {
|
|
3102
3111
|
if (!isSupported) return;
|
|
3103
|
-
if (!permissionGranted.current && Notification.permission !==
|
|
3112
|
+
if (!permissionGranted.current && Notification.permission !== 'denied') {
|
|
3104
3113
|
const result = yield Notification.requestPermission();
|
|
3105
|
-
if (result ===
|
|
3114
|
+
if (result === 'granted') permissionGranted.current = true;
|
|
3106
3115
|
}
|
|
3107
3116
|
return permissionGranted.current;
|
|
3108
3117
|
}), [
|
|
@@ -3126,25 +3135,25 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3126
3135
|
};
|
|
3127
3136
|
};
|
|
3128
3137
|
|
|
3129
|
-
|
|
3138
|
+
function useWindowsFocus(defauleValue = false) {
|
|
3130
3139
|
const [focused, setFocused] = useState(defauleValue);
|
|
3131
3140
|
useEffect(()=>{
|
|
3132
3141
|
setFocused(window.document.hasFocus());
|
|
3133
3142
|
}, []);
|
|
3134
|
-
useEventListener(
|
|
3143
|
+
useEventListener('blur', ()=>{
|
|
3135
3144
|
setFocused(false);
|
|
3136
3145
|
});
|
|
3137
|
-
useEventListener(
|
|
3146
|
+
useEventListener('focus', ()=>{
|
|
3138
3147
|
setFocused(true);
|
|
3139
3148
|
});
|
|
3140
3149
|
return focused;
|
|
3141
|
-
}
|
|
3150
|
+
}
|
|
3142
3151
|
|
|
3143
3152
|
const listenerOptions = {
|
|
3144
3153
|
capture: false,
|
|
3145
3154
|
passive: true
|
|
3146
3155
|
};
|
|
3147
|
-
|
|
3156
|
+
function useWindowScroll() {
|
|
3148
3157
|
const [state, setState] = useRafState(()=>({
|
|
3149
3158
|
x: 0,
|
|
3150
3159
|
y: 0
|
|
@@ -3155,20 +3164,20 @@ const useWindowScroll = ()=>{
|
|
|
3155
3164
|
y: window.scrollY
|
|
3156
3165
|
});
|
|
3157
3166
|
};
|
|
3158
|
-
useEventListener(
|
|
3167
|
+
useEventListener('scroll', handleScroll, defaultWindow, listenerOptions);
|
|
3159
3168
|
// Set scroll at the first client-side load
|
|
3160
3169
|
useIsomorphicLayoutEffect(()=>{
|
|
3161
3170
|
handleScroll();
|
|
3162
3171
|
}, []);
|
|
3163
3172
|
return state;
|
|
3164
|
-
}
|
|
3173
|
+
}
|
|
3165
3174
|
|
|
3166
|
-
|
|
3167
|
-
window.addEventListener(
|
|
3175
|
+
function subscribe(callback) {
|
|
3176
|
+
window.addEventListener('resize', callback);
|
|
3168
3177
|
return ()=>{
|
|
3169
|
-
window.removeEventListener(
|
|
3178
|
+
window.removeEventListener('resize', callback);
|
|
3170
3179
|
};
|
|
3171
|
-
}
|
|
3180
|
+
}
|
|
3172
3181
|
const useWindowSize = ()=>{
|
|
3173
3182
|
const stateDependencies = useRef({}).current;
|
|
3174
3183
|
const previous = useRef({
|
|
@@ -3239,14 +3248,14 @@ function _async_to_generator(fn) {
|
|
|
3239
3248
|
};
|
|
3240
3249
|
}
|
|
3241
3250
|
const useClipboard = ()=>{
|
|
3242
|
-
const [text, setText] = useState(
|
|
3251
|
+
const [text, setText] = useState('');
|
|
3243
3252
|
const updateText = useCallback(()=>{
|
|
3244
3253
|
window.navigator.clipboard.readText().then((value)=>{
|
|
3245
3254
|
setText(value);
|
|
3246
3255
|
});
|
|
3247
3256
|
}, []);
|
|
3248
|
-
useEventListener(
|
|
3249
|
-
useEventListener(
|
|
3257
|
+
useEventListener('copy', updateText);
|
|
3258
|
+
useEventListener('cut', updateText);
|
|
3250
3259
|
const copy = useCallback(/*#__PURE__*/ _async_to_generator(function*(txt) {
|
|
3251
3260
|
setText(txt);
|
|
3252
3261
|
yield window.navigator.clipboard.writeText(txt);
|
|
@@ -3257,24 +3266,24 @@ const useClipboard = ()=>{
|
|
|
3257
3266
|
];
|
|
3258
3267
|
};
|
|
3259
3268
|
|
|
3260
|
-
|
|
3269
|
+
function getPlatform(userAgent) {
|
|
3261
3270
|
if (/iPad|iPhone|iPod|ios/i.test(userAgent)) {
|
|
3262
|
-
return
|
|
3271
|
+
return 'ios';
|
|
3263
3272
|
} else if (/android/i.test(userAgent)) {
|
|
3264
|
-
return
|
|
3273
|
+
return 'android';
|
|
3265
3274
|
} else {
|
|
3266
|
-
return
|
|
3275
|
+
return 'unknown';
|
|
3267
3276
|
}
|
|
3268
|
-
}
|
|
3277
|
+
}
|
|
3269
3278
|
const usePlatform = ({ userAgent } = {
|
|
3270
|
-
userAgent:
|
|
3279
|
+
userAgent: ''
|
|
3271
3280
|
})=>{
|
|
3272
|
-
const [ua, setUa] = useState(userAgent ||
|
|
3281
|
+
const [ua, setUa] = useState(userAgent || '');
|
|
3273
3282
|
const [platform, setPlatform] = useState(()=>{
|
|
3274
3283
|
if (userAgent) {
|
|
3275
3284
|
return getPlatform(userAgent);
|
|
3276
3285
|
}
|
|
3277
|
-
return
|
|
3286
|
+
return 'unknown';
|
|
3278
3287
|
});
|
|
3279
3288
|
useEffect(()=>{
|
|
3280
3289
|
setPlatform(getPlatform(navigator.userAgent));
|
|
@@ -3303,18 +3312,18 @@ const usePlatform = ({ userAgent } = {
|
|
|
3303
3312
|
};
|
|
3304
3313
|
};
|
|
3305
3314
|
|
|
3306
|
-
|
|
3315
|
+
function useMobileLandscape() {
|
|
3307
3316
|
const [isMobileLandscape, setIsMobileLandscape] = useState(false);
|
|
3308
3317
|
const [orientation] = useOrientation();
|
|
3309
3318
|
useEffect(()=>{
|
|
3310
3319
|
const userAgent = window.navigator.userAgent;
|
|
3311
3320
|
const isMobile = /Mobi|Android|iphone/i.test(userAgent);
|
|
3312
|
-
setIsMobileLandscape(isMobile && orientation.type ===
|
|
3321
|
+
setIsMobileLandscape(isMobile && orientation.type === 'landscape-primary');
|
|
3313
3322
|
}, [
|
|
3314
3323
|
orientation.type
|
|
3315
3324
|
]);
|
|
3316
3325
|
return isMobileLandscape;
|
|
3317
|
-
}
|
|
3326
|
+
}
|
|
3318
3327
|
|
|
3319
3328
|
const useControlled = (value, defaultValue, onChange)=>{
|
|
3320
3329
|
const [stateValue, setStateValue] = useState(value !== undefined ? value : defaultValue);
|
|
@@ -3335,7 +3344,7 @@ const useControlled = (value, defaultValue, onChange)=>{
|
|
|
3335
3344
|
];
|
|
3336
3345
|
};
|
|
3337
3346
|
|
|
3338
|
-
|
|
3347
|
+
function useDisclosure(props = {}) {
|
|
3339
3348
|
const { defaultOpen, isOpen: isOpenProp, onClose: onCloseProp, onOpen: onOpenProp, onChange = ()=>{} } = props;
|
|
3340
3349
|
const onOpenPropRef = useLatest(onOpenProp);
|
|
3341
3350
|
const onClosePropRef = useLatest(onCloseProp);
|
|
@@ -3376,12 +3385,12 @@ const useDisclosure = (props = {})=>{
|
|
|
3376
3385
|
onOpenChange,
|
|
3377
3386
|
isControlled
|
|
3378
3387
|
};
|
|
3379
|
-
}
|
|
3388
|
+
}
|
|
3380
3389
|
|
|
3381
3390
|
const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
3382
3391
|
const [data, setData] = useState(null);
|
|
3383
3392
|
const [error, setError] = useState(null);
|
|
3384
|
-
const [status, setStatus] = useState(
|
|
3393
|
+
const [status, setStatus] = useState('DISCONNECTED');
|
|
3385
3394
|
const [event, setEvent] = useState(null);
|
|
3386
3395
|
const [lastEventId, setLastEventId] = useState(null);
|
|
3387
3396
|
const retries = useRef(0);
|
|
@@ -3403,7 +3412,7 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3403
3412
|
});
|
|
3404
3413
|
const close = useCallback(()=>{
|
|
3405
3414
|
var _eventSourceRef_current;
|
|
3406
|
-
setStatus(
|
|
3415
|
+
setStatus('DISCONNECTED');
|
|
3407
3416
|
clean();
|
|
3408
3417
|
(_eventSourceRef_current = eventSourceRef.current) == null ? void 0 : _eventSourceRef_current.close();
|
|
3409
3418
|
eventSourceRef.current = null;
|
|
@@ -3422,21 +3431,21 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3422
3431
|
}
|
|
3423
3432
|
const es = eventSourceRef.current;
|
|
3424
3433
|
es.onopen = ()=>{
|
|
3425
|
-
setStatus(
|
|
3434
|
+
setStatus('CONNECTED');
|
|
3426
3435
|
setError(null);
|
|
3427
3436
|
};
|
|
3428
3437
|
es.onmessage = (ev)=>{
|
|
3429
3438
|
setData(ev.data);
|
|
3430
3439
|
setLastEventId(ev.lastEventId);
|
|
3431
|
-
setStatus(
|
|
3440
|
+
setStatus('CONNECTED');
|
|
3432
3441
|
};
|
|
3433
3442
|
es.onerror = (err)=>{
|
|
3434
3443
|
setError(err);
|
|
3435
|
-
setStatus(
|
|
3444
|
+
setStatus('DISCONNECTED');
|
|
3436
3445
|
if (options.autoReconnect && !explicitlyClosed.current) {
|
|
3437
3446
|
const { retries: maxRetries = -1, delay = 1000, onFailed } = options.autoReconnect;
|
|
3438
3447
|
retries.current += 1;
|
|
3439
|
-
if (typeof maxRetries ===
|
|
3448
|
+
if (typeof maxRetries === 'number' && (maxRetries < 0 || retries.current < maxRetries) || typeof maxRetries === 'function' && maxRetries()) {
|
|
3440
3449
|
setTimeout(open, delay);
|
|
3441
3450
|
} else {
|
|
3442
3451
|
onFailed == null ? void 0 : onFailed();
|
|
@@ -3479,4 +3488,27 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3479
3488
|
};
|
|
3480
3489
|
};
|
|
3481
3490
|
|
|
3482
|
-
|
|
3491
|
+
/**
|
|
3492
|
+
* @description copy from swr
|
|
3493
|
+
*/ const use = React.use || ((thenable)=>{
|
|
3494
|
+
switch(thenable.status){
|
|
3495
|
+
case 'pending':
|
|
3496
|
+
throw thenable;
|
|
3497
|
+
case 'fulfilled':
|
|
3498
|
+
return thenable.value;
|
|
3499
|
+
case 'rejected':
|
|
3500
|
+
throw thenable.reason;
|
|
3501
|
+
default:
|
|
3502
|
+
thenable.status = 'pending';
|
|
3503
|
+
thenable.then((v)=>{
|
|
3504
|
+
thenable.status = 'fulfilled';
|
|
3505
|
+
thenable.value = v;
|
|
3506
|
+
}, (e)=>{
|
|
3507
|
+
thenable.status = 'rejected';
|
|
3508
|
+
thenable.reason = e;
|
|
3509
|
+
});
|
|
3510
|
+
throw thenable;
|
|
3511
|
+
}
|
|
3512
|
+
});
|
|
3513
|
+
|
|
3514
|
+
export { defaultOptions, use, useActiveElement, useAsyncEffect, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };
|