@siberiacancode/reactuse 0.2.22 → 0.2.24
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/useAudio/useAudio.cjs.map +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +2 -0
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -0
- package/dist/cjs/hooks/useBattery/useBattery.cjs +1 -1
- package/dist/cjs/hooks/useBattery/useBattery.cjs.map +1 -1
- package/dist/cjs/hooks/useBroadcastChannel/useBroadcastChannel.cjs +2 -0
- package/dist/cjs/hooks/useBroadcastChannel/useBroadcastChannel.cjs.map +1 -0
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map +1 -1
- package/dist/cjs/hooks/useEvent/useEvent.cjs +1 -1
- package/dist/cjs/hooks/useEvent/useEvent.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/useKeyboard/useKeyboard.cjs +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
- package/dist/cjs/hooks/useLockCallback/useLockCallback.cjs +1 -1
- package/dist/cjs/hooks/useLockCallback/useLockCallback.cjs.map +1 -1
- package/dist/cjs/hooks/useMemory/useMemory.cjs +1 -1
- package/dist/cjs/hooks/useMemory/useMemory.cjs.map +1 -1
- package/dist/cjs/hooks/useRerender/useRerender.cjs.map +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.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/useThrottleCallback/useThrottleCallback.cjs +1 -1
- package/dist/cjs/hooks/useThrottleCallback/useThrottleCallback.cjs.map +1 -1
- package/dist/cjs/hooks/useTime/useTime.cjs +1 -1
- package/dist/cjs/hooks/useTime/useTime.cjs.map +1 -1
- package/dist/cjs/hooks/useWindowEvent/useWindowEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useWindowScroll/useWindowScroll.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/esm/hooks/useAudio/useAudio.mjs.map +1 -1
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +39 -0
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -0
- package/dist/esm/hooks/useBattery/useBattery.mjs +8 -8
- package/dist/esm/hooks/useBattery/useBattery.mjs.map +1 -1
- package/dist/esm/hooks/useBroadcastChannel/useBroadcastChannel.mjs +32 -0
- package/dist/esm/hooks/useBroadcastChannel/useBroadcastChannel.mjs.map +1 -0
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs +23 -25
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map +1 -1
- package/dist/esm/hooks/useEvent/useEvent.mjs +6 -6
- package/dist/esm/hooks/useEvent/useEvent.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +15 -15
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
- package/dist/esm/hooks/useLockCallback/useLockCallback.mjs.map +1 -1
- package/dist/esm/hooks/useMemory/useMemory.mjs +9 -8
- package/dist/esm/hooks/useMemory/useMemory.mjs.map +1 -1
- package/dist/esm/hooks/useRerender/useRerender.mjs.map +1 -1
- package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs +9 -10
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map +1 -1
- package/dist/esm/hooks/useThrottleCallback/useThrottleCallback.mjs +11 -11
- package/dist/esm/hooks/useThrottleCallback/useThrottleCallback.mjs.map +1 -1
- package/dist/esm/hooks/useTime/useTime.mjs +10 -6
- package/dist/esm/hooks/useTime/useTime.mjs.map +1 -1
- package/dist/esm/hooks/useWindowEvent/useWindowEvent.mjs.map +1 -1
- package/dist/esm/hooks/useWindowScroll/useWindowScroll.mjs.map +1 -1
- package/dist/esm/index.mjs +336 -332
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/hooks/index.d.ts +2 -0
- package/dist/types/hooks/useAutoScroll/useAutoScroll.d.ts +33 -0
- package/dist/types/hooks/useBroadcastChannel/useBroadcastChannel.d.ts +32 -0
- package/dist/types/hooks/useKeyPress/useKeyPress.d.ts +1 -1
- package/dist/types/hooks/useKeyboard/useKeyboard.d.ts +28 -8
- package/dist/types/hooks/useTime/useTime.d.ts +8 -0
- package/dist/types/hooks/useWindowEvent/useWindowEvent.d.ts +1 -1
- package/dist/types/hooks/useWindowScroll/useWindowScroll.d.ts +1 -1
- package/package.json +89 -89
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMemory.mjs","sources":["../../../../src/hooks/useMemory/useMemory.ts"],"sourcesContent":["import { useState } from 'react';\n\
|
|
1
|
+
{"version":3,"file":"useMemory.mjs","sources":["../../../../src/hooks/useMemory/useMemory.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ndeclare global {\n interface Performance {\n memory: {\n readonly jsHeapSizeLimit: number;\n readonly totalJSHeapSize: number;\n readonly usedJSHeapSize: number;\n };\n }\n}\n\n/** The use memory return type */\nexport interface UseMemoryReturn {\n /** The memory supported status */\n supported: boolean;\n /** The current memory usage */\n value: Performance['memory'];\n}\n\n/**\n * @name useMemory\n * @description - Hook that gives you current memory usage\n * @category Browser\n *\n * @browserapi performance.memory https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory\n *\n * @returns {UseMemoryReturn} An object containing the current memory usage\n *\n * @example\n * const { supported, value } = useMemory();\n */\nexport const useMemory = (): UseMemoryReturn => {\n const supported = performance && 'memory' in performance && !!performance.memory;\n const [value, setValue] = useState<Performance['memory']>(\n performance?.memory ?? {\n jsHeapSizeLimit: 0,\n totalJSHeapSize: 0,\n usedJSHeapSize: 0\n }\n );\n\n useEffect(() => {\n if (!supported) return;\n const intervalId = setInterval(() => setValue(performance.memory), 1000);\n return () => clearInterval(intervalId);\n }, []);\n\n return { supported, value };\n};\n"],"names":["useMemory","supported","value","setValue","useState","useEffect","intervalId"],"mappings":";AAgCO,MAAMA,IAAY,MAAuB;AAC9C,QAAMC,IAAY,eAAe,YAAY,eAAe,CAAC,CAAC,YAAY,QACpE,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxB,aAAa,UAAU;AAAA,MACrB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAGF,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,EAAW;AAChB,UAAMK,IAAa,YAAY,MAAMH,EAAS,YAAY,MAAM,GAAG,GAAI;AACvE,WAAO,MAAM,cAAcG,CAAU;AAAA,EAAA,GACpC,EAAE,GAEE,EAAE,WAAAL,GAAW,OAAAC,EAAA;AACtB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRerender.mjs","sources":["../../../../src/hooks/useRerender/useRerender.ts"],"sourcesContent":["import { useReducer } from 'react';\n\n/** The use rerender return type */\ntype UseRerenderReturn = () => void;\n\n/**\n * @name useRerender\n * @description - Hook that defines the logic to force rerender a component\n * @category Lifecycle\n *\n * @returns {UseRerenderReturn} The rerender function\n *\n * @example\n * const rerender = useRerender();\n */\nexport const useRerender = (): UseRerenderReturn =>
|
|
1
|
+
{"version":3,"file":"useRerender.mjs","sources":["../../../../src/hooks/useRerender/useRerender.ts"],"sourcesContent":["import { useReducer } from 'react';\n\n/** The use rerender return type */\ntype UseRerenderReturn = () => void;\n\n/**\n * @name useRerender\n * @description - Hook that defines the logic to force rerender a component\n * @category Lifecycle\n *\n * @returns {UseRerenderReturn} The rerender function\n *\n * @example\n * const rerender = useRerender();\n */\nexport const useRerender = (): UseRerenderReturn => useReducer(() => ({}), {})[1];\n"],"names":["useRerender","useReducer"],"mappings":";AAeO,MAAMA,IAAc,MAAyBC,EAAW,OAAO,CAAA,IAAK,CAAA,CAAE,EAAE,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n /** The on scroll callback */\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n /** The on end scroll callback */\n onStop?: (event: Event) => void;\n\n /** Offset arrived states by x pixels. */\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n}\n\nexport interface UseScrollCallbackParams {\n /** The element x position */\n x: number;\n /** The element y position */\n y: number;\n /** State of scroll arrived */\n arrived: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n /** State of scroll direction */\n directions: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n}\n\nexport interface UseScroll {\n (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;\n\n (target: HookTarget, options?: UseScrollOptions): boolean;\n\n <Target extends Element>(\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\n target?: never\n ): {\n ref: StateRef<Target>;\n scrolling: boolean;\n };\n\n <Target extends Element>(\n options?: UseScrollOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n scrolling: boolean;\n };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onScroll: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onScroll: params[0] }\n ) as UseScrollOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const [scrolling, setScrolling] = useState(false);\n const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const onScrollEnd = (event: Event) => {\n setScrolling(false);\n options?.onStop?.(event);\n };\n\n const onScroll = (event: Event) => {\n setScrolling(true);\n const target = (\n event.target === document ? (event.target as Document).documentElement : event.target\n ) as HTMLElement;\n\n const { display, flexDirection, direction } = target.style;\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n const scrollLeft = target.scrollLeft;\n let scrollTop = target.scrollTop;\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n const offset = internalOptionsRef.current?.offset;\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n const right =\n scrollLeft * directionMultiplier + target.clientWidth >=\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n const top = scrollTop <= (offset?.top ?? 0);\n const bottom =\n scrollTop + target.clientHeight >=\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n const params = {\n x: scrollLeft,\n y: scrollTop,\n directions: {\n left: scrollLeft < scrollPositionRef.current.x,\n right: scrollLeft > scrollPositionRef.current.x,\n top: scrollTop < scrollPositionRef.current.y,\n bottom: scrollTop > scrollPositionRef.current.y\n },\n arrived: {\n left: isRowReverse ? right : left,\n right: isRowReverse ? left : right,\n top: isColumnReverse ? bottom : top,\n bottom: isColumnReverse ? top : bottom\n }\n };\n\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n internalOptionsRef.current?.onScroll?.(params, event);\n };\n\n element.addEventListener('scroll', onScroll);\n element.addEventListener('scrollend', onScrollEnd);\n\n return () => {\n element.removeEventListener('scroll', onScroll);\n element.removeEventListener('scrollend', onScrollEnd);\n };\n }, [target, internalRef.state]);\n\n if (target) return scrolling;\n return {\n ref: internalRef,\n scrolling\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse"],"mappings":";;;;AAUA,MAAMA,IAAiC,GAgH1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,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,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO;AACzC,EAAAG,EAAmB,UAAUH;AAE7B,QAAM,CAACK,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBJ,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAqE/C,SAnEAK,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMS,IAAWZ,IAASa,EAAWb,CAAM,IAAIG,EAAY;AAE3D,QAAI,CAACS,EAAS;AAEd,UAAME,IAAc,CAACC,MAAiB;AACpC,MAAAP,EAAa,EAAK,GAClBN,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAP,EAAa,EAAI;AACjB,YAAMR,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaX,EAAkB,QAAQ;AAAA,UAC7C,OAAOW,IAAaX,EAAkB,QAAQ;AAAA,UAC9C,KAAKY,IAAYZ,EAAkB,QAAQ;AAAA,UAC3C,QAAQY,IAAYZ,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMmB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAjB,EAAkB,UAAU,EAAE,GAAGW,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAH,EAAQ,iBAAiB,UAAUI,CAAQ,GAC3CJ,EAAQ,iBAAiB,aAAaE,CAAW,GAE1C,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUI,CAAQ,GAC9CJ,EAAQ,oBAAoB,aAAaE,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC,GAE1BH,IAAeO,IACZ;AAAA,IACL,KAAKJ;AAAA,IACL,WAAAI;AAAA,EAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\n\r\nimport type { HookTarget } from '@/utils/helpers';\r\n\r\nimport { getElement, isTarget } from '@/utils/helpers';\r\n\r\nimport type { StateRef } from '../useRefState/useRefState';\r\n\r\nimport { useRefState } from '../useRefState/useRefState';\r\n\r\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\r\n\r\nexport interface UseScrollOptions {\r\n /** The on scroll callback */\r\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\r\n\r\n /** The on end scroll callback */\r\n onStop?: (event: Event) => void;\r\n\r\n /** Offset arrived states by x pixels. */\r\n offset?: {\r\n left?: number;\r\n right?: number;\r\n top?: number;\r\n bottom?: number;\r\n };\r\n}\r\n\r\nexport interface UseScrollCallbackParams {\r\n /** The element x position */\r\n x: number;\r\n /** The element y position */\r\n y: number;\r\n /** State of scroll arrived */\r\n arrived: {\r\n left: boolean;\r\n right: boolean;\r\n top: boolean;\r\n bottom: boolean;\r\n };\r\n /** State of scroll direction */\r\n directions: {\r\n left: boolean;\r\n right: boolean;\r\n top: boolean;\r\n bottom: boolean;\r\n };\r\n}\r\n\r\nexport interface UseScroll {\r\n (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;\r\n\r\n (target: HookTarget, options?: UseScrollOptions): boolean;\r\n\r\n <Target extends Element>(\r\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\r\n target?: never\r\n ): {\r\n ref: StateRef<Target>;\r\n scrolling: boolean;\r\n };\r\n\r\n <Target extends Element>(\r\n options?: UseScrollOptions,\r\n target?: never\r\n ): {\r\n ref: StateRef<Target>;\r\n scrolling: boolean;\r\n };\r\n}\r\n\r\n/**\r\n * @name useScroll\r\n * @description - Hook that allows you to control scroll a element\r\n * @category Sensors\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\r\n * @param {number} [options.offset.left=0] The left offset for arrived states\r\n * @param {number} [options.offset.right=0] The right offset for arrived states\r\n * @param {number} [options.offset.top=0] The top offset for arrived states\r\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\r\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\r\n * @returns {boolean} The state of scrolling\r\n *\r\n * @example\r\n * const scrolling = useScroll(ref, options);\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\r\n * @returns {boolean} The state of scrolling\r\n *\r\n * @example\r\n * const scrolling = useScroll(ref, () => console.log('callback'));\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {Target} target The target element to scroll\r\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\r\n * @param {number} [options.offset.left=0] The left offset for arrived states\r\n * @param {number} [options.offset.right=0] The right offset for arrived states\r\n * @param {number} [options.offset.top=0] The top offset for arrived states\r\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\r\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\r\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\r\n *\r\n * @example\r\n * const { ref, scrolling } = useScroll(options);\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {Target} target The target element to scroll\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\r\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\r\n *\r\n * @example\r\n * const { ref, scrolling } = useScroll(() => console.log('callback'));\r\n */\r\nexport const useScroll = ((...params: any[]) => {\r\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\r\n const options = (\r\n target\r\n ? typeof params[1] === 'object'\r\n ? params[1]\r\n : { onScroll: params[1] }\r\n : typeof params[0] === 'object'\r\n ? params[0]\r\n : { onScroll: params[0] }\r\n ) as UseScrollOptions | undefined;\r\n\r\n const internalRef = useRefState<Element>();\r\n const internalOptionsRef = useRef(options);\r\n internalOptionsRef.current = options;\r\n\r\n const [scrolling, setScrolling] = useState(false);\r\n const scrollPositionRef = useRef({ x: 0, y: 0 });\r\n\r\n useEffect(() => {\r\n if (!target && !internalRef.state) return;\r\n const element = (target ? getElement(target) : internalRef.current) as Element;\r\n\r\n if (!element) return;\r\n\r\n const onScrollEnd = (event: Event) => {\r\n setScrolling(false);\r\n options?.onStop?.(event);\r\n };\r\n\r\n const onScroll = (event: Event) => {\r\n setScrolling(true);\r\n const target = (\r\n event.target === document ? (event.target as Document).documentElement : event.target\r\n ) as HTMLElement;\r\n\r\n const { display, flexDirection, direction } = target.style;\r\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\r\n\r\n const scrollLeft = target.scrollLeft;\r\n let scrollTop = target.scrollTop;\r\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\r\n\r\n const offset = internalOptionsRef.current?.offset;\r\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\r\n const right =\r\n scrollLeft * directionMultiplier + target.clientWidth >=\r\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\r\n const top = scrollTop <= (offset?.top ?? 0);\r\n const bottom =\r\n scrollTop + target.clientHeight >=\r\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\r\n\r\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\r\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\r\n\r\n const params = {\r\n x: scrollLeft,\r\n y: scrollTop,\r\n directions: {\r\n left: scrollLeft < scrollPositionRef.current.x,\r\n right: scrollLeft > scrollPositionRef.current.x,\r\n top: scrollTop < scrollPositionRef.current.y,\r\n bottom: scrollTop > scrollPositionRef.current.y\r\n },\r\n arrived: {\r\n left: isRowReverse ? right : left,\r\n right: isRowReverse ? left : right,\r\n top: isColumnReverse ? bottom : top,\r\n bottom: isColumnReverse ? top : bottom\r\n }\r\n };\r\n\r\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\r\n internalOptionsRef.current?.onScroll?.(params, event);\r\n };\r\n\r\n element.addEventListener('scroll', onScroll);\r\n element.addEventListener('scrollend', onScrollEnd);\r\n\r\n return () => {\r\n element.removeEventListener('scroll', onScroll);\r\n element.removeEventListener('scrollend', onScrollEnd);\r\n };\r\n }, [target, internalRef.state]);\r\n\r\n if (target) return scrolling;\r\n return {\r\n ref: internalRef,\r\n scrolling\r\n };\r\n}) as UseScroll;\r\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse"],"mappings":";;;;AAUA,MAAMA,IAAiC,GAgH1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,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,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO;AACzC,EAAAG,EAAmB,UAAUH;AAE7B,QAAM,CAACK,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBJ,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAqE/C,SAnEAK,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMS,IAAWZ,IAASa,EAAWb,CAAM,IAAIG,EAAY;AAE3D,QAAI,CAACS,EAAS;AAEd,UAAME,IAAc,CAACC,MAAiB;AACpC,MAAAP,EAAa,EAAK,GAClBN,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAP,EAAa,EAAI;AACjB,YAAMR,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaX,EAAkB,QAAQ;AAAA,UAC7C,OAAOW,IAAaX,EAAkB,QAAQ;AAAA,UAC9C,KAAKY,IAAYZ,EAAkB,QAAQ;AAAA,UAC3C,QAAQY,IAAYZ,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMmB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAjB,EAAkB,UAAU,EAAE,GAAGW,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAH,EAAQ,iBAAiB,UAAUI,CAAQ,GAC3CJ,EAAQ,iBAAiB,aAAaE,CAAW,GAE1C,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUI,CAAQ,GAC9CJ,EAAQ,oBAAoB,aAAaE,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC,GAE1BH,IAAeO,IACZ;AAAA,IACL,KAAKJ;AAAA,IACL,WAAAI;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { useState as a } from "react";
|
|
2
|
-
import { useIsomorphicLayoutEffect as d } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
|
|
1
|
+
import { useState as d, useEffect as a } from "react";
|
|
3
2
|
import { useRefState as v } from "../useRefState/useRefState.mjs";
|
|
4
3
|
import { isTarget as g } from "../../utils/helpers/isTarget.mjs";
|
|
5
4
|
import { getElement as i } from "../../utils/helpers/getElement.mjs";
|
|
6
|
-
const
|
|
7
|
-
const t = g(o[0]) ? o[0] : void 0, b = (t ? o[1] : o[0]) ?? "ltr", r = v(), s = () => (t ? i(t) : r.current)?.getAttribute("dir") ?? b, [u, c] =
|
|
5
|
+
const E = (...o) => {
|
|
6
|
+
const t = g(o[0]) ? o[0] : void 0, b = (t ? o[1] : o[0]) ?? "ltr", r = v(), s = () => (t ? i(t) : r.current)?.getAttribute("dir") ?? b, [u, c] = d(s()), f = () => {
|
|
8
7
|
const e = t ? i(t) : r.current;
|
|
9
8
|
e && e?.removeAttribute("dir");
|
|
10
|
-
},
|
|
9
|
+
}, m = (e) => {
|
|
11
10
|
const n = t ? i(t) : r.current;
|
|
12
11
|
n && (c(e), n.setAttribute("dir", e));
|
|
13
12
|
};
|
|
14
|
-
return
|
|
13
|
+
return a(() => {
|
|
15
14
|
if (!t && !r.state) return;
|
|
16
15
|
const e = t ? i(t) : r.current;
|
|
17
16
|
if (!e) return;
|
|
@@ -21,14 +20,14 @@ const R = (...o) => {
|
|
|
21
20
|
return l.observe(e, { attributes: !0 }), () => {
|
|
22
21
|
l.disconnect();
|
|
23
22
|
};
|
|
24
|
-
}, [r.state, t]), t ? { value: u, set:
|
|
23
|
+
}, [r.state, t]), t ? { value: u, set: m, remove: f } : {
|
|
25
24
|
ref: r,
|
|
26
25
|
value: u,
|
|
27
|
-
set:
|
|
28
|
-
remove:
|
|
26
|
+
set: m,
|
|
27
|
+
remove: f
|
|
29
28
|
};
|
|
30
29
|
};
|
|
31
30
|
export {
|
|
32
|
-
|
|
31
|
+
E as useTextDirection
|
|
33
32
|
};
|
|
34
33
|
//# sourceMappingURL=useTextDirection.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport {
|
|
1
|
+
{"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, 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 Browser\n *\n * @overload\n * @param {HookTarget} target 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<Element>();\n\n const getDirection = () => {\n const element = (target ? 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 const element = (target ? getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n element?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n setValue(value);\n element.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(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","getDirection","getElement","value","setValue","useState","remove","element","set","useEffect","direction","observer"],"mappings":";;;;AAqDO,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,GAEdC,IAAe,OACFL,IAASM,EAAWN,CAAM,IAAIG,EAAY,UAC1C,aAAa,KAAK,KAA+BD,GAG9D,CAACK,GAAOC,CAAQ,IAAIC,EAAgCJ,GAAc,GAElEK,IAAS,MAAM;AACnB,UAAMC,IAAWX,IAASM,EAAWN,CAAM,IAAIG,EAAY;AAC3D,IAAKQ,KAELA,GAAS,gBAAgB,KAAK;AAAA,EAAA,GAG1BC,IAAM,CAACL,MAAiC;AAC5C,UAAMI,IAAWX,IAASM,EAAWN,CAAM,IAAIG,EAAY;AAC3D,IAAKQ,MAELH,EAASD,CAAK,GACdI,EAAQ,aAAa,OAAOJ,CAAK;AAAA,EAAA;AAsBnC,SAnBAM,EAAU,MAAM;AACd,QAAI,CAACb,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMQ,IAAWX,IAASM,EAAWN,CAAM,IAAIG,EAAY;AAC3D,QAAI,CAACQ,EAAS;AAEd,UAAMG,IAAYT,EAAA;AAClB,IAAAM,EAAQ,aAAa,OAAOG,CAAS,GACrCN,EAASM,CAAS;AAElB,UAAMC,IAAW,IAAI,iBAAiBV,CAAY;AAElD,WAAAU,EAAS,QAAQJ,GAAS,EAAE,YAAY,IAAM,GAEvC,MAAM;AACX,MAAAI,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACZ,EAAY,OAAOH,CAAM,CAAC,GAE1BA,IAAe,EAAE,OAAAO,GAAO,KAAAK,GAAK,QAAAF,EAAA,IAC1B;AAAA,IACL,KAAKP;AAAA,IACL,OAAAI;AAAA,IACA,KAAAK;AAAA,IACA,QAAAF;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
const h = (o,
|
|
3
|
-
const
|
|
4
|
-
return
|
|
1
|
+
import { useRef as t, useMemo as m } from "react";
|
|
2
|
+
const h = (o, u) => {
|
|
3
|
+
const c = t(o), r = t(null), e = t(!1), l = t(u), n = t(null);
|
|
4
|
+
return c.current = o, l.current = u, m(() => {
|
|
5
5
|
const s = () => {
|
|
6
|
-
e.current = !1, n.current && (
|
|
7
|
-
},
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
n.current =
|
|
6
|
+
e.current = !1, n.current && (c.current.apply(void 0, n.current), n.current = null, setTimeout(s, l.current));
|
|
7
|
+
}, f = () => {
|
|
8
|
+
r.current && (clearTimeout(r.current), r.current = null, e.current = !1);
|
|
9
|
+
}, i = function(...a) {
|
|
10
|
+
n.current = a, !e.current && (c.current.apply(this, a), e.current = !0, r.current = setTimeout(s, l.current));
|
|
11
11
|
};
|
|
12
|
-
return
|
|
13
|
-
}, [
|
|
12
|
+
return i.cancel = f, f(), i;
|
|
13
|
+
}, [u]);
|
|
14
14
|
};
|
|
15
15
|
export {
|
|
16
16
|
h as useThrottleCallback
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThrottleCallback.mjs","sources":["../../../../src/hooks/useThrottleCallback/useThrottleCallback.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\n\nexport type ThrottledCallback<Params extends unknown[]> = ((...args: Params) => void) & {\n cancel: () => void;\n};\n\n/**\n * @name useThrottleCallback\n * @description - Hook that creates a throttled callback\n * @category Utilities\n *\n * @template Params The type of the params\n * @template Return The type of the return\n * @param {(...args: Params) => Return} callback The callback function\n * @param {number} delay The delay in milliseconds\n * @returns {(...args: Params) => Return} The callback with throttle\n *\n * @example\n * const throttled = useThrottleCallback(() => console.log('callback'), 500);\n */\nexport const useThrottleCallback = <Params extends unknown[], Return>(\n callback: (...args: Params) => Return,\n delay: number\n): ThrottledCallback<Params> => {\n const internalCallbackRef = useRef(callback);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isCalledRef = useRef(false);\n const delayRef = useRef(delay);\n const lastArgsRef = useRef<Params | null>(null);\n\n internalCallbackRef.current = callback;\n delayRef.current = delay;\n\n const throttled = useMemo(() => {\n const timer = () => {\n isCalledRef.current = false;\n\n if (!lastArgsRef.current) return;\n internalCallbackRef.current.apply(this, lastArgsRef.current);\n lastArgsRef.current = null;\n setTimeout(timer, delayRef.current);\n };\n\n const cancel = () => {\n if (!timeoutRef.current) return;\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n isCalledRef.current = false;\n };\n\n const throttledCallback = function (this: any, ...args: Params) {\n lastArgsRef.current = args;\n if (isCalledRef.current) return;\n\n internalCallbackRef.current.apply(this, args);\n isCalledRef.current = true;\n timeoutRef.current = setTimeout(timer, delayRef.current);\n };\n\n throttledCallback.cancel = cancel;\n\n
|
|
1
|
+
{"version":3,"file":"useThrottleCallback.mjs","sources":["../../../../src/hooks/useThrottleCallback/useThrottleCallback.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\n\nexport type ThrottledCallback<Params extends unknown[]> = ((...args: Params) => void) & {\n cancel: () => void;\n};\n\n/**\n * @name useThrottleCallback\n * @description - Hook that creates a throttled callback\n * @category Utilities\n *\n * @template Params The type of the params\n * @template Return The type of the return\n * @param {(...args: Params) => Return} callback The callback function\n * @param {number} delay The delay in milliseconds\n * @returns {(...args: Params) => Return} The callback with throttle\n *\n * @example\n * const throttled = useThrottleCallback(() => console.log('callback'), 500);\n */\nexport const useThrottleCallback = <Params extends unknown[], Return>(\n callback: (...args: Params) => Return,\n delay: number\n): ThrottledCallback<Params> => {\n const internalCallbackRef = useRef(callback);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isCalledRef = useRef(false);\n const delayRef = useRef(delay);\n const lastArgsRef = useRef<Params | null>(null);\n\n internalCallbackRef.current = callback;\n delayRef.current = delay;\n\n const throttled = useMemo(() => {\n const timer = () => {\n isCalledRef.current = false;\n\n if (!lastArgsRef.current) return;\n internalCallbackRef.current.apply(this, lastArgsRef.current);\n lastArgsRef.current = null;\n setTimeout(timer, delayRef.current);\n };\n\n const cancel = () => {\n if (!timeoutRef.current) return;\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n isCalledRef.current = false;\n };\n\n const throttledCallback = function (this: any, ...args: Params) {\n lastArgsRef.current = args;\n if (isCalledRef.current) return;\n\n internalCallbackRef.current.apply(this, args);\n isCalledRef.current = true;\n timeoutRef.current = setTimeout(timer, delayRef.current);\n };\n\n throttledCallback.cancel = cancel;\n\n cancel();\n return throttledCallback;\n }, [delay]);\n\n return throttled;\n};\n"],"names":["useThrottleCallback","callback","delay","internalCallbackRef","useRef","timeoutRef","isCalledRef","delayRef","lastArgsRef","useMemo","timer","cancel","throttledCallback","args"],"mappings":";AAoBO,MAAMA,IAAsB,CACjCC,GACAC,MAC8B;AAC9B,QAAMC,IAAsBC,EAAOH,CAAQ,GACrCI,IAAaD,EAA6C,IAAI,GAC9DE,IAAcF,EAAO,EAAK,GAC1BG,IAAWH,EAAOF,CAAK,GACvBM,IAAcJ,EAAsB,IAAI;AAE9C,SAAAD,EAAoB,UAAUF,GAC9BM,EAAS,UAAUL,GAEDO,EAAQ,MAAM;AAC9B,UAAMC,IAAQ,MAAM;AAGlB,MAFAJ,EAAY,UAAU,IAEjBE,EAAY,YACjBL,EAAoB,QAAQ,MAAM,QAAMK,EAAY,OAAO,GAC3DA,EAAY,UAAU,MACtB,WAAWE,GAAOH,EAAS,OAAO;AAAA,IAAA,GAG9BI,IAAS,MAAM;AACnB,MAAKN,EAAW,YAChB,aAAaA,EAAW,OAAO,GAC/BA,EAAW,UAAU,MACrBC,EAAY,UAAU;AAAA,IAAA,GAGlBM,IAAoB,YAAwBC,GAAc;AAE9D,MADAL,EAAY,UAAUK,GAClB,CAAAP,EAAY,YAEhBH,EAAoB,QAAQ,MAAM,MAAMU,CAAI,GAC5CP,EAAY,UAAU,IACtBD,EAAW,UAAU,WAAWK,GAAOH,EAAS,OAAO;AAAA,IAAA;AAGzD,WAAAK,EAAkB,SAASD,GAE3BA,EAAA,GACOC;AAAA,EAAA,GACN,CAACV,CAAK,CAAC;AAGZ;"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useInterval as o } from "../useInterval/useInterval.mjs";
|
|
1
|
+
import { useState as o, useEffect as s } from "react";
|
|
3
2
|
import { getDate as e } from "../../utils/helpers/getDate.mjs";
|
|
4
|
-
const
|
|
5
|
-
const [t, r] =
|
|
6
|
-
return
|
|
3
|
+
const a = () => {
|
|
4
|
+
const [t, r] = o(e());
|
|
5
|
+
return s(() => {
|
|
6
|
+
const m = setInterval(() => r(e()), 1e3);
|
|
7
|
+
return () => {
|
|
8
|
+
clearInterval(m);
|
|
9
|
+
};
|
|
10
|
+
}, []), t;
|
|
7
11
|
};
|
|
8
12
|
export {
|
|
9
|
-
|
|
13
|
+
a as useTime
|
|
10
14
|
};
|
|
11
15
|
//# sourceMappingURL=useTime.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTime.mjs","sources":["../../../../src/hooks/useTime/useTime.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { getDate } from '@/utils/helpers';\n\
|
|
1
|
+
{"version":3,"file":"useTime.mjs","sources":["../../../../src/hooks/useTime/useTime.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDate } from '@/utils/helpers';\n\nexport interface UseTimeReturn {\n /** The current day of the month (1-31) */\n day: number;\n /** The current hour in 24-hour format (0-23) */\n hours: number;\n /** The current hour in 12-hour format with meridiem type (AM/PM) */\n meridiemHours: { value: number; type: string };\n /** The current minute (0-59) */\n minutes: number;\n /** The current month (1-12) */\n month: number;\n /** The current second (0-59) */\n seconds: number;\n /** The current Unix timestamp in milliseconds */\n timestamp: number;\n /** The current year */\n year: number;\n}\n\n/**\n * @name useTime\n * @description - Hook that gives you current time in different values\n * @category Time\n *\n * @returns {UseTimeReturn} An object containing the current time\n *\n * @example\n * const { seconds, minutes, hours, meridiemHours, day, month, year, timestamp } = useTime();\n */\nexport const useTime = (): UseTimeReturn => {\n const [time, setTime] = useState(getDate());\n\n useEffect(() => {\n const timerId = setInterval(() => setTime(getDate()), 1000);\n\n return () => {\n clearInterval(timerId);\n };\n }, []);\n\n return time;\n};\n"],"names":["useTime","time","setTime","useState","getDate","useEffect","timerId"],"mappings":";;AAiCO,MAAMA,IAAU,MAAqB;AAC1C,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAASC,GAAS;AAE1C,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAU,YAAY,MAAMJ,EAAQE,EAAA,CAAS,GAAG,GAAI;AAE1D,WAAO,MAAM;AACX,oBAAcE,CAAO;AAAA,IAAA;AAAA,EACvB,GACC,EAAE,GAEEL;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import { target } 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
|
|
1
|
+
{"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import { target } 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 Events\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(target(window), event, listener, options);\n"],"names":["useWindowEvent","event","listener","options","useEventListener","target"],"mappings":";;AAoBO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,MACGC,EAAiBC,EAAO,MAAM,GAAGJ,GAAOC,GAAUC,CAAO;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n x: number;\n y: number;\n}\n\nexport const scrollTo = ({\n x,\n y,\n behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n const scrollOptions: ScrollToOptions = { behavior };\n if (typeof x === 'number') scrollOptions.left = x;\n if (typeof y === 'number') scrollOptions.top = y;\n window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category
|
|
1
|
+
{"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n x: number;\n y: number;\n}\n\nexport const scrollTo = ({\n x,\n y,\n behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n const scrollOptions: ScrollToOptions = { behavior };\n if (typeof x === 'number') scrollOptions.left = x;\n if (typeof y === 'number') scrollOptions.top = y;\n window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category Sensors\n *\n * @returns {UseWindowScrollReturn} An object containing the current window scroll position\n *\n * @example\n * const { value, scrollTo } = useWindowScroll();\n */\nexport const useWindowScroll = () => {\n const [value, setValue] = useState<ScrollPosition>({\n x: typeof window !== 'undefined' ? window.scrollX : Number.POSITIVE_INFINITY,\n y: typeof window !== 'undefined' ? window.scrollY : Number.POSITIVE_INFINITY\n });\n\n useEffect(() => {\n const onChange = () => setValue({ x: window.scrollX, y: window.scrollY });\n window.addEventListener('scroll', onChange);\n window.addEventListener('resize', onChange);\n return () => {\n window.removeEventListener('scroll', onChange);\n window.removeEventListener('resize', onChange);\n };\n }, []);\n\n return { value, scrollTo };\n};\n"],"names":["scrollTo","x","y","behavior","scrollOptions","useWindowScroll","value","setValue","useState","useEffect","onChange"],"mappings":";AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,GAAAC;AAAA,EACA,GAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA+C;AAC7C,QAAMC,IAAiC,EAAE,UAAAD,EAAA;AACzC,EAAI,OAAOF,KAAM,aAAUG,EAAc,OAAOH,IAC5C,OAAOC,KAAM,aAAUE,EAAc,MAAMF,IAC/C,OAAO,SAASE,CAAa;AAC/B,GAYaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,IAC3D,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,EAAA,CAC5D;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAW,MAAMH,EAAS,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,SAAS;AACxE,kBAAO,iBAAiB,UAAUG,CAAQ,GAC1C,OAAO,iBAAiB,UAAUA,CAAQ,GACnC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,IAAA;AAAA,EAC/C,GACC,EAAE,GAEE,EAAE,OAAAJ,GAAO,UAAAN,EAAA;AAClB;"}
|