@reactuses/core 5.0.15 → 5.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -8
- package/dist/index-client-DJgtg2U_.cjs +30 -0
- package/dist/index-client-Qon46B4S.js +28 -0
- package/dist/index.cjs +375 -338
- package/dist/index.d.cts +141 -95
- package/dist/index.d.mts +141 -95
- package/dist/index.d.ts +141 -95
- package/dist/index.mjs +372 -340
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -5,9 +5,11 @@ var lodashEs = require('lodash-es');
|
|
|
5
5
|
var Cookies = require('js-cookie');
|
|
6
6
|
var screenfull = require('screenfull');
|
|
7
7
|
var index_js = require('use-sync-external-store/shim/index.js');
|
|
8
|
+
var indexClient = require('./index-client-DJgtg2U_.cjs');
|
|
8
9
|
|
|
9
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
11
|
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
13
|
var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
|
|
12
14
|
var screenfull__default = /*#__PURE__*/_interopDefault(screenfull);
|
|
13
15
|
|
|
@@ -18,13 +20,17 @@ const useLatest = (value)=>{
|
|
|
18
20
|
};
|
|
19
21
|
|
|
20
22
|
var _window_navigator, _window;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const
|
|
23
|
+
function isFunction(val) {
|
|
24
|
+
return typeof val === 'function';
|
|
25
|
+
}
|
|
26
|
+
function isString(val) {
|
|
27
|
+
return typeof val === 'string';
|
|
28
|
+
}
|
|
29
|
+
const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
|
|
30
|
+
const isBrowser = typeof window !== 'undefined';
|
|
31
|
+
const isNavigator = typeof navigator !== 'undefined';
|
|
32
|
+
function noop() {}
|
|
33
|
+
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);
|
|
28
34
|
|
|
29
35
|
function on(obj, ...args) {
|
|
30
36
|
if (obj && obj.addEventListener) {
|
|
@@ -39,9 +45,9 @@ function off(obj, ...args) {
|
|
|
39
45
|
const defaultWindow = isBrowser ? window : undefined;
|
|
40
46
|
|
|
41
47
|
const defaultOptions$1 = {};
|
|
42
|
-
|
|
48
|
+
function defaultOnError(e) {
|
|
43
49
|
console.error(e);
|
|
44
|
-
}
|
|
50
|
+
}
|
|
45
51
|
|
|
46
52
|
function getTargetElement(target, defaultElement) {
|
|
47
53
|
if (!isBrowser) {
|
|
@@ -53,7 +59,7 @@ function getTargetElement(target, defaultElement) {
|
|
|
53
59
|
let targetElement;
|
|
54
60
|
if (isFunction(target)) {
|
|
55
61
|
targetElement = target();
|
|
56
|
-
} else if (
|
|
62
|
+
} else if ('current' in target) {
|
|
57
63
|
targetElement = target.current;
|
|
58
64
|
} else {
|
|
59
65
|
targetElement = target;
|
|
@@ -62,12 +68,12 @@ function getTargetElement(target, defaultElement) {
|
|
|
62
68
|
}
|
|
63
69
|
|
|
64
70
|
const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
65
|
-
if (process.env.NODE_ENV !==
|
|
71
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
66
72
|
if (!Array.isArray(deps) || !deps.length) {
|
|
67
|
-
console.warn(
|
|
73
|
+
console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
68
74
|
}
|
|
69
|
-
if (typeof depsEqual !==
|
|
70
|
-
console.warn(
|
|
75
|
+
if (typeof depsEqual !== 'function') {
|
|
76
|
+
console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
|
|
71
77
|
}
|
|
72
78
|
}
|
|
73
79
|
const ref = React.useRef(undefined);
|
|
@@ -79,9 +85,9 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
|
79
85
|
};
|
|
80
86
|
|
|
81
87
|
const useDeepCompareEffect = (effect, deps)=>{
|
|
82
|
-
if (process.env.NODE_ENV !==
|
|
88
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
83
89
|
if (!Array.isArray(deps) || !deps.length) {
|
|
84
|
-
console.warn(
|
|
90
|
+
console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
85
91
|
}
|
|
86
92
|
}
|
|
87
93
|
useCustomCompareEffect(effect, deps, lodashEs.isEqual);
|
|
@@ -115,12 +121,12 @@ const useActiveElement = ()=>{
|
|
|
115
121
|
var _window;
|
|
116
122
|
setActive((_window = window) == null ? void 0 : _window.document.activeElement);
|
|
117
123
|
}, []);
|
|
118
|
-
useEventListener(
|
|
119
|
-
useEventListener(
|
|
124
|
+
useEventListener('blur', listener, ()=>window, true);
|
|
125
|
+
useEventListener('focus', listener, ()=>window, true);
|
|
120
126
|
return active;
|
|
121
127
|
};
|
|
122
128
|
|
|
123
|
-
|
|
129
|
+
function useMountedState() {
|
|
124
130
|
const mountedRef = React.useRef(false);
|
|
125
131
|
const get = React.useCallback(()=>mountedRef.current, []);
|
|
126
132
|
React.useEffect(()=>{
|
|
@@ -130,7 +136,7 @@ const useMountedState = ()=>{
|
|
|
130
136
|
};
|
|
131
137
|
}, []);
|
|
132
138
|
return get;
|
|
133
|
-
}
|
|
139
|
+
}
|
|
134
140
|
|
|
135
141
|
function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
|
|
136
142
|
try {
|
|
@@ -197,11 +203,11 @@ const useClickOutside = (target, handler, enabled = true)=>{
|
|
|
197
203
|
}
|
|
198
204
|
savedHandler.current(event);
|
|
199
205
|
};
|
|
200
|
-
useEventListener(
|
|
201
|
-
useEventListener(
|
|
206
|
+
useEventListener('mousedown', listener, defaultWindow, listerOptions);
|
|
207
|
+
useEventListener('touchstart', listener, defaultWindow, listerOptions);
|
|
202
208
|
};
|
|
203
209
|
|
|
204
|
-
|
|
210
|
+
function getInitialState$4(key, defaultValue) {
|
|
205
211
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
206
212
|
if (defaultValue !== undefined) {
|
|
207
213
|
return defaultValue;
|
|
@@ -209,11 +215,11 @@ const getInitialState$4 = (key, defaultValue)=>{
|
|
|
209
215
|
if (isBrowser) {
|
|
210
216
|
return Cookies__default.default.get(key);
|
|
211
217
|
}
|
|
212
|
-
if (process.env.NODE_ENV !==
|
|
213
|
-
console.warn(
|
|
218
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
219
|
+
console.warn('`useCookie` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
214
220
|
}
|
|
215
|
-
return
|
|
216
|
-
}
|
|
221
|
+
return '';
|
|
222
|
+
}
|
|
217
223
|
const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
|
|
218
224
|
const [cookieValue, setCookieValue] = React.useState(getInitialState$4(key, defaultValue));
|
|
219
225
|
React.useEffect(()=>{
|
|
@@ -330,22 +336,22 @@ const useInterval = (callback, delay, options = defaultOptions$1)=>{
|
|
|
330
336
|
};
|
|
331
337
|
};
|
|
332
338
|
|
|
333
|
-
|
|
339
|
+
function padZero(time) {
|
|
334
340
|
return `${time}`.length < 2 ? `0${time}` : `${time}`;
|
|
335
|
-
}
|
|
336
|
-
|
|
341
|
+
}
|
|
342
|
+
function getHMSTime(timeDiff) {
|
|
337
343
|
if (timeDiff <= 0) {
|
|
338
344
|
return [
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
345
|
+
'00',
|
|
346
|
+
'00',
|
|
347
|
+
'00'
|
|
342
348
|
];
|
|
343
349
|
}
|
|
344
350
|
if (timeDiff > 100 * 3600) {
|
|
345
351
|
return [
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
352
|
+
'99',
|
|
353
|
+
'59',
|
|
354
|
+
'59'
|
|
349
355
|
];
|
|
350
356
|
}
|
|
351
357
|
const hour = Math.floor(timeDiff / 3600);
|
|
@@ -356,7 +362,7 @@ const getHMSTime = (timeDiff)=>{
|
|
|
356
362
|
padZero(minute),
|
|
357
363
|
padZero(second)
|
|
358
364
|
];
|
|
359
|
-
}
|
|
365
|
+
}
|
|
360
366
|
const useCountDown = (time, format = getHMSTime, callback)=>{
|
|
361
367
|
const [remainTime, setRemainTime] = React.useState(time);
|
|
362
368
|
const [delay, setDelay] = React.useState(1000);
|
|
@@ -387,14 +393,14 @@ const useCountDown = (time, format = getHMSTime, callback)=>{
|
|
|
387
393
|
const useCounter = (initialValue = 0, max = null, min = null)=>{
|
|
388
394
|
// avoid exec init code every render
|
|
389
395
|
const initFunc = ()=>{
|
|
390
|
-
let init = typeof initialValue ===
|
|
391
|
-
typeof init !==
|
|
392
|
-
if (typeof min ===
|
|
396
|
+
let init = typeof initialValue === 'function' ? initialValue() : initialValue;
|
|
397
|
+
typeof init !== 'number' && console.error(`initialValue has to be a number, got ${typeof initialValue}`);
|
|
398
|
+
if (typeof min === 'number') {
|
|
393
399
|
init = Math.max(init, min);
|
|
394
400
|
} else if (min !== null) {
|
|
395
401
|
console.error(`min has to be a number, got ${typeof min}`);
|
|
396
402
|
}
|
|
397
|
-
if (typeof max ===
|
|
403
|
+
if (typeof max === 'number') {
|
|
398
404
|
init = Math.min(init, max);
|
|
399
405
|
} else if (max !== null) {
|
|
400
406
|
console.error(`max has to be a number, got ${typeof max}`);
|
|
@@ -404,11 +410,11 @@ const useCounter = (initialValue = 0, max = null, min = null)=>{
|
|
|
404
410
|
const [value, setValue] = React.useState(initFunc);
|
|
405
411
|
const set = useEvent((newState)=>{
|
|
406
412
|
setValue((v)=>{
|
|
407
|
-
let nextValue = typeof newState ===
|
|
408
|
-
if (typeof min ===
|
|
413
|
+
let nextValue = typeof newState === 'function' ? newState(v) : newState;
|
|
414
|
+
if (typeof min === 'number') {
|
|
409
415
|
nextValue = Math.max(nextValue, min);
|
|
410
416
|
}
|
|
411
|
-
if (typeof max ===
|
|
417
|
+
if (typeof max === 'number') {
|
|
412
418
|
nextValue = Math.min(nextValue, max);
|
|
413
419
|
}
|
|
414
420
|
return nextValue;
|
|
@@ -436,19 +442,19 @@ const defaultOptions = {
|
|
|
436
442
|
observe: false
|
|
437
443
|
};
|
|
438
444
|
|
|
439
|
-
|
|
445
|
+
function getInitialState$3(defaultValue) {
|
|
440
446
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
441
447
|
if (defaultValue !== undefined) {
|
|
442
448
|
return defaultValue;
|
|
443
449
|
}
|
|
444
450
|
if (isBrowser) {
|
|
445
|
-
return
|
|
451
|
+
return '';
|
|
446
452
|
}
|
|
447
|
-
if (process.env.NODE_ENV !==
|
|
448
|
-
console.warn(
|
|
453
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
454
|
+
console.warn('`useCssVar` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
449
455
|
}
|
|
450
|
-
return
|
|
451
|
-
}
|
|
456
|
+
return '';
|
|
457
|
+
}
|
|
452
458
|
const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
|
|
453
459
|
const { observe } = options;
|
|
454
460
|
const [variable, setVariable] = React.useState(getInitialState$3(defaultValue));
|
|
@@ -492,8 +498,8 @@ const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
|
|
|
492
498
|
observerRef.current = new MutationObserver(updateCssVar);
|
|
493
499
|
observerRef.current.observe(element, {
|
|
494
500
|
attributeFilter: [
|
|
495
|
-
|
|
496
|
-
|
|
501
|
+
'style',
|
|
502
|
+
'class'
|
|
497
503
|
]
|
|
498
504
|
});
|
|
499
505
|
return ()=>{
|
|
@@ -536,12 +542,12 @@ const useCycleList = (list, i = 0)=>{
|
|
|
536
542
|
};
|
|
537
543
|
|
|
538
544
|
function guessSerializerType(rawInit) {
|
|
539
|
-
return rawInit == null || rawInit === undefined ?
|
|
545
|
+
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';
|
|
540
546
|
}
|
|
541
547
|
|
|
542
548
|
const StorageSerializers = {
|
|
543
549
|
boolean: {
|
|
544
|
-
read: (v)=>v ===
|
|
550
|
+
read: (v)=>v === 'true',
|
|
545
551
|
write: (v)=>String(v)
|
|
546
552
|
},
|
|
547
553
|
object: {
|
|
@@ -573,7 +579,7 @@ const StorageSerializers = {
|
|
|
573
579
|
write: (v)=>v.toISOString()
|
|
574
580
|
}
|
|
575
581
|
};
|
|
576
|
-
|
|
582
|
+
function getInitialState$2(key, defaultValue, storage, serializer, onError) {
|
|
577
583
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
578
584
|
if (defaultValue !== undefined) {
|
|
579
585
|
return defaultValue;
|
|
@@ -590,11 +596,11 @@ const getInitialState$2 = (key, defaultValue, storage, serializer, onError)=>{
|
|
|
590
596
|
}
|
|
591
597
|
}
|
|
592
598
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
593
|
-
if (process.env.NODE_ENV !==
|
|
594
|
-
console.warn(
|
|
599
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
600
|
+
console.warn('`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
595
601
|
}
|
|
596
602
|
return null;
|
|
597
|
-
}
|
|
603
|
+
}
|
|
598
604
|
function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
|
|
599
605
|
let storage;
|
|
600
606
|
const { onError = defaultOnError, effectStorageValue } = options;
|
|
@@ -651,9 +657,9 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
|
|
|
651
657
|
}
|
|
652
658
|
|
|
653
659
|
const useDarkMode = (options)=>{
|
|
654
|
-
const { selector =
|
|
660
|
+
const { selector = 'html', attribute = 'class', classNameDark = '', classNameLight = '', storageKey = 'reactuses-color-scheme', storage = ()=>isBrowser ? localStorage : undefined, defaultValue = false } = options;
|
|
655
661
|
const value = ()=>{
|
|
656
|
-
return window.matchMedia(
|
|
662
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
657
663
|
};
|
|
658
664
|
const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
|
|
659
665
|
effectStorageValue: value
|
|
@@ -664,7 +670,7 @@ const useDarkMode = (options)=>{
|
|
|
664
670
|
if (!element) {
|
|
665
671
|
return;
|
|
666
672
|
}
|
|
667
|
-
if (attribute ===
|
|
673
|
+
if (attribute === 'class') {
|
|
668
674
|
dark && classNameDark && element.classList.add(classNameDark);
|
|
669
675
|
!dark && classNameLight && element.classList.add(classNameLight);
|
|
670
676
|
} else {
|
|
@@ -675,7 +681,7 @@ const useDarkMode = (options)=>{
|
|
|
675
681
|
if (!element) {
|
|
676
682
|
return;
|
|
677
683
|
}
|
|
678
|
-
if (attribute ===
|
|
684
|
+
if (attribute === 'class') {
|
|
679
685
|
dark && classNameDark && element.classList.remove(classNameDark);
|
|
680
686
|
!dark && classNameLight && element.classList.remove(classNameLight);
|
|
681
687
|
} else {
|
|
@@ -697,7 +703,7 @@ const useDarkMode = (options)=>{
|
|
|
697
703
|
];
|
|
698
704
|
};
|
|
699
705
|
|
|
700
|
-
|
|
706
|
+
function useUnmount(fn) {
|
|
701
707
|
if (isDev) {
|
|
702
708
|
if (!isFunction(fn)) {
|
|
703
709
|
console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
|
|
@@ -709,7 +715,7 @@ const useUnmount = (fn)=>{
|
|
|
709
715
|
}, [
|
|
710
716
|
fnRef
|
|
711
717
|
]);
|
|
712
|
-
}
|
|
718
|
+
}
|
|
713
719
|
|
|
714
720
|
const useDebounceFn = (fn, wait, options)=>{
|
|
715
721
|
if (isDev) {
|
|
@@ -749,7 +755,7 @@ const useDebounce = (value, wait, options)=>{
|
|
|
749
755
|
return debounced;
|
|
750
756
|
};
|
|
751
757
|
|
|
752
|
-
|
|
758
|
+
function getInitialState$1(defaultValue) {
|
|
753
759
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
754
760
|
if (defaultValue !== undefined) {
|
|
755
761
|
return defaultValue;
|
|
@@ -757,28 +763,28 @@ const getInitialState$1 = (defaultValue)=>{
|
|
|
757
763
|
if (isBrowser) {
|
|
758
764
|
return document.visibilityState;
|
|
759
765
|
}
|
|
760
|
-
if (process.env.NODE_ENV !==
|
|
761
|
-
console.warn(
|
|
766
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
767
|
+
console.warn('`useDocumentVisibility` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
|
|
762
768
|
}
|
|
763
|
-
return
|
|
764
|
-
}
|
|
765
|
-
|
|
769
|
+
return 'visible';
|
|
770
|
+
}
|
|
771
|
+
function useDocumentVisibility(defaultValue) {
|
|
766
772
|
const [visible, setVisible] = React.useState(getInitialState$1(defaultValue));
|
|
767
|
-
useEventListener(
|
|
773
|
+
useEventListener('visibilitychange', ()=>{
|
|
768
774
|
setVisible(document.visibilityState);
|
|
769
775
|
}, ()=>document);
|
|
770
776
|
React.useEffect(()=>{
|
|
771
777
|
setVisible(document.visibilityState);
|
|
772
778
|
}, []);
|
|
773
779
|
return visible;
|
|
774
|
-
}
|
|
780
|
+
}
|
|
775
781
|
|
|
776
782
|
const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubleClick = ()=>{} })=>{
|
|
777
783
|
const handle = React.useCallback((onSingleClick, onDoubleClick)=>{
|
|
778
784
|
let count = 0;
|
|
779
785
|
return (e)=>{
|
|
780
786
|
// prevent ios double click slide
|
|
781
|
-
if (e.type ===
|
|
787
|
+
if (e.type === 'touchend') {
|
|
782
788
|
e.stopPropagation();
|
|
783
789
|
e.preventDefault();
|
|
784
790
|
}
|
|
@@ -797,24 +803,24 @@ const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubl
|
|
|
797
803
|
]);
|
|
798
804
|
const handleClick = handle(onSingleClick, onDoubleClick);
|
|
799
805
|
const handleTouchEnd = handle(onSingleClick, onDoubleClick);
|
|
800
|
-
useEventListener(
|
|
801
|
-
useEventListener(
|
|
806
|
+
useEventListener('click', handleClick, target);
|
|
807
|
+
useEventListener('touchend', handleTouchEnd, target, {
|
|
802
808
|
passive: false
|
|
803
809
|
});
|
|
804
810
|
};
|
|
805
811
|
|
|
806
|
-
|
|
812
|
+
function isScrollX(node) {
|
|
807
813
|
if (!node) {
|
|
808
814
|
return false;
|
|
809
815
|
}
|
|
810
|
-
return getComputedStyle(node).overflowX ===
|
|
811
|
-
}
|
|
812
|
-
|
|
816
|
+
return getComputedStyle(node).overflowX === 'auto' || getComputedStyle(node).overflowX === 'scroll';
|
|
817
|
+
}
|
|
818
|
+
function isScrollY(node) {
|
|
813
819
|
if (!node) {
|
|
814
820
|
return false;
|
|
815
821
|
}
|
|
816
|
-
return getComputedStyle(node).overflowY ===
|
|
817
|
-
}
|
|
822
|
+
return getComputedStyle(node).overflowY === 'auto' || getComputedStyle(node).overflowY === 'scroll';
|
|
823
|
+
}
|
|
818
824
|
const useDraggable = (target, options = {})=>{
|
|
819
825
|
const { draggingElement, containerElement } = options;
|
|
820
826
|
var _options_handle;
|
|
@@ -907,9 +913,9 @@ const useDraggable = (target, options = {})=>{
|
|
|
907
913
|
options.onEnd == null ? void 0 : options.onEnd.call(options, position, e);
|
|
908
914
|
handleEvent(e);
|
|
909
915
|
};
|
|
910
|
-
useEventListener(
|
|
911
|
-
useEventListener(
|
|
912
|
-
useEventListener(
|
|
916
|
+
useEventListener('pointerdown', start, draggingHandle, true);
|
|
917
|
+
useEventListener('pointermove', move, draggingElement, true);
|
|
918
|
+
useEventListener('pointerup', end, draggingElement, true);
|
|
913
919
|
return [
|
|
914
920
|
position.x,
|
|
915
921
|
position.y,
|
|
@@ -921,22 +927,22 @@ const useDraggable = (target, options = {})=>{
|
|
|
921
927
|
const useDropZone = (target, onDrop)=>{
|
|
922
928
|
const [over, setOver] = React.useState(false);
|
|
923
929
|
const counter = React.useRef(0);
|
|
924
|
-
useEventListener(
|
|
930
|
+
useEventListener('dragenter', (event)=>{
|
|
925
931
|
event.preventDefault();
|
|
926
932
|
counter.current += 1;
|
|
927
933
|
setOver(true);
|
|
928
934
|
}, target);
|
|
929
|
-
useEventListener(
|
|
935
|
+
useEventListener('dragover', (event)=>{
|
|
930
936
|
event.preventDefault();
|
|
931
937
|
}, target);
|
|
932
|
-
useEventListener(
|
|
938
|
+
useEventListener('dragleave', (event)=>{
|
|
933
939
|
event.preventDefault();
|
|
934
940
|
counter.current -= 1;
|
|
935
941
|
if (counter.current === 0) {
|
|
936
942
|
setOver(false);
|
|
937
943
|
}
|
|
938
944
|
}, target);
|
|
939
|
-
useEventListener(
|
|
945
|
+
useEventListener('drop', (event)=>{
|
|
940
946
|
var _event_dataTransfer;
|
|
941
947
|
event.preventDefault();
|
|
942
948
|
counter.current = 0;
|
|
@@ -1019,21 +1025,21 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
|
|
|
1019
1025
|
]);
|
|
1020
1026
|
React.useEffect(()=>{
|
|
1021
1027
|
if (windowScroll) {
|
|
1022
|
-
window.addEventListener(
|
|
1028
|
+
window.addEventListener('scroll', update, {
|
|
1023
1029
|
passive: true
|
|
1024
1030
|
});
|
|
1025
1031
|
}
|
|
1026
1032
|
if (windowResize) {
|
|
1027
|
-
window.addEventListener(
|
|
1033
|
+
window.addEventListener('resize', update, {
|
|
1028
1034
|
passive: true
|
|
1029
1035
|
});
|
|
1030
1036
|
}
|
|
1031
1037
|
return ()=>{
|
|
1032
1038
|
if (windowScroll) {
|
|
1033
|
-
window.removeEventListener(
|
|
1039
|
+
window.removeEventListener('scroll', update);
|
|
1034
1040
|
}
|
|
1035
1041
|
if (windowResize) {
|
|
1036
|
-
window.removeEventListener(
|
|
1042
|
+
window.removeEventListener('resize', update);
|
|
1037
1043
|
}
|
|
1038
1044
|
};
|
|
1039
1045
|
}, [
|
|
@@ -1055,11 +1061,11 @@ const useElementBounding = (target, options = defaultOptions$1)=>{
|
|
|
1055
1061
|
};
|
|
1056
1062
|
|
|
1057
1063
|
const useElementSize = (target, options = defaultOptions$1)=>{
|
|
1058
|
-
const { box =
|
|
1064
|
+
const { box = 'content-box' } = options;
|
|
1059
1065
|
const [width, setWidth] = React.useState(0);
|
|
1060
1066
|
const [height, setHeight] = React.useState(0);
|
|
1061
1067
|
useResizeObserver(target, ([entry])=>{
|
|
1062
|
-
const boxSize = box ===
|
|
1068
|
+
const boxSize = box === 'border-box' ? entry.borderBoxSize : box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
|
|
1063
1069
|
if (boxSize) {
|
|
1064
1070
|
setWidth(boxSize.reduce((acc, { inlineSize })=>acc + inlineSize, 0));
|
|
1065
1071
|
setHeight(boxSize.reduce((acc, { blockSize })=>acc + blockSize, 0));
|
|
@@ -1110,7 +1116,7 @@ const useElementVisibility = (target, options = defaultOptions$1)=>{
|
|
|
1110
1116
|
];
|
|
1111
1117
|
};
|
|
1112
1118
|
|
|
1113
|
-
|
|
1119
|
+
function useEventEmitter() {
|
|
1114
1120
|
const listeners = React.useRef([]);
|
|
1115
1121
|
const _disposed = React.useRef(false);
|
|
1116
1122
|
const _event = React.useRef((listener)=>{
|
|
@@ -1149,16 +1155,16 @@ const useEventEmitter = ()=>{
|
|
|
1149
1155
|
fire,
|
|
1150
1156
|
dispose
|
|
1151
1157
|
];
|
|
1152
|
-
}
|
|
1158
|
+
}
|
|
1153
1159
|
|
|
1154
|
-
|
|
1160
|
+
function useSupported(callback, sync = false) {
|
|
1155
1161
|
const [supported, setSupported] = React.useState(false);
|
|
1156
1162
|
const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
|
|
1157
1163
|
effect(()=>{
|
|
1158
1164
|
setSupported(Boolean(callback()));
|
|
1159
1165
|
}, []);
|
|
1160
1166
|
return supported;
|
|
1161
|
-
}
|
|
1167
|
+
}
|
|
1162
1168
|
|
|
1163
1169
|
function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
|
|
1164
1170
|
try {
|
|
@@ -1190,11 +1196,11 @@ function _async_to_generator$5(fn) {
|
|
|
1190
1196
|
};
|
|
1191
1197
|
}
|
|
1192
1198
|
const useEyeDropper = ()=>{
|
|
1193
|
-
const isSupported = useSupported(()=>typeof window !==
|
|
1199
|
+
const isSupported = useSupported(()=>typeof window !== 'undefined' && 'EyeDropper' in window, true);
|
|
1194
1200
|
const open = React.useCallback(/*#__PURE__*/ _async_to_generator$5(function*(options = {}) {
|
|
1195
1201
|
if (!isSupported) {
|
|
1196
1202
|
return {
|
|
1197
|
-
sRGBHex:
|
|
1203
|
+
sRGBHex: ''
|
|
1198
1204
|
};
|
|
1199
1205
|
}
|
|
1200
1206
|
const eyeDropper = new window.EyeDropper();
|
|
@@ -1208,23 +1214,23 @@ const useEyeDropper = ()=>{
|
|
|
1208
1214
|
];
|
|
1209
1215
|
};
|
|
1210
1216
|
|
|
1211
|
-
|
|
1217
|
+
function useFavicon(href, baseUrl = '', rel = 'icon') {
|
|
1212
1218
|
React.useEffect(()=>{
|
|
1213
1219
|
const url = `${baseUrl}${href}`;
|
|
1214
1220
|
const element = document.head.querySelectorAll(`link[rel*="${rel}"]`);
|
|
1215
1221
|
element.forEach((el)=>el.href = url);
|
|
1216
1222
|
if (element.length === 0) {
|
|
1217
|
-
const link = document.createElement(
|
|
1223
|
+
const link = document.createElement('link');
|
|
1218
1224
|
link.rel = rel;
|
|
1219
1225
|
link.href = url;
|
|
1220
|
-
document.getElementsByTagName(
|
|
1226
|
+
document.getElementsByTagName('head')[0].appendChild(link);
|
|
1221
1227
|
}
|
|
1222
1228
|
}, [
|
|
1223
1229
|
baseUrl,
|
|
1224
1230
|
href,
|
|
1225
1231
|
rel
|
|
1226
1232
|
]);
|
|
1227
|
-
}
|
|
1233
|
+
}
|
|
1228
1234
|
|
|
1229
1235
|
function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
|
|
1230
1236
|
try {
|
|
@@ -1271,7 +1277,7 @@ function _extends$2() {
|
|
|
1271
1277
|
}
|
|
1272
1278
|
const DEFAULT_OPTIONS = {
|
|
1273
1279
|
multiple: true,
|
|
1274
|
-
accept:
|
|
1280
|
+
accept: '*'
|
|
1275
1281
|
};
|
|
1276
1282
|
const useFileDialog = (options = defaultOptions$1)=>{
|
|
1277
1283
|
const [files, setFiles] = React.useState(null);
|
|
@@ -1279,11 +1285,11 @@ const useFileDialog = (options = defaultOptions$1)=>{
|
|
|
1279
1285
|
const fileOpenPromiseRef = React.useRef(null);
|
|
1280
1286
|
const resolveFileOpenPromiseRef = React.useRef();
|
|
1281
1287
|
const initFn = React.useCallback(()=>{
|
|
1282
|
-
if (typeof document ===
|
|
1288
|
+
if (typeof document === 'undefined') {
|
|
1283
1289
|
return undefined;
|
|
1284
1290
|
}
|
|
1285
|
-
const input = document.createElement(
|
|
1286
|
-
input.type =
|
|
1291
|
+
const input = document.createElement('input');
|
|
1292
|
+
input.type = 'file';
|
|
1287
1293
|
input.onchange = (event)=>{
|
|
1288
1294
|
const result = event.target;
|
|
1289
1295
|
setFiles(result.files);
|
|
@@ -1310,7 +1316,7 @@ const useFileDialog = (options = defaultOptions$1)=>{
|
|
|
1310
1316
|
setFiles(null);
|
|
1311
1317
|
resolveFileOpenPromiseRef.current == null ? void 0 : resolveFileOpenPromiseRef.current.call(resolveFileOpenPromiseRef, null);
|
|
1312
1318
|
if (inputRef.current) {
|
|
1313
|
-
inputRef.current.value =
|
|
1319
|
+
inputRef.current.value = '';
|
|
1314
1320
|
}
|
|
1315
1321
|
};
|
|
1316
1322
|
return [
|
|
@@ -1343,8 +1349,8 @@ const useMount = (fn)=>{
|
|
|
1343
1349
|
|
|
1344
1350
|
const useFocus = (target, initialValue = false)=>{
|
|
1345
1351
|
const [focus, innerSetFocus] = React.useState(initialValue);
|
|
1346
|
-
useEventListener(
|
|
1347
|
-
useEventListener(
|
|
1352
|
+
useEventListener('focus', ()=>innerSetFocus(true), target);
|
|
1353
|
+
useEventListener('blur', ()=>innerSetFocus(false), target);
|
|
1348
1354
|
const setFocus = (value)=>{
|
|
1349
1355
|
const element = getTargetElement(target);
|
|
1350
1356
|
if (!element) {
|
|
@@ -1408,7 +1414,7 @@ const useRafFn = (callback, initiallyActive = true)=>{
|
|
|
1408
1414
|
return result;
|
|
1409
1415
|
};
|
|
1410
1416
|
|
|
1411
|
-
|
|
1417
|
+
function useFps(options = defaultOptions$1) {
|
|
1412
1418
|
const [fps, setFps] = React.useState(0);
|
|
1413
1419
|
var _options_every;
|
|
1414
1420
|
const every = (_options_every = options.every) != null ? _options_every : 10;
|
|
@@ -1425,7 +1431,7 @@ const useFps = (options = defaultOptions$1)=>{
|
|
|
1425
1431
|
}
|
|
1426
1432
|
});
|
|
1427
1433
|
return fps;
|
|
1428
|
-
}
|
|
1434
|
+
}
|
|
1429
1435
|
|
|
1430
1436
|
const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
1431
1437
|
const { onExit, onEnter } = options;
|
|
@@ -1436,7 +1442,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1436
1442
|
if (isFullscreen) {
|
|
1437
1443
|
onEnter == null ? void 0 : onEnter();
|
|
1438
1444
|
} else {
|
|
1439
|
-
screenfull__default.default.off(
|
|
1445
|
+
screenfull__default.default.off('change', onChange);
|
|
1440
1446
|
onExit == null ? void 0 : onExit();
|
|
1441
1447
|
}
|
|
1442
1448
|
setState(isFullscreen);
|
|
@@ -1450,7 +1456,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1450
1456
|
if (screenfull__default.default.isEnabled) {
|
|
1451
1457
|
try {
|
|
1452
1458
|
screenfull__default.default.request(el);
|
|
1453
|
-
screenfull__default.default.on(
|
|
1459
|
+
screenfull__default.default.on('change', onChange);
|
|
1454
1460
|
} catch (error) {
|
|
1455
1461
|
console.error(error);
|
|
1456
1462
|
}
|
|
@@ -1470,7 +1476,7 @@ const useFullscreen = (target, options = defaultOptions$1)=>{
|
|
|
1470
1476
|
};
|
|
1471
1477
|
useUnmount(()=>{
|
|
1472
1478
|
if (screenfull__default.default.isEnabled) {
|
|
1473
|
-
screenfull__default.default.off(
|
|
1479
|
+
screenfull__default.default.off('change', onChange);
|
|
1474
1480
|
}
|
|
1475
1481
|
});
|
|
1476
1482
|
return [
|
|
@@ -1538,18 +1544,18 @@ const useHover = (target)=>{
|
|
|
1538
1544
|
const [hovered, setHovered] = React.useState(false);
|
|
1539
1545
|
const onMouseEnter = React.useCallback(()=>setHovered(true), []);
|
|
1540
1546
|
const onMouseLeave = React.useCallback(()=>setHovered(false), []);
|
|
1541
|
-
useEventListener(
|
|
1542
|
-
useEventListener(
|
|
1547
|
+
useEventListener('mouseenter', onMouseEnter, target);
|
|
1548
|
+
useEventListener('mouseleave', onMouseLeave, target);
|
|
1543
1549
|
return hovered;
|
|
1544
1550
|
};
|
|
1545
1551
|
|
|
1546
1552
|
const defaultEvents$1 = [
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
+
'mousemove',
|
|
1554
|
+
'mousedown',
|
|
1555
|
+
'resize',
|
|
1556
|
+
'keydown',
|
|
1557
|
+
'touchstart',
|
|
1558
|
+
'wheel'
|
|
1553
1559
|
];
|
|
1554
1560
|
const oneMinute = 60e3;
|
|
1555
1561
|
const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)=>{
|
|
@@ -1579,14 +1585,14 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1579
1585
|
for(let i = 0; i < events.length; i++){
|
|
1580
1586
|
on(window, events[i], onEvent);
|
|
1581
1587
|
}
|
|
1582
|
-
on(document,
|
|
1588
|
+
on(document, 'visibilitychange', onVisibility);
|
|
1583
1589
|
timeout = setTimeout(()=>set(true), ms);
|
|
1584
1590
|
return ()=>{
|
|
1585
1591
|
mounted = false;
|
|
1586
1592
|
for(let i = 0; i < events.length; i++){
|
|
1587
1593
|
off(window, events[i], onEvent);
|
|
1588
1594
|
}
|
|
1589
|
-
off(document,
|
|
1595
|
+
off(document, 'visibilitychange', onVisibility);
|
|
1590
1596
|
};
|
|
1591
1597
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1592
1598
|
}, [
|
|
@@ -1596,7 +1602,7 @@ const useIdle = (ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
1596
1602
|
return state;
|
|
1597
1603
|
};
|
|
1598
1604
|
|
|
1599
|
-
|
|
1605
|
+
function useThrottleFn(fn, wait, options) {
|
|
1600
1606
|
if (isDev) {
|
|
1601
1607
|
if (!isFunction(fn)) {
|
|
1602
1608
|
console.error(`useThrottleFn expected parameter is a function, got ${typeof fn}`);
|
|
@@ -1618,7 +1624,7 @@ const useThrottleFn = (fn, wait, options)=>{
|
|
|
1618
1624
|
cancel: throttled.cancel,
|
|
1619
1625
|
flush: throttled.flush
|
|
1620
1626
|
};
|
|
1621
|
-
}
|
|
1627
|
+
}
|
|
1622
1628
|
|
|
1623
1629
|
/**
|
|
1624
1630
|
* We have to check if the scroll amount is close enough to some threshold in order to
|
|
@@ -1687,7 +1693,7 @@ const useScroll = (target, options = defaultOptions$1)=>{
|
|
|
1687
1693
|
onScroll(e);
|
|
1688
1694
|
});
|
|
1689
1695
|
const { run: throttleOnScroll } = useThrottleFn(onScrollHandler, throttle);
|
|
1690
|
-
useEventListener(
|
|
1696
|
+
useEventListener('scroll', throttle ? throttleOnScroll : onScrollHandler, target, eventListenerOptions);
|
|
1691
1697
|
return [
|
|
1692
1698
|
x,
|
|
1693
1699
|
y,
|
|
@@ -1754,7 +1760,7 @@ function _extends$1() {
|
|
|
1754
1760
|
const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
1755
1761
|
const savedLoadMore = useLatest(onLoadMore);
|
|
1756
1762
|
var _options_direction;
|
|
1757
|
-
const direction = (_options_direction = options.direction) != null ? _options_direction :
|
|
1763
|
+
const direction = (_options_direction = options.direction) != null ? _options_direction : 'bottom';
|
|
1758
1764
|
var _options_distance;
|
|
1759
1765
|
const state = useScroll(target, _extends$1({}, options, {
|
|
1760
1766
|
offset: _extends$1({
|
|
@@ -1787,10 +1793,10 @@ const useInfiniteScroll = (target, onLoadMore, options = defaultOptions$1)=>{
|
|
|
1787
1793
|
};
|
|
1788
1794
|
|
|
1789
1795
|
const defaultEvents = [
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1796
|
+
'mousedown',
|
|
1797
|
+
'mouseup',
|
|
1798
|
+
'keydown',
|
|
1799
|
+
'keyup'
|
|
1794
1800
|
];
|
|
1795
1801
|
const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
1796
1802
|
const { events = defaultEvents, initial = false } = options;
|
|
@@ -1798,7 +1804,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1798
1804
|
useMount(()=>{
|
|
1799
1805
|
events.forEach((listenEvent)=>{
|
|
1800
1806
|
on(document, listenEvent, (evt)=>{
|
|
1801
|
-
if (typeof evt.getModifierState ===
|
|
1807
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1802
1808
|
setState(evt.getModifierState(modifier));
|
|
1803
1809
|
}
|
|
1804
1810
|
});
|
|
@@ -1806,7 +1812,7 @@ const useKeyModifier = (modifier, options = defaultOptions$1)=>{
|
|
|
1806
1812
|
return ()=>{
|
|
1807
1813
|
events.forEach((listenerEvent)=>{
|
|
1808
1814
|
off(document, listenerEvent, (evt)=>{
|
|
1809
|
-
if (typeof evt.getModifierState ===
|
|
1815
|
+
if (typeof evt.getModifierState === 'function') {
|
|
1810
1816
|
setState(evt.getModifierState(modifier));
|
|
1811
1817
|
}
|
|
1812
1818
|
});
|
|
@@ -1821,11 +1827,11 @@ function useLocalStorage(key, defaultValue, options = defaultOptions$1) {
|
|
|
1821
1827
|
}
|
|
1822
1828
|
|
|
1823
1829
|
function subscribe$1(callback) {
|
|
1824
|
-
window.addEventListener(
|
|
1825
|
-
window.addEventListener(
|
|
1830
|
+
window.addEventListener('popstate', callback);
|
|
1831
|
+
window.addEventListener('hashchange', callback);
|
|
1826
1832
|
return ()=>{
|
|
1827
|
-
window.removeEventListener(
|
|
1828
|
-
window.removeEventListener(
|
|
1833
|
+
window.removeEventListener('popstate', callback);
|
|
1834
|
+
window.removeEventListener('hashchange', callback);
|
|
1829
1835
|
};
|
|
1830
1836
|
}
|
|
1831
1837
|
const useLocationSelector = (selector, /**
|
|
@@ -1835,24 +1841,24 @@ const useLocationSelector = (selector, /**
|
|
|
1835
1841
|
return index_js.useSyncExternalStore(subscribe$1, ()=>selector(location), ()=>fallback);
|
|
1836
1842
|
};
|
|
1837
1843
|
|
|
1838
|
-
|
|
1839
|
-
return
|
|
1840
|
-
}
|
|
1841
|
-
|
|
1844
|
+
function isTouchEvent(ev) {
|
|
1845
|
+
return 'touches' in ev;
|
|
1846
|
+
}
|
|
1847
|
+
function preventDefault$1(ev) {
|
|
1842
1848
|
if (!isTouchEvent(ev)) {
|
|
1843
1849
|
return;
|
|
1844
1850
|
}
|
|
1845
1851
|
if (ev.touches.length < 2 && ev.preventDefault) {
|
|
1846
1852
|
ev.preventDefault();
|
|
1847
1853
|
}
|
|
1848
|
-
}
|
|
1854
|
+
}
|
|
1849
1855
|
const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defaultOptions$1)=>{
|
|
1850
1856
|
const timeout = React.useRef();
|
|
1851
1857
|
const target = React.useRef();
|
|
1852
1858
|
const start = React.useCallback((event)=>{
|
|
1853
1859
|
// prevent ghost click on mobile devices
|
|
1854
1860
|
if (isPreventDefault && event.target) {
|
|
1855
|
-
on(event.target,
|
|
1861
|
+
on(event.target, 'touchend', preventDefault$1, {
|
|
1856
1862
|
passive: false
|
|
1857
1863
|
});
|
|
1858
1864
|
target.current = event.target;
|
|
@@ -1867,7 +1873,7 @@ const useLongPress = (callback, { isPreventDefault = true, delay = 300 } = defau
|
|
|
1867
1873
|
// clearTimeout and removeEventListener
|
|
1868
1874
|
timeout.current && clearTimeout(timeout.current);
|
|
1869
1875
|
if (isPreventDefault && target.current) {
|
|
1870
|
-
off(target.current,
|
|
1876
|
+
off(target.current, 'touchend', preventDefault$1);
|
|
1871
1877
|
}
|
|
1872
1878
|
}, [
|
|
1873
1879
|
isPreventDefault
|
|
@@ -1981,12 +1987,12 @@ const useMediaDevices = (options = {})=>{
|
|
|
1981
1987
|
let state;
|
|
1982
1988
|
try {
|
|
1983
1989
|
state = (yield navigator.permissions.query({
|
|
1984
|
-
name:
|
|
1990
|
+
name: 'camera'
|
|
1985
1991
|
})).state;
|
|
1986
1992
|
} catch (error) {
|
|
1987
|
-
state =
|
|
1993
|
+
state = 'prompt';
|
|
1988
1994
|
}
|
|
1989
|
-
if (state !==
|
|
1995
|
+
if (state !== 'granted') {
|
|
1990
1996
|
stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
|
|
1991
1997
|
onChange();
|
|
1992
1998
|
permissionGranted.current = true;
|
|
@@ -2006,10 +2012,10 @@ const useMediaDevices = (options = {})=>{
|
|
|
2006
2012
|
if (requestPermissions) {
|
|
2007
2013
|
ensurePermissions();
|
|
2008
2014
|
}
|
|
2009
|
-
on(navigator.mediaDevices,
|
|
2015
|
+
on(navigator.mediaDevices, 'devicechange', onChange);
|
|
2010
2016
|
onChange();
|
|
2011
2017
|
return ()=>{
|
|
2012
|
-
off(navigator.mediaDevices,
|
|
2018
|
+
off(navigator.mediaDevices, 'devicechange', onChange);
|
|
2013
2019
|
};
|
|
2014
2020
|
}, [
|
|
2015
2021
|
onChange,
|
|
@@ -2023,7 +2029,7 @@ const useMediaDevices = (options = {})=>{
|
|
|
2023
2029
|
];
|
|
2024
2030
|
};
|
|
2025
2031
|
|
|
2026
|
-
|
|
2032
|
+
function getInitialState(query, defaultState) {
|
|
2027
2033
|
// Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
|
|
2028
2034
|
if (defaultState !== undefined) {
|
|
2029
2035
|
return defaultState;
|
|
@@ -2032,11 +2038,11 @@ const getInitialState = (query, defaultState)=>{
|
|
|
2032
2038
|
return window.matchMedia(query).matches;
|
|
2033
2039
|
}
|
|
2034
2040
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
2035
|
-
if (process.env.NODE_ENV !==
|
|
2036
|
-
console.warn(
|
|
2041
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
2042
|
+
console.warn('`useMediaQuery` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
|
|
2037
2043
|
}
|
|
2038
2044
|
return false;
|
|
2039
|
-
}
|
|
2045
|
+
}
|
|
2040
2046
|
const useMediaQuery = (query, defaultState)=>{
|
|
2041
2047
|
const [state, setState] = React.useState(getInitialState(query, defaultState));
|
|
2042
2048
|
React.useEffect(()=>{
|
|
@@ -2048,16 +2054,16 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2048
2054
|
}
|
|
2049
2055
|
setState(!!mql.matches);
|
|
2050
2056
|
};
|
|
2051
|
-
if (
|
|
2052
|
-
mql.addEventListener(
|
|
2057
|
+
if ('addEventListener' in mql) {
|
|
2058
|
+
mql.addEventListener('change', onChange);
|
|
2053
2059
|
} else {
|
|
2054
2060
|
mql.addListener == null ? void 0 : mql.addListener.call(mql, onChange);
|
|
2055
2061
|
}
|
|
2056
2062
|
setState(mql.matches);
|
|
2057
2063
|
return ()=>{
|
|
2058
2064
|
mounted = false;
|
|
2059
|
-
if (
|
|
2060
|
-
mql.removeEventListener(
|
|
2065
|
+
if ('removeEventListener' in mql) {
|
|
2066
|
+
mql.removeEventListener('change', onChange);
|
|
2061
2067
|
} else {
|
|
2062
2068
|
mql.removeListener == null ? void 0 : mql.removeListener.call(mql, onChange);
|
|
2063
2069
|
}
|
|
@@ -2068,7 +2074,7 @@ const useMediaQuery = (query, defaultState)=>{
|
|
|
2068
2074
|
return state;
|
|
2069
2075
|
};
|
|
2070
2076
|
|
|
2071
|
-
|
|
2077
|
+
function useRafState(initialState) {
|
|
2072
2078
|
const frame = React.useRef(0);
|
|
2073
2079
|
const [state, setState] = React.useState(initialState);
|
|
2074
2080
|
const setRafState = React.useCallback((value)=>{
|
|
@@ -2084,7 +2090,7 @@ const useRafState = (initialState)=>{
|
|
|
2084
2090
|
state,
|
|
2085
2091
|
setRafState
|
|
2086
2092
|
];
|
|
2087
|
-
}
|
|
2093
|
+
}
|
|
2088
2094
|
|
|
2089
2095
|
const initState = {
|
|
2090
2096
|
screenX: Number.NaN,
|
|
@@ -2102,7 +2108,7 @@ const initState = {
|
|
|
2102
2108
|
};
|
|
2103
2109
|
const useMouse = (target)=>{
|
|
2104
2110
|
const [state, setState] = useRafState(initState);
|
|
2105
|
-
useEventListener(
|
|
2111
|
+
useEventListener('mousemove', (event)=>{
|
|
2106
2112
|
const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
|
|
2107
2113
|
const newState = {
|
|
2108
2114
|
screenX,
|
|
@@ -2149,30 +2155,30 @@ const useMousePressed = (target, options = defaultOptions$1)=>{
|
|
|
2149
2155
|
setPressed(false);
|
|
2150
2156
|
setSourceType(null);
|
|
2151
2157
|
}, []);
|
|
2152
|
-
useEventListener(
|
|
2153
|
-
useEventListener(
|
|
2154
|
-
useEventListener(
|
|
2158
|
+
useEventListener('mousedown', onPressed('mouse'), target, listenerOptions$2);
|
|
2159
|
+
useEventListener('mouseleave', onReleased, ()=>window, listenerOptions$2);
|
|
2160
|
+
useEventListener('mouseup', onReleased, ()=>window, listenerOptions$2);
|
|
2155
2161
|
React.useEffect(()=>{
|
|
2156
2162
|
if (drag) {
|
|
2157
|
-
element == null ? void 0 : element.addEventListener(
|
|
2158
|
-
element == null ? void 0 : element.addEventListener(
|
|
2159
|
-
element == null ? void 0 : element.addEventListener(
|
|
2163
|
+
element == null ? void 0 : element.addEventListener('dragstart', onPressed('mouse'), listenerOptions$2);
|
|
2164
|
+
element == null ? void 0 : element.addEventListener('drop', onReleased, listenerOptions$2);
|
|
2165
|
+
element == null ? void 0 : element.addEventListener('dragend', onReleased, listenerOptions$2);
|
|
2160
2166
|
}
|
|
2161
2167
|
if (touch) {
|
|
2162
|
-
element == null ? void 0 : element.addEventListener(
|
|
2163
|
-
element == null ? void 0 : element.addEventListener(
|
|
2164
|
-
element == null ? void 0 : element.addEventListener(
|
|
2168
|
+
element == null ? void 0 : element.addEventListener('touchstart', onPressed('touch'), listenerOptions$2);
|
|
2169
|
+
element == null ? void 0 : element.addEventListener('touchend', onReleased, listenerOptions$2);
|
|
2170
|
+
element == null ? void 0 : element.addEventListener('touchcancel', onReleased, listenerOptions$2);
|
|
2165
2171
|
}
|
|
2166
2172
|
return ()=>{
|
|
2167
2173
|
if (drag) {
|
|
2168
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2169
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2170
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2174
|
+
element == null ? void 0 : element.removeEventListener('dragstart', onPressed('mouse'));
|
|
2175
|
+
element == null ? void 0 : element.removeEventListener('drop', onReleased);
|
|
2176
|
+
element == null ? void 0 : element.removeEventListener('dragend', onReleased);
|
|
2171
2177
|
}
|
|
2172
2178
|
if (touch) {
|
|
2173
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2174
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2175
|
-
element == null ? void 0 : element.removeEventListener(
|
|
2179
|
+
element == null ? void 0 : element.removeEventListener('touchstart', onPressed('touch'));
|
|
2180
|
+
element == null ? void 0 : element.removeEventListener('touchend', onReleased);
|
|
2181
|
+
element == null ? void 0 : element.removeEventListener('touchcancel', onReleased);
|
|
2176
2182
|
}
|
|
2177
2183
|
};
|
|
2178
2184
|
}, [
|
|
@@ -2233,22 +2239,22 @@ const useNetwork = ()=>{
|
|
|
2233
2239
|
const handleStateChange = ()=>{
|
|
2234
2240
|
setState(getConnectionState);
|
|
2235
2241
|
};
|
|
2236
|
-
on(window,
|
|
2242
|
+
on(window, 'online', handleStateChange, {
|
|
2237
2243
|
passive: true
|
|
2238
2244
|
});
|
|
2239
|
-
on(window,
|
|
2245
|
+
on(window, 'offline', handleStateChange, {
|
|
2240
2246
|
passive: true
|
|
2241
2247
|
});
|
|
2242
2248
|
if (conn) {
|
|
2243
|
-
on(conn,
|
|
2249
|
+
on(conn, 'change', handleStateChange, {
|
|
2244
2250
|
passive: true
|
|
2245
2251
|
});
|
|
2246
2252
|
}
|
|
2247
2253
|
return ()=>{
|
|
2248
|
-
off(window,
|
|
2249
|
-
off(window,
|
|
2254
|
+
off(window, 'online', handleStateChange);
|
|
2255
|
+
off(window, 'offline', handleStateChange);
|
|
2250
2256
|
if (conn) {
|
|
2251
|
-
off(conn,
|
|
2257
|
+
off(conn, 'change', handleStateChange);
|
|
2252
2258
|
}
|
|
2253
2259
|
};
|
|
2254
2260
|
}, []);
|
|
@@ -2298,7 +2304,7 @@ const useOnline = ()=>{
|
|
|
2298
2304
|
|
|
2299
2305
|
const defaultState = {
|
|
2300
2306
|
angle: 0,
|
|
2301
|
-
type:
|
|
2307
|
+
type: 'landscape-primary'
|
|
2302
2308
|
};
|
|
2303
2309
|
const useOrientation = (initialState = defaultState)=>{
|
|
2304
2310
|
const [state, setState] = React.useState(initialState);
|
|
@@ -2316,25 +2322,25 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2316
2322
|
});
|
|
2317
2323
|
} else if (window.orientation !== undefined) {
|
|
2318
2324
|
setState({
|
|
2319
|
-
angle: typeof window.orientation ===
|
|
2325
|
+
angle: typeof window.orientation === 'number' ? window.orientation : 0,
|
|
2320
2326
|
type: void 0
|
|
2321
2327
|
});
|
|
2322
2328
|
}
|
|
2323
2329
|
}
|
|
2324
2330
|
};
|
|
2325
|
-
on(window,
|
|
2331
|
+
on(window, 'orientationchange', onChange);
|
|
2326
2332
|
onChange();
|
|
2327
2333
|
return ()=>{
|
|
2328
2334
|
mounted = false;
|
|
2329
|
-
off(window,
|
|
2335
|
+
off(window, 'orientationchange', onChange);
|
|
2330
2336
|
};
|
|
2331
2337
|
}, []);
|
|
2332
2338
|
const lockOrientation = (type)=>{
|
|
2333
2339
|
if (isBrowser) {
|
|
2334
2340
|
return;
|
|
2335
2341
|
}
|
|
2336
|
-
if (!(window &&
|
|
2337
|
-
return Promise.reject(new Error(
|
|
2342
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2343
|
+
return Promise.reject(new Error('Not supported'));
|
|
2338
2344
|
}
|
|
2339
2345
|
return window.screen.orientation.lock(type);
|
|
2340
2346
|
};
|
|
@@ -2342,7 +2348,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2342
2348
|
if (isBrowser) {
|
|
2343
2349
|
return;
|
|
2344
2350
|
}
|
|
2345
|
-
if (!(window &&
|
|
2351
|
+
if (!(window && 'screen' in window && 'orientation' in window.screen)) {
|
|
2346
2352
|
return;
|
|
2347
2353
|
}
|
|
2348
2354
|
return window.screen.orientation.unlock();
|
|
@@ -2354,7 +2360,7 @@ const useOrientation = (initialState = defaultState)=>{
|
|
|
2354
2360
|
];
|
|
2355
2361
|
};
|
|
2356
2362
|
|
|
2357
|
-
|
|
2363
|
+
function usePageLeave() {
|
|
2358
2364
|
const [isLeft, setIsLeft] = React.useState(false);
|
|
2359
2365
|
const handler = (event)=>{
|
|
2360
2366
|
if (!window) return;
|
|
@@ -2363,23 +2369,23 @@ const usePageLeave = ()=>{
|
|
|
2363
2369
|
const from = event.relatedTarget || event.toElement;
|
|
2364
2370
|
setIsLeft(!from);
|
|
2365
2371
|
};
|
|
2366
|
-
useEventListener(
|
|
2372
|
+
useEventListener('mouseout', handler, ()=>window, {
|
|
2367
2373
|
passive: true
|
|
2368
2374
|
});
|
|
2369
|
-
useEventListener(
|
|
2375
|
+
useEventListener('mouseleave', handler, ()=>document, {
|
|
2370
2376
|
passive: true
|
|
2371
2377
|
});
|
|
2372
|
-
useEventListener(
|
|
2378
|
+
useEventListener('mouseenter', handler, ()=>document, {
|
|
2373
2379
|
passive: true
|
|
2374
2380
|
});
|
|
2375
2381
|
return isLeft;
|
|
2376
|
-
}
|
|
2382
|
+
}
|
|
2377
2383
|
|
|
2378
2384
|
const usePermission = (permissionDesc)=>{
|
|
2379
|
-
const [state, setState] = React.useState(
|
|
2385
|
+
const [state, setState] = React.useState('');
|
|
2380
2386
|
React.useEffect(()=>{
|
|
2381
2387
|
var _navigator_permissions;
|
|
2382
|
-
const desc = typeof permissionDesc ===
|
|
2388
|
+
const desc = typeof permissionDesc === 'string' ? {
|
|
2383
2389
|
name: permissionDesc
|
|
2384
2390
|
} : permissionDesc;
|
|
2385
2391
|
let mounted = true;
|
|
@@ -2390,16 +2396,16 @@ const usePermission = (permissionDesc)=>{
|
|
|
2390
2396
|
}
|
|
2391
2397
|
setState(()=>{
|
|
2392
2398
|
var _permissionStatus_state;
|
|
2393
|
-
return (_permissionStatus_state = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _permissionStatus_state :
|
|
2399
|
+
return (_permissionStatus_state = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _permissionStatus_state : '';
|
|
2394
2400
|
});
|
|
2395
2401
|
};
|
|
2396
2402
|
(_navigator_permissions = navigator.permissions) == null ? void 0 : _navigator_permissions.query(desc).then((status)=>{
|
|
2397
2403
|
permissionStatus = status;
|
|
2398
|
-
on(permissionStatus,
|
|
2404
|
+
on(permissionStatus, 'change', onChange);
|
|
2399
2405
|
onChange();
|
|
2400
2406
|
}).catch(noop);
|
|
2401
2407
|
return ()=>{
|
|
2402
|
-
permissionStatus && off(permissionStatus,
|
|
2408
|
+
permissionStatus && off(permissionStatus, 'change', onChange);
|
|
2403
2409
|
mounted = false;
|
|
2404
2410
|
permissionStatus = null;
|
|
2405
2411
|
};
|
|
@@ -2409,56 +2415,56 @@ const usePermission = (permissionDesc)=>{
|
|
|
2409
2415
|
return state;
|
|
2410
2416
|
};
|
|
2411
2417
|
|
|
2412
|
-
const usePreferredColorScheme = (defaultState =
|
|
2413
|
-
const isLight = useMediaQuery(
|
|
2414
|
-
const isDark = useMediaQuery(
|
|
2415
|
-
return isDark ?
|
|
2418
|
+
const usePreferredColorScheme = (defaultState = 'no-preference')=>{
|
|
2419
|
+
const isLight = useMediaQuery('(prefers-color-scheme: light)', false);
|
|
2420
|
+
const isDark = useMediaQuery('(prefers-color-scheme: dark)', false);
|
|
2421
|
+
return isDark ? 'dark' : isLight ? 'light' : defaultState;
|
|
2416
2422
|
};
|
|
2417
2423
|
|
|
2418
|
-
const usePreferredContrast = (defaultState =
|
|
2419
|
-
const isMore = useMediaQuery(
|
|
2420
|
-
const isLess = useMediaQuery(
|
|
2421
|
-
const isCustom = useMediaQuery(
|
|
2422
|
-
return isMore ?
|
|
2424
|
+
const usePreferredContrast = (defaultState = 'no-preference')=>{
|
|
2425
|
+
const isMore = useMediaQuery('(prefexrs-contrast: more)', false);
|
|
2426
|
+
const isLess = useMediaQuery('(prefers-contrast: less)', false);
|
|
2427
|
+
const isCustom = useMediaQuery('(prefers-contrast: custom)', false);
|
|
2428
|
+
return isMore ? 'more' : isLess ? 'less' : isCustom ? 'custom' : defaultState;
|
|
2423
2429
|
};
|
|
2424
2430
|
|
|
2425
|
-
|
|
2426
|
-
return useMediaQuery(
|
|
2427
|
-
}
|
|
2431
|
+
function usePreferredDark(defaultState) {
|
|
2432
|
+
return useMediaQuery('(prefers-color-scheme: dark)', defaultState);
|
|
2433
|
+
}
|
|
2428
2434
|
|
|
2429
|
-
|
|
2435
|
+
function usePrevious(state) {
|
|
2430
2436
|
const ref = React.useRef();
|
|
2431
2437
|
React.useEffect(()=>{
|
|
2432
2438
|
ref.current = state;
|
|
2433
2439
|
});
|
|
2434
2440
|
return ref.current;
|
|
2435
|
-
}
|
|
2441
|
+
}
|
|
2436
2442
|
|
|
2437
|
-
|
|
2438
|
-
return useMediaQuery(
|
|
2439
|
-
}
|
|
2443
|
+
function useReducedMotion(defaultState) {
|
|
2444
|
+
return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState);
|
|
2445
|
+
}
|
|
2440
2446
|
|
|
2441
2447
|
const updateReducer = (num)=>(num + 1) % 1000000;
|
|
2442
|
-
|
|
2448
|
+
function useUpdate() {
|
|
2443
2449
|
const [, update] = React.useReducer(updateReducer, 0);
|
|
2444
2450
|
return update;
|
|
2445
|
-
}
|
|
2451
|
+
}
|
|
2446
2452
|
|
|
2447
|
-
const topVarName =
|
|
2448
|
-
const rightVarName =
|
|
2449
|
-
const bottomVarName =
|
|
2450
|
-
const leftVarName =
|
|
2453
|
+
const topVarName = '--reactuse-safe-area-top';
|
|
2454
|
+
const rightVarName = '--reactuse-safe-area-right';
|
|
2455
|
+
const bottomVarName = '--reactuse-safe-area-bottom';
|
|
2456
|
+
const leftVarName = '--reactuse-safe-area-left';
|
|
2451
2457
|
const defaultElement = ()=>document.documentElement;
|
|
2452
|
-
|
|
2453
|
-
const top = React.useRef(
|
|
2454
|
-
const right = React.useRef(
|
|
2455
|
-
const bottom = React.useRef(
|
|
2456
|
-
const left = React.useRef(
|
|
2458
|
+
function useScreenSafeArea() {
|
|
2459
|
+
const top = React.useRef('');
|
|
2460
|
+
const right = React.useRef('');
|
|
2461
|
+
const bottom = React.useRef('');
|
|
2462
|
+
const left = React.useRef('');
|
|
2457
2463
|
const forceUpdate = useUpdate();
|
|
2458
|
-
useCssVar(topVarName, defaultElement,
|
|
2459
|
-
useCssVar(rightVarName, defaultElement,
|
|
2460
|
-
useCssVar(bottomVarName, defaultElement,
|
|
2461
|
-
useCssVar(leftVarName, defaultElement,
|
|
2464
|
+
useCssVar(topVarName, defaultElement, 'env(safe-area-inset-top, 0px)');
|
|
2465
|
+
useCssVar(rightVarName, defaultElement, 'env(safe-area-inset-right, 0px)');
|
|
2466
|
+
useCssVar(bottomVarName, defaultElement, 'env(safe-area-inset-bottom, 0px)');
|
|
2467
|
+
useCssVar(leftVarName, defaultElement, 'env(safe-area-inset-left, 0px)');
|
|
2462
2468
|
const { run: update } = useDebounceFn(()=>{
|
|
2463
2469
|
top.current = getValue(topVarName);
|
|
2464
2470
|
right.current = getValue(rightVarName);
|
|
@@ -2471,7 +2477,7 @@ const useScreenSafeArea = ()=>{
|
|
|
2471
2477
|
}, [
|
|
2472
2478
|
update
|
|
2473
2479
|
]);
|
|
2474
|
-
useEventListener(
|
|
2480
|
+
useEventListener('resize', update);
|
|
2475
2481
|
return [
|
|
2476
2482
|
top.current,
|
|
2477
2483
|
right.current,
|
|
@@ -2479,16 +2485,16 @@ const useScreenSafeArea = ()=>{
|
|
|
2479
2485
|
left.current,
|
|
2480
2486
|
update
|
|
2481
2487
|
];
|
|
2482
|
-
}
|
|
2488
|
+
}
|
|
2483
2489
|
function getValue(position) {
|
|
2484
2490
|
return getComputedStyle(document.documentElement).getPropertyValue(position);
|
|
2485
2491
|
}
|
|
2486
2492
|
|
|
2487
2493
|
const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
2488
|
-
const { immediate = true, manual = false, type =
|
|
2494
|
+
const { immediate = true, manual = false, type = 'text/javascript', async = true, crossOrigin, referrerPolicy, noModule, defer, attrs = {} } = options;
|
|
2489
2495
|
const scriptTag = React.useRef(null);
|
|
2490
2496
|
const _promise = React.useRef(null);
|
|
2491
|
-
const [status, setStatus] = React.useState(src ?
|
|
2497
|
+
const [status, setStatus] = React.useState(src ? 'loading' : 'idle');
|
|
2492
2498
|
/**
|
|
2493
2499
|
* Load the script specified via `src`.
|
|
2494
2500
|
*
|
|
@@ -2507,7 +2513,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2507
2513
|
return;
|
|
2508
2514
|
}
|
|
2509
2515
|
if (!src) {
|
|
2510
|
-
setStatus(
|
|
2516
|
+
setStatus('idle');
|
|
2511
2517
|
resolve(false);
|
|
2512
2518
|
return;
|
|
2513
2519
|
}
|
|
@@ -2516,7 +2522,7 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2516
2522
|
let el = document.querySelector(`script[src="${src}"]`);
|
|
2517
2523
|
// Script tag not found, preparing the element for appending
|
|
2518
2524
|
if (!el) {
|
|
2519
|
-
el = document.createElement(
|
|
2525
|
+
el = document.createElement('script');
|
|
2520
2526
|
el.type = type;
|
|
2521
2527
|
el.async = async;
|
|
2522
2528
|
el.src = src;
|
|
@@ -2536,22 +2542,22 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2536
2542
|
Object.entries(attrs).forEach(([name, value])=>el == null ? void 0 : el.setAttribute(name, value));
|
|
2537
2543
|
// Enables shouldAppend
|
|
2538
2544
|
shouldAppend = true;
|
|
2539
|
-
} else if (el.hasAttribute(
|
|
2540
|
-
setStatus(el.getAttribute(
|
|
2545
|
+
} else if (el.hasAttribute('data-loaded')) {
|
|
2546
|
+
setStatus(el.getAttribute('data-status'));
|
|
2541
2547
|
resolveWithElement(el);
|
|
2542
2548
|
}
|
|
2543
2549
|
// Event listeners
|
|
2544
|
-
el.addEventListener(
|
|
2545
|
-
setStatus(event.type ===
|
|
2550
|
+
el.addEventListener('error', (event)=>{
|
|
2551
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2546
2552
|
return reject(event);
|
|
2547
2553
|
});
|
|
2548
|
-
el.addEventListener(
|
|
2549
|
-
setStatus(event.type ===
|
|
2554
|
+
el.addEventListener('abort', (event)=>{
|
|
2555
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2550
2556
|
return reject(event);
|
|
2551
2557
|
});
|
|
2552
|
-
el.addEventListener(
|
|
2553
|
-
setStatus(event.type ===
|
|
2554
|
-
el.setAttribute(
|
|
2558
|
+
el.addEventListener('load', (event)=>{
|
|
2559
|
+
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
2560
|
+
el.setAttribute('data-loaded', 'true');
|
|
2555
2561
|
onLoaded(el);
|
|
2556
2562
|
resolveWithElement(el);
|
|
2557
2563
|
});
|
|
@@ -2608,11 +2614,11 @@ const useScriptTag = (src, onLoaded = noop, options = defaultOptions$1)=>{
|
|
|
2608
2614
|
];
|
|
2609
2615
|
};
|
|
2610
2616
|
|
|
2611
|
-
|
|
2612
|
-
if (!parent && typeof document ===
|
|
2617
|
+
function setScrollParam({ axis, parent, distance }) {
|
|
2618
|
+
if (!parent && typeof document === 'undefined') {
|
|
2613
2619
|
return;
|
|
2614
2620
|
}
|
|
2615
|
-
const method = axis ===
|
|
2621
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2616
2622
|
if (parent) {
|
|
2617
2623
|
parent[method] = distance;
|
|
2618
2624
|
} else {
|
|
@@ -2620,16 +2626,16 @@ const setScrollParam = ({ axis, parent, distance })=>{
|
|
|
2620
2626
|
body[method] = distance;
|
|
2621
2627
|
documentElement[method] = distance;
|
|
2622
2628
|
}
|
|
2623
|
-
}
|
|
2624
|
-
|
|
2629
|
+
}
|
|
2630
|
+
function isScrollElement(axis, node) {
|
|
2625
2631
|
if (!node) {
|
|
2626
2632
|
return false;
|
|
2627
2633
|
}
|
|
2628
|
-
const AXIS = axis ===
|
|
2629
|
-
return getComputedStyle(node)[`overflow${AXIS}`] ===
|
|
2630
|
-
}
|
|
2634
|
+
const AXIS = axis === 'x' ? 'X' : 'Y';
|
|
2635
|
+
return getComputedStyle(node)[`overflow${AXIS}`] === 'auto' || getComputedStyle(node)[`overflow${AXIS}`] === 'scroll';
|
|
2636
|
+
}
|
|
2631
2637
|
const cache = new Map();
|
|
2632
|
-
|
|
2638
|
+
function getScrollParent(axis, node) {
|
|
2633
2639
|
if (!node || !node.parentElement) {
|
|
2634
2640
|
return null;
|
|
2635
2641
|
}
|
|
@@ -2644,24 +2650,26 @@ const getScrollParent = (axis, node)=>{
|
|
|
2644
2650
|
cache.set(node, parent);
|
|
2645
2651
|
}
|
|
2646
2652
|
return parent;
|
|
2647
|
-
}
|
|
2648
|
-
|
|
2649
|
-
if (!parent && typeof document ===
|
|
2653
|
+
}
|
|
2654
|
+
function getScrollStart({ axis, parent }) {
|
|
2655
|
+
if (!parent && typeof document === 'undefined') {
|
|
2650
2656
|
return 0;
|
|
2651
2657
|
}
|
|
2652
|
-
const method = axis ===
|
|
2658
|
+
const method = axis === 'y' ? 'scrollTop' : 'scrollLeft';
|
|
2653
2659
|
if (parent) {
|
|
2654
2660
|
return parent[method];
|
|
2655
2661
|
}
|
|
2656
2662
|
const { body, documentElement } = document;
|
|
2657
2663
|
// while one of it has a value the second is equal 0
|
|
2658
2664
|
return body[method] + documentElement[method];
|
|
2659
|
-
}
|
|
2665
|
+
}
|
|
2660
2666
|
|
|
2661
|
-
|
|
2667
|
+
function easeInOutQuad(t) {
|
|
2668
|
+
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
2669
|
+
}
|
|
2662
2670
|
|
|
2663
|
-
|
|
2664
|
-
if (!target || !parent && typeof document ===
|
|
2671
|
+
function getRelativePosition({ axis, target, parent, alignment, offset, isList }) {
|
|
2672
|
+
if (!target || !parent && typeof document === 'undefined') {
|
|
2665
2673
|
return 0;
|
|
2666
2674
|
}
|
|
2667
2675
|
const isCustomParent = !!parent;
|
|
@@ -2669,55 +2677,55 @@ const getRelativePosition = ({ axis, target, parent, alignment, offset, isList }
|
|
|
2669
2677
|
const parentPosition = parentElement.getBoundingClientRect();
|
|
2670
2678
|
const targetPosition = target.getBoundingClientRect();
|
|
2671
2679
|
const getDiff = (property)=>targetPosition[property] - parentPosition[property];
|
|
2672
|
-
if (axis ===
|
|
2673
|
-
const diff = getDiff(
|
|
2680
|
+
if (axis === 'y') {
|
|
2681
|
+
const diff = getDiff('top');
|
|
2674
2682
|
if (diff === 0) {
|
|
2675
2683
|
return 0;
|
|
2676
2684
|
}
|
|
2677
|
-
if (alignment ===
|
|
2685
|
+
if (alignment === 'start') {
|
|
2678
2686
|
const distance = diff - offset;
|
|
2679
2687
|
const shouldScroll = distance <= targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2680
2688
|
return shouldScroll ? distance : 0;
|
|
2681
2689
|
}
|
|
2682
2690
|
const parentHeight = isCustomParent ? parentPosition.height : window.innerHeight;
|
|
2683
|
-
if (alignment ===
|
|
2691
|
+
if (alignment === 'end') {
|
|
2684
2692
|
const distance = diff + offset - parentHeight + targetPosition.height;
|
|
2685
2693
|
const shouldScroll = distance >= -targetPosition.height * (isList ? 0 : 1) || !isList;
|
|
2686
2694
|
return shouldScroll ? distance : 0;
|
|
2687
2695
|
}
|
|
2688
|
-
if (alignment ===
|
|
2696
|
+
if (alignment === 'center') {
|
|
2689
2697
|
return diff - parentHeight / 2 + targetPosition.height / 2;
|
|
2690
2698
|
}
|
|
2691
2699
|
return 0;
|
|
2692
2700
|
}
|
|
2693
|
-
if (axis ===
|
|
2694
|
-
const diff = getDiff(
|
|
2701
|
+
if (axis === 'x') {
|
|
2702
|
+
const diff = getDiff('left');
|
|
2695
2703
|
if (diff === 0) {
|
|
2696
2704
|
return 0;
|
|
2697
2705
|
}
|
|
2698
|
-
if (alignment ===
|
|
2706
|
+
if (alignment === 'start') {
|
|
2699
2707
|
const distance = diff - offset;
|
|
2700
2708
|
const shouldScroll = distance <= targetPosition.width || !isList;
|
|
2701
2709
|
return shouldScroll ? distance : 0;
|
|
2702
2710
|
}
|
|
2703
2711
|
const parentWidth = isCustomParent ? parentPosition.width : window.innerWidth;
|
|
2704
|
-
if (alignment ===
|
|
2712
|
+
if (alignment === 'end') {
|
|
2705
2713
|
const distance = diff + offset - parentWidth + targetPosition.width;
|
|
2706
2714
|
const shouldScroll = distance >= -targetPosition.width || !isList;
|
|
2707
2715
|
return shouldScroll ? distance : 0;
|
|
2708
2716
|
}
|
|
2709
|
-
if (alignment ===
|
|
2717
|
+
if (alignment === 'center') {
|
|
2710
2718
|
return diff - parentWidth / 2 + targetPosition.width / 2;
|
|
2711
2719
|
}
|
|
2712
2720
|
return 0;
|
|
2713
2721
|
}
|
|
2714
2722
|
return 0;
|
|
2715
|
-
}
|
|
2723
|
+
}
|
|
2716
2724
|
|
|
2717
2725
|
const listenerOptions$1 = {
|
|
2718
2726
|
passive: true
|
|
2719
2727
|
};
|
|
2720
|
-
const useScrollIntoView = (targetElement, { duration = 1250, axis =
|
|
2728
|
+
const useScrollIntoView = (targetElement, { duration = 1250, axis = 'y', onScrollFinish, easing = easeInOutQuad, offset = 0, cancelable = true, isList = false } = defaultOptions$1, scrollElement)=>{
|
|
2721
2729
|
const frameID = React.useRef(0);
|
|
2722
2730
|
const startTime = React.useRef(0);
|
|
2723
2731
|
const shouldStop = React.useRef(false);
|
|
@@ -2728,7 +2736,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2728
2736
|
}
|
|
2729
2737
|
};
|
|
2730
2738
|
const element = getTargetElement(targetElement);
|
|
2731
|
-
const scrollIntoView = ({ alignment =
|
|
2739
|
+
const scrollIntoView = ({ alignment = 'start' } = {})=>{
|
|
2732
2740
|
const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
|
|
2733
2741
|
shouldStop.current = false;
|
|
2734
2742
|
if (frameID.current) {
|
|
@@ -2764,7 +2772,7 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2764
2772
|
if (!shouldStop.current && t < 1) {
|
|
2765
2773
|
frameID.current = requestAnimationFrame(animateScroll);
|
|
2766
2774
|
} else {
|
|
2767
|
-
typeof onScrollFinish ===
|
|
2775
|
+
typeof onScrollFinish === 'function' && onScrollFinish();
|
|
2768
2776
|
startTime.current = 0;
|
|
2769
2777
|
frameID.current = 0;
|
|
2770
2778
|
cancel();
|
|
@@ -2777,8 +2785,8 @@ const useScrollIntoView = (targetElement, { duration = 1250, axis = "y", onScrol
|
|
|
2777
2785
|
shouldStop.current = true;
|
|
2778
2786
|
}
|
|
2779
2787
|
};
|
|
2780
|
-
useEventListener(
|
|
2781
|
-
useEventListener(
|
|
2788
|
+
useEventListener('wheel', handleStop, null, listenerOptions$1);
|
|
2789
|
+
useEventListener('touchmove', handleStop, null, listenerOptions$1);
|
|
2782
2790
|
React.useEffect(()=>cancel, []);
|
|
2783
2791
|
return {
|
|
2784
2792
|
scrollIntoView,
|
|
@@ -2799,13 +2807,13 @@ function preventDefault(rawEvent) {
|
|
|
2799
2807
|
}
|
|
2800
2808
|
const useScrollLock = (target, initialState = false)=>{
|
|
2801
2809
|
const [locked, setLocked] = React.useState(initialState);
|
|
2802
|
-
const initialOverflowRef = React.useRef(
|
|
2810
|
+
const initialOverflowRef = React.useRef('scroll');
|
|
2803
2811
|
React.useEffect(()=>{
|
|
2804
2812
|
const element = getTargetElement(target);
|
|
2805
2813
|
if (element) {
|
|
2806
2814
|
initialOverflowRef.current = element.style.overflow;
|
|
2807
2815
|
if (locked) {
|
|
2808
|
-
element.style.overflow =
|
|
2816
|
+
element.style.overflow = 'hidden';
|
|
2809
2817
|
}
|
|
2810
2818
|
}
|
|
2811
2819
|
}, [
|
|
@@ -2818,7 +2826,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2818
2826
|
return;
|
|
2819
2827
|
}
|
|
2820
2828
|
if (isIOS) {
|
|
2821
|
-
element.addEventListener(
|
|
2829
|
+
element.addEventListener('touchmove', preventDefault, {
|
|
2822
2830
|
passive: false
|
|
2823
2831
|
});
|
|
2824
2832
|
}
|
|
@@ -2830,7 +2838,7 @@ const useScrollLock = (target, initialState = false)=>{
|
|
|
2830
2838
|
return;
|
|
2831
2839
|
}
|
|
2832
2840
|
if (isIOS) {
|
|
2833
|
-
element.removeEventListener(
|
|
2841
|
+
element.removeEventListener('touchmove', preventDefault);
|
|
2834
2842
|
}
|
|
2835
2843
|
element.style.overflow = initialOverflowRef.current;
|
|
2836
2844
|
setLocked(false);
|
|
@@ -2868,14 +2876,14 @@ function _extends() {
|
|
|
2868
2876
|
}
|
|
2869
2877
|
const useSetState = (initialState)=>{
|
|
2870
2878
|
const [state, _setState] = React.useState(initialState);
|
|
2871
|
-
const setState = React.useCallback((statePartial)=>_setState((current)=>_extends({}, current, typeof statePartial ===
|
|
2879
|
+
const setState = React.useCallback((statePartial)=>_setState((current)=>_extends({}, current, typeof statePartial === 'function' ? statePartial(current) : statePartial)), []);
|
|
2872
2880
|
return [
|
|
2873
2881
|
state,
|
|
2874
2882
|
setState
|
|
2875
2883
|
];
|
|
2876
2884
|
};
|
|
2877
2885
|
|
|
2878
|
-
|
|
2886
|
+
function useSticky(targetElement, { axis = 'y', nav = 0 }, scrollElement) {
|
|
2879
2887
|
const [isSticky, setSticky] = React.useState(false);
|
|
2880
2888
|
const { run: scrollHandler } = useThrottleFn(()=>{
|
|
2881
2889
|
const element = getTargetElement(targetElement);
|
|
@@ -2883,7 +2891,7 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2883
2891
|
return;
|
|
2884
2892
|
}
|
|
2885
2893
|
const rect = element.getBoundingClientRect();
|
|
2886
|
-
if (axis ===
|
|
2894
|
+
if (axis === 'y') {
|
|
2887
2895
|
setSticky((rect == null ? void 0 : rect.top) <= nav);
|
|
2888
2896
|
} else {
|
|
2889
2897
|
setSticky((rect == null ? void 0 : rect.left) <= nav);
|
|
@@ -2895,10 +2903,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2895
2903
|
if (!element || !scrollParent) {
|
|
2896
2904
|
return;
|
|
2897
2905
|
}
|
|
2898
|
-
scrollParent.addEventListener(
|
|
2906
|
+
scrollParent.addEventListener('scroll', scrollHandler);
|
|
2899
2907
|
scrollHandler();
|
|
2900
2908
|
return ()=>{
|
|
2901
|
-
scrollParent.removeEventListener(
|
|
2909
|
+
scrollParent.removeEventListener('scroll', scrollHandler);
|
|
2902
2910
|
};
|
|
2903
2911
|
}, [
|
|
2904
2912
|
axis,
|
|
@@ -2910,10 +2918,10 @@ const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement)=>{
|
|
|
2910
2918
|
isSticky,
|
|
2911
2919
|
setSticky
|
|
2912
2920
|
];
|
|
2913
|
-
}
|
|
2921
|
+
}
|
|
2914
2922
|
|
|
2915
2923
|
const useTextDirection = (options = defaultOptions$1)=>{
|
|
2916
|
-
const { selector =
|
|
2924
|
+
const { selector = 'html', initialValue = 'ltr' } = options;
|
|
2917
2925
|
const getValue = ()=>{
|
|
2918
2926
|
if (initialValue !== undefined) {
|
|
2919
2927
|
return initialValue;
|
|
@@ -2921,11 +2929,11 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2921
2929
|
if (isBrowser) {
|
|
2922
2930
|
var _document_querySelector, _document;
|
|
2923
2931
|
var _document_querySelector_getAttribute;
|
|
2924
|
-
return (_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute(
|
|
2932
|
+
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;
|
|
2925
2933
|
}
|
|
2926
2934
|
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
2927
|
-
if (process.env.NODE_ENV !==
|
|
2928
|
-
console.warn(
|
|
2935
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
2936
|
+
console.warn('`useTextDirection` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
|
|
2929
2937
|
}
|
|
2930
2938
|
return initialValue;
|
|
2931
2939
|
};
|
|
@@ -2933,7 +2941,7 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2933
2941
|
React.useEffect(()=>{
|
|
2934
2942
|
var _document_querySelector, _document;
|
|
2935
2943
|
var _document_querySelector_getAttribute;
|
|
2936
|
-
setValue((_document_querySelector_getAttribute = (_document = document) == null ? void 0 : (_document_querySelector = _document.querySelector(selector)) == null ? void 0 : _document_querySelector.getAttribute(
|
|
2944
|
+
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);
|
|
2937
2945
|
}, [
|
|
2938
2946
|
initialValue,
|
|
2939
2947
|
selector
|
|
@@ -2944,10 +2952,10 @@ const useTextDirection = (options = defaultOptions$1)=>{
|
|
|
2944
2952
|
}
|
|
2945
2953
|
if (value !== null) {
|
|
2946
2954
|
var _document_querySelector;
|
|
2947
|
-
(_document_querySelector = document.querySelector(selector)) == null ? void 0 : _document_querySelector.setAttribute(
|
|
2955
|
+
(_document_querySelector = document.querySelector(selector)) == null ? void 0 : _document_querySelector.setAttribute('dir', value);
|
|
2948
2956
|
} else {
|
|
2949
2957
|
var _document_querySelector1;
|
|
2950
|
-
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute(
|
|
2958
|
+
(_document_querySelector1 = document.querySelector(selector)) == null ? void 0 : _document_querySelector1.removeAttribute('dir');
|
|
2951
2959
|
}
|
|
2952
2960
|
setValue(value);
|
|
2953
2961
|
};
|
|
@@ -2965,7 +2973,7 @@ const useTextSelection = ()=>{
|
|
|
2965
2973
|
// this is because `document.getSelection` will always return the same object
|
|
2966
2974
|
forceUpdate();
|
|
2967
2975
|
};
|
|
2968
|
-
useEventListener(
|
|
2976
|
+
useEventListener('selectionchange', handleSelectionChange, ()=>document);
|
|
2969
2977
|
React.useEffect(()=>{
|
|
2970
2978
|
setSelection(document.getSelection());
|
|
2971
2979
|
}, []);
|
|
@@ -3045,7 +3053,9 @@ const useTitle = (title)=>{
|
|
|
3045
3053
|
]);
|
|
3046
3054
|
};
|
|
3047
3055
|
|
|
3048
|
-
|
|
3056
|
+
function toggleReducer(state, nextValue) {
|
|
3057
|
+
return typeof nextValue === 'boolean' ? nextValue : !state;
|
|
3058
|
+
}
|
|
3049
3059
|
const useToggle = (initialValue)=>{
|
|
3050
3060
|
return React.useReducer(toggleReducer, initialValue);
|
|
3051
3061
|
};
|
|
@@ -3082,7 +3092,7 @@ function _async_to_generator$1(fn) {
|
|
|
3082
3092
|
};
|
|
3083
3093
|
}
|
|
3084
3094
|
const useWebNotification = (requestPermissions = false)=>{
|
|
3085
|
-
const isSupported = useSupported(()=>!!window &&
|
|
3095
|
+
const isSupported = useSupported(()=>!!window && 'Notification' in window);
|
|
3086
3096
|
const permissionGranted = React.useRef(false);
|
|
3087
3097
|
const notificationRef = React.useRef(null);
|
|
3088
3098
|
const show = (title, options = defaultOptions$1)=>{
|
|
@@ -3091,7 +3101,7 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3091
3101
|
if (!isSupported && !permissionGranted.current) {
|
|
3092
3102
|
return;
|
|
3093
3103
|
}
|
|
3094
|
-
notificationRef.current = new Notification(title ||
|
|
3104
|
+
notificationRef.current = new Notification(title || '', options);
|
|
3095
3105
|
return notificationRef.current;
|
|
3096
3106
|
};
|
|
3097
3107
|
const close = React.useCallback(()=>{
|
|
@@ -3101,15 +3111,15 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3101
3111
|
notificationRef.current = null;
|
|
3102
3112
|
}, []);
|
|
3103
3113
|
React.useEffect(()=>{
|
|
3104
|
-
permissionGranted.current = isSupported &&
|
|
3114
|
+
permissionGranted.current = isSupported && 'permission' in Notification && Notification.permission === 'granted';
|
|
3105
3115
|
}, [
|
|
3106
3116
|
isSupported
|
|
3107
3117
|
]);
|
|
3108
3118
|
const ensurePermissions = React.useCallback(/*#__PURE__*/ _async_to_generator$1(function*() {
|
|
3109
3119
|
if (!isSupported) return;
|
|
3110
|
-
if (!permissionGranted.current && Notification.permission !==
|
|
3120
|
+
if (!permissionGranted.current && Notification.permission !== 'denied') {
|
|
3111
3121
|
const result = yield Notification.requestPermission();
|
|
3112
|
-
if (result ===
|
|
3122
|
+
if (result === 'granted') permissionGranted.current = true;
|
|
3113
3123
|
}
|
|
3114
3124
|
return permissionGranted.current;
|
|
3115
3125
|
}), [
|
|
@@ -3133,25 +3143,25 @@ const useWebNotification = (requestPermissions = false)=>{
|
|
|
3133
3143
|
};
|
|
3134
3144
|
};
|
|
3135
3145
|
|
|
3136
|
-
|
|
3146
|
+
function useWindowsFocus(defauleValue = false) {
|
|
3137
3147
|
const [focused, setFocused] = React.useState(defauleValue);
|
|
3138
3148
|
React.useEffect(()=>{
|
|
3139
3149
|
setFocused(window.document.hasFocus());
|
|
3140
3150
|
}, []);
|
|
3141
|
-
useEventListener(
|
|
3151
|
+
useEventListener('blur', ()=>{
|
|
3142
3152
|
setFocused(false);
|
|
3143
3153
|
});
|
|
3144
|
-
useEventListener(
|
|
3154
|
+
useEventListener('focus', ()=>{
|
|
3145
3155
|
setFocused(true);
|
|
3146
3156
|
});
|
|
3147
3157
|
return focused;
|
|
3148
|
-
}
|
|
3158
|
+
}
|
|
3149
3159
|
|
|
3150
3160
|
const listenerOptions = {
|
|
3151
3161
|
capture: false,
|
|
3152
3162
|
passive: true
|
|
3153
3163
|
};
|
|
3154
|
-
|
|
3164
|
+
function useWindowScroll() {
|
|
3155
3165
|
const [state, setState] = useRafState(()=>({
|
|
3156
3166
|
x: 0,
|
|
3157
3167
|
y: 0
|
|
@@ -3162,20 +3172,20 @@ const useWindowScroll = ()=>{
|
|
|
3162
3172
|
y: window.scrollY
|
|
3163
3173
|
});
|
|
3164
3174
|
};
|
|
3165
|
-
useEventListener(
|
|
3175
|
+
useEventListener('scroll', handleScroll, defaultWindow, listenerOptions);
|
|
3166
3176
|
// Set scroll at the first client-side load
|
|
3167
3177
|
useIsomorphicLayoutEffect(()=>{
|
|
3168
3178
|
handleScroll();
|
|
3169
3179
|
}, []);
|
|
3170
3180
|
return state;
|
|
3171
|
-
}
|
|
3181
|
+
}
|
|
3172
3182
|
|
|
3173
|
-
|
|
3174
|
-
window.addEventListener(
|
|
3183
|
+
function subscribe(callback) {
|
|
3184
|
+
window.addEventListener('resize', callback);
|
|
3175
3185
|
return ()=>{
|
|
3176
|
-
window.removeEventListener(
|
|
3186
|
+
window.removeEventListener('resize', callback);
|
|
3177
3187
|
};
|
|
3178
|
-
}
|
|
3188
|
+
}
|
|
3179
3189
|
const useWindowSize = ()=>{
|
|
3180
3190
|
const stateDependencies = React.useRef({}).current;
|
|
3181
3191
|
const previous = React.useRef({
|
|
@@ -3246,14 +3256,14 @@ function _async_to_generator(fn) {
|
|
|
3246
3256
|
};
|
|
3247
3257
|
}
|
|
3248
3258
|
const useClipboard = ()=>{
|
|
3249
|
-
const [text, setText] = React.useState(
|
|
3259
|
+
const [text, setText] = React.useState('');
|
|
3250
3260
|
const updateText = React.useCallback(()=>{
|
|
3251
3261
|
window.navigator.clipboard.readText().then((value)=>{
|
|
3252
3262
|
setText(value);
|
|
3253
3263
|
});
|
|
3254
3264
|
}, []);
|
|
3255
|
-
useEventListener(
|
|
3256
|
-
useEventListener(
|
|
3265
|
+
useEventListener('copy', updateText);
|
|
3266
|
+
useEventListener('cut', updateText);
|
|
3257
3267
|
const copy = React.useCallback(/*#__PURE__*/ _async_to_generator(function*(txt) {
|
|
3258
3268
|
setText(txt);
|
|
3259
3269
|
yield window.navigator.clipboard.writeText(txt);
|
|
@@ -3264,24 +3274,24 @@ const useClipboard = ()=>{
|
|
|
3264
3274
|
];
|
|
3265
3275
|
};
|
|
3266
3276
|
|
|
3267
|
-
|
|
3277
|
+
function getPlatform(userAgent) {
|
|
3268
3278
|
if (/iPad|iPhone|iPod|ios/i.test(userAgent)) {
|
|
3269
|
-
return
|
|
3279
|
+
return 'ios';
|
|
3270
3280
|
} else if (/android/i.test(userAgent)) {
|
|
3271
|
-
return
|
|
3281
|
+
return 'android';
|
|
3272
3282
|
} else {
|
|
3273
|
-
return
|
|
3283
|
+
return 'unknown';
|
|
3274
3284
|
}
|
|
3275
|
-
}
|
|
3285
|
+
}
|
|
3276
3286
|
const usePlatform = ({ userAgent } = {
|
|
3277
|
-
userAgent:
|
|
3287
|
+
userAgent: ''
|
|
3278
3288
|
})=>{
|
|
3279
|
-
const [ua, setUa] = React.useState(userAgent ||
|
|
3289
|
+
const [ua, setUa] = React.useState(userAgent || '');
|
|
3280
3290
|
const [platform, setPlatform] = React.useState(()=>{
|
|
3281
3291
|
if (userAgent) {
|
|
3282
3292
|
return getPlatform(userAgent);
|
|
3283
3293
|
}
|
|
3284
|
-
return
|
|
3294
|
+
return 'unknown';
|
|
3285
3295
|
});
|
|
3286
3296
|
React.useEffect(()=>{
|
|
3287
3297
|
setPlatform(getPlatform(navigator.userAgent));
|
|
@@ -3310,18 +3320,18 @@ const usePlatform = ({ userAgent } = {
|
|
|
3310
3320
|
};
|
|
3311
3321
|
};
|
|
3312
3322
|
|
|
3313
|
-
|
|
3323
|
+
function useMobileLandscape() {
|
|
3314
3324
|
const [isMobileLandscape, setIsMobileLandscape] = React.useState(false);
|
|
3315
3325
|
const [orientation] = useOrientation();
|
|
3316
3326
|
React.useEffect(()=>{
|
|
3317
3327
|
const userAgent = window.navigator.userAgent;
|
|
3318
3328
|
const isMobile = /Mobi|Android|iphone/i.test(userAgent);
|
|
3319
|
-
setIsMobileLandscape(isMobile && orientation.type ===
|
|
3329
|
+
setIsMobileLandscape(isMobile && orientation.type === 'landscape-primary');
|
|
3320
3330
|
}, [
|
|
3321
3331
|
orientation.type
|
|
3322
3332
|
]);
|
|
3323
3333
|
return isMobileLandscape;
|
|
3324
|
-
}
|
|
3334
|
+
}
|
|
3325
3335
|
|
|
3326
3336
|
const useControlled = (value, defaultValue, onChange)=>{
|
|
3327
3337
|
const [stateValue, setStateValue] = React.useState(value !== undefined ? value : defaultValue);
|
|
@@ -3342,7 +3352,7 @@ const useControlled = (value, defaultValue, onChange)=>{
|
|
|
3342
3352
|
];
|
|
3343
3353
|
};
|
|
3344
3354
|
|
|
3345
|
-
|
|
3355
|
+
function useDisclosure(props = {}) {
|
|
3346
3356
|
const { defaultOpen, isOpen: isOpenProp, onClose: onCloseProp, onOpen: onOpenProp, onChange = ()=>{} } = props;
|
|
3347
3357
|
const onOpenPropRef = useLatest(onOpenProp);
|
|
3348
3358
|
const onClosePropRef = useLatest(onCloseProp);
|
|
@@ -3383,12 +3393,12 @@ const useDisclosure = (props = {})=>{
|
|
|
3383
3393
|
onOpenChange,
|
|
3384
3394
|
isControlled
|
|
3385
3395
|
};
|
|
3386
|
-
}
|
|
3396
|
+
}
|
|
3387
3397
|
|
|
3388
3398
|
const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
3389
3399
|
const [data, setData] = React.useState(null);
|
|
3390
3400
|
const [error, setError] = React.useState(null);
|
|
3391
|
-
const [status, setStatus] = React.useState(
|
|
3401
|
+
const [status, setStatus] = React.useState('DISCONNECTED');
|
|
3392
3402
|
const [event, setEvent] = React.useState(null);
|
|
3393
3403
|
const [lastEventId, setLastEventId] = React.useState(null);
|
|
3394
3404
|
const retries = React.useRef(0);
|
|
@@ -3410,7 +3420,7 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3410
3420
|
});
|
|
3411
3421
|
const close = React.useCallback(()=>{
|
|
3412
3422
|
var _eventSourceRef_current;
|
|
3413
|
-
setStatus(
|
|
3423
|
+
setStatus('DISCONNECTED');
|
|
3414
3424
|
clean();
|
|
3415
3425
|
(_eventSourceRef_current = eventSourceRef.current) == null ? void 0 : _eventSourceRef_current.close();
|
|
3416
3426
|
eventSourceRef.current = null;
|
|
@@ -3429,21 +3439,21 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3429
3439
|
}
|
|
3430
3440
|
const es = eventSourceRef.current;
|
|
3431
3441
|
es.onopen = ()=>{
|
|
3432
|
-
setStatus(
|
|
3442
|
+
setStatus('CONNECTED');
|
|
3433
3443
|
setError(null);
|
|
3434
3444
|
};
|
|
3435
3445
|
es.onmessage = (ev)=>{
|
|
3436
3446
|
setData(ev.data);
|
|
3437
3447
|
setLastEventId(ev.lastEventId);
|
|
3438
|
-
setStatus(
|
|
3448
|
+
setStatus('CONNECTED');
|
|
3439
3449
|
};
|
|
3440
3450
|
es.onerror = (err)=>{
|
|
3441
3451
|
setError(err);
|
|
3442
|
-
setStatus(
|
|
3452
|
+
setStatus('DISCONNECTED');
|
|
3443
3453
|
if (options.autoReconnect && !explicitlyClosed.current) {
|
|
3444
3454
|
const { retries: maxRetries = -1, delay = 1000, onFailed } = options.autoReconnect;
|
|
3445
3455
|
retries.current += 1;
|
|
3446
|
-
if (typeof maxRetries ===
|
|
3456
|
+
if (typeof maxRetries === 'number' && (maxRetries < 0 || retries.current < maxRetries) || typeof maxRetries === 'function' && maxRetries()) {
|
|
3447
3457
|
setTimeout(open, delay);
|
|
3448
3458
|
} else {
|
|
3449
3459
|
onFailed == null ? void 0 : onFailed();
|
|
@@ -3486,7 +3496,34 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3486
3496
|
};
|
|
3487
3497
|
};
|
|
3488
3498
|
|
|
3499
|
+
/**
|
|
3500
|
+
* @description copy from swr
|
|
3501
|
+
*/ const use = React__default.default.use || ((thenable)=>{
|
|
3502
|
+
switch(thenable.status){
|
|
3503
|
+
case 'pending':
|
|
3504
|
+
throw thenable;
|
|
3505
|
+
case 'fulfilled':
|
|
3506
|
+
return thenable.value;
|
|
3507
|
+
case 'rejected':
|
|
3508
|
+
throw thenable.reason;
|
|
3509
|
+
default:
|
|
3510
|
+
thenable.status = 'pending';
|
|
3511
|
+
thenable.then((v)=>{
|
|
3512
|
+
thenable.status = 'fulfilled';
|
|
3513
|
+
thenable.value = v;
|
|
3514
|
+
}, (e)=>{
|
|
3515
|
+
thenable.status = 'rejected';
|
|
3516
|
+
thenable.reason = e;
|
|
3517
|
+
});
|
|
3518
|
+
throw thenable;
|
|
3519
|
+
}
|
|
3520
|
+
});
|
|
3521
|
+
|
|
3522
|
+
exports.assignRef = indexClient.assignRef;
|
|
3523
|
+
exports.mergeRefs = indexClient.mergeRefs;
|
|
3524
|
+
exports.useMergedRefs = indexClient.useMergedRefs;
|
|
3489
3525
|
exports.defaultOptions = defaultOptions;
|
|
3526
|
+
exports.use = use;
|
|
3490
3527
|
exports.useActiveElement = useActiveElement;
|
|
3491
3528
|
exports.useAsyncEffect = useAsyncEffect;
|
|
3492
3529
|
exports.useClickOutside = useClickOutside;
|