@reactuses/core 5.0.18 → 5.0.19-beta.2
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 +13 -13
- package/dist/index.cjs +251 -14
- package/dist/index.d.cts +180 -1
- package/dist/index.d.mts +180 -1
- package/dist/index.d.ts +180 -1
- package/dist/index.mjs +245 -12
- package/dist/useQRCode.cjs +95 -0
- package/dist/useQRCode.d.cts +36 -0
- package/dist/useQRCode.d.mts +36 -0
- package/dist/useQRCode.mjs +88 -0
- package/package.json +19 -1
- package/dist/index-client-DJgtg2U_.cjs +0 -30
- package/dist/index-client-Qon46B4S.js +0 -28
package/dist/index.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { isEqual, debounce, throttle } from 'lodash-es';
|
|
|
3
3
|
import Cookies from 'js-cookie';
|
|
4
4
|
import screenfull from 'screenfull';
|
|
5
5
|
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
|
|
6
|
-
export { a as assignRef, m as mergeRefs, u as useMergedRefs } from './index-client-Qon46B4S.js';
|
|
7
6
|
|
|
8
7
|
const useLatest = (value)=>{
|
|
9
8
|
const ref = useRef(value);
|
|
@@ -199,7 +198,7 @@ const useClickOutside = (target, handler, enabled = true)=>{
|
|
|
199
198
|
useEventListener('touchstart', listener, defaultWindow, listerOptions);
|
|
200
199
|
};
|
|
201
200
|
|
|
202
|
-
function getInitialState$
|
|
201
|
+
function getInitialState$5(key, defaultValue) {
|
|
203
202
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
204
203
|
if (defaultValue !== undefined) {
|
|
205
204
|
return defaultValue;
|
|
@@ -213,7 +212,7 @@ function getInitialState$4(key, defaultValue) {
|
|
|
213
212
|
return '';
|
|
214
213
|
}
|
|
215
214
|
const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
|
|
216
|
-
const [cookieValue, setCookieValue] = useState(getInitialState$
|
|
215
|
+
const [cookieValue, setCookieValue] = useState(getInitialState$5(key, defaultValue));
|
|
217
216
|
useEffect(()=>{
|
|
218
217
|
const getStoredValue = ()=>{
|
|
219
218
|
const raw = Cookies.get(key);
|
|
@@ -434,7 +433,7 @@ const defaultOptions = {
|
|
|
434
433
|
observe: false
|
|
435
434
|
};
|
|
436
435
|
|
|
437
|
-
function getInitialState$
|
|
436
|
+
function getInitialState$4(defaultValue) {
|
|
438
437
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
439
438
|
if (defaultValue !== undefined) {
|
|
440
439
|
return defaultValue;
|
|
@@ -449,7 +448,7 @@ function getInitialState$3(defaultValue) {
|
|
|
449
448
|
}
|
|
450
449
|
const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
|
|
451
450
|
const { observe } = options;
|
|
452
|
-
const [variable, setVariable] = useState(getInitialState$
|
|
451
|
+
const [variable, setVariable] = useState(getInitialState$4(defaultValue));
|
|
453
452
|
const observerRef = useRef();
|
|
454
453
|
const set = useCallback((v)=>{
|
|
455
454
|
const element = getTargetElement(target);
|
|
@@ -571,7 +570,7 @@ const StorageSerializers = {
|
|
|
571
570
|
write: (v)=>v.toISOString()
|
|
572
571
|
}
|
|
573
572
|
};
|
|
574
|
-
function getInitialState$
|
|
573
|
+
function getInitialState$3(key, defaultValue, storage, serializer, onError) {
|
|
575
574
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
576
575
|
if (defaultValue !== undefined) {
|
|
577
576
|
return defaultValue;
|
|
@@ -604,7 +603,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
|
|
|
604
603
|
const type = guessSerializerType(defaultValue);
|
|
605
604
|
var _options_serializer;
|
|
606
605
|
const serializer = (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
|
|
607
|
-
const [state, setState] = useState(getInitialState$
|
|
606
|
+
const [state, setState] = useState(getInitialState$3(key, defaultValue, storage, serializer, onError));
|
|
608
607
|
useDeepCompareEffect(()=>{
|
|
609
608
|
var _ref;
|
|
610
609
|
const data = (_ref = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue) != null ? _ref : null;
|
|
@@ -747,7 +746,7 @@ const useDebounce = (value, wait, options)=>{
|
|
|
747
746
|
return debounced;
|
|
748
747
|
};
|
|
749
748
|
|
|
750
|
-
function getInitialState$
|
|
749
|
+
function getInitialState$2(defaultValue) {
|
|
751
750
|
// Prevent a React hydration mismatch when a default value is provided.
|
|
752
751
|
if (defaultValue !== undefined) {
|
|
753
752
|
return defaultValue;
|
|
@@ -761,7 +760,7 @@ function getInitialState$1(defaultValue) {
|
|
|
761
760
|
return 'visible';
|
|
762
761
|
}
|
|
763
762
|
function useDocumentVisibility(defaultValue) {
|
|
764
|
-
const [visible, setVisible] = useState(getInitialState$
|
|
763
|
+
const [visible, setVisible] = useState(getInitialState$2(defaultValue));
|
|
765
764
|
useEventListener('visibilitychange', ()=>{
|
|
766
765
|
setVisible(document.visibilityState);
|
|
767
766
|
}, ()=>document);
|
|
@@ -2027,7 +2026,7 @@ const useMediaDevices = (options = {})=>{
|
|
|
2027
2026
|
];
|
|
2028
2027
|
};
|
|
2029
2028
|
|
|
2030
|
-
function getInitialState(query, defaultState) {
|
|
2029
|
+
function getInitialState$1(query, defaultState) {
|
|
2031
2030
|
// Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
|
|
2032
2031
|
if (defaultState !== undefined) {
|
|
2033
2032
|
return defaultState;
|
|
@@ -2042,7 +2041,7 @@ function getInitialState(query, defaultState) {
|
|
|
2042
2041
|
return false;
|
|
2043
2042
|
}
|
|
2044
2043
|
const useMediaQuery = (query, defaultState)=>{
|
|
2045
|
-
const [state, setState] = useState(getInitialState(query, defaultState));
|
|
2044
|
+
const [state, setState] = useState(getInitialState$1(query, defaultState));
|
|
2046
2045
|
useEffect(()=>{
|
|
2047
2046
|
let mounted = true;
|
|
2048
2047
|
const mql = window.matchMedia(query);
|
|
@@ -3494,6 +3493,30 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3494
3493
|
};
|
|
3495
3494
|
};
|
|
3496
3495
|
|
|
3496
|
+
function assignRef(ref, value) {
|
|
3497
|
+
if (ref == null) return;
|
|
3498
|
+
if (typeof ref === 'function') {
|
|
3499
|
+
ref(value);
|
|
3500
|
+
return;
|
|
3501
|
+
}
|
|
3502
|
+
try {
|
|
3503
|
+
ref.current = value;
|
|
3504
|
+
} catch (error) {
|
|
3505
|
+
throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
|
|
3506
|
+
}
|
|
3507
|
+
}
|
|
3508
|
+
function mergeRefs(...refs) {
|
|
3509
|
+
return (node)=>{
|
|
3510
|
+
refs.forEach((ref)=>{
|
|
3511
|
+
assignRef(ref, node);
|
|
3512
|
+
});
|
|
3513
|
+
};
|
|
3514
|
+
}
|
|
3515
|
+
function useMergedRefs(...refs) {
|
|
3516
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3517
|
+
return useMemo(()=>mergeRefs(...refs), refs);
|
|
3518
|
+
}
|
|
3519
|
+
|
|
3497
3520
|
/**
|
|
3498
3521
|
* @description copy from swr
|
|
3499
3522
|
*/ const use = React.use || ((thenable)=>{
|
|
@@ -3517,4 +3540,214 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
|
|
|
3517
3540
|
}
|
|
3518
3541
|
});
|
|
3519
3542
|
|
|
3520
|
-
|
|
3543
|
+
function getInitialState(defaultState) {
|
|
3544
|
+
// Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
|
|
3545
|
+
if (defaultState !== undefined) {
|
|
3546
|
+
return defaultState;
|
|
3547
|
+
}
|
|
3548
|
+
if (isBrowser) {
|
|
3549
|
+
const navigator1 = window.navigator;
|
|
3550
|
+
return navigator1.languages;
|
|
3551
|
+
}
|
|
3552
|
+
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
|
|
3553
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
3554
|
+
console.warn('`usePreferredLanguage` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
|
|
3555
|
+
}
|
|
3556
|
+
return [
|
|
3557
|
+
'en'
|
|
3558
|
+
];
|
|
3559
|
+
}
|
|
3560
|
+
const usePreferredLanguages = (defaultLanguages)=>{
|
|
3561
|
+
const [state, setState] = useState(getInitialState(defaultLanguages));
|
|
3562
|
+
useEventListener('languagechange', ()=>{
|
|
3563
|
+
setState(navigator.languages);
|
|
3564
|
+
});
|
|
3565
|
+
return state;
|
|
3566
|
+
};
|
|
3567
|
+
|
|
3568
|
+
const useBroadcastChannel = (options)=>{
|
|
3569
|
+
const { name } = options;
|
|
3570
|
+
const isSupported = useSupported(()=>window && 'BroadcastChannel' in window);
|
|
3571
|
+
const [isClosed, setIsClosed] = useState(false);
|
|
3572
|
+
const [data, setData] = useState();
|
|
3573
|
+
const [error, setError] = useState(null);
|
|
3574
|
+
const [timeStamp, setTimeStamp] = useState(0);
|
|
3575
|
+
const channelRef = useRef();
|
|
3576
|
+
const post = useCallback((data)=>{
|
|
3577
|
+
if (channelRef.current) {
|
|
3578
|
+
channelRef.current.postMessage(data);
|
|
3579
|
+
}
|
|
3580
|
+
}, []);
|
|
3581
|
+
const close = useCallback(()=>{
|
|
3582
|
+
if (channelRef.current) {
|
|
3583
|
+
channelRef.current.close();
|
|
3584
|
+
}
|
|
3585
|
+
setIsClosed(true);
|
|
3586
|
+
}, []);
|
|
3587
|
+
useEffect(()=>{
|
|
3588
|
+
if (isSupported) {
|
|
3589
|
+
channelRef.current = new BroadcastChannel(name);
|
|
3590
|
+
setError(null);
|
|
3591
|
+
const handleMessage = (e)=>{
|
|
3592
|
+
setData(e.data);
|
|
3593
|
+
// avoid data is same between two messages
|
|
3594
|
+
setTimeStamp(Date.now());
|
|
3595
|
+
};
|
|
3596
|
+
const handleError = (e)=>{
|
|
3597
|
+
setError(e);
|
|
3598
|
+
};
|
|
3599
|
+
const handleClose = ()=>{
|
|
3600
|
+
setIsClosed(true);
|
|
3601
|
+
};
|
|
3602
|
+
channelRef.current.addEventListener('message', handleMessage, {
|
|
3603
|
+
passive: true
|
|
3604
|
+
});
|
|
3605
|
+
channelRef.current.addEventListener('messageerror', handleError, {
|
|
3606
|
+
passive: true
|
|
3607
|
+
});
|
|
3608
|
+
channelRef.current.addEventListener('close', handleClose);
|
|
3609
|
+
return ()=>{
|
|
3610
|
+
if (channelRef.current) {
|
|
3611
|
+
channelRef.current.removeEventListener('message', handleMessage);
|
|
3612
|
+
channelRef.current.removeEventListener('messageerror', handleError);
|
|
3613
|
+
channelRef.current.removeEventListener('close', handleClose);
|
|
3614
|
+
close();
|
|
3615
|
+
}
|
|
3616
|
+
};
|
|
3617
|
+
}
|
|
3618
|
+
return close;
|
|
3619
|
+
}, [
|
|
3620
|
+
isSupported,
|
|
3621
|
+
name,
|
|
3622
|
+
close
|
|
3623
|
+
]);
|
|
3624
|
+
return {
|
|
3625
|
+
isSupported,
|
|
3626
|
+
channel: channelRef.current,
|
|
3627
|
+
data,
|
|
3628
|
+
post,
|
|
3629
|
+
close,
|
|
3630
|
+
error,
|
|
3631
|
+
isClosed,
|
|
3632
|
+
timeStamp
|
|
3633
|
+
};
|
|
3634
|
+
};
|
|
3635
|
+
|
|
3636
|
+
const useDevicePixelRatio = ()=>{
|
|
3637
|
+
const [pixelRatio, setPixelRatio] = useState(1);
|
|
3638
|
+
const observe = useCallback(()=>{
|
|
3639
|
+
if (!window) return;
|
|
3640
|
+
setPixelRatio(window.devicePixelRatio);
|
|
3641
|
+
const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
|
|
3642
|
+
const handleChange = ()=>{
|
|
3643
|
+
observe();
|
|
3644
|
+
};
|
|
3645
|
+
media.addEventListener('change', handleChange, {
|
|
3646
|
+
once: true
|
|
3647
|
+
});
|
|
3648
|
+
return ()=>{
|
|
3649
|
+
media.removeEventListener('change', handleChange);
|
|
3650
|
+
};
|
|
3651
|
+
}, []);
|
|
3652
|
+
useEffect(()=>{
|
|
3653
|
+
const cleanup = observe();
|
|
3654
|
+
return cleanup;
|
|
3655
|
+
}, [
|
|
3656
|
+
observe
|
|
3657
|
+
]);
|
|
3658
|
+
return {
|
|
3659
|
+
pixelRatio
|
|
3660
|
+
};
|
|
3661
|
+
};
|
|
3662
|
+
|
|
3663
|
+
const useElementByPoint = (options)=>{
|
|
3664
|
+
const { x, y, document: doc = typeof document !== 'undefined' ? document : null, multiple = false, interval = 'requestAnimationFrame', immediate = true } = options;
|
|
3665
|
+
const isSupported = useSupported(()=>{
|
|
3666
|
+
if (multiple) return doc && 'elementsFromPoint' in doc;
|
|
3667
|
+
return doc && 'elementFromPoint' in doc;
|
|
3668
|
+
});
|
|
3669
|
+
const [element, setElement] = useState(null);
|
|
3670
|
+
const [isActive, setIsActive] = useState(immediate);
|
|
3671
|
+
const rafIdRef = useRef(null);
|
|
3672
|
+
const intervalIdRef = useRef(null);
|
|
3673
|
+
const getXY = useCallback(()=>{
|
|
3674
|
+
// 需要判断 NaN
|
|
3675
|
+
const currentX = typeof x === 'function' ? x() : x;
|
|
3676
|
+
const currentY = typeof y === 'function' ? y() : y;
|
|
3677
|
+
return {
|
|
3678
|
+
x: Number.isNaN(currentX) ? 0 : currentX,
|
|
3679
|
+
y: Number.isNaN(currentY) ? 0 : currentY
|
|
3680
|
+
};
|
|
3681
|
+
}, [
|
|
3682
|
+
x,
|
|
3683
|
+
y
|
|
3684
|
+
]);
|
|
3685
|
+
const cb = useCallback(()=>{
|
|
3686
|
+
const { x: currentX, y: currentY } = getXY();
|
|
3687
|
+
var _doc_elementsFromPoint, _doc_elementFromPoint;
|
|
3688
|
+
setElement(multiple ? (_doc_elementsFromPoint = doc == null ? void 0 : doc.elementsFromPoint(currentX, currentY)) != null ? _doc_elementsFromPoint : [] : (_doc_elementFromPoint = doc == null ? void 0 : doc.elementFromPoint(currentX, currentY)) != null ? _doc_elementFromPoint : null);
|
|
3689
|
+
}, [
|
|
3690
|
+
doc,
|
|
3691
|
+
multiple,
|
|
3692
|
+
getXY
|
|
3693
|
+
]);
|
|
3694
|
+
const cleanup = useCallback(()=>{
|
|
3695
|
+
if (rafIdRef.current !== null) {
|
|
3696
|
+
cancelAnimationFrame(rafIdRef.current);
|
|
3697
|
+
rafIdRef.current = null;
|
|
3698
|
+
}
|
|
3699
|
+
if (intervalIdRef.current !== null) {
|
|
3700
|
+
clearInterval(intervalIdRef.current);
|
|
3701
|
+
intervalIdRef.current = null;
|
|
3702
|
+
}
|
|
3703
|
+
}, []);
|
|
3704
|
+
const pause = useCallback(()=>{
|
|
3705
|
+
setIsActive(false);
|
|
3706
|
+
cleanup();
|
|
3707
|
+
}, [
|
|
3708
|
+
cleanup
|
|
3709
|
+
]);
|
|
3710
|
+
const resume = useCallback(()=>{
|
|
3711
|
+
setIsActive(true);
|
|
3712
|
+
}, []);
|
|
3713
|
+
useEffect(()=>{
|
|
3714
|
+
if (!isActive) {
|
|
3715
|
+
return;
|
|
3716
|
+
}
|
|
3717
|
+
if (interval === 'requestAnimationFrame') {
|
|
3718
|
+
const runRaf = ()=>{
|
|
3719
|
+
cb();
|
|
3720
|
+
rafIdRef.current = requestAnimationFrame(runRaf);
|
|
3721
|
+
};
|
|
3722
|
+
runRaf();
|
|
3723
|
+
} else {
|
|
3724
|
+
cb();
|
|
3725
|
+
intervalIdRef.current = setInterval(cb, interval);
|
|
3726
|
+
}
|
|
3727
|
+
return cleanup;
|
|
3728
|
+
}, [
|
|
3729
|
+
isActive,
|
|
3730
|
+
interval,
|
|
3731
|
+
cb,
|
|
3732
|
+
cleanup
|
|
3733
|
+
]);
|
|
3734
|
+
useEffect(()=>{
|
|
3735
|
+
if (immediate) {
|
|
3736
|
+
resume();
|
|
3737
|
+
}
|
|
3738
|
+
return pause;
|
|
3739
|
+
}, [
|
|
3740
|
+
immediate,
|
|
3741
|
+
resume,
|
|
3742
|
+
pause
|
|
3743
|
+
]);
|
|
3744
|
+
return {
|
|
3745
|
+
isSupported,
|
|
3746
|
+
element,
|
|
3747
|
+
pause,
|
|
3748
|
+
resume,
|
|
3749
|
+
isActive
|
|
3750
|
+
};
|
|
3751
|
+
};
|
|
3752
|
+
|
|
3753
|
+
export { assignRef, defaultOptions, mergeRefs, use, useActiveElement, useAsyncEffect, useBroadcastChannel, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDevicePixelRatio, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMergedRefs, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2
|
+
|
|
3
|
+
var QRCode = require('qrcode');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var lodashEs = require('lodash-es');
|
|
6
|
+
|
|
7
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
+
|
|
9
|
+
var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
|
|
10
|
+
|
|
11
|
+
const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
12
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
13
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
14
|
+
console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
15
|
+
}
|
|
16
|
+
if (typeof depsEqual !== 'function') {
|
|
17
|
+
console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
const ref = react.useRef(undefined);
|
|
21
|
+
if (!ref.current || !depsEqual(deps, ref.current)) {
|
|
22
|
+
ref.current = deps;
|
|
23
|
+
}
|
|
24
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
25
|
+
react.useEffect(effect, ref.current);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const useDeepCompareEffect = (effect, deps)=>{
|
|
29
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
30
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
31
|
+
console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
useCustomCompareEffect(effect, deps, lodashEs.isEqual);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const defaultOptions = {};
|
|
38
|
+
|
|
39
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
40
|
+
try {
|
|
41
|
+
var info = gen[key](arg);
|
|
42
|
+
var value = info.value;
|
|
43
|
+
} catch (error) {
|
|
44
|
+
reject(error);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
if (info.done) {
|
|
48
|
+
resolve(value);
|
|
49
|
+
} else {
|
|
50
|
+
Promise.resolve(value).then(_next, _throw);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function _async_to_generator(fn) {
|
|
54
|
+
return function() {
|
|
55
|
+
var self = this, args = arguments;
|
|
56
|
+
return new Promise(function(resolve, reject) {
|
|
57
|
+
var gen = fn.apply(self, args);
|
|
58
|
+
function _next(value) {
|
|
59
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
60
|
+
}
|
|
61
|
+
function _throw(err) {
|
|
62
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
63
|
+
}
|
|
64
|
+
_next(undefined);
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
function generateQRCode(text, options) {
|
|
69
|
+
return QRCode__default.default.toDataURL(text, options);
|
|
70
|
+
}
|
|
71
|
+
const useQRCode = (text, options = defaultOptions)=>{
|
|
72
|
+
const [qrCode, setQRCode] = react.useState('');
|
|
73
|
+
const [error, setError] = react.useState(null);
|
|
74
|
+
useDeepCompareEffect(()=>{
|
|
75
|
+
const generate = /*#__PURE__*/ _async_to_generator(function*() {
|
|
76
|
+
try {
|
|
77
|
+
const qrCode = yield generateQRCode(text, options);
|
|
78
|
+
setQRCode(qrCode);
|
|
79
|
+
} catch (error) {
|
|
80
|
+
setError(error);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
generate();
|
|
84
|
+
}, [
|
|
85
|
+
text,
|
|
86
|
+
options
|
|
87
|
+
]);
|
|
88
|
+
return {
|
|
89
|
+
qrCode,
|
|
90
|
+
error
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.generateQRCode = generateQRCode;
|
|
95
|
+
exports.useQRCode = useQRCode;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import QRCode from 'qrcode';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @title UseQRCode
|
|
5
|
+
*/
|
|
6
|
+
type UseQRCode = (
|
|
7
|
+
/**
|
|
8
|
+
* @zh 文本
|
|
9
|
+
* @en Text
|
|
10
|
+
*/
|
|
11
|
+
text: string,
|
|
12
|
+
/**
|
|
13
|
+
* @zh 传递给 `QRCode.toDataURL` 的选项
|
|
14
|
+
* @en Options passed to `QRCode.toDataURL`
|
|
15
|
+
*/
|
|
16
|
+
options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
|
|
17
|
+
/**
|
|
18
|
+
* @title UseQRCodeReturn
|
|
19
|
+
*/
|
|
20
|
+
interface UseQRCodeReturn {
|
|
21
|
+
/**
|
|
22
|
+
* @zh 生成的二维码
|
|
23
|
+
* @en Generated QR code
|
|
24
|
+
*/
|
|
25
|
+
qrCode: string;
|
|
26
|
+
/**
|
|
27
|
+
* @zh 错误
|
|
28
|
+
* @en Error
|
|
29
|
+
*/
|
|
30
|
+
error: unknown;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
|
|
34
|
+
declare const useQRCode: UseQRCode;
|
|
35
|
+
|
|
36
|
+
export { generateQRCode, useQRCode };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import QRCode from 'qrcode';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @title UseQRCode
|
|
5
|
+
*/
|
|
6
|
+
type UseQRCode = (
|
|
7
|
+
/**
|
|
8
|
+
* @zh 文本
|
|
9
|
+
* @en Text
|
|
10
|
+
*/
|
|
11
|
+
text: string,
|
|
12
|
+
/**
|
|
13
|
+
* @zh 传递给 `QRCode.toDataURL` 的选项
|
|
14
|
+
* @en Options passed to `QRCode.toDataURL`
|
|
15
|
+
*/
|
|
16
|
+
options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
|
|
17
|
+
/**
|
|
18
|
+
* @title UseQRCodeReturn
|
|
19
|
+
*/
|
|
20
|
+
interface UseQRCodeReturn {
|
|
21
|
+
/**
|
|
22
|
+
* @zh 生成的二维码
|
|
23
|
+
* @en Generated QR code
|
|
24
|
+
*/
|
|
25
|
+
qrCode: string;
|
|
26
|
+
/**
|
|
27
|
+
* @zh 错误
|
|
28
|
+
* @en Error
|
|
29
|
+
*/
|
|
30
|
+
error: unknown;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
|
|
34
|
+
declare const useQRCode: UseQRCode;
|
|
35
|
+
|
|
36
|
+
export { generateQRCode, useQRCode };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import QRCode from 'qrcode';
|
|
2
|
+
import { useRef, useEffect, useState } from 'react';
|
|
3
|
+
import { isEqual } from 'lodash-es';
|
|
4
|
+
|
|
5
|
+
const useCustomCompareEffect = (effect, deps, depsEqual)=>{
|
|
6
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
7
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
8
|
+
console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
9
|
+
}
|
|
10
|
+
if (typeof depsEqual !== 'function') {
|
|
11
|
+
console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
const ref = useRef(undefined);
|
|
15
|
+
if (!ref.current || !depsEqual(deps, ref.current)) {
|
|
16
|
+
ref.current = deps;
|
|
17
|
+
}
|
|
18
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
|
+
useEffect(effect, ref.current);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const useDeepCompareEffect = (effect, deps)=>{
|
|
23
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
24
|
+
if (!Array.isArray(deps) || !deps.length) {
|
|
25
|
+
console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
useCustomCompareEffect(effect, deps, isEqual);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const defaultOptions = {};
|
|
32
|
+
|
|
33
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
34
|
+
try {
|
|
35
|
+
var info = gen[key](arg);
|
|
36
|
+
var value = info.value;
|
|
37
|
+
} catch (error) {
|
|
38
|
+
reject(error);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
if (info.done) {
|
|
42
|
+
resolve(value);
|
|
43
|
+
} else {
|
|
44
|
+
Promise.resolve(value).then(_next, _throw);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
function _async_to_generator(fn) {
|
|
48
|
+
return function() {
|
|
49
|
+
var self = this, args = arguments;
|
|
50
|
+
return new Promise(function(resolve, reject) {
|
|
51
|
+
var gen = fn.apply(self, args);
|
|
52
|
+
function _next(value) {
|
|
53
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
54
|
+
}
|
|
55
|
+
function _throw(err) {
|
|
56
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
57
|
+
}
|
|
58
|
+
_next(undefined);
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
function generateQRCode(text, options) {
|
|
63
|
+
return QRCode.toDataURL(text, options);
|
|
64
|
+
}
|
|
65
|
+
const useQRCode = (text, options = defaultOptions)=>{
|
|
66
|
+
const [qrCode, setQRCode] = useState('');
|
|
67
|
+
const [error, setError] = useState(null);
|
|
68
|
+
useDeepCompareEffect(()=>{
|
|
69
|
+
const generate = /*#__PURE__*/ _async_to_generator(function*() {
|
|
70
|
+
try {
|
|
71
|
+
const qrCode = yield generateQRCode(text, options);
|
|
72
|
+
setQRCode(qrCode);
|
|
73
|
+
} catch (error) {
|
|
74
|
+
setError(error);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
generate();
|
|
78
|
+
}, [
|
|
79
|
+
text,
|
|
80
|
+
options
|
|
81
|
+
]);
|
|
82
|
+
return {
|
|
83
|
+
qrCode,
|
|
84
|
+
error
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export { generateQRCode, useQRCode };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reactuses/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.19-beta.2",
|
|
4
4
|
"license": "Unlicense",
|
|
5
5
|
"homepage": "https://www.reactuse.com/",
|
|
6
6
|
"repository": {
|
|
@@ -31,6 +31,16 @@
|
|
|
31
31
|
"types": "./dist/index.d.cts",
|
|
32
32
|
"default": "./dist/index.cjs"
|
|
33
33
|
}
|
|
34
|
+
},
|
|
35
|
+
"./useQRCode": {
|
|
36
|
+
"import": {
|
|
37
|
+
"types": "./dist/useQRCode.d.mts",
|
|
38
|
+
"default": "./dist/useQRCode.mjs"
|
|
39
|
+
},
|
|
40
|
+
"require": {
|
|
41
|
+
"types": "./dist/useQRCode.d.cts",
|
|
42
|
+
"default": "./dist/useQRCode.cjs"
|
|
43
|
+
}
|
|
34
44
|
}
|
|
35
45
|
},
|
|
36
46
|
"main": "./dist/index.cjs",
|
|
@@ -55,8 +65,14 @@
|
|
|
55
65
|
"test:coverage": "jest --coverage"
|
|
56
66
|
},
|
|
57
67
|
"peerDependencies": {
|
|
68
|
+
"qrcode": "^1.5",
|
|
58
69
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
59
70
|
},
|
|
71
|
+
"peerDependenciesMeta": {
|
|
72
|
+
"qrcode": {
|
|
73
|
+
"optional": true
|
|
74
|
+
}
|
|
75
|
+
},
|
|
60
76
|
"dependencies": {
|
|
61
77
|
"js-cookie": "^3.0.5",
|
|
62
78
|
"lodash-es": "^4.17.21",
|
|
@@ -71,6 +87,7 @@
|
|
|
71
87
|
"@types/js-cookie": "^3.0.3",
|
|
72
88
|
"@types/lodash": "^4.14.184",
|
|
73
89
|
"@types/lodash-es": "^4.17.7",
|
|
90
|
+
"@types/qrcode": "^1.5.5",
|
|
74
91
|
"@types/use-sync-external-store": "^0.0.6",
|
|
75
92
|
"babel-jest": "^29.0.2",
|
|
76
93
|
"consola": "^2.15.3",
|
|
@@ -80,6 +97,7 @@
|
|
|
80
97
|
"jest-environment-jsdom": "^29.0.2",
|
|
81
98
|
"jest-environment-node": "^29.7.0",
|
|
82
99
|
"lodash": "^4.17.21",
|
|
100
|
+
"qrcode": "^1.5.3",
|
|
83
101
|
"react": "^18.2.0",
|
|
84
102
|
"react-dom": "^18.2.0",
|
|
85
103
|
"typescript": "^5.3.3"
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
var React = require('react');
|
|
3
|
-
|
|
4
|
-
function assignRef(ref, value) {
|
|
5
|
-
if (ref == null) return;
|
|
6
|
-
if (typeof ref === 'function') {
|
|
7
|
-
ref(value);
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
try {
|
|
11
|
-
ref.current = value;
|
|
12
|
-
} catch (error) {
|
|
13
|
-
throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
function mergeRefs(...refs) {
|
|
17
|
-
return (node)=>{
|
|
18
|
-
refs.forEach((ref)=>{
|
|
19
|
-
assignRef(ref, node);
|
|
20
|
-
});
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
function useMergedRefs(...refs) {
|
|
24
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
25
|
-
return React.useMemo(()=>mergeRefs(...refs), refs);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
exports.assignRef = assignRef;
|
|
29
|
-
exports.mergeRefs = mergeRefs;
|
|
30
|
-
exports.useMergedRefs = useMergedRefs;
|