@reactuses/core 5.0.16 → 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 +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 +372 -339
- package/dist/index.d.cts +132 -96
- package/dist/index.d.mts +132 -96
- package/dist/index.d.ts +132 -96
- package/dist/index.mjs +372 -341
- 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 [
|
|
@@ -1532,18 +1536,18 @@ const useHover = (target)=>{
|
|
|
1532
1536
|
const [hovered, setHovered] = useState(false);
|
|
1533
1537
|
const onMouseEnter = useCallback(()=>setHovered(true), []);
|
|
1534
1538
|
const onMouseLeave = useCallback(()=>setHovered(false), []);
|
|
1535
|
-
useEventListener(
|
|
1536
|
-
useEventListener(
|
|
1539
|
+
useEventListener('mouseenter', onMouseEnter, target);
|
|
1540
|
+
useEventListener('mouseleave', onMouseLeave, target);
|
|
1537
1541
|
return hovered;
|
|
1538
1542
|
};
|
|
1539
1543
|
|
|
1540
1544
|
const defaultEvents$1 = [
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1545
|
+
'mousemove',
|
|
1546
|
+
'mousedown',
|
|
1547
|
+
'resize',
|
|
1548
|
+
'keydown',
|
|
1549
|
+
'touchstart',
|
|
1550
|
+
'wheel'
|
|
1547
1551
|
];
|
|
1548
1552
|
const oneMinute = 60e3;
|
|
1549
1553
|
const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)=>{
|
|
@@ -1573,14 +1577,14 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1573
1577
|
for(let i = 0; i < events.length; i++){
|
|
1574
1578
|
on(window, events[i], onEvent);
|
|
1575
1579
|
}
|
|
1576
|
-
on(document,
|
|
1580
|
+
on(document, 'visibilitychange', onVisibility);
|
|
1577
1581
|
timeout = setTimeout(()=>set(true), ms);
|
|
1578
1582
|
return ()=>{
|
|
1579
1583
|
mounted = false;
|
|
1580
1584
|
for(let i = 0; i < events.length; i++){
|
|
1581
1585
|
off(window, events[i], onEvent);
|
|
1582
1586
|
}
|
|
1583
|
-
off(document,
|
|
1587
|
+
off(document, 'visibilitychange', onVisibility);
|
|
1584
1588
|
};
|
|
1585
1589
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1586
1590
|
}, [
|
|
@@ -1590,7 +1594,7 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1590
1594
|
return state;
|
|
1591
1595
|
};
|
|
1592
1596
|
|
|
1593
|
-
|
|
1597
|
+
function useThrottleFn(fn, wait, options) {
|
|
1594
1598
|
if (isDev) {
|
|
1595
1599
|
if (!isFunction(fn)) {
|
|
1596
1600
|
console.error(`useThrottleFn expected parameter is a function, got ${typeof fn}`);
|
|
@@ -1612,7 +1616,7 @@ const useThrottleFn = (fn, wait, options)=>{
|
|
|
1612
1616
|
cancel: throttled.cancel,
|
|
1613
1617
|
flush: throttled.flush
|
|
1614
1618
|
};
|
|
1615
|
-
}
|
|
1619
|
+
}
|
|
1616
1620
|
|
|
1617
1621
|
/**
|
|
1618
1622
|
* We have to check if the scroll amount is close enough to some threshold in order to
|
|
@@ -1681,7 +1685,7 @@ const useScroll = (target, options = defaultOptions$1)=>{
|
|
|
1681
1685
|
onScroll(e);
|
|
1682
1686
|
});
|
|
1683
1687
|
const { run: throttleOnScroll } = useThrottleFn(onScrollHandler, throttle);
|
|
1684
|
-
useEventListener(
|
|
1688
|
+
useEventListener('scroll', throttle ? throttleOnScroll : onScrollHandler, target, eventListenerOptions);
|
|
1685
1689
|
return [
|
|
1686
1690
|
x,
|
|
1687
1691
|
y,
|
|
@@ -1748,7 +1752,7 @@ function _extends$1() {
|
|
|
1748
1752
|
const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
1749
1753
|
const savedLoadMore = useLatest(onLoadMore);
|
|
1750
1754
|
var _options_direction;
|
|
1751
|
-
const direction = (_options_direction = options.direction) != null ? _options_direction :
|
|
1755
|
+
const direction = (_options_direction = options.direction) != null ? _options_direction : 'bottom';
|
|
1752
1756
|
var _options_distance;
|
|
1753
1757
|
const state = useScroll(target, _extends$1({}, options, {
|
|
1754
1758
|
offset: _extends$1({
|
|
@@ -1781,10 +1785,10 @@ const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
|
1781
1785
|
};
|
|
1782
1786
|
|
|
1783
1787
|
const defaultEvents = [
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
+
'mousedown',
|
|
1789
|
+
'mouseup',
|
|
1790
|
+
'keydown',
|
|
1791
|
+
'keyup'
|
|
1788
1792
|
];
|
|
1789
1793
|
const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
1790
1794
|
const { events = defaultEvents, initial = false } = options;
|
|
@@ -1792,7 +1796,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1792
1796
|
useMount(()=>{
|
|
1793
1797
|
events.forEach((listenEvent)=>{
|
|
1794
1798
|
on(document, listenEvent, (evt)=>{
|
|
1795
|
-
if (typeof evt.getModifierState ===
|
|
1799
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1796
1800
|
setState(evt.getModifierState(modifier));
|
|
1797
1801
|
}
|
|
1798
1802
|
});
|
|
@@ -1800,7 +1804,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1800
1804
|
return ()=>{
|
|
1801
1805
|
events.forEach((listenerEvent)=>{
|
|
1802
1806
|
off(document, listenerEvent, (evt)=>{
|
|
1803
|
-
if (typeof evt.getModifierState ===
|
|
1807
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1804
1808
|
setState(evt.getModifierState(modifier));
|
|
1805
1809
|
}
|
|
1806
1810
|
});
|
|
@@ -1815,11 +1819,11 @@ function useLocalStorage(key, defaultValue, options = defaultOptions$1) {
|
|
|
1815
1819
|
}
|
|
1816
1820
|
|
|
1817
1821
|
function subscribe$1(callback) {
|
|
1818
|
-
window.addEventListener(
|
|
1819
|
-
window.addEventListener(
|
|
1822
|
+
window.addEventListener('popstate', callback);
|
|
1823
|
+
window.addEventListener('hashchange', callback);
|
|
1820
1824
|
return ()=>{
|
|
1821
|
-
window.removeEventListener(
|
|
1822
|
-
window.removeEventListener(
|
|
1825
|
+
window.removeEventListener('popstate', callback);
|
|
1826
|
+
window.removeEventListener('hashchange', callback);
|
|
1823
1827
|
};
|
|
1824
1828
|
}
|
|
1825
1829
|
const useLocationSelector = (selector, /**
|
|
@@ -1829,24 +1833,24 @@ const useLocationSelector = (selector, /**
|
|
|
1829
1833
|
return useSyncExternalStore(subscribe$1, ()=>selector(location), ()=>fallback);
|
|
1830
1834
|
};
|
|
1831
1835
|
|
|
1832
|
-
|
|
1833
|
-
return
|
|
1834
|
-
}
|
|
1835
|
-
|
|
1836
|
+
function isTouchEvent(ev) {
|
|
1837
|
+
return 'touches' in ev;
|
|
1838
|
+
}
|
|
1839
|
+
function preventDefault$1(ev) {
|
|
1836
1840
|
if (!isTouchEvent(ev)) {
|
|
1837
1841
|
return;
|
|
1838
1842
|
}
|
|
1839
1843
|
if (ev.touches.length < 2 && ev.preventDefault) {
|
|
1840
1844
|
ev.preventDefault();
|
|
1841
1845
|
}
|
|
1842
|
-
}
|
|
1846
|
+
}
|
|
1843
1847
|
const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defaultOptions$1)=>{
|
|
1844
1848
|
const timeout = useRef();
|
|
1845
1849
|
const target = useRef();
|
|
1846
1850
|
const start = useCallback((event)=>{
|
|
1847
1851
|
// prevent ghost click on mobile devices
|
|
1848
1852
|
if (isPreventDefault && event.target) {
|
|
1849
|
-
on(event.target,
|
|
1853
|
+
on(event.target, 'touchend', preventDefault$1, {
|
|
1850
1854
|
passive: false
|
|
1851
1855
|
});
|
|
1852
1856
|
target.current = event.target;
|
|
@@ -1861,7 +1865,7 @@ const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defau
|
|
|
1861
1865
|
// clearTimeout and removeEventListener
|
|
1862
1866
|
timeout.current && clearTimeout(timeout.current);
|
|
1863
1867
|
if (isPreventDefault && target.current) {
|
|
1864
|
-
off(target.current,
|
|
1868
|
+
off(target.current, 'touchend', preventDefault$1);
|
|
1865
1869
|
}
|
|
1866
1870
|
}, [
|
|
1867
1871
|
isPreventDefault
|
|
@@ -1975,12 +1979,12 @@ const useMediaDevices = (options = {})=>{
|
|
|
1975
1979
|
let state;
|
|
1976
1980
|
try {
|
|
1977
1981
|
state = (yield navigator.permissions.query({
|
|
1978
|
-
name:
|
|
1982
|
+
name: 'camera'
|
|
1979
1983
|
})).state;
|
|
1980
1984
|
} catch (error) {
|
|
1981
|
-
state =
|
|
1985
|
+
state = 'prompt';
|
|
1982
1986
|
}
|
|
1983
|
-
if (state !==
|
|
1987
|
+
if (state !== 'granted') {
|
|
1984
1988
|
stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
|
|
1985
1989
|
onChange();
|
|
1986
1990
|
permissionGranted.current = true;
|
|
@@ -2000,10 +2004,10 @@ const useMediaDevices = (options = {})=>{
|
|
|
2000
2004
|
if (requestPermissions) {
|
|
2001
2005
|
ensurePermissions();
|
|
2002
2006
|
}
|
|
2003
|
-
on(navigator.mediaDevices,
|
|
2007
|
+
on(navigator.mediaDevices, 'devicechange', onChange);
|
|
2004
2008
|
onChange();
|
|
2005
2009
|
return ()=>{
|
|
2006
|
-
off(navigator.mediaDevices,
|
|
2010
|
+
off(navigator.mediaDevices, 'devicechange', onChange);
|
|
2007
2011
|
};
|
|
2008
2012
|
}, [
|
|
2009
2013
|
onChange,
|
|
@@ -2017,7 +2021,7 @@ const useMediaDevices = (options = {})=>{
|
|
|
2017
2021
|
];
|
|
2018
2022
|
};
|
|
2019
2023
|
|
|
2020
|
-
|
|
2024
|
+
function getInitialState(query, defaultState) {
|
|
2021
2025
|
// Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
|
|
2022
2026
|
if (defaultState !== undefined) {
|
|
2023
2027
|
return defaultState;
|
|
@@ -2026,11 +2030,11 @@ const getInitialState = (query, defaultState)=>{
|
|
|
2026
2030
|
return window.matchMedia(query).matches;
|
|
2027
2031
|
}
|
|
2028
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.
|
|
2029
|
-
if (process.env.NODE_ENV !==
|
|
2030
|
-
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.');
|
|
2031
2035
|
}
|
|
2032
2036
|
return false;
|
|
2033
|
-
}
|
|
2037
|
+
}
|
|
2034
2038
|
const useMediaQuery = (query, defaultState)=>{
|
|
2035
2039
|
const [state, setState] = useState(getInitialState(query, defaultState));
|
|
2036
2040
|
useEffect(()=>{
|
|
@@ -2042,16 +2046,16 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2042
2046
|
}
|
|
2043
2047
|
setState(!!mql.matches);
|
|
2044
2048
|
};
|
|
2045
|
-
if (
|
|
2046
|
-
mql.addEventListener(
|
|
2049
|
+
if ('addEventListener' in mql) {
|
|
2050
|
+
mql.addEventListener('change', onChange);
|
|
2047
2051
|
} else {
|
|
2048
2052
|
mql.addListener == null ? void 0 : mql.addListener.call(mql, onChange);
|
|
2049
2053
|
}
|
|
2050
2054
|
setState(mql.matches);
|
|
2051
2055
|
return ()=>{
|
|
2052
2056
|
mounted = false;
|
|
2053
|
-
if (
|
|
2054
|
-
mql.removeEventListener(
|
|
2057
|
+
if ('removeEventListener' in mql) {
|
|
2058
|
+
mql.removeEventListener('change', onChange);
|
|
2055
2059
|
} else {
|
|
2056
2060
|
mql.removeListener == null ? void 0 : mql.removeListener.call(mql, onChange);
|
|
2057
2061
|
}
|
|
@@ -2062,7 +2066,7 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2062
2066
|
return state;
|
|
2063
2067
|
};
|
|
2064
2068
|
|
|
2065
|
-
|
|
2069
|
+
function useRafState(initialState) {
|
|
2066
2070
|
const frame = useRef(0);
|
|
2067
2071
|
const [state, setState] = useState(initialState);
|
|
2068
2072
|
const setRafState = useCallback((value)=>{
|
|
@@ -2078,7 +2082,7 @@ const useRafState = (initialState)=>{
|
|
|
2078
2082
|
state,
|
|
2079
2083
|
setRafState
|
|
2080
2084
|
];
|
|
2081
|
-
}
|
|
2085
|
+
}
|
|
2082
2086
|
|
|
2083
2087
|
const initState = {
|
|
2084
2088
|
screenX: Number.NaN,
|
|
@@ -2096,7 +2100,7 @@ const initState = {
|
|
|
2096
2100
|
};
|
|
2097
2101
|
const useMouse = (target)=>{
|
|
2098
2102
|
const [state, setState] = useRafState(initState);
|
|
2099
|
-
useEventListener(
|
|
2103
|
+
useEventListener('mousemove', (event)=>{
|
|
2100
2104
|
const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
|
|
2101
2105
|
const newState = {
|
|
2102
2106
|
screenX,
|
|
@@ -2143,30 +2147,30 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
|
|
|
2143
2147
|
setPressed(false);
|
|
2144
2148
|
setSourceType(null);
|
|
2145
2149
|
}, []);
|
|
2146
|
-
useEventListener(
|
|
2147
|
-
useEventListener(
|
|
2148
|
-
useEventListener(
|
|
2150
|
+
useEventListener('mousedown', onPressed('mouse'), target, listenerOptions$2);
|
|
2151
|
+
useEventListener('mouseleave', onReleased, ()=>window, listenerOptions$2);
|
|
2152
|
+
useEventListener('mouseup', onReleased, ()=>window, listenerOptions$2);
|
|
2149
2153
|
useEffect(()=>{
|
|
2150
2154
|
if (drag) {
|
|
2151
|
-
element == null ? void 0 : element.addEventListener(
|
|
2152
|
-
element == null ? void 0 : element.addEventListener(
|
|
2153
|
-
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);
|
|
2154
2158
|
}
|
|
2155
2159
|
if (touch) {
|
|
2156
|
-
element == null ? void 0 : element.addEventListener(
|
|
2157
|
-
element == null ? void 0 : element.addEventListener(
|
|
2158
|
-
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);
|
|
2159
2163
|
}
|
|
2160
2164
|
return ()=>{
|
|
2161
2165
|
if (drag) {
|
|
2162
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2163
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2164
|
-
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);
|
|
2165
2169
|
}
|
|
2166
2170
|
if (touch) {
|
|
2167
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2168
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2169
|
-
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);
|
|
2170
2174
|
}
|
|
2171
2175
|
};
|
|
2172
2176
|
}, [
|
|
@@ -2227,22 +2231,22 @@ const useNetwork = ()=>{
|
|
|
2227
2231
|
const handleStateChange = ()=>{
|
|
2228
2232
|
setState(getConnectionState);
|
|
2229
2233
|
};
|
|
2230
|
-
on(window,
|
|
2234
|
+
on(window, 'online', handleStateChange, {
|
|
2231
2235
|
passive: true
|
|
2232
2236
|
});
|
|
2233
|
-
on(window,
|
|
2237
|
+
on(window, 'offline', handleStateChange, {
|
|
2234
2238
|
passive: true
|
|
2235
2239
|
});
|
|
2236
2240
|
if (conn) {
|
|
2237
|
-
on(conn,
|
|
2241
|
+
on(conn, 'change', handleStateChange, {
|
|
2238
2242
|
passive: true
|
|
2239
2243
|
});
|
|
2240
2244
|
}
|
|
2241
2245
|
return ()=>{
|
|
2242
|
-
off(window,
|
|
2243
|
-
off(window,
|
|
2246
|
+
off(window, 'online', handleStateChange);
|
|
2247
|
+
off(window, 'offline', handleStateChange);
|
|
2244
2248
|
if (conn) {
|
|
2245
|
-
off(conn,
|
|
2249
|
+
off(conn, 'change', handleStateChange);
|
|
2246
2250
|
}
|
|
2247
2251
|
};
|
|
2248
2252
|
}, []);
|
|
@@ -2292,7 +2296,7 @@ const useOnline = ()=>{
|
|
|
2292
2296
|
|
|
2293
2297
|
const defaultState = {
|
|
2294
2298
|
angle: 0,
|
|
2295
|
-
type:
|
|
2299
|
+
type: 'landscape-primary'
|
|
2296
2300
|
};
|
|
2297
2301
|
const useOrientation = (initialState = defaultState)=>{
|
|
2298
2302
|
const [state, setState] = useState(initialState);
|
|
@@ -2310,25 +2314,25 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2310
2314
|
});
|
|
2311
2315
|
} else if (window.orientation !== undefined) {
|
|
2312
2316
|
setState({
|
|
2313
|
-
angle: typeof window.orientation ===
|
|
2317
|
+
angle: typeof window.orientation === 'number' ? window.orientation : 0,
|
|
2314
2318
|
type: void 0
|
|
2315
2319
|
});
|
|
2316
2320
|
}
|
|
2317
2321
|
}
|
|
2318
2322
|
};
|
|
2319
|
-
on(window,
|
|
2323
|
+
on(window, 'orientationchange', onChange);
|
|
2320
2324
|
onChange();
|
|
2321
2325
|
return ()=>{
|
|
2322
2326
|
mounted = false;
|
|
2323
|
-
off(window,
|
|
2327
|
+
off(window, 'orientationchange', onChange);
|
|
2324
2328
|
};
|
|
2325
2329
|
}, []);
|
|
2326
2330
|
const lockOrientation = (type)=>{
|
|
2327
2331
|
if (isBrowser) {
|
|
2328
2332
|
return;
|
|
2329
2333
|
}
|
|
2330
|
-
if (!(window &&
|
|
2331
|
-
return Promise.reject(new Error(
|
|
2334
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2335
|
+
return Promise.reject(new Error('Not supported'));
|
|
2332
2336
|
}
|
|
2333
2337
|
return window.screen.orientation.lock(type);
|
|
2334
2338
|
};
|
|
@@ -2336,7 +2340,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2336
2340
|
if (isBrowser) {
|
|
2337
2341
|
return;
|
|
2338
2342
|
}
|
|
2339
|
-
if (!(window &&
|
|
2343
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2340
2344
|
return;
|
|
2341
2345
|
}
|
|
2342
2346
|
return window.screen.orientation.unlock();
|
|
@@ -2348,7 +2352,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2348
2352
|
];
|
|
2349
2353
|
};
|
|
2350
2354
|
|
|
2351
|
-
|
|
2355
|
+
function usePageLeave() {
|
|
2352
2356
|
const [isLeft, setIsLeft] = useState(false);
|
|
2353
2357
|
const handler = (event)=>{
|
|
2354
2358
|
if (!window) return;
|
|
@@ -2357,23 +2361,23 @@ const usePageLeave = ()=>{
|
|
|
2357
2361
|
const from = event.relatedTarget || event.toElement;
|
|
2358
2362
|
setIsLeft(!from);
|
|
2359
2363
|
};
|
|
2360
|
-
useEventListener(
|
|
2364
|
+
useEventListener('mouseout', handler, ()=>window, {
|
|
2361
2365
|
passive: true
|
|
2362
2366
|
});
|
|
2363
|
-
useEventListener(
|
|
2367
|
+
useEventListener('mouseleave', handler, ()=>document, {
|
|
2364
2368
|
passive: true
|
|
2365
2369
|
});
|
|
2366
|
-
useEventListener(
|
|
2370
|
+
useEventListener('mouseenter', handler, ()=>document, {
|
|
2367
2371
|
passive: true
|
|
2368
2372
|
});
|
|
2369
2373
|
return isLeft;
|
|
2370
|
-
}
|
|
2374
|
+
}
|
|
2371
2375
|
|
|
2372
2376
|
const usePermission = (permissionDesc)=>{
|
|
2373
|
-
const [state, setState] = useState(
|
|
2377
|
+
const [state, setState] = useState('');
|
|
2374
2378
|
useEffect(()=>{
|
|
2375
2379
|
var _navigator_permissions;
|
|
2376
|
-
const desc = typeof permissionDesc ===
|
|
2380
|
+
const desc = typeof permissionDesc === 'string' ? {
|
|
2377
2381
|
name: permissionDesc
|
|
2378
2382
|
} : permissionDesc;
|
|
2379
2383
|
let mounted = true;
|
|
@@ -2384,16 +2388,16 @@ const usePermission = (permissionDesc)=>{
|
|
|
2384
2388
|
}
|
|
2385
2389
|
setState(()=>{
|
|
2386
2390
|
var _permissionStatus_state;
|
|
2387
|
-
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 : '';
|
|
2388
2392
|
});
|
|
2389
2393
|
};
|
|
2390
2394
|
(_navigator_permissions = navigator.permissions) == null ? void 0 : _navigator_permissions.query(desc).then((status)=>{
|
|
2391
2395
|
permissionStatus = status;
|
|
2392
|
-
on(permissionStatus,
|
|
2396
|
+
on(permissionStatus, 'change', onChange);
|
|
2393
2397
|
onChange();
|
|
2394
2398
|
}).catch(noop);
|
|
2395
2399
|
return ()=>{
|
|
2396
|
-
permissionStatus && off(permissionStatus,
|
|
2400
|
+
permissionStatus && off(permissionStatus, 'change', onChange);
|
|
2397
2401
|
mounted = false;
|
|
2398
2402
|
permissionStatus = null;
|
|
2399
2403
|
};
|
|
@@ -2403,56 +2407,56 @@ const usePermission = (permissionDesc)=>{
|
|
|
2403
2407
|
return state;
|
|
2404
2408
|
};
|
|
2405
2409
|
|
|
2406
|
-
const usePreferredColorScheme = (defaultState =
|
|
2407
|
-
const isLight = useMediaQuery(
|
|
2408
|
-
const isDark = useMediaQuery(
|
|
2409
|
-
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;
|
|
2410
2414
|
};
|
|
2411
2415
|
|
|
2412
|
-
const usePreferredContrast = (defaultState =
|
|
2413
|
-
const isMore = useMediaQuery(
|
|
2414
|
-
const isLess = useMediaQuery(
|
|
2415
|
-
const isCustom = useMediaQuery(
|
|
2416
|
-
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;
|
|
2417
2421
|
};
|
|
2418
2422
|
|
|
2419
|
-
|
|
2420
|
-
return useMediaQuery(
|
|
2421
|
-
}
|
|
2423
|
+
function usePreferredDark(defaultState) {
|
|
2424
|
+
return useMediaQuery('(prefers-color-scheme: dark)', defaultState);
|
|
2425
|
+
}
|
|
2422
2426
|
|
|
2423
|
-
|
|
2427
|
+
function usePrevious(state) {
|
|
2424
2428
|
const ref = useRef();
|
|
2425
2429
|
useEffect(()=>{
|
|
2426
2430
|
ref.current = state;
|
|
2427
2431
|
});
|
|
2428
2432
|
return ref.current;
|
|
2429
|
-
}
|
|
2433
|
+
}
|
|
2430
2434
|
|
|
2431
|
-
|
|
2432
|
-
return useMediaQuery(
|
|
2433
|
-
}
|
|
2435
|
+
function useReducedMotion(defaultState) {
|
|
2436
|
+
return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState);
|
|
2437
|
+
}
|
|
2434
2438
|
|
|
2435
2439
|
const updateReducer = (num)=>(num + 1) % 1000000;
|
|
2436
|
-
|
|
2440
|
+
function useUpdate() {
|
|
2437
2441
|
const [, update] = useReducer(updateReducer, 0);
|
|
2438
2442
|
return update;
|
|
2439
|
-
}
|
|
2443
|
+
}
|
|
2440
2444
|
|
|
2441
|
-
const topVarName =
|
|
2442
|
-
const rightVarName =
|
|
2443
|
-
const bottomVarName =
|
|
2444
|
-
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';
|
|
2445
2449
|
const defaultElement = ()=>document.documentElement;
|
|
2446
|
-
|
|
2447
|
-
const top = useRef(
|
|
2448
|
-
const right = useRef(
|
|
2449
|
-
const bottom = useRef(
|
|
2450
|
-
const left = useRef(
|
|
2450
|
+
function useScreenSafeArea() {
|
|
2451
|
+
const top = useRef('');
|
|
2452
|
+
const right = useRef('');
|
|
2453
|
+
const bottom = useRef('');
|
|
2454
|
+
const left = useRef('');
|
|
2451
2455
|
const forceUpdate = useUpdate();
|
|
2452
|
-
useCssVar(topVarName, defaultElement,
|
|
2453
|
-
useCssVar(rightVarName, defaultElement,
|
|
2454
|
-
useCssVar(bottomVarName, defaultElement,
|
|
2455
|
-
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)');
|
|
2456
2460
|
const { run: update } = useDebounceFn(()=>{
|
|
2457
2461
|
top.current = getValue(topVarName);
|
|
2458
2462
|
right.current = getValue(rightVarName);
|
|
@@ -2465,7 +2469,7 @@ const useScreenSafeArea = ()=>{
|
|
|
2465
2469
|
}, [
|
|
2466
2470
|
update
|
|
2467
2471
|
]);
|
|
2468
|
-
useEventListener(
|
|
2472
|
+
useEventListener('resize', update);
|
|
2469
2473
|
return [
|
|
2470
2474
|
top.current,
|
|
2471
2475
|
right.current,
|
|
@@ -2473,16 +2477,16 @@ const useScreenSafeArea = ()=>{
|
|
|
2473
2477
|
left.current,
|
|
2474
2478
|
update
|
|
2475
2479
|
];
|
|
2476
|
-
}
|
|
2480
|
+
}
|
|
2477
2481
|
function getValue(position) {
|
|
2478
2482
|
return getComputedStyle(document.documentElement).getPropertyValue(position);
|
|
2479
2483
|
}
|
|
2480
2484
|
|
|
2481
2485
|
const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
2482
|
-
const { immediate = true, manual = false, type =
|
|
2486
|
+
const { immediate = true, manual = false, type = 'text/javascript', async = true, crossOrigin, referrerPolicy, noModule, defer, attrs = {} } = options;
|
|
2483
2487
|
const scriptTag = useRef(null);
|
|
2484
2488
|
const _promise = useRef(null);
|
|
2485
|
-
const [status, setStatus] = useState(src ?
|
|
2489
|
+
const [status, setStatus] = useState(src ? 'loading' : 'idle');
|
|
2486
2490
|
/**
|
|
2487
2491
|
* Load the script specified via `src`.
|
|
2488
2492
|
*
|
|
@@ -2501,7 +2505,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2501
2505
|
return;
|
|
2502
2506
|
}
|
|
2503
2507
|
if (!src) {
|
|
2504
|
-
setStatus(
|
|
2508
|
+
setStatus('idle');
|
|
2505
2509
|
resolve(false);
|
|
2506
2510
|
return;
|
|
2507
2511
|
}
|
|
@@ -2510,7 +2514,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2510
2514
|
let el = document.querySelector(`script[src="${src}"]`);
|
|
2511
2515
|
// Script tag not found, preparing the element for appending
|
|
2512
2516
|
if (!el) {
|
|
2513
|
-
el = document.createElement(
|
|
2517
|
+
el = document.createElement('script');
|
|
2514
2518
|
el.type = type;
|
|
2515
2519
|
el.async = async;
|
|
2516
2520
|
el.src = src;
|
|
@@ -2530,22 +2534,22 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2530
2534
|
Object.entries(attrs).forEach(([name, value])=>el == null ? void 0 : el.setAttribute(name, value));
|
|
2531
2535
|
// Enables shouldAppend
|
|
2532
2536
|
shouldAppend = true;
|
|
2533
|
-
} else if (el.hasAttribute(
|
|
2534
|
-
setStatus(el.getAttribute(
|
|
2537
|
+
} else if (el.hasAttribute('data-loaded')) {
|
|
2538
|
+
setStatus(el.getAttribute('data-status'));
|
|
2535
2539
|
resolveWithElement(el);
|
|
2536
2540
|
}
|
|
2537
2541
|
// Event listeners
|
|
2538
|
-
el.addEventListener(
|
|
2539
|
-
setStatus(event.type ===
|
|
2542
|
+
el.addEventListener('error', (event)=>{
|
|
2543
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2540
2544
|
return reject(event);
|
|
2541
2545
|
});
|
|
2542
|
-
el.addEventListener(
|
|
2543
|
-
setStatus(event.type ===
|
|
2546
|
+
el.addEventListener('abort', (event)=>{
|
|
2547
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2544
2548
|
return reject(event);
|
|
2545
2549
|
});
|
|
2546
|
-
el.addEventListener(
|
|
2547
|
-
setStatus(event.type ===
|
|
2548
|
-
el.setAttribute(
|
|
2550
|
+
el.addEventListener('load', (event)=>{
|
|
2551
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2552
|
+
el.setAttribute('data-loaded', 'true');
|
|
2549
2553
|
onLoaded(el);
|
|
2550
2554
|
resolveWithElement(el);
|
|
2551
2555
|
});
|
|
@@ -2602,11 +2606,11 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2602
2606
|
];
|
|
2603
2607
|
};
|
|
2604
2608
|
|
|
2605
|
-
|
|
2606
|
-
if (!parent && typeof document ===
|
|
2609
|
+
function setScrollParam({ axis, parent, distance }) {
|
|
2610
|
+
if (!parent && typeof document === 'undefined') {
|
|
2607
2611
|
return;
|
|
2608
2612
|
}
|
|
2609
|
-
const method = axis ===
|
|
2613
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2610
2614
|
if (parent) {
|
|
2611
2615
|
parent[method] = distance;
|
|
2612
2616
|
} else {
|
|
@@ -2614,16 +2618,16 @@ const setScrollParam = ({ axis, parent, distance })=>{
|
|
|
2614
2618
|
body[method] = distance;
|
|
2615
2619
|
documentElement[method] = distance;
|
|
2616
2620
|
}
|
|
2617
|
-
}
|
|
2618
|
-
|
|
2621
|
+
}
|
|
2622
|
+
function isScrollElement(axis, node) {
|
|
2619
2623
|
if (!node) {
|
|
2620
2624
|
return false;
|
|
2621
2625
|
}
|
|
2622
|
-
const AXIS = axis ===
|
|
2623
|
-
return getComputedStyle(node)[`overflow${AXIS}`] ===
|
|
2624
|
-
}
|
|
2626
|
+
const AXIS = axis === 'x' ? 'X' : 'Y';
|
|
2627
|
+
return getComputedStyle(node)[`overflow${AXIS}`] === 'auto' || getComputedStyle(node)[`overflow${AXIS}`] === 'scroll';
|
|
2628
|
+
}
|
|
2625
2629
|
const cache = new Map();
|
|
2626
|
-
|
|
2630
|
+
function getScrollParent(axis, node) {
|
|
2627
2631
|
if (!node || !node.parentElement) {
|
|
2628
2632
|
return null;
|
|
2629
2633
|
}
|
|
@@ -2638,24 +2642,26 @@ const getScrollParent = (axis, node)=>{
|
|
|
2638
2642
|
cache.set(node, parent);
|
|
2639
2643
|
}
|
|
2640
2644
|
return parent;
|
|
2641
|
-
}
|
|
2642
|
-
|
|
2643
|
-
if (!parent && typeof document ===
|
|
2645
|
+
}
|
|
2646
|
+
function getScrollStart({ axis, parent }) {
|
|
2647
|
+
if (!parent && typeof document === 'undefined') {
|
|
2644
2648
|
return 0;
|
|
2645
2649
|
}
|
|
2646
|
-
const method = axis ===
|
|
2650
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2647
2651
|
if (parent) {
|
|
2648
2652
|
return parent[method];
|
|
2649
2653
|
}
|
|
2650
2654
|
const { body, documentElement } = document;
|
|
2651
2655
|
// while one of it has a value the second is equal 0
|
|
2652
2656
|
return body[method] + documentElement[method];
|
|
2653
|
-
}
|
|
2657
|
+
}
|
|
2654
2658
|
|
|
2655
|
-
|
|
2659
|
+
function easeInOutQuad(t) {
|
|
2660
|
+
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
2661
|
+
}
|
|
2656
2662
|
|
|
2657
|
-
|
|
2658
|
-
if (!target || !parent && typeof document ===
|
|
2663
|
+
function getRelativePosition({ axis, target, parent, alignment, offset, isList }) {
|
|
2664
|
+
if (!target || !parent && typeof document === 'undefined') {
|
|
2659
2665
|
return 0;
|
|
2660
2666
|
}
|
|
2661
2667
|
const isCustomParent = !!parent;
|
|
@@ -2663,55 +2669,55 @@ const getRelativePosition = ({ axis, target, parent, alignment, offset, isList }
|
|
|
2663
2669
|
const parentPosition = parentElement.getBoundingClientRect();
|
|
2664
2670
|
const targetPosition = target.getBoundingClientRect();
|
|
2665
2671
|
const getDiff = (property)=>targetPosition[property] - parentPosition[property];
|
|
2666
|
-
if (axis ===
|
|
2667
|
-
const diff = getDiff(
|
|
2672
|
+
if (axis === 'y') {
|
|
2673
|
+
const diff = getDiff('top');
|
|
2668
2674
|
if (diff === 0) {
|
|
2669
2675
|
return 0;
|
|
2670
2676
|
}
|
|
2671
|
-
if (alignment ===
|
|
2677
|
+
if (alignment === 'start') {
|
|
2672
2678
|
const distance = diff - offset;
|
|
2673
2679
|
const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2674
2680
|
return shouldScroll ? distance : 0;
|
|
2675
2681
|
}
|
|
2676
2682
|
const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;
|
|
2677
|
-
if (alignment ===
|
|
2683
|
+
if (alignment === 'end') {
|
|
2678
2684
|
const distance = diff + offset - parentHeight + targetPosition.height;
|
|
2679
2685
|
const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2680
2686
|
return shouldScroll ? distance : 0;
|
|
2681
2687
|
}
|
|
2682
|
-
if (alignment ===
|
|
2688
|
+
if (alignment === 'center') {
|
|
2683
2689
|
return diff - parentHeight / 2 + targetPosition.height / 2;
|
|
2684
2690
|
}
|
|
2685
2691
|
return 0;
|
|
2686
2692
|
}
|
|
2687
|
-
if (axis ===
|
|
2688
|
-
const diff = getDiff(
|
|
2693
|
+
if (axis === 'x') {
|
|
2694
|
+
const diff = getDiff('left');
|
|
2689
2695
|
if (diff === 0) {
|
|
2690
2696
|
return 0;
|
|
2691
2697
|
}
|
|
2692
|
-
if (alignment ===
|
|
2698
|
+
if (alignment === 'start') {
|
|
2693
2699
|
const distance = diff - offset;
|
|
2694
2700
|
const shouldScroll = distance <= targetPosition.width || !isList;
|
|
2695
2701
|
return shouldScroll ? distance : 0;
|
|
2696
2702
|
}
|
|
2697
2703
|
const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;
|
|
2698
|
-
if (alignment ===
|
|
2704
|
+
if (alignment === 'end') {
|
|
2699
2705
|
const distance = diff + offset - parentWidth + targetPosition.width;
|
|
2700
2706
|
const shouldScroll = distance >= -targetPosition.width || !isList;
|
|
2701
2707
|
return shouldScroll ? distance : 0;
|
|
2702
2708
|
}
|
|
2703
|
-
if (alignment ===
|
|
2709
|
+
if (alignment === 'center') {
|
|
2704
2710
|
return diff - parentWidth / 2 + targetPosition.width / 2;
|
|
2705
2711
|
}
|
|
2706
2712
|
return 0;
|
|
2707
2713
|
}
|
|
2708
2714
|
return 0;
|
|
2709
|
-
}
|
|
2715
|
+
}
|
|
2710
2716
|
|
|
2711
2717
|
const listenerOptions$1 = {
|
|
2712
2718
|
passive: true
|
|
2713
2719
|
};
|
|
2714
|
-
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)=>{
|
|
2715
2721
|
const frameID = useRef(0);
|
|
2716
2722
|
const startTime = useRef(0);
|
|
2717
2723
|
const shouldStop = useRef(false);
|
|
@@ -2722,7 +2728,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2722
2728
|
}
|
|
2723
2729
|
};
|
|
2724
2730
|
const element = getTargetElement(targetElement);
|
|
2725
|
-
const scrollIntoView = ({ alignment =
|
|
2731
|
+
const scrollIntoView = ({ alignment = 'start' } = {})=>{
|
|
2726
2732
|
const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
|
|
2727
2733
|
shouldStop.current = false;
|
|
2728
2734
|
if (frameID.current) {
|
|
@@ -2758,7 +2764,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2758
2764
|
if (!shouldStop.current && t < 1) {
|
|
2759
2765
|
frameID.current = requestAnimationFrame(animateScroll);
|
|
2760
2766
|
} else {
|
|
2761
|
-
typeof onScrollFinish ===
|
|
2767
|
+
typeof onScrollFinish === 'function' && onScrollFinish();
|
|
2762
2768
|
startTime.current = 0;
|
|
2763
2769
|
frameID.current = 0;
|
|
2764
2770
|
cancel();
|
|
@@ -2771,8 +2777,8 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2771
2777
|
shouldStop.current = true;
|
|
2772
2778
|
}
|
|
2773
2779
|
};
|
|
2774
|
-
useEventListener(
|
|
2775
|
-
useEventListener(
|
|
2780
|
+
useEventListener('wheel', handleStop, null, listenerOptions$1);
|
|
2781
|
+
useEventListener('touchmove', handleStop, null, listenerOptions$1);
|
|
2776
2782
|
useEffect(()=>cancel, []);
|
|
2777
2783
|
return {
|
|
2778
2784
|
scrollIntoView,
|
|
@@ -2793,13 +2799,13 @@ function preventDefault(rawEvent) {
|
|
|
2793
2799
|
}
|
|
2794
2800
|
const useScrollLock = (target, initialState = false)=>{
|
|
2795
2801
|
const [locked, setLocked] = useState(initialState);
|
|
2796
|
-
const initialOverflowRef = useRef(
|
|
2802
|
+
const initialOverflowRef = useRef('scroll');
|
|
2797
2803
|
useEffect(()=>{
|
|
2798
2804
|
const element = getTargetElement(target);
|
|
2799
2805
|
if (element) {
|
|
2800
2806
|
initialOverflowRef.current = element.style.overflow;
|
|
2801
2807
|
if (locked) {
|
|
2802
|
-
element.style.overflow =
|
|
2808
|
+
element.style.overflow = 'hidden';
|
|
2803
2809
|
}
|
|
2804
2810
|
}
|
|
2805
2811
|
}, [
|
|
@@ -2812,7 +2818,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2812
2818
|
return;
|
|
2813
2819
|
}
|
|
2814
2820
|
if (isIOS) {
|
|
2815
|
-
element.addEventListener(
|
|
2821
|
+
element.addEventListener('touchmove', preventDefault, {
|
|
2816
2822
|
passive: false
|
|
2817
2823
|
});
|
|
2818
2824
|
}
|
|
@@ -2824,7 +2830,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2824
2830
|
return;
|
|
2825
2831
|
}
|
|
2826
2832
|
if (isIOS) {
|
|
2827
|
-
element.removeEventListener(
|
|
2833
|
+
element.removeEventListener('touchmove', preventDefault);
|
|
2828
2834
|
}
|
|
2829
2835
|
element.style.overflow = initialOverflowRef.current;
|
|
2830
2836
|
setLocked(false);
|
|
@@ -2862,14 +2868,14 @@ function _extends() {
|
|
|
2862
2868
|
}
|
|
2863
2869
|
const useSetState = (initialState)=>{
|
|
2864
2870
|
const [state, _setState] = useState(initialState);
|
|
2865
|
-
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)), []);
|
|
2866
2872
|
return [
|
|
2867
2873
|
state,
|
|
2868
2874
|
setState
|
|
2869
2875
|
];
|
|
2870
2876
|
};
|
|
2871
2877
|
|
|
2872
|
-
|
|
2878
|
+
function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
|
|
2873
2879
|
const [isSticky, setSticky] = useState(false);
|
|
2874
2880
|
const { run: scrollHandler } = useThrottleFn(()=>{
|
|
2875
2881
|
const element = getTargetElement(targetElement);
|
|
@@ -2877,7 +2883,7 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2877
2883
|
return;
|
|
2878
2884
|
}
|
|
2879
2885
|
const rect = element.getBoundingClientRect();
|
|
2880
|
-
if (axis ===
|
|
2886
|
+
if (axis === 'y') {
|
|
2881
2887
|
setSticky((rect == null ? void 0 : rect.top) <= nav);
|
|
2882
2888
|
} else {
|
|
2883
2889
|
setSticky((rect == null ? void 0 : rect.left) <= nav);
|
|
@@ -2889,10 +2895,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2889
2895
|
if (!element || !scrollParent) {
|
|
2890
2896
|
return;
|
|
2891
2897
|
}
|
|
2892
|
-
scrollParent.addEventListener(
|
|
2898
|
+
scrollParent.addEventListener('scroll', scrollHandler);
|
|
2893
2899
|
scrollHandler();
|
|
2894
2900
|
return ()=>{
|
|
2895
|
-
scrollParent.removeEventListener(
|
|
2901
|
+
scrollParent.removeEventListener('scroll', scrollHandler);
|
|
2896
2902
|
};
|
|
2897
2903
|
}, [
|
|
2898
2904
|
axis,
|
|
@@ -2904,10 +2910,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2904
2910
|
isSticky,
|
|
2905
2911
|
setSticky
|
|
2906
2912
|
];
|
|
2907
|
-
}
|
|
2913
|
+
}
|
|
2908
2914
|
|
|
2909
2915
|
const useTextDirection = (options = defaultOptions$1)=>{
|
|
2910
|
-
const { selector =
|
|
2916
|
+
const { selector = 'html', initialValue = 'ltr' } = options;
|
|
2911
2917
|
const getValue = ()=>{
|
|
2912
2918
|
if (initialValue !== undefined) {
|
|
2913
2919
|
return initialValue;
|
|
@@ -2915,11 +2921,11 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2915
2921
|
if (isBrowser) {
|
|
2916
2922
|
var _document_querySelector, _document;
|
|
2917
2923
|
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(
|
|
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;
|
|
2919
2925
|
}
|
|
2920
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.
|
|
2921
|
-
if (process.env.NODE_ENV !==
|
|
2922
|
-
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.');
|
|
2923
2929
|
}
|
|
2924
2930
|
return initialValue;
|
|
2925
2931
|
};
|
|
@@ -2927,7 +2933,7 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2927
2933
|
useEffect(()=>{
|
|
2928
2934
|
var _document_querySelector, _document;
|
|
2929
2935
|
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(
|
|
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);
|
|
2931
2937
|
}, [
|
|
2932
2938
|
initialValue,
|
|
2933
2939
|
selector
|
|
@@ -2938,10 +2944,10 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2938
2944
|
}
|
|
2939
2945
|
if (value !== null) {
|
|
2940
2946
|
var _document_querySelector;
|
|
2941
|
-
(_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);
|
|
2942
2948
|
} else {
|
|
2943
2949
|
var _document_querySelector1;
|
|
2944
|
-
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute(
|
|
2950
|
+
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute('dir');
|
|
2945
2951
|
}
|
|
2946
2952
|
setValue(value);
|
|
2947
2953
|
};
|
|
@@ -2959,7 +2965,7 @@ const useTextSelection = ()=>{
|
|
|
2959
2965
|
// this is because `document.getSelection` will always return the same object
|
|
2960
2966
|
forceUpdate();
|
|
2961
2967
|
};
|
|
2962
|
-
useEventListener(
|
|
2968
|
+
useEventListener('selectionchange', handleSelectionChange, ()=>document);
|
|
2963
2969
|
useEffect(()=>{
|
|
2964
2970
|
setSelection(document.getSelection());
|
|
2965
2971
|
}, []);
|
|
@@ -3039,7 +3045,9 @@ const useTitle = (title)=>{
|
|
|
3039
3045
|
]);
|
|
3040
3046
|
};
|
|
3041
3047
|
|
|
3042
|
-
|
|
3048
|
+
function toggleReducer(state, nextValue) {
|
|
3049
|
+
return typeof nextValue === 'boolean' ? nextValue : !state;
|
|
3050
|
+
}
|
|
3043
3051
|
const useToggle = (initialValue)=>{
|
|
3044
3052
|
return useReducer(toggleReducer, initialValue);
|
|
3045
3053
|
};
|
|
@@ -3076,7 +3084,7 @@ function _async_to_generator$1(fn) {
|
|
|
3076
3084
|
};
|
|
3077
3085
|
}
|
|
3078
3086
|
const useWebNotification = (requestPermissions = false)=>{
|
|
3079
|
-
const isSupported = useSupported(()=>!!window &&
|
|
3087
|
+
const isSupported = useSupported(()=>!!window && 'Notification' in window);
|
|
3080
3088
|
const permissionGranted = useRef(false);
|
|
3081
3089
|
const notificationRef = useRef(null);
|
|
3082
3090
|
const show = (title, options = defaultOptions$1)=>{
|
|
@@ -3085,7 +3093,7 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3085
3093
|
if (!isSupported && !permissionGranted.current) {
|
|
3086
3094
|
return;
|
|
3087
3095
|
}
|
|
3088
|
-
notificationRef.current = new Notification(title ||
|
|
3096
|
+
notificationRef.current = new Notification(title || '', options);
|
|
3089
3097
|
return notificationRef.current;
|
|
3090
3098
|
};
|
|
3091
3099
|
const close = useCallback(()=>{
|
|
@@ -3095,15 +3103,15 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3095
3103
|
notificationRef.current = null;
|
|
3096
3104
|
}, []);
|
|
3097
3105
|
useEffect(()=>{
|
|
3098
|
-
permissionGranted.current = isSupported &&
|
|
3106
|
+
permissionGranted.current = isSupported && 'permission' in Notification && Notification.permission === 'granted';
|
|
3099
3107
|
}, [
|
|
3100
3108
|
isSupported
|
|
3101
3109
|
]);
|
|
3102
3110
|
const ensurePermissions = useCallback(/*#__PURE__*/ _async_to_generator$1(function*() {
|
|
3103
3111
|
if (!isSupported) return;
|
|
3104
|
-
if (!permissionGranted.current && Notification.permission !==
|
|
3112
|
+
if (!permissionGranted.current && Notification.permission !== 'denied') {
|
|
3105
3113
|
const result = yield Notification.requestPermission();
|
|
3106
|
-
if (result ===
|
|
3114
|
+
if (result === 'granted') permissionGranted.current = true;
|
|
3107
3115
|
}
|
|
3108
3116
|
return permissionGranted.current;
|
|
3109
3117
|
}), [
|
|
@@ -3127,25 +3135,25 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3127
3135
|
};
|
|
3128
3136
|
};
|
|
3129
3137
|
|
|
3130
|
-
|
|
3138
|
+
function useWindowsFocus(defauleValue = false) {
|
|
3131
3139
|
const [focused, setFocused] = useState(defauleValue);
|
|
3132
3140
|
useEffect(()=>{
|
|
3133
3141
|
setFocused(window.document.hasFocus());
|
|
3134
3142
|
}, []);
|
|
3135
|
-
useEventListener(
|
|
3143
|
+
useEventListener('blur', ()=>{
|
|
3136
3144
|
setFocused(false);
|
|
3137
3145
|
});
|
|
3138
|
-
useEventListener(
|
|
3146
|
+
useEventListener('focus', ()=>{
|
|
3139
3147
|
setFocused(true);
|
|
3140
3148
|
});
|
|
3141
3149
|
return focused;
|
|
3142
|
-
}
|
|
3150
|
+
}
|
|
3143
3151
|
|
|
3144
3152
|
const listenerOptions = {
|
|
3145
3153
|
capture: false,
|
|
3146
3154
|
passive: true
|
|
3147
3155
|
};
|
|
3148
|
-
|
|
3156
|
+
function useWindowScroll() {
|
|
3149
3157
|
const [state, setState] = useRafState(()=>({
|
|
3150
3158
|
x: 0,
|
|
3151
3159
|
y: 0
|
|
@@ -3156,20 +3164,20 @@ const useWindowScroll = ()=>{
|
|
|
3156
3164
|
y: window.scrollY
|
|
3157
3165
|
});
|
|
3158
3166
|
};
|
|
3159
|
-
useEventListener(
|
|
3167
|
+
useEventListener('scroll', handleScroll, defaultWindow, listenerOptions);
|
|
3160
3168
|
// Set scroll at the first client-side load
|
|
3161
3169
|
useIsomorphicLayoutEffect(()=>{
|
|
3162
3170
|
handleScroll();
|
|
3163
3171
|
}, []);
|
|
3164
3172
|
return state;
|
|
3165
|
-
}
|
|
3173
|
+
}
|
|
3166
3174
|
|
|
3167
|
-
|
|
3168
|
-
window.addEventListener(
|
|
3175
|
+
function subscribe(callback) {
|
|
3176
|
+
window.addEventListener('resize', callback);
|
|
3169
3177
|
return ()=>{
|
|
3170
|
-
window.removeEventListener(
|
|
3178
|
+
window.removeEventListener('resize', callback);
|
|
3171
3179
|
};
|
|
3172
|
-
}
|
|
3180
|
+
}
|
|
3173
3181
|
const useWindowSize = ()=>{
|
|
3174
3182
|
const stateDependencies = useRef({}).current;
|
|
3175
3183
|
const previous = useRef({
|
|
@@ -3240,14 +3248,14 @@ function _async_to_generator(fn) {
|
|
|
3240
3248
|
};
|
|
3241
3249
|
}
|
|
3242
3250
|
const useClipboard = ()=>{
|
|
3243
|
-
const [text, setText] = useState(
|
|
3251
|
+
const [text, setText] = useState('');
|
|
3244
3252
|
const updateText = useCallback(()=>{
|
|
3245
3253
|
window.navigator.clipboard.readText().then((value)=>{
|
|
3246
3254
|
setText(value);
|
|
3247
3255
|
});
|
|
3248
3256
|
}, []);
|
|
3249
|
-
useEventListener(
|
|
3250
|
-
useEventListener(
|
|
3257
|
+
useEventListener('copy', updateText);
|
|
3258
|
+
useEventListener('cut', updateText);
|
|
3251
3259
|
const copy = useCallback(/*#__PURE__*/ _async_to_generator(function*(txt) {
|
|
3252
3260
|
setText(txt);
|
|
3253
3261
|
yield window.navigator.clipboard.writeText(txt);
|
|
@@ -3258,24 +3266,24 @@ const useClipboard = ()=>{
|
|
|
3258
3266
|
];
|
|
3259
3267
|
};
|
|
3260
3268
|
|
|
3261
|
-
|
|
3269
|
+
function getPlatform(userAgent) {
|
|
3262
3270
|
if (/iPad|iPhone|iPod|ios/i.test(userAgent)) {
|
|
3263
|
-
return
|
|
3271
|
+
return 'ios';
|
|
3264
3272
|
} else if (/android/i.test(userAgent)) {
|
|
3265
|
-
return
|
|
3273
|
+
return 'android';
|
|
3266
3274
|
} else {
|
|
3267
|
-
return
|
|
3275
|
+
return 'unknown';
|
|
3268
3276
|
}
|
|
3269
|
-
}
|
|
3277
|
+
}
|
|
3270
3278
|
const usePlatform = ({ userAgent } = {
|
|
3271
|
-
userAgent:
|
|
3279
|
+
userAgent: ''
|
|
3272
3280
|
})=>{
|
|
3273
|
-
const [ua, setUa] = useState(userAgent ||
|
|
3281
|
+
const [ua, setUa] = useState(userAgent || '');
|
|
3274
3282
|
const [platform, setPlatform] = useState(()=>{
|
|
3275
3283
|
if (userAgent) {
|
|
3276
3284
|
return getPlatform(userAgent);
|
|
3277
3285
|
}
|
|
3278
|
-
return
|
|
3286
|
+
return 'unknown';
|
|
3279
3287
|
});
|
|
3280
3288
|
useEffect(()=>{
|
|
3281
3289
|
setPlatform(getPlatform(navigator.userAgent));
|
|
@@ -3304,18 +3312,18 @@ const usePlatform = ({ userAgent } = {
|
|
|
3304
3312
|
};
|
|
3305
3313
|
};
|
|
3306
3314
|
|
|
3307
|
-
|
|
3315
|
+
function useMobileLandscape() {
|
|
3308
3316
|
const [isMobileLandscape, setIsMobileLandscape] = useState(false);
|
|
3309
3317
|
const [orientation] = useOrientation();
|
|
3310
3318
|
useEffect(()=>{
|
|
3311
3319
|
const userAgent = window.navigator.userAgent;
|
|
3312
3320
|
const isMobile = /Mobi|Android|iphone/i.test(userAgent);
|
|
3313
|
-
setIsMobileLandscape(isMobile && orientation.type ===
|
|
3321
|
+
setIsMobileLandscape(isMobile && orientation.type === 'landscape-primary');
|
|
3314
3322
|
}, [
|
|
3315
3323
|
orientation.type
|
|
3316
3324
|
]);
|
|
3317
3325
|
return isMobileLandscape;
|
|
3318
|
-
}
|
|
3326
|
+
}
|
|
3319
3327
|
|
|
3320
3328
|
const useControlled = (value, defaultValue, onChange)=>{
|
|
3321
3329
|
const [stateValue, setStateValue] = useState(value !== undefined ? value : defaultValue);
|
|
@@ -3336,7 +3344,7 @@ const useControlled = (value, defaultValue, onChange)=>{
|
|
|
3336
3344
|
];
|
|
3337
3345
|
};
|
|
3338
3346
|
|
|
3339
|
-
|
|
3347
|
+
function useDisclosure(props = {}) {
|
|
3340
3348
|
const { defaultOpen, isOpen: isOpenProp, onClose: onCloseProp, onOpen: onOpenProp, onChange = ()=>{} } = props;
|
|
3341
3349
|
const onOpenPropRef = useLatest(onOpenProp);
|
|
3342
3350
|
const onClosePropRef = useLatest(onCloseProp);
|
|
@@ -3377,12 +3385,12 @@ const useDisclosure = (props = {})=>{
|
|
|
3377
3385
|
onOpenChange,
|
|
3378
3386
|
isControlled
|
|
3379
3387
|
};
|
|
3380
|
-
}
|
|
3388
|
+
}
|
|
3381
3389
|
|
|
3382
3390
|
const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
3383
3391
|
const [data, setData] = useState(null);
|
|
3384
3392
|
const [error, setError] = useState(null);
|
|
3385
|
-
const [status, setStatus] = useState(
|
|
3393
|
+
const [status, setStatus] = useState('DISCONNECTED');
|
|
3386
3394
|
const [event, setEvent] = useState(null);
|
|
3387
3395
|
const [lastEventId, setLastEventId] = useState(null);
|
|
3388
3396
|
const retries = useRef(0);
|
|
@@ -3404,7 +3412,7 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3404
3412
|
});
|
|
3405
3413
|
const close = useCallback(()=>{
|
|
3406
3414
|
var _eventSourceRef_current;
|
|
3407
|
-
setStatus(
|
|
3415
|
+
setStatus('DISCONNECTED');
|
|
3408
3416
|
clean();
|
|
3409
3417
|
(_eventSourceRef_current = eventSourceRef.current) == null ? void 0 : _eventSourceRef_current.close();
|
|
3410
3418
|
eventSourceRef.current = null;
|
|
@@ -3423,21 +3431,21 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3423
3431
|
}
|
|
3424
3432
|
const es = eventSourceRef.current;
|
|
3425
3433
|
es.onopen = ()=>{
|
|
3426
|
-
setStatus(
|
|
3434
|
+
setStatus('CONNECTED');
|
|
3427
3435
|
setError(null);
|
|
3428
3436
|
};
|
|
3429
3437
|
es.onmessage = (ev)=>{
|
|
3430
3438
|
setData(ev.data);
|
|
3431
3439
|
setLastEventId(ev.lastEventId);
|
|
3432
|
-
setStatus(
|
|
3440
|
+
setStatus('CONNECTED');
|
|
3433
3441
|
};
|
|
3434
3442
|
es.onerror = (err)=>{
|
|
3435
3443
|
setError(err);
|
|
3436
|
-
setStatus(
|
|
3444
|
+
setStatus('DISCONNECTED');
|
|
3437
3445
|
if (options.autoReconnect && !explicitlyClosed.current) {
|
|
3438
3446
|
const { retries: maxRetries = -1, delay = 1000, onFailed } = options.autoReconnect;
|
|
3439
3447
|
retries.current += 1;
|
|
3440
|
-
if (typeof maxRetries ===
|
|
3448
|
+
if (typeof maxRetries === 'number' && (maxRetries < 0 || retries.current < maxRetries) || typeof maxRetries === 'function' && maxRetries()) {
|
|
3441
3449
|
setTimeout(open, delay);
|
|
3442
3450
|
} else {
|
|
3443
3451
|
onFailed == null ? void 0 : onFailed();
|
|
@@ -3480,4 +3488,27 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3480
3488
|
};
|
|
3481
3489
|
};
|
|
3482
3490
|
|
|
3483
|
-
|
|
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 };
|