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