@siberiacancode/reactuse 0.3.1 → 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/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/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":"useKeyPress.mjs","sources":["../../../../src/hooks/useKeyPress/useKeyPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useKeyPress.mjs","sources":["../../../../src/hooks/useKeyPress/useKeyPress.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 key or keys to listen for */\nexport type UseKeyPressKey = string | string[];\n\n/** The callback function to be invoked when key is pressed */\nexport type UseKeyPressCallback = (pressed: boolean, event: KeyboardEvent) => void;\n\nexport interface UseKeyPress {\n (target: HookTarget | Window, key: UseKeyPressKey, callback?: UseKeyPressCallback): boolean;\n\n <Target extends Element>(\n key: UseKeyPressKey,\n callback?: UseKeyPressCallback,\n target?: never\n ): { pressed: boolean; ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPress\n * @description - Hook that listens for key press events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target to attach the event listeners to\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {boolean} The pressed state of the key\n *\n * @example\n * const isKeyPressed = useKeyPress(ref, 'a');\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {{ pressed: boolean; ref: StateRef<Target> }} An object containing the pressed state and ref\n *\n * @example\n * const { pressed, ref } = useKeyPress('a');\n */\nexport const useKeyPress = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const key = (target ? params[1] : params[0]) as UseKeyPressKey;\n const callback = (target ? params[2] : params[1]) as UseKeyPressCallback | undefined;\n\n const [pressed, setPressed] = useState(false);\n const internalRef = useRefState(window);\n\n const keyRef = useRef(key);\n keyRef.current = key;\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n if (\n Array.isArray(keyRef.current)\n ? keyRef.current.includes(keyboardEvent.key)\n : keyboardEvent.key === keyRef.current\n ) {\n setPressed(true);\n internalCallbackRef.current?.(true, keyboardEvent);\n }\n };\n\n const onKeyUp = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n if (\n Array.isArray(keyRef.current)\n ? keyRef.current.includes(keyboardEvent.key)\n : keyboardEvent.key === keyRef.current\n ) {\n setPressed(false);\n internalCallbackRef.current?.(false, keyboardEvent);\n }\n };\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [target, internalRef.state]);\n\n if (target) return pressed;\n return { pressed, ref: internalRef };\n}) as UseKeyPress;\n"],"names":["useKeyPress","params","target","isTarget","key","callback","pressed","setPressed","useState","internalRef","useRefState","keyRef","useRef","internalCallbackRef","useEffect","element","onKeyDown","event","keyboardEvent","onKeyUp"],"mappings":";;;AAkDO,MAAMA,IAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAEzC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAOR,CAAG;AACzB,EAAAO,EAAO,UAAUP;AACjB,QAAMS,IAAsBD,EAAOP,CAAQ;AA0C3C,SAzCAQ,EAAoB,UAAUR,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMM,IAAWb,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAI,GACfM,EAAoB,UAAU,IAAMK,CAAa;AAAA,IACnD,GAGIC,IAAU,CAACF,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAK,GAChBM,EAAoB,UAAU,IAAOK,CAAa;AAAA,IACpD;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASI,CAAO,GAElC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACjB,GAAQO,EAAY,KAAK,CAAC,GAE1BP,IAAeI,IACZ,EAAE,SAAAA,GAAS,KAAKG,EAAA;AACzB;"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { useRef as v, useEffect as
|
|
1
|
+
import { useRef as v, useEffect as l } from "react";
|
|
2
2
|
import { useRefState as p } from "../useRefState/useRefState.mjs";
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const t = l(e[0]) ? e[0] : void 0, s = t ? e[1] : e[0], i = t ? e[2] : e[1], n = t ? e[3] : e[2], o = p(window), r = v(s);
|
|
3
|
+
import { isTarget as d } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const g = (...e) => {
|
|
5
|
+
const t = d(e[0]) ? e[0] : void 0, s = t ? e[1] : e[0], u = t ? e[2] : e[1], n = t ? e[3] : e[2], o = p(window), r = v(s);
|
|
7
6
|
r.current = s;
|
|
8
|
-
const
|
|
9
|
-
if (
|
|
10
|
-
const c = t ?
|
|
7
|
+
const i = v(u);
|
|
8
|
+
if (i.current = u, l(() => {
|
|
9
|
+
const c = t ? d.getElement(t) : o.current;
|
|
11
10
|
if (!c) return;
|
|
12
|
-
const f = (
|
|
13
|
-
const y =
|
|
14
|
-
(Array.isArray(r.current) ? r.current : [r.current]).includes(y.key) &&
|
|
11
|
+
const f = (k) => {
|
|
12
|
+
const y = k;
|
|
13
|
+
(Array.isArray(r.current) ? r.current : [r.current]).includes(y.key) && i.current(y);
|
|
15
14
|
};
|
|
16
15
|
return c.addEventListener("keydown", f, {
|
|
17
16
|
capture: n?.capture,
|
|
@@ -26,6 +25,6 @@ const A = (...e) => {
|
|
|
26
25
|
return o;
|
|
27
26
|
};
|
|
28
27
|
export {
|
|
29
|
-
|
|
28
|
+
g as useKeyPressEvent
|
|
30
29
|
};
|
|
31
30
|
//# sourceMappingURL=useKeyPressEvent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyPressEvent.mjs","sources":["../../../../src/hooks/useKeyPressEvent/useKeyPressEvent.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useKeyPressEvent.mjs","sources":["../../../../src/hooks/useKeyPressEvent/useKeyPressEvent.ts"],"sourcesContent":["import { useEffect, useRef } 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 key or keys to listen for */\nexport type UseKeyPressEventKey = string | string[];\n\n/** The use key press event options type */\nexport interface UseKeyPressEventOptions {\n /** Whether the event should be captured */\n capture?: boolean;\n /** Whether the event listener should only be triggered once */\n once?: boolean;\n /** Whether the event listener should be passive */\n passive?: boolean;\n}\n\nexport interface UseKeyPressEvent {\n (\n target: HookTarget | Window,\n key: UseKeyPressEventKey,\n listener: (event: KeyboardEvent) => void,\n options?: UseKeyPressEventOptions\n ): void;\n\n <Target extends Element>(\n key: UseKeyPressEventKey,\n listener: (event: KeyboardEvent) => void,\n options?: UseKeyPressEventOptions,\n target?: never\n ): { ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPressEvent\n * @description - Hook that listens for key press events on specified targets\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {HookTarget | Window} target The target to attach the event listener to.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {void}\n *\n * @example\n * useKeyPressEvent(ref, 'Enter', () => console.log('pressed'));\n *\n * @overload\n * @template Target extends Element\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyPressEvent('Enter', (event) => console.log('pressed'));\n */\nexport const useKeyPressEvent = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const key = (target ? params[1] : params[0]) as UseKeyPressEventKey;\n const listener = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n const options = (target ? params[3] : params[2]) as UseKeyPressEventOptions | undefined;\n\n const internalRef = useRefState(window);\n\n const keyRef = useRef(key);\n keyRef.current = key;\n const listenerRef = useRef(listener);\n listenerRef.current = listener;\n\n useEffect(() => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n const keys = Array.isArray(keyRef.current) ? keyRef.current : [keyRef.current];\n if (keys.includes(keyboardEvent.key)) {\n listenerRef.current(keyboardEvent);\n }\n };\n\n element.addEventListener('keydown', onKeyDown, {\n capture: options?.capture,\n passive: options?.passive,\n once: options?.once\n });\n\n return () => {\n element.removeEventListener('keydown', onKeyDown, {\n capture: options?.capture\n });\n };\n }, [target, internalRef.state, options?.capture, options?.passive, options?.once]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyPressEvent;\n"],"names":["useKeyPressEvent","params","target","isTarget","key","listener","options","internalRef","useRefState","keyRef","useRef","listenerRef","useEffect","element","onKeyDown","event","keyboardEvent"],"mappings":";;;AAiEO,MAAMA,IAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAON,CAAG;AACzB,EAAAK,EAAO,UAAUL;AACjB,QAAMO,IAAcD,EAAOL,CAAQ;AA4BnC,MA3BAM,EAAY,UAAUN,GAEtBO,EAAU,MAAM;AACd,UAAMC,IAAWX,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AAEtB,OADa,MAAM,QAAQN,EAAO,OAAO,IAAIA,EAAO,UAAU,CAACA,EAAO,OAAO,GACpE,SAASO,EAAc,GAAG,KACjCL,EAAY,QAAQK,CAAa;AAAA,IACnC;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,GAAW;AAAA,MAC7C,SAASR,GAAS;AAAA,MAClB,SAASA,GAAS;AAAA,MAClB,MAAMA,GAAS;AAAA,IAAA,CAChB,GAEM,MAAM;AACX,MAAAO,EAAQ,oBAAoB,WAAWC,GAAW;AAAA,QAChD,SAASR,GAAS;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EACH,GACC,CAACJ,GAAQK,EAAY,OAAOD,GAAS,SAASA,GAAS,SAASA,GAAS,IAAI,CAAC,GAE7E,CAAAJ;AACJ,WAAOK;AACT;"}
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
if (r.current = c, y(() => {
|
|
1
|
+
import { useRef as y, useEffect as d } from "react";
|
|
2
|
+
import { useRefState as w } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as s } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const p = (...e) => {
|
|
5
|
+
const t = s(e[0]) ? e[0] : void 0, c = t ? typeof e[1] == "object" ? e[1] : { onKeyDown: e[1] } : typeof e[0] == "object" ? e[0] : { onKeyDown: e[0] }, o = w(window), r = y(c);
|
|
6
|
+
if (r.current = c, d(() => {
|
|
8
7
|
if (!t && !o.state) return;
|
|
9
|
-
const n = t ?
|
|
8
|
+
const n = t ? s.getElement(t) : o.current;
|
|
10
9
|
if (!n) return;
|
|
11
|
-
const
|
|
12
|
-
return n.addEventListener("keydown",
|
|
13
|
-
n.removeEventListener("keydown",
|
|
10
|
+
const u = (i) => r.current?.onKeyDown?.(i), f = (i) => r.current?.onKeyUp?.(i);
|
|
11
|
+
return n.addEventListener("keydown", u), n.addEventListener("keyup", f), () => {
|
|
12
|
+
n.removeEventListener("keydown", u), n.removeEventListener("keyup", f);
|
|
14
13
|
};
|
|
15
14
|
}, [t, o.state]), !t)
|
|
16
15
|
return o;
|
|
17
16
|
};
|
|
18
17
|
export {
|
|
19
|
-
|
|
18
|
+
p as useKeyboard
|
|
20
19
|
};
|
|
21
20
|
//# sourceMappingURL=useKeyboard.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboard.mjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useKeyboard.mjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.ts"],"sourcesContent":["import { useEffect, useRef } 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 keyboard event handler type */\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/** The use keyboard event options type */\nexport interface UseKeyboardEventOptions {\n /** The callback function to be invoked on key down */\n onKeyDown?: KeyboardEventHandler;\n /** The callback function to be invoked on key up */\n onKeyUp?: KeyboardEventHandler;\n}\n\nexport interface UseKeyboard {\n (target: HookTarget, callback: KeyboardEventHandler): void;\n\n (target: HookTarget, options: UseKeyboardEventOptions): void;\n\n <Target extends HTMLElement>(\n callback: KeyboardEventHandler,\n target?: never\n ): { ref: StateRef<Target> };\n\n <Target extends HTMLElement>(\n options: UseKeyboardEventOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, (event) => console.log('key down'));\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n *\n * @overload\n * @template Target The target element type\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard((event) => console.log('key down'));\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n */\nexport const useKeyboard = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onKeyDown: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onKeyDown: params[0] }\n ) as UseKeyboardEventOptions;\n\n const internalRef = useRefState(window);\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n const onKeyDown = (event: Event) =>\n internalOptionsRef.current?.onKeyDown?.(event as KeyboardEvent);\n const onKeyUp = (event: Event) => internalOptionsRef.current?.onKeyUp?.(event as KeyboardEvent);\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onKeyDown","event","onKeyUp"],"mappings":";;;AA6EO,MAAMA,IAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,IACvB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,GAGvBI,IAAcC,EAAY,MAAM,GAChCC,IAAqBC,EAAOJ,CAAO;AAsBzC,MArBAG,EAAmB,UAAUH,GAE7BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMK,IAAWR,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AACpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAY,CAACC,MACjBL,EAAmB,SAAS,YAAYK,CAAsB,GAC1DC,IAAU,CAACD,MAAiBL,EAAmB,SAAS,UAAUK,CAAsB;AAE9F,WAAAF,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASG,CAAO,GAElC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASG,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACX,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
|
|
@@ -1,27 +1,26 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
return v(() => {
|
|
1
|
+
import { useState as v, useEffect as E } from "react";
|
|
2
|
+
import { useRefState as a } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const L = (...r) => {
|
|
5
|
+
const e = m(r[0]) ? r[0] : void 0, u = (e ? r[1] : r[0])?.enabled ?? !0, [f, s] = v([]), i = a(window);
|
|
6
|
+
return E(() => {
|
|
8
7
|
if (!u) return;
|
|
9
8
|
s([]);
|
|
10
|
-
const t = e ?
|
|
9
|
+
const t = e ? m.getElement(e) : i.current;
|
|
11
10
|
if (!t) return;
|
|
12
11
|
const y = (c) => {
|
|
13
12
|
const n = c;
|
|
14
13
|
s((o) => o.some(({ code: d }) => d === n.code) ? o : [...o, { key: n.key, code: n.code }]);
|
|
15
|
-
},
|
|
14
|
+
}, k = (c) => {
|
|
16
15
|
const n = c;
|
|
17
16
|
s((o) => o.filter(({ code: d }) => d !== n.code));
|
|
18
17
|
};
|
|
19
|
-
return t.addEventListener("keydown", y), t.addEventListener("keyup",
|
|
20
|
-
t.removeEventListener("keydown", y), t.removeEventListener("keyup",
|
|
18
|
+
return t.addEventListener("keydown", y), t.addEventListener("keyup", k), () => {
|
|
19
|
+
t.removeEventListener("keydown", y), t.removeEventListener("keyup", k);
|
|
21
20
|
};
|
|
22
21
|
}, [u, i.state, e]), e ? f : { value: f, ref: i };
|
|
23
22
|
};
|
|
24
23
|
export {
|
|
25
|
-
|
|
24
|
+
L as useKeysPressed
|
|
26
25
|
};
|
|
27
26
|
//# sourceMappingURL=useKeysPressed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeysPressed.mjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useKeysPressed.mjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.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 keys pressed options type */\nexport interface UseKeysPressedOptions {\n /** Enable or disable the event listeners */\n enabled?: boolean;\n}\n\nexport interface UseKeysPressed {\n (\n target: HookTarget | Window,\n options?: UseKeysPressedOptions\n ): Array<{\n key: string;\n code: string;\n }>;\n\n <Target extends Element>(\n options?: UseKeysPressedOptions\n ): {\n value: Array<{ key: string; code: string }>;\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget | Window} target DOM element or ref to attach keyboard listeners to\n * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners\n * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values\n *\n * @example\n * const pressedKeys = useKeysPressed(ref);\n *\n * @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element\n *\n * @example\n * const { value, ref } = useKeysPressed();\n */\nexport const useKeysPressed = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseKeysPressedOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n const [value, setValue] = useState<{ key: string; code: string }[]>([]);\n const internalRef = useRefState(window);\n\n useEffect(() => {\n if (!enabled) return;\n setValue([]);\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => {\n if (prevValue.some(({ code }) => code === keyboardEvent.code)) return prevValue;\n return [...prevValue, { key: keyboardEvent.key, code: keyboardEvent.code }];\n });\n };\n\n const onKeyUp = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => prevValue.filter(({ code }) => code !== keyboardEvent.code));\n };\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [enabled, internalRef.state, target]);\n\n if (target) return value;\n return { value, ref: internalRef };\n}) as UseKeysPressed;\n"],"names":["useKeysPressed","params","target","isTarget","enabled","value","setValue","useState","internalRef","useRefState","useEffect","element","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":";;;AAuDO,MAAMA,IAAkB,IAAIC,MAAkB;AACnD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAOC,CAAQ,IAAIC,EAA0C,CAAA,CAAE,GAChEC,IAAcC,EAAY,MAAM;AA+BtC,SA7BAC,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AACd,IAAAE,EAAS,CAAA,CAAE;AAEX,UAAMK,IAAWT,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACpE,QAAI,CAACG,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MACJA,EAAU,KAAK,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,IAAUC,IAC/D,CAAC,GAAGA,GAAW,EAAE,KAAKD,EAAc,KAAK,MAAMA,EAAc,MAAM,CAC3E;AAAA,IAAA,GAGGG,IAAU,CAACJ,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MAAcA,EAAU,OAAO,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,CAAC;AAAA,IAAA;AAGrF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASM,CAAO,GAElC,MAAM;AACX,MAAAN,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASM,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACb,GAASI,EAAY,OAAON,CAAM,CAAC,GAEnCA,IAAeG,IACZ,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useIsomorphicLayoutEffect as
|
|
3
|
-
import { useRefState as
|
|
4
|
-
import { isTarget as
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const e = (o ? y(o) : c.current) ?? document.body;
|
|
1
|
+
import { useState as w, useRef as v } from "react";
|
|
2
|
+
import { useIsomorphicLayoutEffect as a } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
|
|
3
|
+
import { useRefState as g } from "../useRefState/useRefState.mjs";
|
|
4
|
+
import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
|
|
5
|
+
const L = (...r) => {
|
|
6
|
+
const o = m(r[0]) ? r[0] : void 0, n = (o ? r[1] : r[0])?.enabled ?? !0, [l, f] = w(n), c = g(), t = v(null);
|
|
7
|
+
a(() => {
|
|
8
|
+
const e = (o ? m.getElement(o) : c.current) ?? document.body;
|
|
10
9
|
if (!(e instanceof HTMLElement) || (t.current = e, !n)) return;
|
|
11
|
-
const
|
|
12
|
-
return t.current.__originalOverflow =
|
|
13
|
-
e.style.overflow =
|
|
10
|
+
const d = window.getComputedStyle(e).overflow;
|
|
11
|
+
return t.current.__originalOverflow = d, e.style.overflow = "hidden", () => {
|
|
12
|
+
e.style.overflow = d, t.current = null;
|
|
14
13
|
};
|
|
15
14
|
}, [o, c.state, n]);
|
|
16
15
|
const u = () => {
|
|
@@ -39,6 +38,6 @@ const b = (...r) => {
|
|
|
39
38
|
};
|
|
40
39
|
};
|
|
41
40
|
export {
|
|
42
|
-
|
|
41
|
+
L as useLockScroll
|
|
43
42
|
};
|
|
44
43
|
//# sourceMappingURL=useLockScroll.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLockScroll.mjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useLockScroll.mjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use lock scroll options type */\nexport interface UseLockScrollOptions {\n /** Enable or disable scroll locking. Default: true */\n enabled?: boolean;\n}\n\n/** The use lock scroll return type */\nexport interface UseLockScrollReturn<Target extends Element> {\n /** The ref to attach to the element */\n ref: StateRef<Target>;\n /** The value of the lock state */\n value: boolean;\n /** Lock the scroll */\n lock: () => void;\n /** Toggle the scroll lock */\n toggle: () => void;\n /** Unlock the scroll */\n unlock: () => void;\n}\n\nexport interface UseLockScroll {\n (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;\n\n <Target extends Element>(\n options?: UseLockScrollOptions,\n target?: never\n ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };\n}\n\n/**\n * @name useLockScroll\n * @description - Hook that locks scroll on an element or document body\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.body] The target element to lock scroll on\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {void}\n *\n * @example\n * const { lock, unlock, value, toggle } = useLockScroll(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {StateRef<Target>} Ref to attach to element, or locks body scroll by default\n *\n * @example\n * const { ref, lock, unlock, value, toggle } = useLockScroll();\n */\nexport const useLockScroll = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseLockScrollOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n const [locked, setLocked] = useState(enabled);\n\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? document.body;\n\n if (!(element instanceof HTMLElement)) return;\n\n elementRef.current = element;\n\n if (!enabled) return;\n\n const originalStyle = window.getComputedStyle(element).overflow;\n (elementRef.current as any).__originalOverflow = originalStyle;\n element.style.overflow = 'hidden';\n\n return () => {\n element.style.overflow = originalStyle;\n elementRef.current = null;\n };\n }, [target, internalRef.state, enabled]);\n\n const lock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n (elementRef.current as any).__originalOverflow = window.getComputedStyle(element).overflow;\n element.style.overflow = 'hidden';\n setLocked(true);\n };\n\n const unlock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n element.style.overflow = (elementRef.current as any).__originalOverflow;\n setLocked(false);\n };\n\n const toggle = () => {\n if (locked) return unlock();\n lock();\n };\n\n if (target)\n return {\n value: locked,\n lock,\n unlock,\n toggle\n };\n return {\n ref: internalRef,\n value: locked,\n lock,\n unlock,\n toggle\n };\n}) as UseLockScroll;\n"],"names":["useLockScroll","params","target","isTarget","enabled","locked","setLocked","useState","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","originalStyle","lock","unlock","toggle"],"mappings":";;;;AA8DO,MAAMA,IAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAO,GAEtCI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAC9B,UAAMC,KACFX,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,SAAS;AAMxF,QAJI,EAAEK,aAAmB,iBAEzBH,EAAW,UAAUG,GAEjB,CAACT,GAAS;AAEd,UAAMU,IAAgB,OAAO,iBAAiBD,CAAO,EAAE;AACtD,WAAAH,EAAW,QAAgB,qBAAqBI,GACjDD,EAAQ,MAAM,WAAW,UAElB,MAAM;AACX,MAAAA,EAAQ,MAAM,WAAWC,GACzBJ,EAAW,UAAU;AAAA,IAAA;AAAA,EACvB,GACC,CAACR,GAAQM,EAAY,OAAOJ,CAAO,CAAC;AAEvC,QAAMW,IAAO,MAAM;AACjB,QAAI,CAACL,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC1B,IAAAA,EAAW,QAAgB,qBAAqB,OAAO,iBAAiBG,CAAO,EAAE,UAClFA,EAAQ,MAAM,WAAW,UACzBP,EAAU,EAAI;AAAA,EAAA,GAGVU,IAAS,MAAM;AACnB,QAAI,CAACN,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC3B,IAAAG,EAAQ,MAAM,WAAYH,EAAW,QAAgB,oBACrDJ,EAAU,EAAK;AAAA,EAAA,GAGXW,IAAS,MAAM;AACnB,QAAIZ,UAAeW,EAAA;AACnB,IAAAD,EAAA;AAAA,EAAK;AAGP,SAAIb,IACK;AAAA,IACL,OAAOG;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,IAEG;AAAA,IACL,KAAKT;AAAA,IACL,OAAOH;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,31 +1,30 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const n = p(r[0]) ? r[0] : void 0, a = n ? r[1] : r[0], m = n ? r[2] : r[1], [l, v] = w(!1), o = d(void 0), f = d(!1), c = R(), E = d(a);
|
|
1
|
+
import { useState as h, useRef as d, useEffect as R } from "react";
|
|
2
|
+
import { useRefState as T } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as L } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const p = 400, P = (...r) => {
|
|
5
|
+
const n = L(r[0]) ? r[0] : void 0, a = n ? r[1] : r[0], l = n ? r[2] : r[1], [m, v] = h(!1), o = d(void 0), f = d(!1), c = T(), E = d(a);
|
|
7
6
|
E.current = a;
|
|
8
|
-
const s = d(
|
|
9
|
-
return s.current =
|
|
7
|
+
const s = d(l);
|
|
8
|
+
return s.current = l, R(() => {
|
|
10
9
|
if (!n && !c.state) return;
|
|
11
|
-
const e = n ?
|
|
10
|
+
const e = n ? L.getElement(n) : c.current;
|
|
12
11
|
if (!e) return;
|
|
13
12
|
const i = (u) => {
|
|
14
13
|
s.current?.onStart?.(u), f.current = !0, o.current = setTimeout(() => {
|
|
15
14
|
E.current(u), v(!0);
|
|
16
|
-
}, s.current?.threshold ??
|
|
15
|
+
}, s.current?.threshold ?? p);
|
|
17
16
|
}, t = (u) => {
|
|
18
|
-
v((
|
|
17
|
+
v((w) => (w ? s.current?.onFinish?.(u) : f.current && s.current?.onCancel?.(u), !1)), f.current = !1, o.current && clearTimeout(o.current);
|
|
19
18
|
};
|
|
20
19
|
return e.addEventListener("mousedown", i), e.addEventListener("touchstart", i), e.addEventListener("mouseup", t), e.addEventListener("touchend", t), window.addEventListener("mouseup", t), window.addEventListener("touchend", t), () => {
|
|
21
20
|
e.removeEventListener("mousedown", i), e.removeEventListener("touchstart", i), e.removeEventListener("mouseup", t), e.removeEventListener("touchend", t), window.removeEventListener("mouseup", t), window.removeEventListener("touchend", t), o.current && clearTimeout(o.current);
|
|
22
21
|
};
|
|
23
|
-
}, [n, c.state]), n ?
|
|
22
|
+
}, [n, c.state]), n ? m : {
|
|
24
23
|
ref: c,
|
|
25
|
-
pressed:
|
|
24
|
+
pressed: m
|
|
26
25
|
};
|
|
27
26
|
};
|
|
28
27
|
export {
|
|
29
|
-
|
|
28
|
+
P as useLongPress
|
|
30
29
|
};
|
|
31
30
|
//# sourceMappingURL=useLongPress.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLongPress.mjs","sources":["../../../../src/hooks/useLongPress/useLongPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useLongPress.mjs","sources":["../../../../src/hooks/useLongPress/useLongPress.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\nexport type LongPressEvents = MouseEvent | TouchEvent;\n\n// * The use long press options type */\nexport interface UseLongPressOptions {\n // * The threshold time in milliseconds\n threshold?: number;\n // * The callback function to be invoked on long press cancel\n onCancel?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press end\n onFinish?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press start\n onStart?: (event: LongPressEvents) => void;\n}\n\nexport interface UseLongPress {\n (\n target: HookTarget,\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n pressed: boolean;\n };\n}\n\nconst DEFAULT_THRESHOLD_TIME = 400;\n\n/**\n * @name useLongPress\n * @description - Hook that defines the logic when long pressing an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be long pressed\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const pressed = useLongPress(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const { ref, pressed } = useLongPress(() => console.log('callback'));\n */\nexport const useLongPress = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (event: LongPressEvents) => void;\n const options = (target ? params[2] : params[1]) as UseLongPressOptions | undefined;\n\n const [pressed, setPressed] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const isPressedRef = useRef(false);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onStart = (event: LongPressEvents) => {\n internalOptionsRef.current?.onStart?.(event);\n\n isPressedRef.current = true;\n timeoutIdRef.current = setTimeout(() => {\n internalCallbackRef.current(event);\n setPressed(true);\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n };\n\n const onCancel = (event: LongPressEvents) => {\n setPressed((prevPressed) => {\n if (prevPressed) {\n internalOptionsRef.current?.onFinish?.(event);\n } else if (isPressedRef.current) {\n internalOptionsRef.current?.onCancel?.(event);\n }\n\n return false;\n });\n\n isPressedRef.current = false;\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n\n element.addEventListener('mousedown', onStart as EventListener);\n element.addEventListener('touchstart', onStart as EventListener);\n element.addEventListener('mouseup', onCancel as EventListener);\n element.addEventListener('touchend', onCancel as EventListener);\n window.addEventListener('mouseup', onCancel as EventListener);\n window.addEventListener('touchend', onCancel as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onStart as EventListener);\n element.removeEventListener('touchstart', onStart as EventListener);\n element.removeEventListener('mouseup', onCancel as EventListener);\n element.removeEventListener('touchend', onCancel as EventListener);\n window.removeEventListener('mouseup', onCancel as EventListener);\n window.removeEventListener('touchend', onCancel as EventListener);\n\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target, internalRef.state]);\n\n if (target) return pressed;\n return {\n ref: internalRef,\n pressed\n };\n}) as UseLongPress;\n"],"names":["DEFAULT_THRESHOLD_TIME","useLongPress","params","target","isTarget","callback","options","pressed","setPressed","useState","timeoutIdRef","useRef","isPressedRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onStart","event","onCancel","prevPressed"],"mappings":";;;AAyCA,MAAMA,IAAyB,KA0BlBC,IAAgB,IAAIC,MAAuB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAeC,EAAsC,MAAS,GAC9DC,IAAeD,EAAO,EAAK,GAC3BE,IAAcC,EAAA,GAEdC,IAAsBJ,EAAON,CAAQ;AAC3C,EAAAU,EAAoB,UAAUV;AAC9B,QAAMW,IAAqBL,EAAOL,CAAO;AAqDzC,SApDAU,EAAmB,UAAUV,GAE7BW,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACU,EAAY,MAAO;AAEnC,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,CAACC,MAA2B;AAC1C,MAAAJ,EAAmB,SAAS,UAAUI,CAAK,GAE3CR,EAAa,UAAU,IACvBF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAAK,EAAoB,QAAQK,CAAK,GACjCZ,EAAW,EAAI;AAAA,MAAA,GACdQ,EAAmB,SAAS,aAAahB,CAAsB;AAAA,IAAA,GAG9DqB,IAAW,CAACD,MAA2B;AAC3C,MAAAZ,EAAW,CAACc,OACNA,IACFN,EAAmB,SAAS,WAAWI,CAAK,IACnCR,EAAa,WACtBI,EAAmB,SAAS,WAAWI,CAAK,GAGvC,GACR,GAEDR,EAAa,UAAU,IACnBF,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAG7D,WAAAQ,EAAQ,iBAAiB,aAAaC,CAAwB,GAC9DD,EAAQ,iBAAiB,cAAcC,CAAwB,GAC/DD,EAAQ,iBAAiB,WAAWG,CAAyB,GAC7DH,EAAQ,iBAAiB,YAAYG,CAAyB,GAC9D,OAAO,iBAAiB,WAAWA,CAAyB,GAC5D,OAAO,iBAAiB,YAAYA,CAAyB,GAEtD,MAAM;AACX,MAAAH,EAAQ,oBAAoB,aAAaC,CAAwB,GACjED,EAAQ,oBAAoB,cAAcC,CAAwB,GAClED,EAAQ,oBAAoB,WAAWG,CAAyB,GAChEH,EAAQ,oBAAoB,YAAYG,CAAyB,GACjE,OAAO,oBAAoB,WAAWA,CAAyB,GAC/D,OAAO,oBAAoB,YAAYA,CAAyB,GAE5DX,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACP,GAAQU,EAAY,KAAK,CAAC,GAE1BV,IAAeI,IACZ;AAAA,IACL,KAAKM;AAAA,IACL,SAAAN;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const t = w(r[0]) ? r[0] : void 0, e = v(), [o, c] = R({
|
|
1
|
+
import { useState as d, useEffect as v } from "react";
|
|
2
|
+
import { useRefState as w } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const E = (...r) => {
|
|
5
|
+
const t = c(r[0]) ? r[0] : void 0, e = w(), [n, f] = d({
|
|
7
6
|
x: 0,
|
|
8
7
|
y: 0,
|
|
9
8
|
width: 0,
|
|
@@ -13,22 +12,22 @@ const S = (...r) => {
|
|
|
13
12
|
bottom: 0,
|
|
14
13
|
right: 0
|
|
15
14
|
});
|
|
16
|
-
return
|
|
15
|
+
return v(() => {
|
|
17
16
|
if (!t && !e.state) return;
|
|
18
|
-
const
|
|
19
|
-
if (!
|
|
20
|
-
const s = new ResizeObserver((
|
|
21
|
-
const i =
|
|
17
|
+
const o = t ? c.getElement(t) : e.current;
|
|
18
|
+
if (!o) return;
|
|
19
|
+
const s = new ResizeObserver((u) => {
|
|
20
|
+
const i = u[0];
|
|
22
21
|
if (!i) return;
|
|
23
|
-
const { x:
|
|
24
|
-
|
|
22
|
+
const { x: m, y: h, width: g, height: a, top: b, left: l, bottom: p, right: R } = i.contentRect;
|
|
23
|
+
f({ x: m, y: h, width: g, height: a, top: b, left: l, bottom: p, right: R });
|
|
25
24
|
});
|
|
26
|
-
return s.observe(
|
|
25
|
+
return s.observe(o), () => {
|
|
27
26
|
s.disconnect();
|
|
28
27
|
};
|
|
29
|
-
}, [t, e.state]), t ?
|
|
28
|
+
}, [t, e.state]), t ? n : { ref: e, ...n };
|
|
30
29
|
};
|
|
31
30
|
export {
|
|
32
|
-
|
|
31
|
+
E as useMeasure
|
|
33
32
|
};
|
|
34
33
|
//# sourceMappingURL=useMeasure.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMeasure.mjs","sources":["../../../../src/hooks/useMeasure/useMeasure.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useMeasure.mjs","sources":["../../../../src/hooks/useMeasure/useMeasure.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 measure return type */\nexport type UseMeasureReturn = Pick<\n DOMRectReadOnly,\n 'bottom' | 'height' | 'left' | 'right' | 'top' | 'width' | 'x' | 'y'\n>;\n\nexport interface UseMeasure {\n (target: HookTarget): UseMeasureReturn;\n\n <Target extends Element>(\n target?: never\n ): UseMeasureReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useMeasure\n * @description - Hook to measure the size and position of an element\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The element to measure\n * @returns {UseMeasureReturn} The element's size and position\n *\n * @example\n * const { x, y, width, height, top, left, bottom, right } = useMeasure(ref);\n *\n * @overload\n * @template Target The element to measure\n * @returns {UseMeasureReturn & { ref: StateRef<Target> }} The element's size and position\n *\n * @example\n * const { ref, x, y, width, height, top, left, bottom, right } = useMeasure();\n */\nexport const useMeasure = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const internalRef = useRefState<Element>();\n const [rect, setRect] = useState({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0\n });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (!entry) return;\n\n const { x, y, width, height, top, left, bottom, right } = entry.contentRect;\n setRect({ x, y, width, height, top, left, bottom, right });\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [target, internalRef.state]);\n\n if (target) return rect;\n return { ref: internalRef, ...rect };\n}) as UseMeasure;\n"],"names":["useMeasure","params","target","isTarget","internalRef","useRefState","rect","setRect","useState","useEffect","element","resizeObserver","entries","entry","x","y","width","height","top","left","bottom","right"],"mappings":";;;AA8CO,MAAMA,IAAc,IAAIC,MAAkB;AAC/C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IAAcC,EAAA,GACd,CAACC,GAAMC,CAAO,IAAIC,EAAS;AAAA,IAC/B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,CACR;AAuBD,SArBAC,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACE,EAAY,MAAO;AAEnC,UAAMM,IAAWR,IAASC,EAAS,WAAWD,CAAM,IAAIE,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAiB,IAAI,eAAe,CAACC,MAAY;AACrD,YAAMC,IAAQD,EAAQ,CAAC;AACvB,UAAI,CAACC,EAAO;AAEZ,YAAM,EAAE,GAAAC,GAAG,GAAAC,GAAG,OAAAC,GAAO,QAAAC,GAAQ,KAAAC,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,EAAA,IAAUR,EAAM;AAChE,MAAAN,EAAQ,EAAE,GAAAO,GAAG,GAAAC,GAAG,OAAAC,GAAO,QAAAC,GAAQ,KAAAC,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,GAAO;AAAA,IAAA,CAC1D;AAED,WAAAV,EAAe,QAAQD,CAAO,GAEvB,MAAM;AACX,MAAAC,EAAe,WAAA;AAAA,IAAW;AAAA,EAC5B,GACC,CAACT,GAAQE,EAAY,KAAK,CAAC,GAE1BF,IAAeI,IACZ,EAAE,KAAKF,GAAa,GAAGE,EAAA;AAChC;"}
|
|
@@ -1,50 +1,49 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
|
|
5
|
-
const Q = (n) => {
|
|
1
|
+
import { useRef as J, useState as r, useEffect as K } from "react";
|
|
2
|
+
import { useRefState as N } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as C } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
const O = (n) => {
|
|
6
5
|
let a = [];
|
|
7
6
|
for (let s = 0; s < n.length; ++s)
|
|
8
7
|
a = [...a, [n.start(s), n.end(s)]];
|
|
9
8
|
return a;
|
|
10
|
-
},
|
|
11
|
-
const a =
|
|
12
|
-
|
|
13
|
-
const e = a ?
|
|
9
|
+
}, re = (...n) => {
|
|
10
|
+
const a = C(n[0]) ? n[0] : void 0, s = a ? typeof n[1] == "object" ? n[1] : { src: n[1] } : typeof n[0] == "object" ? n[0] : { src: n[0] }, c = N(), t = J(null), [i, o] = r(!1), [u, d] = r(0), [j, l] = r(0), [D, m] = r(!1), [W, B] = r(!1), [U, q] = r([]), [z, v] = r(!1), [F, f] = r(!1), [G, g] = r(1), [H, E] = r(!1), [I, L] = r(1);
|
|
11
|
+
K(() => {
|
|
12
|
+
const e = a ? C.getElement(a) : c.current;
|
|
14
13
|
if (!e) return;
|
|
15
|
-
t.current = e, e.src = s.src, s.type && e.setAttribute("type", s.type), s.media && e.setAttribute("media", s.media), d(e.duration), l(e.currentTime), o(!1),
|
|
14
|
+
t.current = e, e.src = s.src, s.type && e.setAttribute("type", s.type), s.media && e.setAttribute("media", s.media), d(e.duration), l(e.currentTime), o(!1), f(e.ended), E(e.muted), L(e.volume), g(e.playbackRate);
|
|
16
15
|
const k = () => {
|
|
17
|
-
o(!0),
|
|
18
|
-
}, h = () => o(!1), b = () =>
|
|
19
|
-
o(!1),
|
|
16
|
+
o(!0), v(!1);
|
|
17
|
+
}, h = () => o(!1), b = () => B(!0), R = () => v(!0), S = () => m(!0), T = () => m(!1), P = () => {
|
|
18
|
+
o(!1), f(!0);
|
|
20
19
|
}, M = () => d(e.duration), w = () => l(e.currentTime), V = () => {
|
|
21
20
|
E(e.muted), L(e.volume);
|
|
22
|
-
}, x = () => g(e.playbackRate), A = () =>
|
|
21
|
+
}, x = () => g(e.playbackRate), A = () => q(O(e.buffered));
|
|
23
22
|
return e.addEventListener("playing", k), e.addEventListener("pause", h), e.addEventListener("waiting", b), e.addEventListener("progress", A), e.addEventListener("stalled", R), e.addEventListener("seeking", S), e.addEventListener("seeked", T), e.addEventListener("ended", P), e.addEventListener("loadedmetadata", M), e.addEventListener("timeupdate", w), e.addEventListener("volumechange", V), e.addEventListener("ratechange", x), () => {
|
|
24
23
|
e.removeEventListener("playing", k), e.removeEventListener("pause", h), e.removeEventListener("waiting", b), e.removeEventListener("progress", A), e.removeEventListener("stalled", R), e.removeEventListener("seeking", S), e.removeEventListener("seeked", T), e.removeEventListener("ended", P), e.removeEventListener("loadedmetadata", M), e.removeEventListener("timeupdate", w), e.removeEventListener("volumechange", V), e.removeEventListener("ratechange", x);
|
|
25
24
|
};
|
|
26
|
-
}, [a,
|
|
27
|
-
const
|
|
25
|
+
}, [a, c.state]);
|
|
26
|
+
const y = async () => {
|
|
28
27
|
const e = t.current;
|
|
29
28
|
e && await e.play();
|
|
30
|
-
},
|
|
29
|
+
}, p = () => {
|
|
31
30
|
t.current && t.current.pause();
|
|
32
31
|
};
|
|
33
32
|
return {
|
|
34
|
-
playing:
|
|
33
|
+
playing: i,
|
|
35
34
|
duration: u,
|
|
36
|
-
currentTime:
|
|
37
|
-
seeking:
|
|
38
|
-
waiting:
|
|
39
|
-
buffered:
|
|
40
|
-
stalled:
|
|
41
|
-
ended:
|
|
42
|
-
playbackRate:
|
|
43
|
-
muted:
|
|
44
|
-
volume:
|
|
45
|
-
play:
|
|
46
|
-
pause:
|
|
47
|
-
toggle: async () =>
|
|
35
|
+
currentTime: j,
|
|
36
|
+
seeking: D,
|
|
37
|
+
waiting: W,
|
|
38
|
+
buffered: U,
|
|
39
|
+
stalled: z,
|
|
40
|
+
ended: F,
|
|
41
|
+
playbackRate: G,
|
|
42
|
+
muted: H,
|
|
43
|
+
volume: I,
|
|
44
|
+
play: y,
|
|
45
|
+
pause: p,
|
|
46
|
+
toggle: async () => i ? p() : y(),
|
|
48
47
|
seek: (e) => {
|
|
49
48
|
t.current && (t.current.currentTime = Math.min(Math.max(e, 0), u));
|
|
50
49
|
},
|
|
@@ -60,11 +59,11 @@ const Q = (n) => {
|
|
|
60
59
|
changePlaybackRate: (e) => {
|
|
61
60
|
t.current && (t.current.playbackRate = e);
|
|
62
61
|
},
|
|
63
|
-
...!a && { ref:
|
|
62
|
+
...!a && { ref: c }
|
|
64
63
|
};
|
|
65
64
|
};
|
|
66
65
|
export {
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
O as timeRangeToArray,
|
|
67
|
+
re as useMediaControls
|
|
69
68
|
};
|
|
70
69
|
//# sourceMappingURL=useMediaControls.mjs.map
|