@reactuses/core 2.2.4 → 2.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +120 -51
- package/dist/index.d.ts +38 -25
- package/dist/index.mjs +110 -45
- package/package.json +34 -31
package/dist/index.cjs
CHANGED
|
@@ -8,6 +8,7 @@ var lodash = require('lodash');
|
|
|
8
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
9
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
var lodash__default = /*#__PURE__*/_interopDefaultLegacy(lodash);
|
|
11
12
|
|
|
12
13
|
function usePrevious(state) {
|
|
13
14
|
const ref = React.useRef();
|
|
@@ -45,7 +46,7 @@ const createUpdateEffect = (hook) => (effect, deps) => {
|
|
|
45
46
|
|
|
46
47
|
var useUpdateEffect = createUpdateEffect(React.useEffect);
|
|
47
48
|
|
|
48
|
-
var
|
|
49
|
+
var index$4 = createUpdateEffect(React.useLayoutEffect);
|
|
49
50
|
|
|
50
51
|
var _a;
|
|
51
52
|
const isFunction = (val) => typeof val === "function";
|
|
@@ -84,7 +85,7 @@ function useEvent(fn) {
|
|
|
84
85
|
const isPrimitive$1 = (val) => val !== Object(val);
|
|
85
86
|
function useCustomCompareEffect(effect, deps, depsEqual) {
|
|
86
87
|
if (process.env.NODE_ENV !== "production") {
|
|
87
|
-
if (!(deps
|
|
88
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
88
89
|
console.warn(
|
|
89
90
|
"`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
|
|
90
91
|
);
|
|
@@ -108,9 +109,10 @@ function useCustomCompareEffect(effect, deps, depsEqual) {
|
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
const isPrimitive = (val) => val !== Object(val);
|
|
112
|
+
const { isEqual } = lodash__default["default"];
|
|
111
113
|
function useDeepCompareEffect(effect, deps) {
|
|
112
114
|
if (process.env.NODE_ENV !== "production") {
|
|
113
|
-
if (!(deps
|
|
115
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
114
116
|
console.warn(
|
|
115
117
|
"`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
|
|
116
118
|
);
|
|
@@ -121,7 +123,7 @@ function useDeepCompareEffect(effect, deps) {
|
|
|
121
123
|
);
|
|
122
124
|
}
|
|
123
125
|
}
|
|
124
|
-
useCustomCompareEffect(effect, deps,
|
|
126
|
+
useCustomCompareEffect(effect, deps, isEqual);
|
|
125
127
|
}
|
|
126
128
|
|
|
127
129
|
const StorageSerializers = {
|
|
@@ -314,6 +316,7 @@ const getInitialState = (query, defaultState) => {
|
|
|
314
316
|
function useMediaQuery(query, defaultState) {
|
|
315
317
|
const [state, setState] = React.useState(getInitialState(query, defaultState));
|
|
316
318
|
React.useEffect(() => {
|
|
319
|
+
var _a;
|
|
317
320
|
let mounted = true;
|
|
318
321
|
const mql = window.matchMedia(query);
|
|
319
322
|
const onChange = () => {
|
|
@@ -325,15 +328,16 @@ function useMediaQuery(query, defaultState) {
|
|
|
325
328
|
if ("addEventListener" in mql) {
|
|
326
329
|
mql.addEventListener("change", onChange);
|
|
327
330
|
} else {
|
|
328
|
-
mql.addListener(onChange);
|
|
331
|
+
(_a = mql.addListener) == null ? void 0 : _a.call(mql, onChange);
|
|
329
332
|
}
|
|
330
333
|
setState(mql.matches);
|
|
331
334
|
return () => {
|
|
335
|
+
var _a2;
|
|
332
336
|
mounted = false;
|
|
333
337
|
if ("removeEventListener" in mql) {
|
|
334
338
|
mql.removeEventListener("change", onChange);
|
|
335
339
|
} else {
|
|
336
|
-
mql.removeListener(onChange);
|
|
340
|
+
(_a2 = mql.removeListener) == null ? void 0 : _a2.call(mql, onChange);
|
|
337
341
|
}
|
|
338
342
|
};
|
|
339
343
|
}, [query]);
|
|
@@ -374,6 +378,7 @@ function useUnmount(fn) {
|
|
|
374
378
|
);
|
|
375
379
|
}
|
|
376
380
|
|
|
381
|
+
const { throttle: throttle$1 } = lodash__default["default"];
|
|
377
382
|
function useThrottleFn(fn, wait, options) {
|
|
378
383
|
if (isDev) {
|
|
379
384
|
if (!isFunction(fn)) {
|
|
@@ -384,13 +389,14 @@ function useThrottleFn(fn, wait, options) {
|
|
|
384
389
|
}
|
|
385
390
|
const fnRef = useLatest(fn);
|
|
386
391
|
const throttled = React.useMemo(
|
|
387
|
-
() =>
|
|
392
|
+
() => throttle$1(
|
|
388
393
|
(...args) => {
|
|
389
394
|
return fnRef.current(...args);
|
|
390
395
|
},
|
|
391
396
|
wait,
|
|
392
397
|
options
|
|
393
398
|
),
|
|
399
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
394
400
|
[]
|
|
395
401
|
);
|
|
396
402
|
useUnmount(() => {
|
|
@@ -418,6 +424,7 @@ function useThrottle(value, wait, options) {
|
|
|
418
424
|
return throttled;
|
|
419
425
|
}
|
|
420
426
|
|
|
427
|
+
const { debounce } = lodash__default["default"];
|
|
421
428
|
function useDebounceFn(fn, wait, options) {
|
|
422
429
|
if (isDev) {
|
|
423
430
|
if (!isFunction(fn)) {
|
|
@@ -428,13 +435,14 @@ function useDebounceFn(fn, wait, options) {
|
|
|
428
435
|
}
|
|
429
436
|
const fnRef = useLatest(fn);
|
|
430
437
|
const debounced = React.useMemo(
|
|
431
|
-
() =>
|
|
438
|
+
() => debounce(
|
|
432
439
|
(...args) => {
|
|
433
440
|
return fnRef.current(...args);
|
|
434
441
|
},
|
|
435
442
|
wait,
|
|
436
443
|
options
|
|
437
444
|
),
|
|
445
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
438
446
|
[]
|
|
439
447
|
);
|
|
440
448
|
useUnmount(() => {
|
|
@@ -594,17 +602,17 @@ function useCounter(initialValue = 0, max = null, min = null) {
|
|
|
594
602
|
const initFunc = () => {
|
|
595
603
|
let init = typeof initialValue === "function" ? initialValue() : initialValue;
|
|
596
604
|
typeof init !== "number" && console.error(
|
|
597
|
-
|
|
605
|
+
`initialValue has to be a number, got ${typeof initialValue}`
|
|
598
606
|
);
|
|
599
607
|
if (typeof min === "number") {
|
|
600
608
|
init = Math.max(init, min);
|
|
601
609
|
} else if (min !== null) {
|
|
602
|
-
console.error(
|
|
610
|
+
console.error(`min has to be a number, got ${typeof min}`);
|
|
603
611
|
}
|
|
604
612
|
if (typeof max === "number") {
|
|
605
613
|
init = Math.min(init, max);
|
|
606
614
|
} else if (max !== null) {
|
|
607
|
-
console.error(
|
|
615
|
+
console.error(`max has to be a number, got ${typeof max}`);
|
|
608
616
|
}
|
|
609
617
|
return init;
|
|
610
618
|
};
|
|
@@ -663,6 +671,7 @@ function useRafFn(callback, initiallyActive = true) {
|
|
|
663
671
|
}
|
|
664
672
|
},
|
|
665
673
|
() => rafActivity.current
|
|
674
|
+
// isActive
|
|
666
675
|
],
|
|
667
676
|
[step]
|
|
668
677
|
);
|
|
@@ -677,6 +686,7 @@ function useRafFn(callback, initiallyActive = true) {
|
|
|
677
686
|
|
|
678
687
|
function useEventEmitter() {
|
|
679
688
|
const listeners = React.useRef([]);
|
|
689
|
+
const _disposed = React.useRef(false);
|
|
680
690
|
const _event = React.useRef((listener) => {
|
|
681
691
|
listeners.current.push(listener);
|
|
682
692
|
const disposable = {
|
|
@@ -693,7 +703,6 @@ function useEventEmitter() {
|
|
|
693
703
|
};
|
|
694
704
|
return disposable;
|
|
695
705
|
});
|
|
696
|
-
const _disposed = React.useRef(false);
|
|
697
706
|
const fire = (arg1, arg2) => {
|
|
698
707
|
const queue = [];
|
|
699
708
|
for (let i = 0; i < listeners.current.length; i++) {
|
|
@@ -960,6 +969,7 @@ const defaultEvents$1 = [
|
|
|
960
969
|
"wheel"
|
|
961
970
|
];
|
|
962
971
|
const oneMinute = 6e4;
|
|
972
|
+
const { throttle } = lodash__default["default"];
|
|
963
973
|
function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1) {
|
|
964
974
|
const [state, setState] = React.useState(initialState);
|
|
965
975
|
React.useEffect(() => {
|
|
@@ -972,7 +982,7 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
|
|
|
972
982
|
setState(newState);
|
|
973
983
|
}
|
|
974
984
|
};
|
|
975
|
-
const onEvent =
|
|
985
|
+
const onEvent = throttle(() => {
|
|
976
986
|
if (localState) {
|
|
977
987
|
set(false);
|
|
978
988
|
}
|
|
@@ -1028,7 +1038,7 @@ function useMediaDevices() {
|
|
|
1028
1038
|
return state;
|
|
1029
1039
|
}
|
|
1030
1040
|
const useMediaDevicesMock = () => ({ devices: [] });
|
|
1031
|
-
var
|
|
1041
|
+
var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
|
|
1032
1042
|
|
|
1033
1043
|
function useTextDirection(options = {}) {
|
|
1034
1044
|
const { selector = "html", initialValue = "ltr" } = options;
|
|
@@ -1126,7 +1136,7 @@ function useFps(options) {
|
|
|
1126
1136
|
return fps;
|
|
1127
1137
|
}
|
|
1128
1138
|
const useFpsMock = (options) => 0;
|
|
1129
|
-
var
|
|
1139
|
+
var index$2 = typeof performance === "undefined" ? useFpsMock : useFps;
|
|
1130
1140
|
|
|
1131
1141
|
const initCoord = {
|
|
1132
1142
|
accuracy: 0,
|
|
@@ -1184,7 +1194,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1184
1194
|
|
|
1185
1195
|
/*!
|
|
1186
1196
|
* screenfull
|
|
1187
|
-
* v5.
|
|
1197
|
+
* v5.0.0 - 2019-09-09
|
|
1188
1198
|
* (c) Sindre Sorhus; MIT License
|
|
1189
1199
|
*/
|
|
1190
1200
|
|
|
@@ -1267,7 +1277,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1267
1277
|
};
|
|
1268
1278
|
|
|
1269
1279
|
var screenfull = {
|
|
1270
|
-
request: function (element
|
|
1280
|
+
request: function (element) {
|
|
1271
1281
|
return new Promise(function (resolve, reject) {
|
|
1272
1282
|
var onFullScreenEntered = function () {
|
|
1273
1283
|
this.off('change', onFullScreenEntered);
|
|
@@ -1278,11 +1288,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1278
1288
|
|
|
1279
1289
|
element = element || document.documentElement;
|
|
1280
1290
|
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
if (returnPromise instanceof Promise) {
|
|
1284
|
-
returnPromise.then(onFullScreenEntered).catch(reject);
|
|
1285
|
-
}
|
|
1291
|
+
Promise.resolve(element[fn.requestFullscreen]()).catch(reject);
|
|
1286
1292
|
}.bind(this));
|
|
1287
1293
|
},
|
|
1288
1294
|
exit: function () {
|
|
@@ -1299,15 +1305,11 @@ var screenfull$1 = {exports: {}};
|
|
|
1299
1305
|
|
|
1300
1306
|
this.on('change', onFullScreenExit);
|
|
1301
1307
|
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
if (returnPromise instanceof Promise) {
|
|
1305
|
-
returnPromise.then(onFullScreenExit).catch(reject);
|
|
1306
|
-
}
|
|
1308
|
+
Promise.resolve(document[fn.exitFullscreen]()).catch(reject);
|
|
1307
1309
|
}.bind(this));
|
|
1308
1310
|
},
|
|
1309
|
-
toggle: function (element
|
|
1310
|
-
return this.isFullscreen ? this.exit() : this.request(element
|
|
1311
|
+
toggle: function (element) {
|
|
1312
|
+
return this.isFullscreen ? this.exit() : this.request(element);
|
|
1311
1313
|
},
|
|
1312
1314
|
onchange: function (callback) {
|
|
1313
1315
|
this.on('change', callback);
|
|
@@ -1439,7 +1441,7 @@ function getConnectionState(previousState) {
|
|
|
1439
1441
|
return {
|
|
1440
1442
|
online,
|
|
1441
1443
|
previous: previousOnline,
|
|
1442
|
-
since: online !== previousOnline ? new Date() : previousState == null ? void 0 : previousState.since,
|
|
1444
|
+
since: online !== previousOnline ? /* @__PURE__ */ new Date() : previousState == null ? void 0 : previousState.since,
|
|
1443
1445
|
downlink: conn == null ? void 0 : conn.downlink,
|
|
1444
1446
|
downlinkMax: conn == null ? void 0 : conn.downlinkMax,
|
|
1445
1447
|
effectiveType: conn == null ? void 0 : conn.effectiveType,
|
|
@@ -1793,7 +1795,7 @@ var __spreadValues = (a, b) => {
|
|
|
1793
1795
|
return a;
|
|
1794
1796
|
};
|
|
1795
1797
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1796
|
-
var __async$
|
|
1798
|
+
var __async$3 = (__this, __arguments, generator) => {
|
|
1797
1799
|
return new Promise((resolve, reject) => {
|
|
1798
1800
|
var fulfilled = (value) => {
|
|
1799
1801
|
try {
|
|
@@ -1827,7 +1829,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
|
|
|
1827
1829
|
const di = state[3][direction];
|
|
1828
1830
|
useUpdateEffect(() => {
|
|
1829
1831
|
const opts = latestOptions.current;
|
|
1830
|
-
const fn = () => __async$
|
|
1832
|
+
const fn = () => __async$3(this, null, function* () {
|
|
1831
1833
|
var _a2, _b2, _c, _d;
|
|
1832
1834
|
const previous = {
|
|
1833
1835
|
height: (_b2 = (_a2 = element.current) == null ? void 0 : _a2.scrollHeight) != null ? _b2 : 0,
|
|
@@ -2374,7 +2376,7 @@ function useWindowScroll() {
|
|
|
2374
2376
|
return state;
|
|
2375
2377
|
}
|
|
2376
2378
|
|
|
2377
|
-
var __async$
|
|
2379
|
+
var __async$2 = (__this, __arguments, generator) => {
|
|
2378
2380
|
return new Promise((resolve, reject) => {
|
|
2379
2381
|
var fulfilled = (value) => {
|
|
2380
2382
|
try {
|
|
@@ -2403,7 +2405,7 @@ function useClipBorad() {
|
|
|
2403
2405
|
}, []);
|
|
2404
2406
|
useEventListener("copy", updateText);
|
|
2405
2407
|
useEventListener("cut", updateText);
|
|
2406
|
-
const copy = React.useCallback((txt) => __async$
|
|
2408
|
+
const copy = React.useCallback((txt) => __async$2(this, null, function* () {
|
|
2407
2409
|
setText(txt);
|
|
2408
2410
|
yield window.navigator.clipboard.writeText(txt);
|
|
2409
2411
|
}), []);
|
|
@@ -2451,9 +2453,6 @@ function useFocus(target, initialValue = false) {
|
|
|
2451
2453
|
const [focus, innerSetFocus] = React.useState(initialValue);
|
|
2452
2454
|
useEventListener("focus", () => innerSetFocus(true), target);
|
|
2453
2455
|
useEventListener("blur", () => innerSetFocus(false), target);
|
|
2454
|
-
useMount(() => {
|
|
2455
|
-
setFocus(focus);
|
|
2456
|
-
});
|
|
2457
2456
|
const setFocus = (value) => {
|
|
2458
2457
|
const element = getTargetElement(target);
|
|
2459
2458
|
if (!element) {
|
|
@@ -2465,14 +2464,18 @@ function useFocus(target, initialValue = false) {
|
|
|
2465
2464
|
element.focus();
|
|
2466
2465
|
}
|
|
2467
2466
|
};
|
|
2467
|
+
useMount(() => {
|
|
2468
|
+
setFocus(focus);
|
|
2469
|
+
});
|
|
2468
2470
|
return [focus, setFocus];
|
|
2469
2471
|
}
|
|
2470
2472
|
|
|
2471
|
-
function useControlled({
|
|
2472
|
-
controlled,
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2473
|
+
function useControlled(props) {
|
|
2474
|
+
const { controlled, defaultValue: defaultProp, state } = props != null ? props : {
|
|
2475
|
+
controlled: void 0,
|
|
2476
|
+
defaultValue: void 0,
|
|
2477
|
+
state: "value"
|
|
2478
|
+
};
|
|
2476
2479
|
const { current: isControlled } = React.useRef(controlled !== void 0);
|
|
2477
2480
|
const [valueState, setValue] = React.useState(defaultProp);
|
|
2478
2481
|
const value = isControlled ? controlled : valueState;
|
|
@@ -2511,9 +2514,9 @@ const createOnceEffect = (hook) => (effect, deps) => {
|
|
|
2511
2514
|
}, deps);
|
|
2512
2515
|
};
|
|
2513
2516
|
|
|
2514
|
-
var
|
|
2517
|
+
var index$1 = createOnceEffect(React.useEffect);
|
|
2515
2518
|
|
|
2516
|
-
var
|
|
2519
|
+
var index = createOnceEffect(React.useLayoutEffect);
|
|
2517
2520
|
|
|
2518
2521
|
function useReducedMotion(defaultState) {
|
|
2519
2522
|
return useMediaQuery("(prefers-reduced-motion: reduce)", defaultState);
|
|
@@ -2748,7 +2751,7 @@ const useSticky = ({
|
|
|
2748
2751
|
return [isSticky, setSticky];
|
|
2749
2752
|
};
|
|
2750
2753
|
|
|
2751
|
-
var __async = (__this, __arguments, generator) => {
|
|
2754
|
+
var __async$1 = (__this, __arguments, generator) => {
|
|
2752
2755
|
return new Promise((resolve, reject) => {
|
|
2753
2756
|
var fulfilled = (value) => {
|
|
2754
2757
|
try {
|
|
@@ -2771,7 +2774,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
2771
2774
|
function useAsyncEffect(effect, cleanup = noop, deps) {
|
|
2772
2775
|
const mounted = useMountedState();
|
|
2773
2776
|
React.useEffect(() => {
|
|
2774
|
-
const execute = () => __async(this, null, function* () {
|
|
2777
|
+
const execute = () => __async$1(this, null, function* () {
|
|
2775
2778
|
if (!mounted()) {
|
|
2776
2779
|
return;
|
|
2777
2780
|
}
|
|
@@ -2818,6 +2821,69 @@ const useCountDown = (time, format = getHMSTime, callback) => {
|
|
|
2818
2821
|
return [hour, minute, secoud];
|
|
2819
2822
|
};
|
|
2820
2823
|
|
|
2824
|
+
function useSupported(callback, sync = false) {
|
|
2825
|
+
const [supported, setSupported] = React.useState(false);
|
|
2826
|
+
const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
|
|
2827
|
+
effect(() => {
|
|
2828
|
+
setSupported(Boolean(callback()));
|
|
2829
|
+
}, []);
|
|
2830
|
+
return supported;
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
function useTextSelection() {
|
|
2834
|
+
const [selection, setSelection] = React.useState(null);
|
|
2835
|
+
const forceUpdate = useUpdate();
|
|
2836
|
+
const handleSelectionChange = () => {
|
|
2837
|
+
setSelection(document.getSelection());
|
|
2838
|
+
forceUpdate();
|
|
2839
|
+
};
|
|
2840
|
+
useEventListener("selectionchange", handleSelectionChange, () => document);
|
|
2841
|
+
React.useEffect(() => {
|
|
2842
|
+
setSelection(document.getSelection());
|
|
2843
|
+
}, []);
|
|
2844
|
+
return selection;
|
|
2845
|
+
}
|
|
2846
|
+
|
|
2847
|
+
var __async = (__this, __arguments, generator) => {
|
|
2848
|
+
return new Promise((resolve, reject) => {
|
|
2849
|
+
var fulfilled = (value) => {
|
|
2850
|
+
try {
|
|
2851
|
+
step(generator.next(value));
|
|
2852
|
+
} catch (e) {
|
|
2853
|
+
reject(e);
|
|
2854
|
+
}
|
|
2855
|
+
};
|
|
2856
|
+
var rejected = (value) => {
|
|
2857
|
+
try {
|
|
2858
|
+
step(generator.throw(value));
|
|
2859
|
+
} catch (e) {
|
|
2860
|
+
reject(e);
|
|
2861
|
+
}
|
|
2862
|
+
};
|
|
2863
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
2864
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
2865
|
+
});
|
|
2866
|
+
};
|
|
2867
|
+
function useEyeDropper() {
|
|
2868
|
+
const isSupported = useSupported(
|
|
2869
|
+
() => typeof window !== "undefined" && "EyeDropper" in window,
|
|
2870
|
+
true
|
|
2871
|
+
);
|
|
2872
|
+
const open = React.useCallback(
|
|
2873
|
+
(..._0) => __async(this, [..._0], function* (options = {}) {
|
|
2874
|
+
if (!isSupported) {
|
|
2875
|
+
return {
|
|
2876
|
+
sRGBHex: ""
|
|
2877
|
+
};
|
|
2878
|
+
}
|
|
2879
|
+
const eyeDropper = new window.EyeDropper();
|
|
2880
|
+
return eyeDropper.open(options);
|
|
2881
|
+
}),
|
|
2882
|
+
[isSupported]
|
|
2883
|
+
);
|
|
2884
|
+
return [isSupported, open];
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2821
2887
|
exports.getHMSTime = getHMSTime;
|
|
2822
2888
|
exports.useActiveElement = useActiveElement;
|
|
2823
2889
|
exports.useAsyncEffect = useAsyncEffect;
|
|
@@ -2841,11 +2907,12 @@ exports.useElementVisibility = useElementVisibility;
|
|
|
2841
2907
|
exports.useEvent = useEvent;
|
|
2842
2908
|
exports.useEventEmitter = useEventEmitter;
|
|
2843
2909
|
exports.useEventListener = useEventListener;
|
|
2910
|
+
exports.useEyeDropper = useEyeDropper;
|
|
2844
2911
|
exports.useFavicon = useFavicon;
|
|
2845
2912
|
exports.useFileDialog = useFileDialog;
|
|
2846
2913
|
exports.useFirstMountState = useFirstMountState;
|
|
2847
2914
|
exports.useFocus = useFocus;
|
|
2848
|
-
exports.useFps =
|
|
2915
|
+
exports.useFps = index$2;
|
|
2849
2916
|
exports.useFullscreen = useFullscreen;
|
|
2850
2917
|
exports.useGeolocation = useGeolocation;
|
|
2851
2918
|
exports.useIdle = useIdle;
|
|
@@ -2857,7 +2924,7 @@ exports.useKeyModifier = useKeyModifier;
|
|
|
2857
2924
|
exports.useLatest = useLatest;
|
|
2858
2925
|
exports.useLocalStorage = useLocalStorage;
|
|
2859
2926
|
exports.useLongPress = useLongPress;
|
|
2860
|
-
exports.useMediaDevices =
|
|
2927
|
+
exports.useMediaDevices = index$3;
|
|
2861
2928
|
exports.useMediaQuery = useMediaQuery;
|
|
2862
2929
|
exports.useMount = useMount;
|
|
2863
2930
|
exports.useMountedState = useMountedState;
|
|
@@ -2866,8 +2933,8 @@ exports.useMousePressed = useMousePressed;
|
|
|
2866
2933
|
exports.useMutationObserver = useMutationObserver;
|
|
2867
2934
|
exports.useNetwork = useNetwork;
|
|
2868
2935
|
exports.useObjectUrl = useObjectUrl;
|
|
2869
|
-
exports.useOnceEffect =
|
|
2870
|
-
exports.useOnceLayoutEffect =
|
|
2936
|
+
exports.useOnceEffect = index$1;
|
|
2937
|
+
exports.useOnceLayoutEffect = index;
|
|
2871
2938
|
exports.useOnline = useOnline;
|
|
2872
2939
|
exports.useOrientation = useOrientation;
|
|
2873
2940
|
exports.usePageLeave = usePageLeave;
|
|
@@ -2886,7 +2953,9 @@ exports.useScrollIntoView = useScrollIntoView;
|
|
|
2886
2953
|
exports.useScrollLock = useScrollLock;
|
|
2887
2954
|
exports.useSessionStorage = useSessionStorage;
|
|
2888
2955
|
exports.useSticky = useSticky;
|
|
2956
|
+
exports.useSupported = useSupported;
|
|
2889
2957
|
exports.useTextDirection = useTextDirection;
|
|
2958
|
+
exports.useTextSelection = useTextSelection;
|
|
2890
2959
|
exports.useThrottle = useThrottle;
|
|
2891
2960
|
exports.useThrottleFn = useThrottleFn;
|
|
2892
2961
|
exports.useTimeout = useTimeout;
|
|
@@ -2896,7 +2965,7 @@ exports.useToggle = useToggle;
|
|
|
2896
2965
|
exports.useUnmount = useUnmount;
|
|
2897
2966
|
exports.useUpdate = useUpdate;
|
|
2898
2967
|
exports.useUpdateEffect = useUpdateEffect;
|
|
2899
|
-
exports.useUpdateLayoutEffect =
|
|
2968
|
+
exports.useUpdateLayoutEffect = index$4;
|
|
2900
2969
|
exports.useVirtualList = useVirtualList;
|
|
2901
2970
|
exports.useWindowScroll = useWindowScroll;
|
|
2902
2971
|
exports.useWindowSize = useWindowSize;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { MutableRefObject, useEffect, useLayoutEffect, Dispatch, SetStateAction, DependencyList, EffectCallback, RefObject, CSSProperties } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import lodash from 'lodash';
|
|
4
4
|
|
|
5
5
|
declare function usePrevious<T>(state: T): T | undefined;
|
|
6
6
|
|
|
@@ -45,9 +45,9 @@ declare function useSessionStorage(key: string, defaults: boolean, options?: Use
|
|
|
45
45
|
declare function useSessionStorage<T>(key: string, defaults: T, options?: UseStorageOptions<T>): readonly [T | null, Dispatch<SetStateAction<T | null>>];
|
|
46
46
|
declare function useSessionStorage<T = unknown>(key: string, defaults: null, options?: UseStorageOptions<T>): readonly [T | null, Dispatch<SetStateAction<T | null>>];
|
|
47
47
|
|
|
48
|
-
type Fn = (this: any, ...args: any[]) => any;
|
|
49
|
-
type Stoppable = [boolean, Fn, Fn];
|
|
50
|
-
type PointerType = "mouse" | "touch" | "pen";
|
|
48
|
+
declare type Fn = (this: any, ...args: any[]) => any;
|
|
49
|
+
declare type Stoppable = [boolean, Fn, Fn];
|
|
50
|
+
declare type PointerType = "mouse" | "touch" | "pen";
|
|
51
51
|
interface Position {
|
|
52
52
|
x: number;
|
|
53
53
|
y: number;
|
|
@@ -166,11 +166,11 @@ declare function useTimeout(ms?: number, options?: UseTimeoutFnOptions): Stoppab
|
|
|
166
166
|
|
|
167
167
|
declare function useMountedState(): () => boolean;
|
|
168
168
|
|
|
169
|
-
type TargetValue<T> = T | undefined | null;
|
|
170
|
-
type TargetType = HTMLElement | Element | Window | Document | EventTarget;
|
|
171
|
-
type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
|
|
169
|
+
declare type TargetValue<T> = T | undefined | null;
|
|
170
|
+
declare type TargetType = HTMLElement | Element | Window | Document | EventTarget;
|
|
171
|
+
declare type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
|
|
172
172
|
|
|
173
|
-
type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
|
|
173
|
+
declare type Target = BasicTarget<HTMLElement | Element | Window | Document | EventTarget>;
|
|
174
174
|
declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
|
|
175
175
|
declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
|
|
176
176
|
declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -180,7 +180,7 @@ declare function useEventListener(eventName: string, handler: (...p: any) => voi
|
|
|
180
180
|
|
|
181
181
|
declare function useCounter(initialValue?: number | (() => number), max?: number | null, min?: number | null): readonly [number, (newState: number | ((prev: number) => number) | (() => number)) => void, (delta?: number) => void, (delta?: number) => void, () => void];
|
|
182
182
|
|
|
183
|
-
type RafLoopReturns = readonly [() => void, () => void, () => boolean];
|
|
183
|
+
declare type RafLoopReturns = readonly [() => void, () => void, () => boolean];
|
|
184
184
|
declare function useRafFn(callback: FrameRequestCallback, initiallyActive?: boolean): RafLoopReturns;
|
|
185
185
|
|
|
186
186
|
interface IListener<T, U = void> {
|
|
@@ -218,7 +218,7 @@ declare function useFavicon(href: string, baseUrl?: string, rel?: string): void;
|
|
|
218
218
|
|
|
219
219
|
declare function useMutationObserver(callback: MutationCallback, target: BasicTarget, options?: MutationObserverInit): () => void;
|
|
220
220
|
|
|
221
|
-
type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
|
|
221
|
+
declare type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
|
|
222
222
|
declare function useCustomCompareEffect<TDeps extends DependencyList>(effect: EffectCallback, deps: TDeps, depsEqual: DepsEqualFnType<TDeps>): void;
|
|
223
223
|
|
|
224
224
|
declare function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void;
|
|
@@ -260,12 +260,12 @@ interface UseScriptTagOptions {
|
|
|
260
260
|
*/
|
|
261
261
|
attrs?: Record<string, string>;
|
|
262
262
|
}
|
|
263
|
-
type Status = "idle" | "loading" | "ready" | "error";
|
|
263
|
+
declare type Status = "idle" | "loading" | "ready" | "error";
|
|
264
264
|
declare function useScriptTag(src: string, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): readonly [HTMLScriptElement | null, Status, (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>, () => void];
|
|
265
265
|
|
|
266
|
-
type IState = PermissionState | "";
|
|
267
|
-
type DescriptorNamePolyfill = "accelerometer" | "accessibility-events" | "ambient-light-sensor" | "background-sync" | "camera" | "clipboard-read" | "clipboard-write" | "gyroscope" | "magnetometer" | "microphone" | "notifications" | "payment-handler" | "persistent-storage" | "push" | "speaker";
|
|
268
|
-
type GeneralPermissionDescriptor = PermissionDescriptor | {
|
|
266
|
+
declare type IState = PermissionState | "";
|
|
267
|
+
declare type DescriptorNamePolyfill = "accelerometer" | "accessibility-events" | "ambient-light-sensor" | "background-sync" | "camera" | "clipboard-read" | "clipboard-write" | "gyroscope" | "magnetometer" | "microphone" | "notifications" | "payment-handler" | "persistent-storage" | "push" | "speaker";
|
|
268
|
+
declare type GeneralPermissionDescriptor = PermissionDescriptor | {
|
|
269
269
|
name: DescriptorNamePolyfill;
|
|
270
270
|
};
|
|
271
271
|
declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor["name"]): IState;
|
|
@@ -296,7 +296,7 @@ declare function useMediaDevices(): {
|
|
|
296
296
|
};
|
|
297
297
|
declare const _default$3: typeof useMediaDevices;
|
|
298
298
|
|
|
299
|
-
type UseTextDirectionValue = "ltr" | "rtl" | "auto";
|
|
299
|
+
declare type UseTextDirectionValue = "ltr" | "rtl" | "auto";
|
|
300
300
|
interface UseTextDirectionOptions {
|
|
301
301
|
/**
|
|
302
302
|
* CSS Selector for the target element applying to
|
|
@@ -352,7 +352,7 @@ declare function useFullscreen(target: BasicTarget, options?: UseFullScreenOptio
|
|
|
352
352
|
readonly enterFullscreen: () => void;
|
|
353
353
|
readonly exitFullscreen: () => void;
|
|
354
354
|
readonly toggleFullscreen: () => void;
|
|
355
|
-
readonly isEnabled:
|
|
355
|
+
readonly isEnabled: boolean;
|
|
356
356
|
}];
|
|
357
357
|
|
|
358
358
|
interface INetworkInformation extends EventTarget {
|
|
@@ -539,7 +539,7 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
|
|
|
539
539
|
}
|
|
540
540
|
declare function useInfiniteScroll(target: BasicTarget<HTMLElement | SVGElement>, onLoadMore: (state: ReturnType<typeof useScroll>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
|
|
541
541
|
|
|
542
|
-
type KeyModifier = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Symbol" | "SymbolLock";
|
|
542
|
+
declare type KeyModifier = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Symbol" | "SymbolLock";
|
|
543
543
|
interface UseModifierOptions {
|
|
544
544
|
/**
|
|
545
545
|
* Event names that will prompt update to modifier states
|
|
@@ -556,8 +556,8 @@ interface UseModifierOptions {
|
|
|
556
556
|
}
|
|
557
557
|
declare function useKeyModifier(modifier: KeyModifier, options?: UseModifierOptions): boolean;
|
|
558
558
|
|
|
559
|
-
type IHookStateInitialSetter<S> = () => S;
|
|
560
|
-
type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
|
|
559
|
+
declare type IHookStateInitialSetter<S> = () => S;
|
|
560
|
+
declare type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
|
|
561
561
|
|
|
562
562
|
interface MousePressedOptions {
|
|
563
563
|
/**
|
|
@@ -579,7 +579,7 @@ interface MousePressedOptions {
|
|
|
579
579
|
*/
|
|
580
580
|
initialValue?: IHookStateInitAction<boolean>;
|
|
581
581
|
}
|
|
582
|
-
type MouseSourceType = "mouse" | "touch" | null;
|
|
582
|
+
declare type MouseSourceType = "mouse" | "touch" | null;
|
|
583
583
|
declare function useMousePressed(target?: BasicTarget, options?: MousePressedOptions): readonly [boolean, MouseSourceType];
|
|
584
584
|
|
|
585
585
|
declare function useScrollLock(target: BasicTarget<HTMLElement>, initialState?: boolean): readonly [boolean, (flag: boolean) => void];
|
|
@@ -626,10 +626,10 @@ interface UseVirtualListReturn<T> {
|
|
|
626
626
|
}
|
|
627
627
|
declare function useVirtualList<T = any>(list: T[] | undefined, options: UseVirtualListOptions): UseVirtualListReturn<T>;
|
|
628
628
|
|
|
629
|
-
type ColorScheme = "dark" | "light" | "no-preference";
|
|
629
|
+
declare type ColorScheme = "dark" | "light" | "no-preference";
|
|
630
630
|
declare function usePreferredColorScheme(defaultState?: ColorScheme): ColorScheme;
|
|
631
631
|
|
|
632
|
-
type Contrast = "more" | "less" | "custom" | "no-preference";
|
|
632
|
+
declare type Contrast = "more" | "less" | "custom" | "no-preference";
|
|
633
633
|
declare function usePreferredContrast(defaultState?: Contrast): Contrast;
|
|
634
634
|
|
|
635
635
|
declare function useActiveElement<T extends Element>(): T | null;
|
|
@@ -751,7 +751,7 @@ declare function useClipBorad(): readonly [
|
|
|
751
751
|
(txt: string) => Promise<void>
|
|
752
752
|
];
|
|
753
753
|
|
|
754
|
-
type EventType = MouseEvent | TouchEvent;
|
|
754
|
+
declare type EventType = MouseEvent | TouchEvent;
|
|
755
755
|
declare function useClickOutSide(target: BasicTarget, handler: (evt: EventType) => void): void;
|
|
756
756
|
|
|
757
757
|
declare function useCycleList<T>(list: T[], i?: number): readonly [T, (i?: number) => void, (i?: number) => void];
|
|
@@ -763,7 +763,7 @@ interface IProps<T> {
|
|
|
763
763
|
defaultValue?: T;
|
|
764
764
|
state?: T;
|
|
765
765
|
}
|
|
766
|
-
declare function useControlled<T = string>(
|
|
766
|
+
declare function useControlled<T = string>(props?: IProps<T>): readonly [T, (newValue: T) => void];
|
|
767
767
|
|
|
768
768
|
declare const _default$1: typeof useEffect | typeof react.useLayoutEffect;
|
|
769
769
|
|
|
@@ -816,4 +816,17 @@ declare function useAsyncEffect<T extends void>(effect: () => Promise<T> | T, cl
|
|
|
816
816
|
declare const getHMSTime: (timeDiff: number) => [string, string, string];
|
|
817
817
|
declare const useCountDown: (time: number, format?: (number: any) => [string, string, string], callback?: () => void) => readonly [string, string, string];
|
|
818
818
|
|
|
819
|
-
|
|
819
|
+
declare function useSupported(callback: () => unknown, sync?: boolean): boolean;
|
|
820
|
+
|
|
821
|
+
declare function useTextSelection(): Selection | null;
|
|
822
|
+
|
|
823
|
+
interface EyeDropperOpenOptions {
|
|
824
|
+
signal?: AbortSignal;
|
|
825
|
+
}
|
|
826
|
+
interface EyeDropperOpenReturnType {
|
|
827
|
+
sRGBHex: string;
|
|
828
|
+
}
|
|
829
|
+
declare function useEyeDropper(): readonly [boolean, (options?: EyeDropperOpenOptions) => Promise<EyeDropperOpenReturnType>];
|
|
830
|
+
declare type UseEyeDropperReturn = ReturnType<typeof useEyeDropper>;
|
|
831
|
+
|
|
832
|
+
export { ColorScheme, Contrast, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, _default$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useEffect, useLayoutEffect, useCallback, useMemo, useState, useReducer } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import lodash from 'lodash';
|
|
3
3
|
|
|
4
4
|
function usePrevious(state) {
|
|
5
5
|
const ref = useRef();
|
|
@@ -37,7 +37,7 @@ const createUpdateEffect = (hook) => (effect, deps) => {
|
|
|
37
37
|
|
|
38
38
|
var useUpdateEffect = createUpdateEffect(useEffect);
|
|
39
39
|
|
|
40
|
-
var
|
|
40
|
+
var index$4 = createUpdateEffect(useLayoutEffect);
|
|
41
41
|
|
|
42
42
|
var _a;
|
|
43
43
|
const isFunction = (val) => typeof val === "function";
|
|
@@ -76,7 +76,7 @@ function useEvent(fn) {
|
|
|
76
76
|
const isPrimitive$1 = (val) => val !== Object(val);
|
|
77
77
|
function useCustomCompareEffect(effect, deps, depsEqual) {
|
|
78
78
|
if (process.env.NODE_ENV !== "production") {
|
|
79
|
-
if (!(deps
|
|
79
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
80
80
|
console.warn(
|
|
81
81
|
"`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
|
|
82
82
|
);
|
|
@@ -100,9 +100,10 @@ function useCustomCompareEffect(effect, deps, depsEqual) {
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
const isPrimitive = (val) => val !== Object(val);
|
|
103
|
+
const { isEqual } = lodash;
|
|
103
104
|
function useDeepCompareEffect(effect, deps) {
|
|
104
105
|
if (process.env.NODE_ENV !== "production") {
|
|
105
|
-
if (!(deps
|
|
106
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
106
107
|
console.warn(
|
|
107
108
|
"`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
|
|
108
109
|
);
|
|
@@ -306,6 +307,7 @@ const getInitialState = (query, defaultState) => {
|
|
|
306
307
|
function useMediaQuery(query, defaultState) {
|
|
307
308
|
const [state, setState] = useState(getInitialState(query, defaultState));
|
|
308
309
|
useEffect(() => {
|
|
310
|
+
var _a;
|
|
309
311
|
let mounted = true;
|
|
310
312
|
const mql = window.matchMedia(query);
|
|
311
313
|
const onChange = () => {
|
|
@@ -317,15 +319,16 @@ function useMediaQuery(query, defaultState) {
|
|
|
317
319
|
if ("addEventListener" in mql) {
|
|
318
320
|
mql.addEventListener("change", onChange);
|
|
319
321
|
} else {
|
|
320
|
-
mql.addListener(onChange);
|
|
322
|
+
(_a = mql.addListener) == null ? void 0 : _a.call(mql, onChange);
|
|
321
323
|
}
|
|
322
324
|
setState(mql.matches);
|
|
323
325
|
return () => {
|
|
326
|
+
var _a2;
|
|
324
327
|
mounted = false;
|
|
325
328
|
if ("removeEventListener" in mql) {
|
|
326
329
|
mql.removeEventListener("change", onChange);
|
|
327
330
|
} else {
|
|
328
|
-
mql.removeListener(onChange);
|
|
331
|
+
(_a2 = mql.removeListener) == null ? void 0 : _a2.call(mql, onChange);
|
|
329
332
|
}
|
|
330
333
|
};
|
|
331
334
|
}, [query]);
|
|
@@ -366,6 +369,7 @@ function useUnmount(fn) {
|
|
|
366
369
|
);
|
|
367
370
|
}
|
|
368
371
|
|
|
372
|
+
const { throttle: throttle$1 } = lodash;
|
|
369
373
|
function useThrottleFn(fn, wait, options) {
|
|
370
374
|
if (isDev) {
|
|
371
375
|
if (!isFunction(fn)) {
|
|
@@ -376,13 +380,14 @@ function useThrottleFn(fn, wait, options) {
|
|
|
376
380
|
}
|
|
377
381
|
const fnRef = useLatest(fn);
|
|
378
382
|
const throttled = useMemo(
|
|
379
|
-
() => throttle(
|
|
383
|
+
() => throttle$1(
|
|
380
384
|
(...args) => {
|
|
381
385
|
return fnRef.current(...args);
|
|
382
386
|
},
|
|
383
387
|
wait,
|
|
384
388
|
options
|
|
385
389
|
),
|
|
390
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
386
391
|
[]
|
|
387
392
|
);
|
|
388
393
|
useUnmount(() => {
|
|
@@ -410,6 +415,7 @@ function useThrottle(value, wait, options) {
|
|
|
410
415
|
return throttled;
|
|
411
416
|
}
|
|
412
417
|
|
|
418
|
+
const { debounce } = lodash;
|
|
413
419
|
function useDebounceFn(fn, wait, options) {
|
|
414
420
|
if (isDev) {
|
|
415
421
|
if (!isFunction(fn)) {
|
|
@@ -427,6 +433,7 @@ function useDebounceFn(fn, wait, options) {
|
|
|
427
433
|
wait,
|
|
428
434
|
options
|
|
429
435
|
),
|
|
436
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
430
437
|
[]
|
|
431
438
|
);
|
|
432
439
|
useUnmount(() => {
|
|
@@ -586,17 +593,17 @@ function useCounter(initialValue = 0, max = null, min = null) {
|
|
|
586
593
|
const initFunc = () => {
|
|
587
594
|
let init = typeof initialValue === "function" ? initialValue() : initialValue;
|
|
588
595
|
typeof init !== "number" && console.error(
|
|
589
|
-
|
|
596
|
+
`initialValue has to be a number, got ${typeof initialValue}`
|
|
590
597
|
);
|
|
591
598
|
if (typeof min === "number") {
|
|
592
599
|
init = Math.max(init, min);
|
|
593
600
|
} else if (min !== null) {
|
|
594
|
-
console.error(
|
|
601
|
+
console.error(`min has to be a number, got ${typeof min}`);
|
|
595
602
|
}
|
|
596
603
|
if (typeof max === "number") {
|
|
597
604
|
init = Math.min(init, max);
|
|
598
605
|
} else if (max !== null) {
|
|
599
|
-
console.error(
|
|
606
|
+
console.error(`max has to be a number, got ${typeof max}`);
|
|
600
607
|
}
|
|
601
608
|
return init;
|
|
602
609
|
};
|
|
@@ -655,6 +662,7 @@ function useRafFn(callback, initiallyActive = true) {
|
|
|
655
662
|
}
|
|
656
663
|
},
|
|
657
664
|
() => rafActivity.current
|
|
665
|
+
// isActive
|
|
658
666
|
],
|
|
659
667
|
[step]
|
|
660
668
|
);
|
|
@@ -669,6 +677,7 @@ function useRafFn(callback, initiallyActive = true) {
|
|
|
669
677
|
|
|
670
678
|
function useEventEmitter() {
|
|
671
679
|
const listeners = useRef([]);
|
|
680
|
+
const _disposed = useRef(false);
|
|
672
681
|
const _event = useRef((listener) => {
|
|
673
682
|
listeners.current.push(listener);
|
|
674
683
|
const disposable = {
|
|
@@ -685,7 +694,6 @@ function useEventEmitter() {
|
|
|
685
694
|
};
|
|
686
695
|
return disposable;
|
|
687
696
|
});
|
|
688
|
-
const _disposed = useRef(false);
|
|
689
697
|
const fire = (arg1, arg2) => {
|
|
690
698
|
const queue = [];
|
|
691
699
|
for (let i = 0; i < listeners.current.length; i++) {
|
|
@@ -952,6 +960,7 @@ const defaultEvents$1 = [
|
|
|
952
960
|
"wheel"
|
|
953
961
|
];
|
|
954
962
|
const oneMinute = 6e4;
|
|
963
|
+
const { throttle } = lodash;
|
|
955
964
|
function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1) {
|
|
956
965
|
const [state, setState] = useState(initialState);
|
|
957
966
|
useEffect(() => {
|
|
@@ -1020,7 +1029,7 @@ function useMediaDevices() {
|
|
|
1020
1029
|
return state;
|
|
1021
1030
|
}
|
|
1022
1031
|
const useMediaDevicesMock = () => ({ devices: [] });
|
|
1023
|
-
var
|
|
1032
|
+
var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
|
|
1024
1033
|
|
|
1025
1034
|
function useTextDirection(options = {}) {
|
|
1026
1035
|
const { selector = "html", initialValue = "ltr" } = options;
|
|
@@ -1118,7 +1127,7 @@ function useFps(options) {
|
|
|
1118
1127
|
return fps;
|
|
1119
1128
|
}
|
|
1120
1129
|
const useFpsMock = (options) => 0;
|
|
1121
|
-
var
|
|
1130
|
+
var index$2 = typeof performance === "undefined" ? useFpsMock : useFps;
|
|
1122
1131
|
|
|
1123
1132
|
const initCoord = {
|
|
1124
1133
|
accuracy: 0,
|
|
@@ -1176,7 +1185,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1176
1185
|
|
|
1177
1186
|
/*!
|
|
1178
1187
|
* screenfull
|
|
1179
|
-
* v5.
|
|
1188
|
+
* v5.0.0 - 2019-09-09
|
|
1180
1189
|
* (c) Sindre Sorhus; MIT License
|
|
1181
1190
|
*/
|
|
1182
1191
|
|
|
@@ -1259,7 +1268,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1259
1268
|
};
|
|
1260
1269
|
|
|
1261
1270
|
var screenfull = {
|
|
1262
|
-
request: function (element
|
|
1271
|
+
request: function (element) {
|
|
1263
1272
|
return new Promise(function (resolve, reject) {
|
|
1264
1273
|
var onFullScreenEntered = function () {
|
|
1265
1274
|
this.off('change', onFullScreenEntered);
|
|
@@ -1270,11 +1279,7 @@ var screenfull$1 = {exports: {}};
|
|
|
1270
1279
|
|
|
1271
1280
|
element = element || document.documentElement;
|
|
1272
1281
|
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
if (returnPromise instanceof Promise) {
|
|
1276
|
-
returnPromise.then(onFullScreenEntered).catch(reject);
|
|
1277
|
-
}
|
|
1282
|
+
Promise.resolve(element[fn.requestFullscreen]()).catch(reject);
|
|
1278
1283
|
}.bind(this));
|
|
1279
1284
|
},
|
|
1280
1285
|
exit: function () {
|
|
@@ -1291,15 +1296,11 @@ var screenfull$1 = {exports: {}};
|
|
|
1291
1296
|
|
|
1292
1297
|
this.on('change', onFullScreenExit);
|
|
1293
1298
|
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
if (returnPromise instanceof Promise) {
|
|
1297
|
-
returnPromise.then(onFullScreenExit).catch(reject);
|
|
1298
|
-
}
|
|
1299
|
+
Promise.resolve(document[fn.exitFullscreen]()).catch(reject);
|
|
1299
1300
|
}.bind(this));
|
|
1300
1301
|
},
|
|
1301
|
-
toggle: function (element
|
|
1302
|
-
return this.isFullscreen ? this.exit() : this.request(element
|
|
1302
|
+
toggle: function (element) {
|
|
1303
|
+
return this.isFullscreen ? this.exit() : this.request(element);
|
|
1303
1304
|
},
|
|
1304
1305
|
onchange: function (callback) {
|
|
1305
1306
|
this.on('change', callback);
|
|
@@ -1431,7 +1432,7 @@ function getConnectionState(previousState) {
|
|
|
1431
1432
|
return {
|
|
1432
1433
|
online,
|
|
1433
1434
|
previous: previousOnline,
|
|
1434
|
-
since: online !== previousOnline ? new Date() : previousState == null ? void 0 : previousState.since,
|
|
1435
|
+
since: online !== previousOnline ? /* @__PURE__ */ new Date() : previousState == null ? void 0 : previousState.since,
|
|
1435
1436
|
downlink: conn == null ? void 0 : conn.downlink,
|
|
1436
1437
|
downlinkMax: conn == null ? void 0 : conn.downlinkMax,
|
|
1437
1438
|
effectiveType: conn == null ? void 0 : conn.effectiveType,
|
|
@@ -1785,7 +1786,7 @@ var __spreadValues = (a, b) => {
|
|
|
1785
1786
|
return a;
|
|
1786
1787
|
};
|
|
1787
1788
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1788
|
-
var __async$
|
|
1789
|
+
var __async$3 = (__this, __arguments, generator) => {
|
|
1789
1790
|
return new Promise((resolve, reject) => {
|
|
1790
1791
|
var fulfilled = (value) => {
|
|
1791
1792
|
try {
|
|
@@ -1819,7 +1820,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
|
|
|
1819
1820
|
const di = state[3][direction];
|
|
1820
1821
|
useUpdateEffect(() => {
|
|
1821
1822
|
const opts = latestOptions.current;
|
|
1822
|
-
const fn = () => __async$
|
|
1823
|
+
const fn = () => __async$3(this, null, function* () {
|
|
1823
1824
|
var _a2, _b2, _c, _d;
|
|
1824
1825
|
const previous = {
|
|
1825
1826
|
height: (_b2 = (_a2 = element.current) == null ? void 0 : _a2.scrollHeight) != null ? _b2 : 0,
|
|
@@ -2366,7 +2367,7 @@ function useWindowScroll() {
|
|
|
2366
2367
|
return state;
|
|
2367
2368
|
}
|
|
2368
2369
|
|
|
2369
|
-
var __async$
|
|
2370
|
+
var __async$2 = (__this, __arguments, generator) => {
|
|
2370
2371
|
return new Promise((resolve, reject) => {
|
|
2371
2372
|
var fulfilled = (value) => {
|
|
2372
2373
|
try {
|
|
@@ -2395,7 +2396,7 @@ function useClipBorad() {
|
|
|
2395
2396
|
}, []);
|
|
2396
2397
|
useEventListener("copy", updateText);
|
|
2397
2398
|
useEventListener("cut", updateText);
|
|
2398
|
-
const copy = useCallback((txt) => __async$
|
|
2399
|
+
const copy = useCallback((txt) => __async$2(this, null, function* () {
|
|
2399
2400
|
setText(txt);
|
|
2400
2401
|
yield window.navigator.clipboard.writeText(txt);
|
|
2401
2402
|
}), []);
|
|
@@ -2443,9 +2444,6 @@ function useFocus(target, initialValue = false) {
|
|
|
2443
2444
|
const [focus, innerSetFocus] = useState(initialValue);
|
|
2444
2445
|
useEventListener("focus", () => innerSetFocus(true), target);
|
|
2445
2446
|
useEventListener("blur", () => innerSetFocus(false), target);
|
|
2446
|
-
useMount(() => {
|
|
2447
|
-
setFocus(focus);
|
|
2448
|
-
});
|
|
2449
2447
|
const setFocus = (value) => {
|
|
2450
2448
|
const element = getTargetElement(target);
|
|
2451
2449
|
if (!element) {
|
|
@@ -2457,14 +2455,18 @@ function useFocus(target, initialValue = false) {
|
|
|
2457
2455
|
element.focus();
|
|
2458
2456
|
}
|
|
2459
2457
|
};
|
|
2458
|
+
useMount(() => {
|
|
2459
|
+
setFocus(focus);
|
|
2460
|
+
});
|
|
2460
2461
|
return [focus, setFocus];
|
|
2461
2462
|
}
|
|
2462
2463
|
|
|
2463
|
-
function useControlled({
|
|
2464
|
-
controlled,
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2464
|
+
function useControlled(props) {
|
|
2465
|
+
const { controlled, defaultValue: defaultProp, state } = props != null ? props : {
|
|
2466
|
+
controlled: void 0,
|
|
2467
|
+
defaultValue: void 0,
|
|
2468
|
+
state: "value"
|
|
2469
|
+
};
|
|
2468
2470
|
const { current: isControlled } = useRef(controlled !== void 0);
|
|
2469
2471
|
const [valueState, setValue] = useState(defaultProp);
|
|
2470
2472
|
const value = isControlled ? controlled : valueState;
|
|
@@ -2503,9 +2505,9 @@ const createOnceEffect = (hook) => (effect, deps) => {
|
|
|
2503
2505
|
}, deps);
|
|
2504
2506
|
};
|
|
2505
2507
|
|
|
2506
|
-
var
|
|
2508
|
+
var index$1 = createOnceEffect(useEffect);
|
|
2507
2509
|
|
|
2508
|
-
var
|
|
2510
|
+
var index = createOnceEffect(useLayoutEffect);
|
|
2509
2511
|
|
|
2510
2512
|
function useReducedMotion(defaultState) {
|
|
2511
2513
|
return useMediaQuery("(prefers-reduced-motion: reduce)", defaultState);
|
|
@@ -2740,7 +2742,7 @@ const useSticky = ({
|
|
|
2740
2742
|
return [isSticky, setSticky];
|
|
2741
2743
|
};
|
|
2742
2744
|
|
|
2743
|
-
var __async = (__this, __arguments, generator) => {
|
|
2745
|
+
var __async$1 = (__this, __arguments, generator) => {
|
|
2744
2746
|
return new Promise((resolve, reject) => {
|
|
2745
2747
|
var fulfilled = (value) => {
|
|
2746
2748
|
try {
|
|
@@ -2763,7 +2765,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
2763
2765
|
function useAsyncEffect(effect, cleanup = noop, deps) {
|
|
2764
2766
|
const mounted = useMountedState();
|
|
2765
2767
|
useEffect(() => {
|
|
2766
|
-
const execute = () => __async(this, null, function* () {
|
|
2768
|
+
const execute = () => __async$1(this, null, function* () {
|
|
2767
2769
|
if (!mounted()) {
|
|
2768
2770
|
return;
|
|
2769
2771
|
}
|
|
@@ -2810,4 +2812,67 @@ const useCountDown = (time, format = getHMSTime, callback) => {
|
|
|
2810
2812
|
return [hour, minute, secoud];
|
|
2811
2813
|
};
|
|
2812
2814
|
|
|
2813
|
-
|
|
2815
|
+
function useSupported(callback, sync = false) {
|
|
2816
|
+
const [supported, setSupported] = useState(false);
|
|
2817
|
+
const effect = sync ? useIsomorphicLayoutEffect : useEffect;
|
|
2818
|
+
effect(() => {
|
|
2819
|
+
setSupported(Boolean(callback()));
|
|
2820
|
+
}, []);
|
|
2821
|
+
return supported;
|
|
2822
|
+
}
|
|
2823
|
+
|
|
2824
|
+
function useTextSelection() {
|
|
2825
|
+
const [selection, setSelection] = useState(null);
|
|
2826
|
+
const forceUpdate = useUpdate();
|
|
2827
|
+
const handleSelectionChange = () => {
|
|
2828
|
+
setSelection(document.getSelection());
|
|
2829
|
+
forceUpdate();
|
|
2830
|
+
};
|
|
2831
|
+
useEventListener("selectionchange", handleSelectionChange, () => document);
|
|
2832
|
+
useEffect(() => {
|
|
2833
|
+
setSelection(document.getSelection());
|
|
2834
|
+
}, []);
|
|
2835
|
+
return selection;
|
|
2836
|
+
}
|
|
2837
|
+
|
|
2838
|
+
var __async = (__this, __arguments, generator) => {
|
|
2839
|
+
return new Promise((resolve, reject) => {
|
|
2840
|
+
var fulfilled = (value) => {
|
|
2841
|
+
try {
|
|
2842
|
+
step(generator.next(value));
|
|
2843
|
+
} catch (e) {
|
|
2844
|
+
reject(e);
|
|
2845
|
+
}
|
|
2846
|
+
};
|
|
2847
|
+
var rejected = (value) => {
|
|
2848
|
+
try {
|
|
2849
|
+
step(generator.throw(value));
|
|
2850
|
+
} catch (e) {
|
|
2851
|
+
reject(e);
|
|
2852
|
+
}
|
|
2853
|
+
};
|
|
2854
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
2855
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
2856
|
+
});
|
|
2857
|
+
};
|
|
2858
|
+
function useEyeDropper() {
|
|
2859
|
+
const isSupported = useSupported(
|
|
2860
|
+
() => typeof window !== "undefined" && "EyeDropper" in window,
|
|
2861
|
+
true
|
|
2862
|
+
);
|
|
2863
|
+
const open = useCallback(
|
|
2864
|
+
(..._0) => __async(this, [..._0], function* (options = {}) {
|
|
2865
|
+
if (!isSupported) {
|
|
2866
|
+
return {
|
|
2867
|
+
sRGBHex: ""
|
|
2868
|
+
};
|
|
2869
|
+
}
|
|
2870
|
+
const eyeDropper = new window.EyeDropper();
|
|
2871
|
+
return eyeDropper.open(options);
|
|
2872
|
+
}),
|
|
2873
|
+
[isSupported]
|
|
2874
|
+
);
|
|
2875
|
+
return [isSupported, open];
|
|
2876
|
+
}
|
|
2877
|
+
|
|
2878
|
+
export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, index$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, index$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
|
package/package.json
CHANGED
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reactuses/core",
|
|
3
|
-
"version": "2.2.
|
|
4
|
-
"main": "./dist/index.cjs",
|
|
5
|
-
"module": "./dist/index.mjs",
|
|
6
|
-
"types": "./dist/index.d.ts",
|
|
7
|
-
"files": [
|
|
8
|
-
"dist",
|
|
9
|
-
"package.json",
|
|
10
|
-
"LICENSE",
|
|
11
|
-
"README.md"
|
|
12
|
-
],
|
|
13
|
-
"sideEffects": false,
|
|
3
|
+
"version": "2.2.6",
|
|
14
4
|
"license": "Unlicense",
|
|
15
5
|
"homepage": "https://www.reactuse.com/",
|
|
16
6
|
"repository": {
|
|
@@ -21,6 +11,32 @@
|
|
|
21
11
|
"bugs": {
|
|
22
12
|
"url": "https://github.com/childrentime/reactuse/issues"
|
|
23
13
|
},
|
|
14
|
+
"keywords": [
|
|
15
|
+
"react",
|
|
16
|
+
"react-use",
|
|
17
|
+
"react hooks",
|
|
18
|
+
"hook",
|
|
19
|
+
"hooks",
|
|
20
|
+
"component"
|
|
21
|
+
],
|
|
22
|
+
"sideEffects": false,
|
|
23
|
+
"exports": {
|
|
24
|
+
"./package.json": "./package.json",
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"require": "./dist/index.cjs",
|
|
28
|
+
"import": "./dist/index.mjs"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"main": "./dist/index.cjs",
|
|
32
|
+
"module": "./dist/index.mjs",
|
|
33
|
+
"types": "./dist/index.d.ts",
|
|
34
|
+
"files": [
|
|
35
|
+
"dist",
|
|
36
|
+
"package.json",
|
|
37
|
+
"LICENSE",
|
|
38
|
+
"README.md"
|
|
39
|
+
],
|
|
24
40
|
"scripts": {
|
|
25
41
|
"lint": "eslint \"{hooks,tests}/**/*.{ts,tsx}\"",
|
|
26
42
|
"build": "esno scripts/build.ts",
|
|
@@ -32,8 +48,10 @@
|
|
|
32
48
|
"test": "jest",
|
|
33
49
|
"test:coverage": "jest --coverage"
|
|
34
50
|
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
53
|
+
},
|
|
35
54
|
"dependencies": {
|
|
36
|
-
"@testing-library/react": "^13.4.0",
|
|
37
55
|
"lodash": "^4.17.21",
|
|
38
56
|
"screenfull": "^5.0.0"
|
|
39
57
|
},
|
|
@@ -53,16 +71,11 @@
|
|
|
53
71
|
"@types/lodash": "^4.14.184",
|
|
54
72
|
"@types/node": "^18.11.9",
|
|
55
73
|
"@types/react": "^18.0.25",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
|
57
|
-
"@typescript-eslint/parser": "^5.36.1",
|
|
58
74
|
"babel-jest": "^29.0.2",
|
|
59
75
|
"consola": "^2.15.3",
|
|
60
76
|
"cross-env": "^7.0.3",
|
|
77
|
+
"esbuild": "^0.17.15",
|
|
61
78
|
"esbuild-register": "^3.4.1",
|
|
62
|
-
"eslint": "^8.23.0",
|
|
63
|
-
"eslint-config-prettier": "^8.5.0",
|
|
64
|
-
"eslint-plugin-react": "^7.31.5",
|
|
65
|
-
"eslint-plugin-react-hooks": "^4.6.0",
|
|
66
79
|
"esno": "^0.16.3",
|
|
67
80
|
"fast-glob": "^3.2.12",
|
|
68
81
|
"fs-extra": "^10.1.0",
|
|
@@ -74,17 +87,7 @@
|
|
|
74
87
|
"rollup-plugin-dts": "^4.2.2",
|
|
75
88
|
"rollup-plugin-esbuild": "^4.10.1",
|
|
76
89
|
"ts-node": "^10.9.1",
|
|
77
|
-
"typescript": "^4.8.2"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
81
|
-
},
|
|
82
|
-
"keywords": [
|
|
83
|
-
"react",
|
|
84
|
-
"react-use",
|
|
85
|
-
"react hooks",
|
|
86
|
-
"hook",
|
|
87
|
-
"hooks",
|
|
88
|
-
"component"
|
|
89
|
-
]
|
|
90
|
+
"typescript": "^4.8.2",
|
|
91
|
+
"@testing-library/react": "^13.4.0"
|
|
92
|
+
}
|
|
90
93
|
}
|