@siberiacancode/reactuse 0.3.0 → 0.3.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/dist/cjs/hooks/useActiveElement/useActiveElement.cjs +1 -1
- package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs.map +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs.map +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map +1 -1
- package/dist/cjs/hooks/useDocumentEvent/useDocumentEvent.cjs +1 -1
- package/dist/cjs/hooks/useDocumentEvent/useDocumentEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs.map +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs.map +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs.map +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs.map +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs.map +1 -1
- package/dist/cjs/hooks/useHash/useHash.cjs.map +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs.map +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs.map +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs.map +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs.map +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs.map +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs.map +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs.map +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs.map +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs.map +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs.map +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs.map +1 -1
- package/dist/cjs/hooks/useWindowEvent/useWindowEvent.cjs +1 -1
- package/dist/cjs/hooks/useWindowEvent/useWindowEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useWindowSize/useWindowSize.cjs +1 -1
- package/dist/cjs/hooks/useWindowSize/useWindowSize.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs.map +1 -1
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs +8 -9
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs.map +1 -1
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +12 -13
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -1
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +8 -9
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
- package/dist/esm/hooks/useCssVar/useCssVar.mjs +19 -20
- package/dist/esm/hooks/useCssVar/useCssVar.mjs.map +1 -1
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs +15 -16
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map +1 -1
- package/dist/esm/hooks/useDocumentEvent/useDocumentEvent.mjs +3 -3
- package/dist/esm/hooks/useDocumentEvent/useDocumentEvent.mjs.map +1 -1
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs +17 -18
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map +1 -1
- package/dist/esm/hooks/useDropZone/useDropZone.mjs +17 -18
- package/dist/esm/hooks/useDropZone/useDropZone.mjs.map +1 -1
- package/dist/esm/hooks/useElementSize/useElementSize.mjs +12 -12
- package/dist/esm/hooks/useElementSize/useElementSize.mjs.map +1 -1
- package/dist/esm/hooks/useEventListener/useEventListener.mjs +11 -12
- package/dist/esm/hooks/useEventListener/useEventListener.mjs.map +1 -1
- package/dist/esm/hooks/useFocus/useFocus.mjs +13 -14
- package/dist/esm/hooks/useFocus/useFocus.mjs.map +1 -1
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs +18 -19
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map +1 -1
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs +11 -12
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs.map +1 -1
- package/dist/esm/hooks/useHash/useHash.mjs.map +1 -1
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs +8 -9
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs.map +1 -1
- package/dist/esm/hooks/useHover/useHover.mjs +12 -13
- package/dist/esm/hooks/useHover/useHover.mjs.map +1 -1
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs +11 -12
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs.map +1 -1
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs +19 -20
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs +8 -9
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs +11 -12
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs.map +1 -1
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +11 -12
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs +11 -12
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs +12 -13
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs.map +1 -1
- package/dist/esm/hooks/useLongPress/useLongPress.mjs +13 -14
- package/dist/esm/hooks/useLongPress/useLongPress.mjs.map +1 -1
- package/dist/esm/hooks/useMeasure/useMeasure.mjs +15 -16
- package/dist/esm/hooks/useMeasure/useMeasure.mjs.map +1 -1
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs +32 -33
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs.map +1 -1
- package/dist/esm/hooks/useMouse/useMouse.mjs +12 -13
- package/dist/esm/hooks/useMouse/useMouse.mjs.map +1 -1
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs +11 -12
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs.map +1 -1
- package/dist/esm/hooks/usePaint/usePaint.mjs +23 -24
- package/dist/esm/hooks/usePaint/usePaint.mjs.map +1 -1
- package/dist/esm/hooks/useParallax/useParallax.mjs +31 -32
- package/dist/esm/hooks/useParallax/useParallax.mjs.map +1 -1
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs +11 -12
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs.map +1 -1
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs +11 -12
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs.map +1 -1
- package/dist/esm/hooks/useRightClick/useRightClick.mjs +11 -12
- package/dist/esm/hooks/useRightClick/useRightClick.mjs.map +1 -1
- package/dist/esm/hooks/useScroll/useScroll.mjs +12 -13
- package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs +20 -21
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs.map +1 -1
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs +13 -14
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs.map +1 -1
- package/dist/esm/hooks/useSticky/useSticky.mjs +11 -12
- package/dist/esm/hooks/useSticky/useSticky.mjs.map +1 -1
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs +21 -22
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs +24 -19
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs +35 -30
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs.map +1 -1
- package/dist/esm/hooks/useVisibility/useVisibility.mjs +13 -14
- package/dist/esm/hooks/useVisibility/useVisibility.mjs.map +1 -1
- package/dist/esm/hooks/useWindowEvent/useWindowEvent.mjs +4 -4
- package/dist/esm/hooks/useWindowEvent/useWindowEvent.mjs.map +1 -1
- package/dist/esm/hooks/useWindowSize/useWindowSize.mjs +12 -16
- package/dist/esm/hooks/useWindowSize/useWindowSize.mjs.map +1 -1
- package/dist/esm/index.mjs +62 -64
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/utils/helpers/isTarget.mjs +9 -3
- package/dist/esm/utils/helpers/isTarget.mjs.map +1 -1
- package/dist/types/hooks/useHash/useHash.d.ts +18 -5
- package/dist/types/utils/helpers/index.d.ts +0 -1
- package/dist/types/utils/helpers/isTarget.d.ts +19 -2
- package/package.json +1 -1
- package/dist/cjs/utils/helpers/getElement.cjs +0 -2
- package/dist/cjs/utils/helpers/getElement.cjs.map +0 -1
- package/dist/esm/utils/helpers/getElement.mjs +0 -10
- package/dist/esm/utils/helpers/getElement.mjs.map +0 -1
- package/dist/types/utils/helpers/getElement.d.ts +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use sticky return type */\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const stuck = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target, internalRef.state, axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,GAAQI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAE/CF,IAAeM,IACZ;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
|
|
@@ -1,32 +1,31 @@
|
|
|
1
|
-
import { useRef as a, useState as
|
|
1
|
+
import { useRef as a, useState as g, useEffect as v } from "react";
|
|
2
2
|
import { useRefState as A } from "../useRefState/useRefState.mjs";
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const t = R(o[0]) ? o[0] : void 0, c = (t ? o[1] : o[0]) ?? "ltr", r = A(), n = a(null), i = () => typeof window > "u" ? c : (t ? b(t) : r.current)?.getAttribute("dir") ?? c, [s, u] = v(i()), f = () => {
|
|
3
|
+
import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const S = (...i) => {
|
|
5
|
+
const e = c(i[0]) ? i[0] : void 0, s = (e ? i[1] : i[0]) ?? "ltr", r = A(), n = a(null), o = () => typeof window > "u" ? s : (e ? c.getElement(e) : r.current)?.getAttribute("dir") ?? s, [f, u] = g(o()), l = () => {
|
|
7
6
|
n.current && n.current?.removeAttribute("dir");
|
|
8
|
-
},
|
|
9
|
-
n.current && (u(
|
|
7
|
+
}, m = (t) => {
|
|
8
|
+
n.current && (u(t), n.current.setAttribute("dir", t));
|
|
10
9
|
};
|
|
11
|
-
return
|
|
12
|
-
if (!
|
|
13
|
-
const
|
|
14
|
-
if (!
|
|
15
|
-
n.current =
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
return
|
|
20
|
-
|
|
10
|
+
return v(() => {
|
|
11
|
+
if (!e && !r.state) return;
|
|
12
|
+
const t = (e ? c.getElement(e) : r.current) ?? document.querySelector("html");
|
|
13
|
+
if (!t) return;
|
|
14
|
+
n.current = t;
|
|
15
|
+
const d = o();
|
|
16
|
+
t.setAttribute("dir", d), u(d);
|
|
17
|
+
const b = new MutationObserver(() => u(o()));
|
|
18
|
+
return b.observe(t, { attributes: !0 }), () => {
|
|
19
|
+
b.disconnect();
|
|
21
20
|
};
|
|
22
|
-
}, [r.state,
|
|
21
|
+
}, [r.state, e]), e ? { value: f, set: m, remove: l } : {
|
|
23
22
|
ref: r,
|
|
24
|
-
value:
|
|
25
|
-
set:
|
|
26
|
-
remove:
|
|
23
|
+
value: f,
|
|
24
|
+
set: m,
|
|
25
|
+
remove: l
|
|
27
26
|
};
|
|
28
27
|
};
|
|
29
28
|
export {
|
|
30
|
-
|
|
29
|
+
S as useTextDirection
|
|
31
30
|
};
|
|
32
31
|
//# sourceMappingURL=useTextDirection.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use text direction value type */\nexport type UseTextDirectionValue = 'auto' | 'ltr' | 'rtl';\n\n/** The use text direction return type */\nexport interface UseTextDirectionReturn {\n /** The current direction */\n value: UseTextDirectionValue;\n /*** The function to remove the direction */\n remove: () => void;\n /*** The function to set the direction */\n set: (value: UseTextDirectionValue | null) => void;\n}\n\nexport interface UseTextDirection {\n (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;\n\n <Target extends Element>(\n initialValue?: UseTextDirectionValue,\n target?: never\n ): UseTextDirectionReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useTextDirection\n * @description - Hook that can get and set the direction of the element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.querySelector('html')] The target element to observe\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns {UseTextDirectionReturn} An object containing the current text direction of the element\n *\n * @example\n * const { value, set, remove } = useTextDirection(ref);\n *\n * @overload\n * @template Target The target element type\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns { { ref: StateRef<Target> } & UseTextDirectionReturn } An object containing the current text direction of the element\n *\n * @example\n * const { ref, value, set, remove } = useTextDirection();\n */\nexport const useTextDirection = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialValue = ((target ? params[1] : params[0]) as UseTextDirectionValue) ?? 'ltr';\n\n const internalRef = useRefState();\n const elementRef = useRef<Element>(null);\n\n const getDirection = () => {\n if (typeof window === 'undefined') return initialValue;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n return (element?.getAttribute('dir') as UseTextDirectionValue) ?? initialValue;\n };\n\n const [value, setValue] = useState<UseTextDirectionValue>(getDirection());\n\n const remove = () => {\n if (!elementRef.current) return;\n\n elementRef.current?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n if (!elementRef.current) return;\n\n setValue(value);\n elementRef.current.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ??\n document.querySelector('html');\n if (!element) return;\n\n elementRef.current = element;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(() => setValue(getDirection()));\n\n observer.observe(element, { attributes: true });\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target]);\n\n if (target) return { value, set, remove };\n return {\n ref: internalRef,\n value,\n set,\n remove\n };\n}) as UseTextDirection;\n"],"names":["useTextDirection","params","target","isTarget","initialValue","internalRef","useRefState","elementRef","useRef","getDirection","value","setValue","useState","remove","set","useEffect","element","direction","observer"],"mappings":";;;AAsDO,MAAMA,IAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,KAAiBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAgC,OAE9EI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI,GAEjCC,IAAe,MACf,OAAO,SAAW,MAAoBL,KACzBF,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,UACnD,aAAa,KAAK,KAA+BD,GAG9D,CAACM,GAAOC,CAAQ,IAAIC,EAAgCH,GAAc,GAElEI,IAAS,MAAM;AACnB,IAAKN,EAAW,WAEhBA,EAAW,SAAS,gBAAgB,KAAK;AAAA,EAAA,GAGrCO,IAAM,CAACJ,MAAiC;AAC5C,IAAKH,EAAW,YAEhBI,EAASD,CAAK,GACdH,EAAW,QAAQ,aAAa,OAAOG,CAAK;AAAA,EAAA;AA0B9C,SAvBAK,EAAU,MAAM;AACd,QAAI,CAACb,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMW,KACFd,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,YACrD,SAAS,cAAc,MAAM;AAC/B,QAAI,CAACW,EAAS;AAEd,IAAAT,EAAW,UAAUS;AAErB,UAAMC,IAAYR,EAAA;AAClB,IAAAO,EAAQ,aAAa,OAAOC,CAAS,GACrCN,EAASM,CAAS;AAElB,UAAMC,IAAW,IAAI,iBAAiB,MAAMP,EAASF,EAAA,CAAc,CAAC;AAEpE,WAAAS,EAAS,QAAQF,GAAS,EAAE,YAAY,IAAM,GAEvC,MAAM;AACX,MAAAE,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACb,EAAY,OAAOH,CAAM,CAAC,GAE1BA,IAAe,EAAE,OAAAQ,GAAO,KAAAI,GAAK,QAAAD,EAAA,IAC1B;AAAA,IACL,KAAKR;AAAA,IACL,OAAAK;AAAA,IACA,KAAAI;AAAA,IACA,QAAAD;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState as $, useEffect as y } from "react";
|
|
2
|
-
const
|
|
2
|
+
const f = "reactuse-url-search-params-event", w = (n = "history") => {
|
|
3
3
|
const { search: i, hash: r } = window.location;
|
|
4
4
|
let s = "";
|
|
5
5
|
if (n === "history" && (s = i), n === "hash-params" && (s = r.replace(/^#/, "")), n === "hash") {
|
|
@@ -17,7 +17,7 @@ const u = "reactuse-url-search-params-event", f = (n = "history") => {
|
|
|
17
17
|
return `${s}${h}${r ? `?${r}` : ""}`;
|
|
18
18
|
}
|
|
19
19
|
throw new Error("Invalid mode");
|
|
20
|
-
}, L = () => window.dispatchEvent(new Event(
|
|
20
|
+
}, L = () => window.dispatchEvent(new Event(f)), U = (n, i) => {
|
|
21
21
|
const r = typeof i == "object" && i && ("serializer" in i || "deserializer" in i || "initialValue" in i || "mode" in i || "write" in i) ? i : void 0, s = r ? r?.initialValue : i, { mode: t = "history", write: a = "replace" } = r ?? {};
|
|
22
22
|
if (typeof window > "u")
|
|
23
23
|
return {
|
|
@@ -27,7 +27,7 @@ const u = "reactuse-url-search-params-event", f = (n = "history") => {
|
|
|
27
27
|
set: () => {
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
const h = (e) => r?.serializer ? r.serializer(e) : typeof e == "string" ? e : JSON.stringify(e),
|
|
30
|
+
const h = (e) => r?.serializer ? r.serializer(e) : typeof e == "string" ? e : JSON.stringify(e), S = (e) => {
|
|
31
31
|
if (r?.deserializer) return r.deserializer(e);
|
|
32
32
|
if (!(e === "undefined" || e === "null"))
|
|
33
33
|
try {
|
|
@@ -35,26 +35,31 @@ const u = "reactuse-url-search-params-event", f = (n = "history") => {
|
|
|
35
35
|
} catch {
|
|
36
36
|
return e;
|
|
37
37
|
}
|
|
38
|
-
}, d = (e, o, c,
|
|
39
|
-
const
|
|
40
|
-
o === void 0
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
}, d = (e, o, c, p = "replace") => {
|
|
39
|
+
const u = w(c);
|
|
40
|
+
if (o === void 0)
|
|
41
|
+
u.delete(e);
|
|
42
|
+
else {
|
|
43
|
+
const m = h ? h(o) : String(o);
|
|
44
|
+
u.set(e, m);
|
|
45
|
+
}
|
|
46
|
+
const v = z(u, c);
|
|
47
|
+
p === "replace" && window.history.replaceState({}, "", v), p === "push" && window.history.pushState({}, "", v), L();
|
|
48
|
+
}, [E, l] = $(() => {
|
|
49
|
+
const o = w(t).get(n);
|
|
50
|
+
return o === null && s !== void 0 ? (d(n, s, t, a), s) : o ? S(o) : void 0;
|
|
46
51
|
}), P = (e, o) => {
|
|
47
|
-
d(n, e, t, o?.write ?? a),
|
|
52
|
+
d(n, e, t, o?.write ?? a), l(e);
|
|
48
53
|
}, g = (e) => {
|
|
49
|
-
d(n, void 0, t, e?.write ?? a),
|
|
54
|
+
d(n, void 0, t, e?.write ?? a), l(void 0);
|
|
50
55
|
};
|
|
51
56
|
return y(() => {
|
|
52
57
|
const e = () => {
|
|
53
|
-
const c =
|
|
54
|
-
|
|
58
|
+
const c = w(t).get(n);
|
|
59
|
+
l(c ? S(c) : void 0);
|
|
55
60
|
};
|
|
56
|
-
return window.addEventListener(
|
|
57
|
-
window.removeEventListener(
|
|
61
|
+
return window.addEventListener(f, e), window.addEventListener("popstate", e), t !== "history" && window.addEventListener("hashchange", e), () => {
|
|
62
|
+
window.removeEventListener(f, e), window.removeEventListener("popstate", e), t !== "history" && window.removeEventListener("hashchange", e);
|
|
58
63
|
};
|
|
59
64
|
}, [n, t]), {
|
|
60
65
|
value: E,
|
|
@@ -63,10 +68,10 @@ const u = "reactuse-url-search-params-event", f = (n = "history") => {
|
|
|
63
68
|
};
|
|
64
69
|
};
|
|
65
70
|
export {
|
|
66
|
-
|
|
71
|
+
f as URL_SEARCH_PARAMS_EVENT,
|
|
67
72
|
z as createQueryString,
|
|
68
73
|
L as dispatchUrlSearchParamsEvent,
|
|
69
|
-
|
|
74
|
+
w as getUrlSearchParams,
|
|
70
75
|
U as useUrlSearchParam
|
|
71
76
|
};
|
|
72
77
|
//# sourceMappingURL=useUrlSearchParam.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUrlSearchParam.mjs","sources":["../../../../src/hooks/useUrlSearchParam/useUrlSearchParam.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** The url search params mode type */\nexport type UrlSearchParamMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search param options type */\nexport interface UseUrlSearchParamOptions<Value> {\n /** The initial value of the search param */\n initialValue?: Value;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /** The deserializer function to be invoked */\n deserializer?: (value: string) => Value;\n /** The serializer function to be invoked */\n serializer?: (value: Value) => string;\n}\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsActionOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/** The use url search param return type */\nexport interface UseUrlSearchParamReturn<Value> {\n /** Current search param value */\n value: Value | undefined;\n /** Function to remove the search param */\n remove: (options?: UseUrlSearchParamsActionOptions) => void;\n /** Function to update search param */\n set: (value: Value, options?: UseUrlSearchParamsActionOptions) => void;\n}\n\nexport const URL_SEARCH_PARAMS_EVENT = 'reactuse-url-search-params-event';\n\nexport const getUrlSearchParams = (mode: UrlSearchParamMode = 'history') => {\n const { search, hash } = window.location;\n\n let path = '';\n\n if (mode === 'history') path = search;\n if (mode === 'hash-params') path = hash.replace(/^#/, '');\n if (mode === 'hash') {\n const index = hash.indexOf('?');\n path = ~index ? hash.slice(index) : '';\n }\n\n return new URLSearchParams(path);\n};\n\nexport const createQueryString = (searchParams: URLSearchParams, mode: UrlSearchParamMode) => {\n const searchParamsString = searchParams.toString();\n const { search, hash } = window.location;\n\n if (mode === 'history') return `${searchParamsString ? `?${searchParamsString}` : ''}${hash}`;\n if (mode === 'hash-params')\n return `${search}${searchParamsString ? `#${searchParamsString}` : ''}`;\n if (mode === 'hash') {\n const index = hash.indexOf('?');\n const base = index > -1 ? hash.slice(0, index) : hash;\n return `${search}${base}${searchParamsString ? `?${searchParamsString}` : ''}`;\n }\n\n throw new Error('Invalid mode');\n};\n\nexport const dispatchUrlSearchParamsEvent = () =>\n window.dispatchEvent(new Event(URL_SEARCH_PARAMS_EVENT));\n\nexport interface UseUrlSearchParam {\n <Value>(\n key: string,\n options: UseUrlSearchParamOptions<Value> & { initialValue: Value }\n ): UseUrlSearchParamReturn<Value>;\n\n <Value>(\n key: string,\n options?: UseUrlSearchParamOptions<Value>\n ): UseUrlSearchParamReturn<Value | undefined>;\n\n <Value>(key: string, initialValue: Value): UseUrlSearchParamReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParam\n * @description - Hook that provides reactive URLSearchParams for a single key\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {string} key The key of the url param\n * @param {UseUrlSearchParamOptions<Value> & { initialValue: Value }} options The options object with required initialValue\n * @param {Value} options.initialValue The initial value for the url param\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParam('page', { initialValue: 1 });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {string} key The key of the url param\n * @param {Value} [initialValue] The initial value for the url param\n * @returns {UseUrlSearchParamReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParam('page', 1);\n */\nexport const useUrlSearchParam = (<Value>(key: string, params?: any) => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : undefined\n ) as UseUrlSearchParamOptions<Value>;\n\n const initialValue = (options ? options?.initialValue : params) as Value;\n const { mode = 'history', write: writeMode = 'replace' } = options ?? {};\n\n if (typeof window === 'undefined') {\n return {\n value: initialValue,\n remove: () => {},\n set: () => {}\n } as UseUrlSearchParamReturn<Value>;\n }\n\n const serializer = (value: Value) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined' || value === 'null') return undefined as unknown as Value;\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value;\n }\n };\n\n const setUrlSearchParam = (\n key: string,\n value: Value | undefined,\n mode: UrlSearchParamMode,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const searchParams = getUrlSearchParams(mode);\n const serializedValue =\n value !== undefined ? (serializer ? serializer(value) : String(value)) : '';\n\n if (value === undefined) {\n searchParams.delete(key);\n } else {\n searchParams.set(key, serializedValue);\n }\n\n const query = createQueryString(searchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n\n dispatchUrlSearchParamsEvent();\n };\n\n const [value, setValue] = useState<Value | undefined>(() => {\n const searchParams = getUrlSearchParams(mode);\n const currentValue = searchParams.get(key);\n\n if (currentValue === null && initialValue !== undefined) {\n setUrlSearchParam(key, initialValue, mode, writeMode);\n return initialValue;\n }\n\n return currentValue ? deserializer(currentValue) : undefined;\n });\n\n const set = (value: Value, options?: UseUrlSearchParamsActionOptions) => {\n setUrlSearchParam(key, value, mode, options?.write ?? writeMode);\n setValue(value);\n };\n\n const remove = (options?: UseUrlSearchParamsActionOptions) => {\n setUrlSearchParam(key, undefined, mode, options?.write ?? writeMode);\n setValue(undefined);\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const searchParams = getUrlSearchParams(mode);\n const newValue = searchParams.get(key);\n setValue(newValue ? deserializer(newValue) : undefined);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') {\n window.addEventListener('hashchange', onParamsChange);\n }\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') {\n window.removeEventListener('hashchange', onParamsChange);\n }\n };\n }, [key, mode]);\n\n return {\n value,\n remove,\n set\n };\n}) as UseUrlSearchParam;\n"],"names":["URL_SEARCH_PARAMS_EVENT","getUrlSearchParams","mode","search","hash","path","index","createQueryString","searchParams","searchParamsString","base","dispatchUrlSearchParamsEvent","useUrlSearchParam","key","params","options","initialValue","writeMode","serializer","value","deserializer","setUrlSearchParam","write","serializedValue","query","setValue","useState","currentValue","set","remove","useEffect","onParamsChange","newValue"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useUrlSearchParam.mjs","sources":["../../../../src/hooks/useUrlSearchParam/useUrlSearchParam.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** The url search params mode type */\nexport type UrlSearchParamMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search param options type */\nexport interface UseUrlSearchParamOptions<Value> {\n /** The initial value of the search param */\n initialValue?: Value;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /** The deserializer function to be invoked */\n deserializer?: (value: string) => Value;\n /** The serializer function to be invoked */\n serializer?: (value: Value) => string;\n}\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsActionOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/** The use url search param return type */\nexport interface UseUrlSearchParamReturn<Value> {\n /** Current search param value */\n value: Value | undefined;\n /** Function to remove the search param */\n remove: (options?: UseUrlSearchParamsActionOptions) => void;\n /** Function to update search param */\n set: (value: Value, options?: UseUrlSearchParamsActionOptions) => void;\n}\n\nexport const URL_SEARCH_PARAMS_EVENT = 'reactuse-url-search-params-event';\n\nexport const getUrlSearchParams = (mode: UrlSearchParamMode = 'history') => {\n const { search, hash } = window.location;\n\n let path = '';\n\n if (mode === 'history') path = search;\n if (mode === 'hash-params') path = hash.replace(/^#/, '');\n if (mode === 'hash') {\n const index = hash.indexOf('?');\n path = ~index ? hash.slice(index) : '';\n }\n\n return new URLSearchParams(path);\n};\n\nexport const createQueryString = (searchParams: URLSearchParams, mode: UrlSearchParamMode) => {\n const searchParamsString = searchParams.toString();\n const { search, hash } = window.location;\n\n if (mode === 'history') return `${searchParamsString ? `?${searchParamsString}` : ''}${hash}`;\n if (mode === 'hash-params')\n return `${search}${searchParamsString ? `#${searchParamsString}` : ''}`;\n if (mode === 'hash') {\n const index = hash.indexOf('?');\n const base = index > -1 ? hash.slice(0, index) : hash;\n return `${search}${base}${searchParamsString ? `?${searchParamsString}` : ''}`;\n }\n\n throw new Error('Invalid mode');\n};\n\nexport const dispatchUrlSearchParamsEvent = () =>\n window.dispatchEvent(new Event(URL_SEARCH_PARAMS_EVENT));\n\nexport interface UseUrlSearchParam {\n <Value>(\n key: string,\n options: UseUrlSearchParamOptions<Value> & { initialValue: Value }\n ): UseUrlSearchParamReturn<Value>;\n\n <Value>(\n key: string,\n options?: UseUrlSearchParamOptions<Value>\n ): UseUrlSearchParamReturn<Value | undefined>;\n\n <Value>(key: string, initialValue: Value): UseUrlSearchParamReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParam\n * @description - Hook that provides reactive URLSearchParams for a single key\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {string} key The key of the url param\n * @param {UseUrlSearchParamOptions<Value> & { initialValue: Value }} options The options object with required initialValue\n * @param {Value} options.initialValue The initial value for the url param\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParam('page', { initialValue: 1 });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {string} key The key of the url param\n * @param {Value} [initialValue] The initial value for the url param\n * @returns {UseUrlSearchParamReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParam('page', 1);\n */\nexport const useUrlSearchParam = (<Value>(key: string, params?: any) => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : undefined\n ) as UseUrlSearchParamOptions<Value>;\n\n const initialValue = (options ? options?.initialValue : params) as Value;\n const { mode = 'history', write: writeMode = 'replace' } = options ?? {};\n\n if (typeof window === 'undefined') {\n return {\n value: initialValue,\n remove: () => {},\n set: () => {}\n } as UseUrlSearchParamReturn<Value>;\n }\n\n const serializer = (value: Value) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined' || value === 'null') return undefined as unknown as Value;\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value;\n }\n };\n\n const setUrlSearchParam = (\n key: string,\n value: Value | undefined,\n mode: UrlSearchParamMode,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const urlSearchParams = getUrlSearchParams(mode);\n\n if (value === undefined) {\n urlSearchParams.delete(key);\n } else {\n const serializedValue = serializer ? serializer(value) : String(value);\n urlSearchParams.set(key, serializedValue);\n }\n\n const query = createQueryString(urlSearchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n\n dispatchUrlSearchParamsEvent();\n };\n\n const [value, setValue] = useState<Value | undefined>(() => {\n const urlSearchParams = getUrlSearchParams(mode);\n const currentValue = urlSearchParams.get(key);\n\n if (currentValue === null && initialValue !== undefined) {\n setUrlSearchParam(key, initialValue, mode, writeMode);\n return initialValue;\n }\n\n return currentValue ? deserializer(currentValue) : undefined;\n });\n\n const set = (value: Value, options?: UseUrlSearchParamsActionOptions) => {\n setUrlSearchParam(key, value, mode, options?.write ?? writeMode);\n setValue(value);\n };\n\n const remove = (options?: UseUrlSearchParamsActionOptions) => {\n setUrlSearchParam(key, undefined, mode, options?.write ?? writeMode);\n setValue(undefined);\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const urlSearchParams = getUrlSearchParams(mode);\n const newValue = urlSearchParams.get(key);\n setValue(newValue ? deserializer(newValue) : undefined);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') {\n window.addEventListener('hashchange', onParamsChange);\n }\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') {\n window.removeEventListener('hashchange', onParamsChange);\n }\n };\n }, [key, mode]);\n\n return {\n value,\n remove,\n set\n };\n}) as UseUrlSearchParam;\n"],"names":["URL_SEARCH_PARAMS_EVENT","getUrlSearchParams","mode","search","hash","path","index","createQueryString","searchParams","searchParamsString","base","dispatchUrlSearchParamsEvent","useUrlSearchParam","key","params","options","initialValue","writeMode","serializer","value","deserializer","setUrlSearchParam","write","urlSearchParams","serializedValue","query","setValue","useState","currentValue","set","remove","useEffect","onParamsChange","newValue"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { getUrlSearchParams as
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
if (
|
|
1
|
+
import { useState as L, useEffect as v } from "react";
|
|
2
|
+
import { getUrlSearchParams as u, URL_SEARCH_PARAMS_EVENT as g, createQueryString as U, dispatchUrlSearchParamsEvent as m } from "../useUrlSearchParam/useUrlSearchParam.mjs";
|
|
3
|
+
const A = (t) => {
|
|
4
|
+
const i = typeof t == "object" && t && ("serializer" in t || "deserializer" in t || "initialValue" in t || "mode" in t || "write" in t) ? t : {}, c = i ? i?.initialValue : t, { mode: n = "history", write: f = "replace" } = i, l = (e) => i?.serializer ? i.serializer(e) : typeof e == "string" ? e : JSON.stringify(e), p = (e) => {
|
|
5
|
+
if (i?.deserializer) return i.deserializer(e);
|
|
6
6
|
if (e !== "undefined")
|
|
7
7
|
try {
|
|
8
8
|
return JSON.parse(e);
|
|
@@ -10,47 +10,52 @@ const V = (t) => {
|
|
|
10
10
|
return e;
|
|
11
11
|
}
|
|
12
12
|
}, h = (e, r, s = "replace") => {
|
|
13
|
-
const o =
|
|
14
|
-
Object.entries(r).forEach(([
|
|
15
|
-
|
|
13
|
+
const o = u(e);
|
|
14
|
+
Object.entries(r).forEach(([E, d]) => {
|
|
15
|
+
if (d === void 0)
|
|
16
|
+
o.delete(E);
|
|
17
|
+
else {
|
|
18
|
+
const z = l ? l(d) : String(d);
|
|
19
|
+
o.set(E, z);
|
|
20
|
+
}
|
|
16
21
|
});
|
|
17
|
-
const
|
|
18
|
-
return s === "replace" && window.history.replaceState({}, "",
|
|
22
|
+
const y = U(o, e);
|
|
23
|
+
return s === "replace" && window.history.replaceState({}, "", y), s === "push" && window.history.pushState({}, "", y), m(), o;
|
|
19
24
|
}, a = (e) => typeof e == "string" ? a(new URLSearchParams(e)) : e instanceof URLSearchParams ? Array.from(e.entries()).reduce(
|
|
20
25
|
(r, [s, o]) => (r[s] = p(o), r),
|
|
21
26
|
{}
|
|
22
|
-
) : e, [
|
|
27
|
+
) : e, [w, S] = L(() => {
|
|
23
28
|
if (typeof window > "u") return c ?? {};
|
|
24
|
-
const e =
|
|
29
|
+
const e = u(n), r = {
|
|
25
30
|
...c && a(c),
|
|
26
31
|
...a(e)
|
|
27
32
|
};
|
|
28
|
-
return h(
|
|
29
|
-
}),
|
|
33
|
+
return h(n, r, f), r;
|
|
34
|
+
}), P = (e, r) => {
|
|
30
35
|
const s = h(
|
|
31
|
-
|
|
32
|
-
{ ...
|
|
33
|
-
r?.write ??
|
|
36
|
+
n,
|
|
37
|
+
{ ...w, ...e },
|
|
38
|
+
r?.write ?? f
|
|
34
39
|
);
|
|
35
|
-
|
|
40
|
+
S(a(s));
|
|
36
41
|
};
|
|
37
|
-
return
|
|
42
|
+
return v(() => {
|
|
38
43
|
const e = () => {
|
|
39
|
-
const r =
|
|
40
|
-
|
|
44
|
+
const r = u(n);
|
|
45
|
+
S(a(r));
|
|
41
46
|
};
|
|
42
|
-
return window.addEventListener(
|
|
43
|
-
window.removeEventListener(
|
|
47
|
+
return window.addEventListener(g, e), window.addEventListener("popstate", e), n !== "history" && window.addEventListener("hashchange", e), () => {
|
|
48
|
+
window.removeEventListener(g, e), window.removeEventListener("popstate", e), n !== "history" && window.removeEventListener("hashchange", e);
|
|
44
49
|
};
|
|
45
|
-
}, [
|
|
46
|
-
value:
|
|
47
|
-
set:
|
|
50
|
+
}, [n]), {
|
|
51
|
+
value: w,
|
|
52
|
+
set: P
|
|
48
53
|
};
|
|
49
54
|
};
|
|
50
55
|
export {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
U as createQueryString,
|
|
57
|
+
m as dispatchUrlSearchParamsEvent,
|
|
58
|
+
u as getUrlSearchParams,
|
|
59
|
+
A as useUrlSearchParams
|
|
55
60
|
};
|
|
56
61
|
//# sourceMappingURL=useUrlSearchParams.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUrlSearchParams.mjs","sources":["../../../../src/hooks/useUrlSearchParams/useUrlSearchParams.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n createQueryString,\n dispatchUrlSearchParamsEvent,\n getUrlSearchParams,\n URL_SEARCH_PARAMS_EVENT\n} from '../useUrlSearchParam/useUrlSearchParam';\n\n/** The url params type */\nexport type UrlParams = Record<string, any>;\n\n/** The url search params mod */\nexport type UrlSearchParamsMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsSetOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/* The use search params initial value type */\nexport type UseUrlSearchParamsInitialValue<Value> = (() => Value) | Value;\n\n/** The use url search params options type */\nexport interface UseUrlSearchParamsOptions<Value> {\n /* The initial value of the url search params */\n initialValue?: UseUrlSearchParamsInitialValue<string | URLSearchParams | Value>;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamsMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value[keyof Value];\n /* The serializer function to be invoked */\n serializer?: (value: Value[keyof Value]) => string;\n}\n\n/** The use url search params return type */\nexport interface UseUrlSearchParamsReturn<Value> {\n /** The value of the url search params */\n value: Value;\n /** The set function */\n set: (value: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => void;\n}\n\nexport interface UseUrlSearchParams {\n <Value>(\n key: string,\n options: UseUrlSearchParamsOptions<Value> & {\n initialValue: UseUrlSearchParamsInitialValue<Value>;\n }\n ): UseUrlSearchParamsReturn<Value>;\n\n <Value>(options?: UseUrlSearchParamsOptions<Value>): UseUrlSearchParamsReturn<Value | undefined>;\n\n <Value>(initialValue: UseUrlSearchParamsInitialValue<Value>): UseUrlSearchParamsReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamsReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParams\n * @description - Hook that provides reactive URLSearchParams\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsOptions<Value> & { initialValue: UseUrlSearchParamsInitialValue<Value> }} options The options object with required initialValue\n * @param {UseUrlSearchParamsInitialValue<Value>} [options.initialValue] The initial value for the url params\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value[keyof Value]) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value[keyof Value]} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ initialValue: { page: 1 } });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsInitialValue<Value>} [initialValue] The initial value for the url params\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ page: 1 });\n */\nexport const useUrlSearchParams = (<Value extends UrlParams>(\n params: any\n): UseUrlSearchParamsReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : {}\n ) as UseUrlSearchParamsOptions<Value>;\n const initialValue = (\n options ? options?.initialValue : params\n ) as UseUrlSearchParamsInitialValue<Value>;\n\n const { mode = 'history', write: writeMode = 'replace' } = options;\n\n const serializer = (value: Value[keyof Value]) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value[keyof Value];\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value[keyof Value];\n }\n };\n\n const setUrlSearchParams = <Value extends UrlParams>(\n mode: UrlSearchParamsMode,\n value: Partial<Value>,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const urlSearchParams = new URLSearchParams();\n\n Object.entries(value).forEach(([key, param]) => {\n if (Array.isArray(param)) {\n param.forEach((value) => urlSearchParams.set(key, serializer(value)));\n } else {\n urlSearchParams.set(key, serializer(param));\n }\n });\n\n const query = createQueryString(urlSearchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n\n return urlSearchParams;\n };\n\n const getParsedUrlSearchParams = (searchParams: string | UrlParams | URLSearchParams) => {\n if (typeof searchParams === 'string') {\n return getParsedUrlSearchParams(new URLSearchParams(searchParams));\n }\n\n if (searchParams instanceof URLSearchParams) {\n return Array.from(searchParams.entries()).reduce(\n (acc, [key, value]) => {\n acc[key] = deserializer(value);\n return acc;\n },\n {} as Record<string, any>\n );\n }\n\n return searchParams;\n };\n\n const [value, setValue] = useState<Value>(() => {\n if (typeof window === 'undefined') return (initialValue ?? {}) as Value;\n\n const urlSearchParams = getUrlSearchParams(mode);\n const value = {\n ...(initialValue && getParsedUrlSearchParams(initialValue)),\n ...getParsedUrlSearchParams(urlSearchParams)\n } as Value;\n\n setUrlSearchParams(mode, value, writeMode);\n\n return value;\n });\n\n const set = (params: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => {\n const searchParams = setUrlSearchParams(\n mode,\n { ...value, ...params },\n options?.write ?? writeMode\n );\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n dispatchUrlSearchParamsEvent();\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const searchParams = getUrlSearchParams(mode);\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.addEventListener('hashchange', onParamsChange);\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.removeEventListener('hashchange', onParamsChange);\n };\n }, [mode]);\n\n return {\n value,\n set\n };\n}) as UseUrlSearchParams;\n\nexport { createQueryString, dispatchUrlSearchParamsEvent, getUrlSearchParams };\n"],"names":["useUrlSearchParams","params","options","initialValue","mode","writeMode","serializer","value","deserializer","setUrlSearchParams","write","urlSearchParams","key","param","query","createQueryString","getParsedUrlSearchParams","searchParams","acc","setValue","useState","getUrlSearchParams","set","dispatchUrlSearchParamsEvent","useEffect","onParamsChange","URL_SEARCH_PARAMS_EVENT"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useUrlSearchParams.mjs","sources":["../../../../src/hooks/useUrlSearchParams/useUrlSearchParams.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n createQueryString,\n dispatchUrlSearchParamsEvent,\n getUrlSearchParams,\n URL_SEARCH_PARAMS_EVENT\n} from '../useUrlSearchParam/useUrlSearchParam';\n\n/** The url params type */\nexport type UrlParams = Record<string, any>;\n\n/** The url search params mod */\nexport type UrlSearchParamsMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsSetOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/* The use search params initial value type */\nexport type UseUrlSearchParamsInitialValue<Value> = (() => Value) | Value;\n\n/** The use url search params options type */\nexport interface UseUrlSearchParamsOptions<Value> {\n /* The initial value of the url search params */\n initialValue?: UseUrlSearchParamsInitialValue<string | URLSearchParams | Value>;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamsMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value[keyof Value];\n /* The serializer function to be invoked */\n serializer?: (value: Value[keyof Value]) => string;\n}\n\n/** The use url search params return type */\nexport interface UseUrlSearchParamsReturn<Value> {\n /** The value of the url search params */\n value: Value;\n /** The set function */\n set: (value: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => void;\n}\n\nexport interface UseUrlSearchParams {\n <Value>(\n key: string,\n options: UseUrlSearchParamsOptions<Value> & {\n initialValue: UseUrlSearchParamsInitialValue<Value>;\n }\n ): UseUrlSearchParamsReturn<Value>;\n\n <Value>(options?: UseUrlSearchParamsOptions<Value>): UseUrlSearchParamsReturn<Value | undefined>;\n\n <Value>(initialValue: UseUrlSearchParamsInitialValue<Value>): UseUrlSearchParamsReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamsReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParams\n * @description - Hook that provides reactive URLSearchParams\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsOptions<Value> & { initialValue: UseUrlSearchParamsInitialValue<Value> }} options The options object with required initialValue\n * @param {UseUrlSearchParamsInitialValue<Value>} [options.initialValue] The initial value for the url params\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value[keyof Value]) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value[keyof Value]} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ initialValue: { page: 1 } });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsInitialValue<Value>} [initialValue] The initial value for the url params\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ page: 1 });\n */\nexport const useUrlSearchParams = (<Value extends UrlParams>(\n params: any\n): UseUrlSearchParamsReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : {}\n ) as UseUrlSearchParamsOptions<Value>;\n const initialValue = (\n options ? options?.initialValue : params\n ) as UseUrlSearchParamsInitialValue<Value>;\n\n const { mode = 'history', write: writeMode = 'replace' } = options;\n\n const serializer = (value: Value[keyof Value]) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value[keyof Value];\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value[keyof Value];\n }\n };\n\n const setUrlSearchParams = <Value extends UrlParams>(\n mode: UrlSearchParamsMode,\n value: Partial<Value>,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const urlSearchParams = getUrlSearchParams(mode);\n\n Object.entries(value).forEach(([key, param]) => {\n if (param === undefined) {\n urlSearchParams.delete(key);\n } else {\n const serializedValue = serializer ? serializer(param) : String(param);\n urlSearchParams.set(key, serializedValue);\n }\n });\n\n const query = createQueryString(urlSearchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n dispatchUrlSearchParamsEvent();\n\n return urlSearchParams;\n };\n\n const getParsedUrlSearchParams = (searchParams: string | UrlParams | URLSearchParams) => {\n if (typeof searchParams === 'string') {\n return getParsedUrlSearchParams(new URLSearchParams(searchParams));\n }\n\n if (searchParams instanceof URLSearchParams) {\n return Array.from(searchParams.entries()).reduce(\n (acc, [key, value]) => {\n acc[key] = deserializer(value);\n return acc;\n },\n {} as Record<string, any>\n );\n }\n\n return searchParams;\n };\n\n const [value, setValue] = useState<Value>(() => {\n if (typeof window === 'undefined') return (initialValue ?? {}) as Value;\n\n const urlSearchParams = getUrlSearchParams(mode);\n const value = {\n ...(initialValue && getParsedUrlSearchParams(initialValue)),\n ...getParsedUrlSearchParams(urlSearchParams)\n } as Value;\n\n setUrlSearchParams(mode, value, writeMode);\n\n return value;\n });\n\n const set = (params: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => {\n const searchParams = setUrlSearchParams(\n mode,\n { ...value, ...params },\n options?.write ?? writeMode\n );\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const searchParams = getUrlSearchParams(mode);\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.addEventListener('hashchange', onParamsChange);\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.removeEventListener('hashchange', onParamsChange);\n };\n }, [mode]);\n\n return {\n value,\n set\n };\n}) as UseUrlSearchParams;\n\nexport { createQueryString, dispatchUrlSearchParamsEvent, getUrlSearchParams };\n"],"names":["useUrlSearchParams","params","options","initialValue","mode","writeMode","serializer","value","deserializer","setUrlSearchParams","write","urlSearchParams","getUrlSearchParams","key","param","serializedValue","query","createQueryString","dispatchUrlSearchParamsEvent","getParsedUrlSearchParams","searchParams","acc","setValue","useState","set","useEffect","onParamsChange","URL_SEARCH_PARAMS_EVENT"],"mappings":"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"}
|
|
@@ -1,34 +1,33 @@
|
|
|
1
|
-
import { useState as
|
|
1
|
+
import { useState as d, useRef as C, useEffect as E } from "react";
|
|
2
2
|
import { useRefState as R } from "../useRefState/useRefState.mjs";
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const b = n ? d(n) : r.current;
|
|
3
|
+
import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const V = (...e) => {
|
|
5
|
+
const n = c(e[0]) ? e[0] : void 0, t = n ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, i = t?.onChange, f = t?.enabled ?? !0, [u, v] = d(), [o, y] = d(), r = R(), l = C(i);
|
|
6
|
+
return l.current = i, E(() => {
|
|
7
|
+
if (!f || !n && !r.state) return;
|
|
8
|
+
const b = n ? c.getElement(n) : r.current;
|
|
10
9
|
if (!b) return;
|
|
11
10
|
const s = new IntersectionObserver(
|
|
12
11
|
(h, a) => {
|
|
13
|
-
const
|
|
14
|
-
y(
|
|
12
|
+
const g = h.pop();
|
|
13
|
+
y(g), l.current?.(g, a);
|
|
15
14
|
},
|
|
16
15
|
{
|
|
17
16
|
...t,
|
|
18
|
-
root: t?.root ?
|
|
17
|
+
root: t?.root ? c.getElement(t.root) : document
|
|
19
18
|
}
|
|
20
19
|
);
|
|
21
20
|
return v(s), s.observe(b), () => {
|
|
22
21
|
s.disconnect();
|
|
23
22
|
};
|
|
24
|
-
}, [n, r.state, t?.rootMargin, t?.threshold, t?.root,
|
|
25
|
-
observer:
|
|
23
|
+
}, [n, r.state, t?.rootMargin, t?.threshold, t?.root, f]), n ? { observer: u, entry: o, inView: !!o?.isIntersecting } : {
|
|
24
|
+
observer: u,
|
|
26
25
|
ref: r,
|
|
27
26
|
entry: o,
|
|
28
27
|
inView: !!o?.isIntersecting
|
|
29
28
|
};
|
|
30
29
|
};
|
|
31
30
|
export {
|
|
32
|
-
|
|
31
|
+
V as useVisibility
|
|
33
32
|
};
|
|
34
33
|
//# sourceMappingURL=useVisibility.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibility.mjs","sources":["../../../../src/hooks/useVisibility/useVisibility.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useVisibility.mjs","sources":["../../../../src/hooks/useVisibility/useVisibility.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The visibility callback type */\nexport type UseVisibilityCallback = (\n entry: IntersectionObserverEntry,\n observer: IntersectionObserver\n) => void;\n\n/** The visibility options type */\nexport interface UseVisibilityOptions extends Omit<IntersectionObserverInit, 'root'> {\n /** The enabled state of the intersection */\n enabled?: boolean;\n /** The callback to execute when intersection is detected */\n onChange?: UseVisibilityCallback;\n /** The root element to observe */\n root?: HookTarget;\n}\n\n/** The intersection observer return type */\nexport interface UseVisibilityReturn {\n /** The intersection observer entry */\n entry?: IntersectionObserverEntry;\n /** The intersection observer in view */\n inView?: boolean;\n\n /** The intersection observer instance */\n observer?: IntersectionObserver;\n}\n\nexport interface UseVisibility {\n <Target extends Element>(\n options?: UseVisibilityOptions,\n target?: never\n ): UseVisibilityReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseVisibilityOptions): UseVisibilityReturn;\n\n <Target extends Element>(\n callback: UseVisibilityCallback,\n target?: never\n ): UseVisibilityReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseVisibilityCallback): UseVisibilityReturn;\n}\n\n/**\n * @name useVisibility\n * @description - Hook that gives you visibility observer state\n * @category Sensors\n * @usage medium\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The Intersection options\n * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseVisibilityReturn} An object containing the state\n *\n * @example\n * const { ref, entries, observer } = useVisibility();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The Intersection options\n * @param {((entries: IntersectionEntry[], observer: Intersection) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entries, observer } = useVisibility(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected\n * @returns {UseVisibilityReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entries, observer } = useVisibility(() => console.log('callback'));\n *\n * @overload\n * @param {UseVisibilityCallback} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseVisibilityReturn} An object containing the state\n *\n * @example\n * const { entries, observer } = useVisibility(ref, () => console.log('callback'));\n */\nexport const useVisibility = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseVisibilityOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [observer, setObserver] = useState<IntersectionObserver>();\n const [entry, setEntry] = useState<IntersectionObserverEntry>();\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new IntersectionObserver(\n (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {\n const entry = entries.pop()!;\n setEntry(entry);\n internalCallbackRef.current?.(entry, observer);\n },\n {\n ...options,\n root: options?.root ? (isTarget.getElement(options.root) as Document | Element) : document\n }\n );\n\n setObserver(observer);\n observer.observe(element as Element);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);\n\n if (target) return { observer, entry, inView: !!entry?.isIntersecting };\n return {\n observer,\n ref: internalRef,\n entry,\n inView: !!entry?.isIntersecting\n };\n}) as UseVisibility;\n"],"names":["useVisibility","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","entry","setEntry","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element","entries"],"mappings":";;;AAiGO,MAAMA,IAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAUC,CAAW,IAAIC,EAAA,GAC1B,CAACC,GAAOC,CAAQ,IAAIF,EAAA,GAEpBG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AA6B3C,SA5BAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMV,IAAW,IAAI;AAAA,MACnB,CAACW,GAAsCX,MAAmC;AACxE,cAAMG,IAAQQ,EAAQ,IAAA;AACtB,QAAAP,EAASD,CAAK,GACdI,EAAoB,UAAUJ,GAAOH,CAAQ;AAAA,MAAA;AAAA,MAE/C;AAAA,QACE,GAAGH;AAAA,QACH,MAAMA,GAAS,OAAQD,EAAS,WAAWC,EAAQ,IAAI,IAA2B;AAAA,MAAA;AAAA,IACpF;AAGF,WAAAI,EAAYD,CAAQ,GACpBA,EAAS,QAAQU,CAAkB,GAE5B,MAAM;AACXV,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACL,GAAQU,EAAY,OAAOR,GAAS,YAAYA,GAAS,WAAWA,GAAS,MAAME,CAAO,CAAC,GAE3FJ,IAAe,EAAE,UAAAK,GAAU,OAAAG,GAAO,QAAQ,CAAC,CAACA,GAAO,eAAA,IAChD;AAAA,IACL,UAAAH;AAAA,IACA,KAAKK;AAAA,IACL,OAAAF;AAAA,IACA,QAAQ,CAAC,CAACA,GAAO;AAAA,EAAA;AAErB;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { useEventListener as
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
1
|
+
import { useEventListener as t } from "../useEventListener/useEventListener.mjs";
|
|
2
|
+
import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
|
|
3
|
+
const m = (e, o, r) => t(i.wrap(window), e, o, r);
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
m as useWindowEvent
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=useWindowEvent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import { isTarget } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/**\n * @name useWindowEvent\n * @description - Hook attaches an event listener to the window object for the specified event\n * @category Sensors\n * @usage low\n *\n * @template Event Key of window event map.\n * @param {Event} event The event to listen for.\n * @param {(event: WindowEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n *\n * @example\n * useWindowEvent('click', () => console.log('clicked'));\n */\nexport const useWindowEvent = <Event extends keyof WindowEventMap>(\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => any,\n options?: UseEventListenerOptions\n) => useEventListener(isTarget.wrap(window), event, listener, options);\n"],"names":["useWindowEvent","event","listener","options","useEventListener","isTarget"],"mappings":";;AAqBO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,MACGC,EAAiBC,EAAS,KAAK,MAAM,GAAGJ,GAAOC,GAAUC,CAAO;"}
|
|
@@ -1,28 +1,24 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
const
|
|
3
|
-
const e = n?.includeScrollbar ?? !0, [
|
|
1
|
+
import { useState as h, useEffect as l } from "react";
|
|
2
|
+
const m = (n) => {
|
|
3
|
+
const e = n?.includeScrollbar ?? !0, [i, o] = h(() => typeof window > "u" ? {
|
|
4
4
|
width: Number.POSITIVE_INFINITY,
|
|
5
5
|
height: Number.POSITIVE_INFINITY
|
|
6
6
|
} : {
|
|
7
7
|
width: e ? window.innerWidth : window.document.documentElement.clientWidth,
|
|
8
8
|
height: e ? window.innerHeight : window.document.documentElement.clientHeight
|
|
9
9
|
});
|
|
10
|
-
return
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
width: window.document.documentElement.clientWidth,
|
|
17
|
-
height: window.document.documentElement.clientHeight
|
|
10
|
+
return l(() => {
|
|
11
|
+
const t = () => {
|
|
12
|
+
const { innerWidth: d, innerHeight: r, document: c } = window, { clientWidth: u, clientHeight: w } = c.documentElement;
|
|
13
|
+
o({
|
|
14
|
+
width: e ? d : u,
|
|
15
|
+
height: e ? r : w
|
|
18
16
|
});
|
|
19
17
|
};
|
|
20
|
-
return window.addEventListener("resize",
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
}, [n?.includeScrollbar]), d;
|
|
18
|
+
return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
|
|
19
|
+
}, [n?.includeScrollbar]), i;
|
|
24
20
|
};
|
|
25
21
|
export {
|
|
26
|
-
|
|
22
|
+
m as useWindowSize
|
|
27
23
|
};
|
|
28
24
|
//# sourceMappingURL=useWindowSize.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowSize.mjs","sources":["../../../../src/hooks/useWindowSize/useWindowSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** The use window size return type */\ninterface UseWindowSizeParams {\n /** Whether to include the scrollbar in the window size calculation */\n includeScrollbar?: boolean;\n}\n\n/** The use window size return type */\nexport interface UseWindowSizeReturn {\n /** The current window height */\n height: number;\n /** The current window width */\n width: number;\n}\n\n/**\n * @name useWindowSize\n * @description - Hook that manages a window size\n * @category Elements\n * @usage low\n *\n * @param {number} [params.initialWidth=Number.POSITIVE_INFINITY] The initial window width\n * @param {number} [params.initialHeight=Number.POSITIVE_INFINITY] The initial window height\n * @returns {UseWindowSizeReturn} An object containing the current window width and height\n *\n * @example\n * const { width, height } = useWindowSize();\n */\nexport const useWindowSize = (params?: UseWindowSizeParams) => {\n const includeScrollbar = params?.includeScrollbar ?? true;\n const [size, setSize] = useState(() => {\n if (typeof window === 'undefined') {\n return {\n width: Number.POSITIVE_INFINITY,\n height: Number.POSITIVE_INFINITY\n };\n }\n\n return {\n width: includeScrollbar ? window.innerWidth : window.document.documentElement.clientWidth,\n height: includeScrollbar ? window.innerHeight : window.document.documentElement.clientHeight\n };\n });\n\n useEffect(() => {\n const onResize = () => {\n
|
|
1
|
+
{"version":3,"file":"useWindowSize.mjs","sources":["../../../../src/hooks/useWindowSize/useWindowSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** The use window size return type */\ninterface UseWindowSizeParams {\n /** Whether to include the scrollbar in the window size calculation */\n includeScrollbar?: boolean;\n}\n\n/** The use window size return type */\nexport interface UseWindowSizeReturn {\n /** The current window height */\n height: number;\n /** The current window width */\n width: number;\n}\n\n/**\n * @name useWindowSize\n * @description - Hook that manages a window size\n * @category Elements\n * @usage low\n *\n * @param {number} [params.initialWidth=Number.POSITIVE_INFINITY] The initial window width\n * @param {number} [params.initialHeight=Number.POSITIVE_INFINITY] The initial window height\n * @returns {UseWindowSizeReturn} An object containing the current window width and height\n *\n * @example\n * const { width, height } = useWindowSize();\n */\nexport const useWindowSize = (params?: UseWindowSizeParams) => {\n const includeScrollbar = params?.includeScrollbar ?? true;\n const [size, setSize] = useState(() => {\n if (typeof window === 'undefined') {\n return {\n width: Number.POSITIVE_INFINITY,\n height: Number.POSITIVE_INFINITY\n };\n }\n\n return {\n width: includeScrollbar ? window.innerWidth : window.document.documentElement.clientWidth,\n height: includeScrollbar ? window.innerHeight : window.document.documentElement.clientHeight\n };\n });\n\n useEffect(() => {\n const onResize = () => {\n const { innerWidth, innerHeight, document } = window;\n const { clientWidth, clientHeight } = document.documentElement;\n\n setSize({\n width: includeScrollbar ? innerWidth : clientWidth,\n height: includeScrollbar ? innerHeight : clientHeight\n });\n };\n\n window.addEventListener('resize', onResize);\n return () => window.removeEventListener('resize', onResize);\n }, [params?.includeScrollbar]);\n\n return size;\n};\n"],"names":["useWindowSize","params","includeScrollbar","size","setSize","useState","useEffect","onResize","innerWidth","innerHeight","document","clientWidth","clientHeight"],"mappings":";AA6BO,MAAMA,IAAgB,CAACC,MAAiC;AAC7D,QAAMC,IAAmBD,GAAQ,oBAAoB,IAC/C,CAACE,GAAMC,CAAO,IAAIC,EAAS,MAC3B,OAAO,SAAW,MACb;AAAA,IACL,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,EAAA,IAIZ;AAAA,IACL,OAAOH,IAAmB,OAAO,aAAa,OAAO,SAAS,gBAAgB;AAAA,IAC9E,QAAQA,IAAmB,OAAO,cAAc,OAAO,SAAS,gBAAgB;AAAA,EAAA,CAEnF;AAED,SAAAI,EAAU,MAAM;AACd,UAAMC,IAAW,MAAM;AACrB,YAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,UAAAC,EAAA,IAAa,QACxC,EAAE,aAAAC,GAAa,cAAAC,EAAA,IAAiBF,EAAS;AAE/C,MAAAN,EAAQ;AAAA,QACN,OAAOF,IAAmBM,IAAaG;AAAA,QACvC,QAAQT,IAAmBO,IAAcG;AAAA,MAAA,CAC1C;AAAA,IAAA;AAGH,kBAAO,iBAAiB,UAAUL,CAAQ,GACnC,MAAM,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,EAAA,GACzD,CAACN,GAAQ,gBAAgB,CAAC,GAEtBE;AACT;"}
|