@mantine/hooks 5.7.0 → 5.7.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/cjs/use-local-storage/create-storage.js +2 -2
- package/cjs/use-local-storage/create-storage.js.map +1 -1
- package/cjs/use-scroll-into-view/use-scroll-into-view.js +1 -1
- package/cjs/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/cjs/use-window-event/use-window-event.js +1 -1
- package/cjs/use-window-event/use-window-event.js.map +1 -1
- package/esm/use-local-storage/create-storage.js +2 -2
- package/esm/use-local-storage/create-storage.js.map +1 -1
- package/esm/use-scroll-into-view/use-scroll-into-view.js +1 -1
- package/esm/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/esm/use-window-event/use-window-event.js +1 -1
- package/esm/use-window-event/use-window-event.js.map +1 -1
- package/package.json +1 -1
|
@@ -30,10 +30,10 @@ function createStorage(type, hookName) {
|
|
|
30
30
|
}) {
|
|
31
31
|
const readStorageValue = React.useCallback((skipStorage) => {
|
|
32
32
|
if (typeof window === "undefined" || !(type in window) || window[type] === null || skipStorage) {
|
|
33
|
-
return defaultValue
|
|
33
|
+
return defaultValue;
|
|
34
34
|
}
|
|
35
35
|
const storageValue = window[type].getItem(key);
|
|
36
|
-
return storageValue !== null ? deserialize(storageValue) : defaultValue
|
|
36
|
+
return storageValue !== null ? deserialize(storageValue) : defaultValue;
|
|
37
37
|
}, [key, defaultValue]);
|
|
38
38
|
const [value, setValue] = React.useState(readStorageValue(getInitialValueInEffect));
|
|
39
39
|
const setStorageValue = React.useCallback((val) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-storage.js","sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface IStorageProperties<T> {\n /** Storage key */\n key: string;\n\n /** Default value that will be set if value is not found in storage */\n defaultValue?: T;\n\n /** If set to true, value will be update is useEffect after mount */\n getInitialValueInEffect?: boolean;\n\n /** Function to serialize value into string to be save in storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n }\n}\n\nfunction deserializeJSON(value: string) {\n try {\n return JSON.parse(value);\n } catch {\n return value;\n }\n}\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n\n return function useStorage({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = (value: T) => serializeJSON(value, hookName),\n }: IStorageProperties<T>) {\n const readStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (\n typeof window === 'undefined' ||\n !(type in window) ||\n window[type] === null ||\n skipStorage\n ) {\n return
|
|
1
|
+
{"version":3,"file":"create-storage.js","sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface IStorageProperties<T> {\n /** Storage key */\n key: string;\n\n /** Default value that will be set if value is not found in storage */\n defaultValue?: T;\n\n /** If set to true, value will be update is useEffect after mount */\n getInitialValueInEffect?: boolean;\n\n /** Function to serialize value into string to be save in storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n }\n}\n\nfunction deserializeJSON(value: string) {\n try {\n return JSON.parse(value);\n } catch {\n return value;\n }\n}\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n\n return function useStorage({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = (value: T) => serializeJSON(value, hookName),\n }: IStorageProperties<T>) {\n const readStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (\n typeof window === 'undefined' ||\n !(type in window) ||\n window[type] === null ||\n skipStorage\n ) {\n return defaultValue as T;\n }\n\n const storageValue = window[type].getItem(key);\n\n return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n },\n [key, defaultValue]\n );\n\n const [value, setValue] = useState<T>(readStorageValue(getInitialValueInEffect));\n\n const setStorageValue = useCallback(\n (val: T | ((prevState: T) => T)) => {\n if (val instanceof Function) {\n setValue((current) => {\n const result = val(current);\n window[type].setItem(key, serialize(result));\n window.dispatchEvent(\n new CustomEvent(eventName, { detail: { key, value: val(current) } })\n );\n return result;\n });\n } else {\n window[type].setItem(key, serialize(val));\n window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: val } }));\n setValue(val);\n }\n },\n [key]\n );\n\n const removeStorageValue = useCallback(() => {\n window[type].removeItem(key);\n }, []);\n\n useWindowEvent('storage', (event) => {\n if (event.storageArea === window[type] && event.key === key) {\n setValue(deserialize(event.newValue ?? undefined));\n }\n });\n\n useWindowEvent(eventName, (event) => {\n if (event.detail.key === key) {\n setValue(event.detail.value);\n }\n });\n\n useEffect(() => {\n if (defaultValue !== undefined && value === undefined) {\n setStorageValue(defaultValue);\n }\n }, [defaultValue, value, setStorageValue]);\n\n useEffect(() => {\n if (getInitialValueInEffect) {\n setValue(readStorageValue());\n }\n }, []);\n\n return [\n value === undefined ? defaultValue : value,\n setStorageValue,\n removeStorageValue,\n ] as const;\n };\n}\n"],"names":["useCallback","useState","useWindowEvent","useEffect"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\n /** callback fired after scroll */\n onScrollFinish?: () => void;\n\n /** duration of scroll in milliseconds */\n duration?: number;\n\n /** axis of scroll */\n axis?: 'x' | 'y';\n\n /** custom mathematical easing function */\n easing?: (t: number) => number;\n\n /** additional distance between nearest edge and element */\n offset?: number;\n\n /** indicator if animation may be interrupted by user scrolling */\n cancelable?: boolean;\n\n /** prevents content jumping in scrolling lists with multiple targets */\n isList?: boolean;\n}\n\nexport function useScrollIntoView<\n Target extends HTMLElement,\n Parent extends HTMLElement | null = null\n>({\n duration = 1250,\n axis = 'y',\n onScrollFinish,\n easing = easeInOutQuad,\n offset = 0,\n cancelable = true,\n isList = false,\n}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(null);\n\n const reducedMotion = useReducedMotion();\n\n const cancel = (): void => {\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n\n const scrollIntoView = useCallback(\n ({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\n shouldStop.current = false;\n\n if (frameID.current) {\n cancel();\n }\n\n const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n const change =\n getRelativePosition({\n parent: scrollableRef.current,\n target: targetRef.current,\n axis,\n alignment,\n offset,\n isList,\n }) - (scrollableRef.current ? 0 : start);\n\n function animateScroll() {\n if (startTime.current === 0) {\n startTime.current = performance.now();\n }\n\n const now = performance.now();\n const elapsed = now - startTime.current;\n\n // easing timing progress\n const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n const distance = start + change * easing(t);\n\n setScrollParam({\n parent: scrollableRef.current,\n axis,\n distance,\n });\n\n if (!shouldStop.current && t < 1) {\n frameID.current = requestAnimationFrame(animateScroll);\n } else {\n typeof onScrollFinish === 'function' && onScrollFinish();\n startTime.current = 0;\n frameID.current = 0;\n cancel();\n }\n }\n animateScroll();\n },\n [
|
|
1
|
+
{"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\n /** callback fired after scroll */\n onScrollFinish?: () => void;\n\n /** duration of scroll in milliseconds */\n duration?: number;\n\n /** axis of scroll */\n axis?: 'x' | 'y';\n\n /** custom mathematical easing function */\n easing?: (t: number) => number;\n\n /** additional distance between nearest edge and element */\n offset?: number;\n\n /** indicator if animation may be interrupted by user scrolling */\n cancelable?: boolean;\n\n /** prevents content jumping in scrolling lists with multiple targets */\n isList?: boolean;\n}\n\nexport function useScrollIntoView<\n Target extends HTMLElement,\n Parent extends HTMLElement | null = null\n>({\n duration = 1250,\n axis = 'y',\n onScrollFinish,\n easing = easeInOutQuad,\n offset = 0,\n cancelable = true,\n isList = false,\n}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(null);\n\n const reducedMotion = useReducedMotion();\n\n const cancel = (): void => {\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n\n const scrollIntoView = useCallback(\n ({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\n shouldStop.current = false;\n\n if (frameID.current) {\n cancel();\n }\n\n const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n const change =\n getRelativePosition({\n parent: scrollableRef.current,\n target: targetRef.current,\n axis,\n alignment,\n offset,\n isList,\n }) - (scrollableRef.current ? 0 : start);\n\n function animateScroll() {\n if (startTime.current === 0) {\n startTime.current = performance.now();\n }\n\n const now = performance.now();\n const elapsed = now - startTime.current;\n\n // easing timing progress\n const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n const distance = start + change * easing(t);\n\n setScrollParam({\n parent: scrollableRef.current,\n axis,\n distance,\n });\n\n if (!shouldStop.current && t < 1) {\n frameID.current = requestAnimationFrame(animateScroll);\n } else {\n typeof onScrollFinish === 'function' && onScrollFinish();\n startTime.current = 0;\n frameID.current = 0;\n cancel();\n }\n }\n animateScroll();\n },\n [axis, duration, easing, isList, offset, onScrollFinish, reducedMotion]\n );\n\n const handleStop = () => {\n if (cancelable) {\n shouldStop.current = true;\n }\n };\n\n /**\n * detection of one of these events stops scroll animation\n * wheel - mouse wheel / touch pad\n * touchmove - any touchable device\n */\n\n useWindowEvent('wheel', handleStop, {\n passive: true,\n });\n\n useWindowEvent('touchmove', handleStop, {\n passive: true,\n });\n\n // cleanup requestAnimationFrame\n useEffect(() => cancel, []);\n\n return {\n scrollableRef,\n targetRef,\n scrollIntoView,\n cancel,\n };\n}\n"],"names":["easeInOutQuad","useRef","useReducedMotion","useCallback","getScrollStart","getRelativePosition","setScrollParam","useWindowEvent","useEffect"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ function useWindowEvent(type, listener, options) {
|
|
|
8
8
|
React.useEffect(() => {
|
|
9
9
|
window.addEventListener(type, listener, options);
|
|
10
10
|
return () => window.removeEventListener(type, listener, options);
|
|
11
|
-
}, []);
|
|
11
|
+
}, [type, listener]);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
exports.useWindowEvent = useWindowEvent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-window-event.js","sources":["../../src/use-window-event/use-window-event.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function useWindowEvent<K extends string>(\n type: K,\n listener: K extends keyof WindowEventMap\n ? (this: Window, ev: WindowEventMap[K]) => void\n : (this: Window, ev: CustomEvent) => void,\n options?: boolean | AddEventListenerOptions\n) {\n useEffect(() => {\n window.addEventListener(type, listener, options);\n return () => window.removeEventListener(type, listener, options);\n }, []);\n}\n"],"names":["useEffect"],"mappings":";;;;;;AACO,SAAS,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE;AACxD,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrE,GAAG,EAAE,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-window-event.js","sources":["../../src/use-window-event/use-window-event.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function useWindowEvent<K extends string>(\n type: K,\n listener: K extends keyof WindowEventMap\n ? (this: Window, ev: WindowEventMap[K]) => void\n : (this: Window, ev: CustomEvent) => void,\n options?: boolean | AddEventListenerOptions\n) {\n useEffect(() => {\n window.addEventListener(type, listener, options);\n return () => window.removeEventListener(type, listener, options);\n }, [type, listener]);\n}\n"],"names":["useEffect"],"mappings":";;;;;;AACO,SAAS,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE;AACxD,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrE,GAAG,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvB;;;;"}
|
|
@@ -26,10 +26,10 @@ function createStorage(type, hookName) {
|
|
|
26
26
|
}) {
|
|
27
27
|
const readStorageValue = useCallback((skipStorage) => {
|
|
28
28
|
if (typeof window === "undefined" || !(type in window) || window[type] === null || skipStorage) {
|
|
29
|
-
return defaultValue
|
|
29
|
+
return defaultValue;
|
|
30
30
|
}
|
|
31
31
|
const storageValue = window[type].getItem(key);
|
|
32
|
-
return storageValue !== null ? deserialize(storageValue) : defaultValue
|
|
32
|
+
return storageValue !== null ? deserialize(storageValue) : defaultValue;
|
|
33
33
|
}, [key, defaultValue]);
|
|
34
34
|
const [value, setValue] = useState(readStorageValue(getInitialValueInEffect));
|
|
35
35
|
const setStorageValue = useCallback((val) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-storage.js","sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface IStorageProperties<T> {\n /** Storage key */\n key: string;\n\n /** Default value that will be set if value is not found in storage */\n defaultValue?: T;\n\n /** If set to true, value will be update is useEffect after mount */\n getInitialValueInEffect?: boolean;\n\n /** Function to serialize value into string to be save in storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n }\n}\n\nfunction deserializeJSON(value: string) {\n try {\n return JSON.parse(value);\n } catch {\n return value;\n }\n}\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n\n return function useStorage({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = (value: T) => serializeJSON(value, hookName),\n }: IStorageProperties<T>) {\n const readStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (\n typeof window === 'undefined' ||\n !(type in window) ||\n window[type] === null ||\n skipStorage\n ) {\n return
|
|
1
|
+
{"version":3,"file":"create-storage.js","sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface IStorageProperties<T> {\n /** Storage key */\n key: string;\n\n /** Default value that will be set if value is not found in storage */\n defaultValue?: T;\n\n /** If set to true, value will be update is useEffect after mount */\n getInitialValueInEffect?: boolean;\n\n /** Function to serialize value into string to be save in storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n }\n}\n\nfunction deserializeJSON(value: string) {\n try {\n return JSON.parse(value);\n } catch {\n return value;\n }\n}\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n\n return function useStorage({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = (value: T) => serializeJSON(value, hookName),\n }: IStorageProperties<T>) {\n const readStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (\n typeof window === 'undefined' ||\n !(type in window) ||\n window[type] === null ||\n skipStorage\n ) {\n return defaultValue as T;\n }\n\n const storageValue = window[type].getItem(key);\n\n return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n },\n [key, defaultValue]\n );\n\n const [value, setValue] = useState<T>(readStorageValue(getInitialValueInEffect));\n\n const setStorageValue = useCallback(\n (val: T | ((prevState: T) => T)) => {\n if (val instanceof Function) {\n setValue((current) => {\n const result = val(current);\n window[type].setItem(key, serialize(result));\n window.dispatchEvent(\n new CustomEvent(eventName, { detail: { key, value: val(current) } })\n );\n return result;\n });\n } else {\n window[type].setItem(key, serialize(val));\n window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: val } }));\n setValue(val);\n }\n },\n [key]\n );\n\n const removeStorageValue = useCallback(() => {\n window[type].removeItem(key);\n }, []);\n\n useWindowEvent('storage', (event) => {\n if (event.storageArea === window[type] && event.key === key) {\n setValue(deserialize(event.newValue ?? undefined));\n }\n });\n\n useWindowEvent(eventName, (event) => {\n if (event.detail.key === key) {\n setValue(event.detail.value);\n }\n });\n\n useEffect(() => {\n if (defaultValue !== undefined && value === undefined) {\n setStorageValue(defaultValue);\n }\n }, [defaultValue, value, setStorageValue]);\n\n useEffect(() => {\n if (getInitialValueInEffect) {\n setValue(readStorageValue());\n }\n }, []);\n\n return [\n value === undefined ? defaultValue : value,\n setStorageValue,\n removeStorageValue,\n ] as const;\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\n /** callback fired after scroll */\n onScrollFinish?: () => void;\n\n /** duration of scroll in milliseconds */\n duration?: number;\n\n /** axis of scroll */\n axis?: 'x' | 'y';\n\n /** custom mathematical easing function */\n easing?: (t: number) => number;\n\n /** additional distance between nearest edge and element */\n offset?: number;\n\n /** indicator if animation may be interrupted by user scrolling */\n cancelable?: boolean;\n\n /** prevents content jumping in scrolling lists with multiple targets */\n isList?: boolean;\n}\n\nexport function useScrollIntoView<\n Target extends HTMLElement,\n Parent extends HTMLElement | null = null\n>({\n duration = 1250,\n axis = 'y',\n onScrollFinish,\n easing = easeInOutQuad,\n offset = 0,\n cancelable = true,\n isList = false,\n}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(null);\n\n const reducedMotion = useReducedMotion();\n\n const cancel = (): void => {\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n\n const scrollIntoView = useCallback(\n ({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\n shouldStop.current = false;\n\n if (frameID.current) {\n cancel();\n }\n\n const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n const change =\n getRelativePosition({\n parent: scrollableRef.current,\n target: targetRef.current,\n axis,\n alignment,\n offset,\n isList,\n }) - (scrollableRef.current ? 0 : start);\n\n function animateScroll() {\n if (startTime.current === 0) {\n startTime.current = performance.now();\n }\n\n const now = performance.now();\n const elapsed = now - startTime.current;\n\n // easing timing progress\n const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n const distance = start + change * easing(t);\n\n setScrollParam({\n parent: scrollableRef.current,\n axis,\n distance,\n });\n\n if (!shouldStop.current && t < 1) {\n frameID.current = requestAnimationFrame(animateScroll);\n } else {\n typeof onScrollFinish === 'function' && onScrollFinish();\n startTime.current = 0;\n frameID.current = 0;\n cancel();\n }\n }\n animateScroll();\n },\n [
|
|
1
|
+
{"version":3,"file":"use-scroll-into-view.js","sources":["../../src/use-scroll-into-view/use-scroll-into-view.ts"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport { useReducedMotion } from '../use-reduced-motion/use-reduced-motion';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\nimport { easeInOutQuad } from './utils/ease-in-out-quad';\nimport { getRelativePosition } from './utils/get-relative-position';\nimport { getScrollStart } from './utils/get-scroll-start';\nimport { setScrollParam } from './utils/set-scroll-param';\n\ninterface ScrollIntoViewAnimation {\n /** target element alignment relatively to parent based on current axis */\n alignment?: 'start' | 'end' | 'center';\n}\n\ninterface ScrollIntoViewParams {\n /** callback fired after scroll */\n onScrollFinish?: () => void;\n\n /** duration of scroll in milliseconds */\n duration?: number;\n\n /** axis of scroll */\n axis?: 'x' | 'y';\n\n /** custom mathematical easing function */\n easing?: (t: number) => number;\n\n /** additional distance between nearest edge and element */\n offset?: number;\n\n /** indicator if animation may be interrupted by user scrolling */\n cancelable?: boolean;\n\n /** prevents content jumping in scrolling lists with multiple targets */\n isList?: boolean;\n}\n\nexport function useScrollIntoView<\n Target extends HTMLElement,\n Parent extends HTMLElement | null = null\n>({\n duration = 1250,\n axis = 'y',\n onScrollFinish,\n easing = easeInOutQuad,\n offset = 0,\n cancelable = true,\n isList = false,\n}: ScrollIntoViewParams = {}) {\n const frameID = useRef(0);\n const startTime = useRef(0);\n const shouldStop = useRef(false);\n\n const scrollableRef = useRef<Parent>(null);\n const targetRef = useRef<Target>(null);\n\n const reducedMotion = useReducedMotion();\n\n const cancel = (): void => {\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n\n const scrollIntoView = useCallback(\n ({ alignment = 'start' }: ScrollIntoViewAnimation = {}) => {\n shouldStop.current = false;\n\n if (frameID.current) {\n cancel();\n }\n\n const start = getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;\n\n const change =\n getRelativePosition({\n parent: scrollableRef.current,\n target: targetRef.current,\n axis,\n alignment,\n offset,\n isList,\n }) - (scrollableRef.current ? 0 : start);\n\n function animateScroll() {\n if (startTime.current === 0) {\n startTime.current = performance.now();\n }\n\n const now = performance.now();\n const elapsed = now - startTime.current;\n\n // easing timing progress\n const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;\n\n const distance = start + change * easing(t);\n\n setScrollParam({\n parent: scrollableRef.current,\n axis,\n distance,\n });\n\n if (!shouldStop.current && t < 1) {\n frameID.current = requestAnimationFrame(animateScroll);\n } else {\n typeof onScrollFinish === 'function' && onScrollFinish();\n startTime.current = 0;\n frameID.current = 0;\n cancel();\n }\n }\n animateScroll();\n },\n [axis, duration, easing, isList, offset, onScrollFinish, reducedMotion]\n );\n\n const handleStop = () => {\n if (cancelable) {\n shouldStop.current = true;\n }\n };\n\n /**\n * detection of one of these events stops scroll animation\n * wheel - mouse wheel / touch pad\n * touchmove - any touchable device\n */\n\n useWindowEvent('wheel', handleStop, {\n passive: true,\n });\n\n useWindowEvent('touchmove', handleStop, {\n passive: true,\n });\n\n // cleanup requestAnimationFrame\n useEffect(() => cancel, []);\n\n return {\n scrollableRef,\n targetRef,\n scrollIntoView,\n cancel,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-window-event.js","sources":["../../src/use-window-event/use-window-event.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function useWindowEvent<K extends string>(\n type: K,\n listener: K extends keyof WindowEventMap\n ? (this: Window, ev: WindowEventMap[K]) => void\n : (this: Window, ev: CustomEvent) => void,\n options?: boolean | AddEventListenerOptions\n) {\n useEffect(() => {\n window.addEventListener(type, listener, options);\n return () => window.removeEventListener(type, listener, options);\n }, []);\n}\n"],"names":[],"mappings":";;AACO,SAAS,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE;AACxD,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrE,GAAG,EAAE,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-window-event.js","sources":["../../src/use-window-event/use-window-event.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function useWindowEvent<K extends string>(\n type: K,\n listener: K extends keyof WindowEventMap\n ? (this: Window, ev: WindowEventMap[K]) => void\n : (this: Window, ev: CustomEvent) => void,\n options?: boolean | AddEventListenerOptions\n) {\n useEffect(() => {\n window.addEventListener(type, listener, options);\n return () => window.removeEventListener(type, listener, options);\n }, [type, listener]);\n}\n"],"names":[],"mappings":";;AACO,SAAS,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE;AACxD,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACrE,GAAG,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvB;;;;"}
|