@mantine/hooks 7.0.0-alpha.2 → 7.0.0-alpha.21
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/index.js +6 -2
- package/cjs/index.js.map +1 -1
- package/cjs/use-callback-ref/use-callback-ref.js +19 -0
- package/cjs/use-callback-ref/use-callback-ref.js.map +1 -0
- package/cjs/use-debounced-callback/use-debounced-callback.js +19 -0
- package/cjs/use-debounced-callback/use-debounced-callback.js.map +1 -0
- package/cjs/use-did-update/use-did-update.js +6 -3
- package/cjs/use-did-update/use-did-update.js.map +1 -1
- package/cjs/use-eye-dropper/use-eye-dropper.js +10 -7
- package/cjs/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/cjs/use-favicon/use-favicon.js +5 -1
- package/cjs/use-favicon/use-favicon.js.map +1 -1
- package/cjs/use-focus-trap/create-aria-hider.js +18 -3
- package/cjs/use-focus-trap/create-aria-hider.js.map +1 -1
- package/cjs/use-focus-trap/tabbable.js +4 -1
- package/cjs/use-focus-trap/tabbable.js.map +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js +33 -27
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/cjs/use-fullscreen/use-fullscreen.js +15 -7
- package/cjs/use-fullscreen/use-fullscreen.js.map +1 -1
- package/cjs/use-hotkeys/parse-hotkey.js.map +1 -1
- package/cjs/use-input-state/use-input-state.js.map +1 -1
- package/cjs/use-intersection/use-intersection.js +17 -14
- package/cjs/use-intersection/use-intersection.js.map +1 -1
- package/cjs/use-list-state/use-list-state.js +3 -1
- package/cjs/use-list-state/use-list-state.js.map +1 -1
- package/cjs/use-local-storage/create-storage.js +29 -21
- package/cjs/use-local-storage/create-storage.js.map +1 -1
- package/cjs/use-media-query/use-media-query.js +3 -1
- package/cjs/use-media-query/use-media-query.js.map +1 -1
- package/cjs/use-merged-ref/use-merged-ref.js +9 -2
- package/cjs/use-merged-ref/use-merged-ref.js.map +1 -1
- package/cjs/use-mouse/use-mouse.js +8 -2
- package/cjs/use-mouse/use-mouse.js.map +1 -1
- package/cjs/use-move/use-move.js +1 -1
- package/cjs/use-move/use-move.js.map +1 -1
- package/cjs/use-network/use-network.js +4 -1
- package/cjs/use-network/use-network.js.map +1 -1
- package/cjs/use-resize-observer/use-resize-observer.js +14 -11
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/cjs/use-scroll-into-view/use-scroll-into-view.js +38 -35
- package/cjs/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/cjs/use-set-state/use-set-state.js +4 -1
- package/cjs/use-set-state/use-set-state.js.map +1 -1
- package/cjs/use-uncontrolled/use-uncontrolled.js +3 -1
- package/cjs/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/cjs/use-validated-state/use-validated-state.js +6 -2
- package/cjs/use-validated-state/use-validated-state.js.map +1 -1
- package/cjs/utils/clamp/clamp.js +9 -0
- package/cjs/utils/clamp/clamp.js.map +1 -1
- package/esm/index.js +4 -2
- package/esm/index.js.map +1 -1
- package/esm/use-callback-ref/use-callback-ref.js +15 -0
- package/esm/use-callback-ref/use-callback-ref.js.map +1 -0
- package/esm/use-debounced-callback/use-debounced-callback.js +15 -0
- package/esm/use-debounced-callback/use-debounced-callback.js.map +1 -0
- package/esm/use-did-update/use-did-update.js +6 -3
- package/esm/use-did-update/use-did-update.js.map +1 -1
- package/esm/use-eye-dropper/use-eye-dropper.js +10 -7
- package/esm/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/esm/use-favicon/use-favicon.js +5 -1
- package/esm/use-favicon/use-favicon.js.map +1 -1
- package/esm/use-focus-trap/create-aria-hider.js +18 -3
- package/esm/use-focus-trap/create-aria-hider.js.map +1 -1
- package/esm/use-focus-trap/tabbable.js +4 -1
- package/esm/use-focus-trap/tabbable.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +33 -27
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-fullscreen/use-fullscreen.js +15 -7
- package/esm/use-fullscreen/use-fullscreen.js.map +1 -1
- package/esm/use-hotkeys/parse-hotkey.js.map +1 -1
- package/esm/use-input-state/use-input-state.js.map +1 -1
- package/esm/use-intersection/use-intersection.js +17 -14
- package/esm/use-intersection/use-intersection.js.map +1 -1
- package/esm/use-list-state/use-list-state.js +3 -1
- package/esm/use-list-state/use-list-state.js.map +1 -1
- package/esm/use-local-storage/create-storage.js +29 -21
- package/esm/use-local-storage/create-storage.js.map +1 -1
- package/esm/use-media-query/use-media-query.js +3 -1
- package/esm/use-media-query/use-media-query.js.map +1 -1
- package/esm/use-merged-ref/use-merged-ref.js +8 -2
- package/esm/use-merged-ref/use-merged-ref.js.map +1 -1
- package/esm/use-mouse/use-mouse.js +8 -2
- package/esm/use-mouse/use-mouse.js.map +1 -1
- package/esm/use-move/use-move.js +1 -1
- package/esm/use-move/use-move.js.map +1 -1
- package/esm/use-network/use-network.js +4 -1
- package/esm/use-network/use-network.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +14 -11
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/use-scroll-into-view/use-scroll-into-view.js +38 -35
- package/esm/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/esm/use-set-state/use-set-state.js +4 -1
- package/esm/use-set-state/use-set-state.js.map +1 -1
- package/esm/use-uncontrolled/use-uncontrolled.js +3 -1
- package/esm/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/esm/use-validated-state/use-validated-state.js +6 -2
- package/esm/use-validated-state/use-validated-state.js.map +1 -1
- package/esm/utils/clamp/clamp.js +9 -0
- package/esm/utils/clamp/clamp.js.map +1 -1
- package/lib/index.d.ts +3 -1
- package/lib/use-callback-ref/use-callback-ref.d.ts +1 -0
- package/lib/use-debounced-callback/use-debounced-callback.d.ts +1 -0
- package/lib/use-hover/use-hover.d.ts +1 -0
- package/lib/use-merged-ref/use-merged-ref.d.ts +6 -2
- package/lib/use-mouse/use-mouse.d.ts +1 -0
- package/lib/use-move/use-move.d.ts +2 -1
- package/lib/use-scroll-into-view/use-scroll-into-view.d.ts +1 -0
- package/lib/utils/clamp/clamp.d.ts +1 -1
- package/lib/utils/index.d.ts +0 -1
- package/package.json +10 -5
- package/cjs/utils/assign-ref/assign-ref.js +0 -14
- package/cjs/utils/assign-ref/assign-ref.js.map +0 -1
- package/esm/utils/assign-ref/assign-ref.js +0 -10
- package/esm/utils/assign-ref/assign-ref.js.map +0 -1
- package/lib/index.d.ts.map +0 -1
- package/lib/use-click-outside/use-click-outside.d.ts.map +0 -1
- package/lib/use-clipboard/use-clipboard.d.ts.map +0 -1
- package/lib/use-color-scheme/use-color-scheme.d.ts.map +0 -1
- package/lib/use-counter/use-counter.d.ts.map +0 -1
- package/lib/use-debounced-state/use-debounced-state.d.ts.map +0 -1
- package/lib/use-debounced-value/use-debounced-value.d.ts.map +0 -1
- package/lib/use-did-update/use-did-update.d.ts.map +0 -1
- package/lib/use-disclosure/use-disclosure.d.ts.map +0 -1
- package/lib/use-document-title/use-document-title.d.ts.map +0 -1
- package/lib/use-document-visibility/use-document-visibility.d.ts.map +0 -1
- package/lib/use-event-listener/use-event-listener.d.ts.map +0 -1
- package/lib/use-eye-dropper/use-eye-dropper.d.ts.map +0 -1
- package/lib/use-favicon/use-favicon.d.ts.map +0 -1
- package/lib/use-focus-return/use-focus-return.d.ts.map +0 -1
- package/lib/use-focus-trap/create-aria-hider.d.ts.map +0 -1
- package/lib/use-focus-trap/scope-tab.d.ts.map +0 -1
- package/lib/use-focus-trap/tabbable.d.ts.map +0 -1
- package/lib/use-focus-trap/use-focus-trap.d.ts.map +0 -1
- package/lib/use-focus-within/use-focus-within.d.ts.map +0 -1
- package/lib/use-force-update/use-force-update.d.ts.map +0 -1
- package/lib/use-fullscreen/use-fullscreen.d.ts.map +0 -1
- package/lib/use-hash/use-hash.d.ts.map +0 -1
- package/lib/use-headroom/use-headroom.d.ts.map +0 -1
- package/lib/use-hotkeys/parse-hotkey.d.ts.map +0 -1
- package/lib/use-hotkeys/use-hotkeys.d.ts.map +0 -1
- package/lib/use-hover/use-hover.d.ts.map +0 -1
- package/lib/use-id/use-id.d.ts.map +0 -1
- package/lib/use-id/use-react-id.d.ts.map +0 -1
- package/lib/use-idle/use-idle.d.ts.map +0 -1
- package/lib/use-input-state/use-input-state.d.ts.map +0 -1
- package/lib/use-intersection/use-intersection.d.ts.map +0 -1
- package/lib/use-interval/use-interval.d.ts.map +0 -1
- package/lib/use-isomorphic-effect/use-isomorphic-effect.d.ts.map +0 -1
- package/lib/use-list-state/use-list-state.d.ts.map +0 -1
- package/lib/use-local-storage/create-storage.d.ts.map +0 -1
- package/lib/use-local-storage/use-local-storage.d.ts.map +0 -1
- package/lib/use-logger/use-logger.d.ts.map +0 -1
- package/lib/use-media-query/use-media-query.d.ts.map +0 -1
- package/lib/use-merged-ref/use-merged-ref.d.ts.map +0 -1
- package/lib/use-mouse/use-mouse.d.ts.map +0 -1
- package/lib/use-move/use-move.d.ts.map +0 -1
- package/lib/use-network/use-network.d.ts.map +0 -1
- package/lib/use-os/use-os.d.ts.map +0 -1
- package/lib/use-page-leave/use-page-leave.d.ts.map +0 -1
- package/lib/use-pagination/use-pagination.d.ts.map +0 -1
- package/lib/use-previous/use-previous.d.ts.map +0 -1
- package/lib/use-queue/use-queue.d.ts.map +0 -1
- package/lib/use-reduced-motion/use-reduced-motion.d.ts.map +0 -1
- package/lib/use-resize-observer/use-resize-observer.d.ts.map +0 -1
- package/lib/use-scroll-into-view/use-scroll-into-view.d.ts.map +0 -1
- package/lib/use-scroll-into-view/utils/ease-in-out-quad.d.ts.map +0 -1
- package/lib/use-scroll-into-view/utils/get-relative-position.d.ts.map +0 -1
- package/lib/use-scroll-into-view/utils/get-scroll-start.d.ts.map +0 -1
- package/lib/use-scroll-into-view/utils/set-scroll-param.d.ts.map +0 -1
- package/lib/use-session-storage/use-session-storage.d.ts.map +0 -1
- package/lib/use-set-state/use-set-state.d.ts.map +0 -1
- package/lib/use-shallow-effect/use-shallow-effect.d.ts.map +0 -1
- package/lib/use-text-selection/use-text-selection.d.ts.map +0 -1
- package/lib/use-timeout/use-timeout.d.ts.map +0 -1
- package/lib/use-toggle/use-toggle.d.ts.map +0 -1
- package/lib/use-uncontrolled/use-uncontrolled.d.ts.map +0 -1
- package/lib/use-validated-state/use-validated-state.d.ts.map +0 -1
- package/lib/use-viewport-size/use-viewport-size.d.ts.map +0 -1
- package/lib/use-window-event/use-window-event.d.ts.map +0 -1
- package/lib/use-window-scroll/use-window-scroll.d.ts.map +0 -1
- package/lib/utils/assign-ref/assign-ref.d.ts +0 -2
- package/lib/utils/assign-ref/assign-ref.d.ts.map +0 -1
- package/lib/utils/clamp/clamp.d.ts.map +0 -1
- package/lib/utils/index.d.ts.map +0 -1
- package/lib/utils/lower-first/lower-first.d.ts.map +0 -1
- package/lib/utils/random-id/random-id.d.ts.map +0 -1
- package/lib/utils/range/range.d.ts.map +0 -1
- package/lib/utils/shallow-equal/shallow-equal.d.ts.map +0 -1
- package/lib/utils/upper-first/upper-first.d.ts.map +0 -1
|
@@ -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 | undefined): 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 window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: defaultValue } }));\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":";;;AAEA,SAAS,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE;AACxC,EAAE,IAAI;AACN,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACjC,GAAG,CAAC,OAAO,KAAK,EAAE;AAClB,IAAI,MAAM,IAAI,KAAK,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC,+BAA+B,CAAC,CAAC,CAAC;AACjF,GAAG;AACH,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE;AAChC,EAAE,IAAI;AACN,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC7B,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,CAAC;AACM,SAAS,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE;AAC9C,EAAE,MAAM,SAAS,GAAG,IAAI,KAAK,cAAc,GAAG,uBAAuB,GAAG,yBAAyB,CAAC;AAClG,EAAE,OAAO,SAAS,UAAU,CAAC;AAC7B,IAAI,GAAG;AACP,IAAI,YAAY,GAAG,KAAK,CAAC;AACzB,IAAI,uBAAuB,GAAG,IAAI;AAClC,IAAI,WAAW,GAAG,eAAe;AACjC,IAAI,SAAS,GAAG,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AACzD,GAAG,EAAE;AACL,IAAI,MAAM,gBAAgB,GAAG,WAAW,
|
|
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 | undefined): 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 window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: defaultValue } }));\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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"}
|
|
@@ -21,7 +21,9 @@ function getInitialValue(query, initialValue) {
|
|
|
21
21
|
function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
|
|
22
22
|
getInitialValueInEffect: true
|
|
23
23
|
}) {
|
|
24
|
-
const [matches, setMatches] = useState(
|
|
24
|
+
const [matches, setMatches] = useState(
|
|
25
|
+
getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
|
|
26
|
+
);
|
|
25
27
|
const queryRef = useRef();
|
|
26
28
|
useEffect(() => {
|
|
27
29
|
if ("matchMedia" in window) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if ('matchMedia' in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n"],"names":[],"mappings":";;AACA,SAAS,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE;AAC9C,EAAE,IAAI;AACN,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,IAAI,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/D,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,IAAI,OAAO,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,GAAG;AACH,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE;AAC9C,EAAE,IAAI,OAAO,YAAY,KAAK,SAAS,EAAE;AACzC,IAAI,OAAO,YAAY,CAAC;AACxB,GAAG;AACH,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,YAAY,IAAI,MAAM,EAAE;AAC/D,IAAI,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC5C,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,uBAAuB,EAAE,GAAG;AACjF,EAAE,uBAAuB,EAAE,IAAI;AAC/B,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if ('matchMedia' in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n"],"names":[],"mappings":";;AACA,SAAS,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE;AAC9C,EAAE,IAAI;AACN,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,IAAI,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/D,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,IAAI,OAAO,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,GAAG;AACH,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE;AAC9C,EAAE,IAAI,OAAO,YAAY,KAAK,SAAS,EAAE;AACzC,IAAI,OAAO,YAAY,CAAC;AACxB,GAAG;AACH,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,YAAY,IAAI,MAAM,EAAE;AAC/D,IAAI,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC5C,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,uBAAuB,EAAE,GAAG;AACjF,EAAE,uBAAuB,EAAE,IAAI;AAC/B,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ;AACxC,IAAI,uBAAuB,GAAG,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;AACjF,GAAG,CAAC;AACJ,EAAE,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC5B,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,YAAY,IAAI,MAAM,EAAE;AAChC,MAAM,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAClD,MAAM,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC3C,MAAM,OAAO,mBAAmB,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzF,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,OAAO,CAAC;AACjB;;;;"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
|
-
import { assignRef } from '../utils/assign-ref/assign-ref.js';
|
|
3
2
|
|
|
3
|
+
function assignRef(ref, value) {
|
|
4
|
+
if (typeof ref === "function") {
|
|
5
|
+
ref(value);
|
|
6
|
+
} else if (typeof ref === "object" && ref !== null && "current" in ref) {
|
|
7
|
+
ref.current = value;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
4
10
|
function mergeRefs(...refs) {
|
|
5
11
|
return (node) => {
|
|
6
12
|
refs.forEach((ref) => assignRef(ref, node));
|
|
@@ -10,5 +16,5 @@ function useMergedRef(...refs) {
|
|
|
10
16
|
return useCallback(mergeRefs(...refs), refs);
|
|
11
17
|
}
|
|
12
18
|
|
|
13
|
-
export { mergeRefs, useMergedRef };
|
|
19
|
+
export { assignRef, mergeRefs, useMergedRef };
|
|
14
20
|
//# sourceMappingURL=use-merged-ref.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-merged-ref.js","sources":["../../src/use-merged-ref/use-merged-ref.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"use-merged-ref.js","sources":["../../src/use-merged-ref/use-merged-ref.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { useCallback, Ref } from 'react';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\nexport function assignRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (typeof ref === 'object' && ref !== null && 'current' in ref) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\nexport function mergeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T | null) => {\n refs.forEach((ref) => assignRef(ref, node));\n };\n}\n\nexport function useMergedRef<T>(...refs: PossibleRef<T>[]) {\n return useCallback(mergeRefs(...refs), refs);\n}\n"],"names":[],"mappings":";;AACO,SAAS,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE;AACtC,EAAE,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;AACjC,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;AACf,GAAG,MAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,SAAS,IAAI,GAAG,EAAE;AAC1E,IAAI,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;AACxB,GAAG;AACH,CAAC;AACM,SAAS,SAAS,CAAC,GAAG,IAAI,EAAE;AACnC,EAAE,OAAO,CAAC,IAAI,KAAK;AACnB,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAChD,GAAG,CAAC;AACJ,CAAC;AACM,SAAS,YAAY,CAAC,GAAG,IAAI,EAAE;AACtC,EAAE,OAAO,WAAW,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAC/C;;;;"}
|
|
@@ -22,8 +22,14 @@ function useMouse(options = { resetOnExit: false }) {
|
|
|
22
22
|
const setMousePosition = (event) => {
|
|
23
23
|
if (ref.current) {
|
|
24
24
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
25
|
-
const x = Math.max(
|
|
26
|
-
|
|
25
|
+
const x = Math.max(
|
|
26
|
+
0,
|
|
27
|
+
Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX))
|
|
28
|
+
);
|
|
29
|
+
const y = Math.max(
|
|
30
|
+
0,
|
|
31
|
+
Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY))
|
|
32
|
+
);
|
|
27
33
|
setPosition({ x, y });
|
|
28
34
|
} else {
|
|
29
35
|
setPosition({ x: event.clientX, y: event.clientY });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mouse.js","sources":["../../src/use-mouse/use-mouse.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { MouseEvent } from 'react';\n\nexport function useMouse<T extends HTMLElement = any>(\n options: { resetOnExit?: boolean } = { resetOnExit: false }\n) {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n\n const ref = useRef<T>();\n\n const setMousePosition = (event: MouseEvent<HTMLElement>) => {\n if (ref.current) {\n const rect = event.currentTarget.getBoundingClientRect();\n\n const x = Math.max(\n 0,\n Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX))\n );\n\n const y = Math.max(\n 0,\n Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY))\n );\n\n setPosition({ x, y });\n } else {\n setPosition({ x: event.clientX, y: event.clientY });\n }\n };\n\n const resetMousePosition = () => setPosition({ x: 0, y: 0 });\n\n useEffect(() => {\n const element = ref?.current ? ref.current : document;\n element.addEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.addEventListener('mouseleave', resetMousePosition as any);\n\n return () => {\n element.removeEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.removeEventListener('mouseleave', resetMousePosition as any);\n };\n }, [ref.current]);\n\n return { ref, ...position };\n}\n"],"names":[],"mappings":";;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEK,SAAS,QAAQ,CAAC,OAAO,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE;AAC3D,EAAE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAC3D,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,MAAM,gBAAgB,GAAG,CAAC,KAAK,KAAK;AACtC,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;AAC/D,MAAM,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"use-mouse.js","sources":["../../src/use-mouse/use-mouse.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { MouseEvent } from 'react';\n\nexport function useMouse<T extends HTMLElement = any>(\n options: { resetOnExit?: boolean } = { resetOnExit: false }\n) {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n\n const ref = useRef<T>();\n\n const setMousePosition = (event: MouseEvent<HTMLElement>) => {\n if (ref.current) {\n const rect = event.currentTarget.getBoundingClientRect();\n\n const x = Math.max(\n 0,\n Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX))\n );\n\n const y = Math.max(\n 0,\n Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY))\n );\n\n setPosition({ x, y });\n } else {\n setPosition({ x: event.clientX, y: event.clientY });\n }\n };\n\n const resetMousePosition = () => setPosition({ x: 0, y: 0 });\n\n useEffect(() => {\n const element = ref?.current ? ref.current : document;\n element.addEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.addEventListener('mouseleave', resetMousePosition as any);\n\n return () => {\n element.removeEventListener('mousemove', setMousePosition as any);\n if (options.resetOnExit) element.removeEventListener('mouseleave', resetMousePosition as any);\n };\n }, [ref.current]);\n\n return { ref, ...position };\n}\n"],"names":[],"mappings":"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"}
|
package/esm/use-move/use-move.js
CHANGED
|
@@ -6,7 +6,7 @@ const clampUseMovePosition = (position) => ({
|
|
|
6
6
|
y: clamp(position.y, 0, 1)
|
|
7
7
|
});
|
|
8
8
|
function useMove(onChange, handlers, dir = "ltr") {
|
|
9
|
-
const ref = useRef();
|
|
9
|
+
const ref = useRef(null);
|
|
10
10
|
const mounted = useRef(false);
|
|
11
11
|
const isSliding = useRef(false);
|
|
12
12
|
const frame = useRef(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(position.x, 0, 1),\n y: clamp(position.y, 0, 1),\n});\n\ninterface useMoveHandlers {\n onScrubStart?(): void;\n onScrubEnd?(): void;\n}\n\nexport function useMove<T extends HTMLElement = HTMLDivElement>(\n onChange: (value: UseMovePosition) => void,\n handlers?: useMoveHandlers,\n dir: 'ltr' | 'rtl' = 'ltr'\n) {\n const ref = useRef<T>();\n const mounted = useRef<boolean>(false);\n const isSliding = useRef(false);\n const frame = useRef(0);\n const [active, setActive] = useState(false);\n\n useEffect(() => {\n mounted.current = true;\n }, []);\n\n useEffect(() => {\n const onScrub = ({ x, y }: UseMovePosition) => {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (mounted.current && ref.current) {\n ref.current.style.userSelect = 'none';\n const rect = ref.current.getBoundingClientRect();\n\n if (rect.width && rect.height) {\n const _x = clamp((x - rect.left) / rect.width, 0, 1);\n onChange({\n x: dir === 'ltr' ? _x : 1 - _x,\n y: clamp((y - rect.top) / rect.height, 0, 1),\n });\n }\n }\n });\n };\n\n const bindEvents = () => {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', stopScrubbing);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchend', stopScrubbing);\n };\n\n const unbindEvents = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', stopScrubbing);\n document.removeEventListener('touchmove', onTouchMove);\n document.removeEventListener('touchend', stopScrubbing);\n };\n\n const startScrubbing = () => {\n if (!isSliding.current && mounted.current) {\n isSliding.current = true;\n typeof handlers?.onScrubStart === 'function' && handlers.onScrubStart();\n setActive(true);\n bindEvents();\n }\n };\n\n const stopScrubbing = () => {\n if (isSliding.current && mounted.current) {\n isSliding.current = false;\n setActive(false);\n unbindEvents();\n setTimeout(() => {\n typeof handlers?.onScrubEnd === 'function' && handlers.onScrubEnd();\n }, 0);\n }\n };\n\n const onMouseDown = (event: MouseEvent) => {\n startScrubbing();\n event.preventDefault();\n onMouseMove(event);\n };\n\n const onMouseMove = (event: MouseEvent) => onScrub({ x: event.clientX, y: event.clientY });\n\n const onTouchStart = (event: TouchEvent) => {\n if (event.cancelable) {\n event.preventDefault();\n }\n\n startScrubbing();\n onTouchMove(event);\n };\n\n const onTouchMove = (event: TouchEvent) => {\n if (event.cancelable) {\n event.preventDefault();\n }\n\n onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });\n };\n\n ref.current?.addEventListener('mousedown', onMouseDown);\n ref.current?.addEventListener('touchstart', onTouchStart, { passive: false });\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener('mousedown', onMouseDown);\n ref.current.removeEventListener('touchstart', onTouchStart);\n }\n };\n }, [dir, onChange]);\n\n return { ref, active };\n}\n"],"names":[],"mappings":";;;AAEY,MAAC,oBAAoB,GAAG,CAAC,QAAQ,MAAM;AACnD,EAAE,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAC5B,EAAE,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAC5B,CAAC,EAAE;AACI,SAAS,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,GAAG,KAAK,EAAE;AACzD,EAAE,MAAM,GAAG,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"use-move.js","sources":["../../src/use-move/use-move.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useEffect, useState, useRef } from 'react';\nimport { clamp } from '../utils';\n\nexport interface UseMovePosition {\n x: number;\n y: number;\n}\n\nexport const clampUseMovePosition = (position: UseMovePosition) => ({\n x: clamp(position.x, 0, 1),\n y: clamp(position.y, 0, 1),\n});\n\ninterface useMoveHandlers {\n onScrubStart?(): void;\n onScrubEnd?(): void;\n}\n\nexport function useMove<T extends HTMLElement = HTMLDivElement>(\n onChange: (value: UseMovePosition) => void,\n handlers?: useMoveHandlers,\n dir: 'ltr' | 'rtl' = 'ltr'\n) {\n const ref = useRef<T>(null);\n const mounted = useRef<boolean>(false);\n const isSliding = useRef(false);\n const frame = useRef(0);\n const [active, setActive] = useState(false);\n\n useEffect(() => {\n mounted.current = true;\n }, []);\n\n useEffect(() => {\n const onScrub = ({ x, y }: UseMovePosition) => {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (mounted.current && ref.current) {\n ref.current.style.userSelect = 'none';\n const rect = ref.current.getBoundingClientRect();\n\n if (rect.width && rect.height) {\n const _x = clamp((x - rect.left) / rect.width, 0, 1);\n onChange({\n x: dir === 'ltr' ? _x : 1 - _x,\n y: clamp((y - rect.top) / rect.height, 0, 1),\n });\n }\n }\n });\n };\n\n const bindEvents = () => {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', stopScrubbing);\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchend', stopScrubbing);\n };\n\n const unbindEvents = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', stopScrubbing);\n document.removeEventListener('touchmove', onTouchMove);\n document.removeEventListener('touchend', stopScrubbing);\n };\n\n const startScrubbing = () => {\n if (!isSliding.current && mounted.current) {\n isSliding.current = true;\n typeof handlers?.onScrubStart === 'function' && handlers.onScrubStart();\n setActive(true);\n bindEvents();\n }\n };\n\n const stopScrubbing = () => {\n if (isSliding.current && mounted.current) {\n isSliding.current = false;\n setActive(false);\n unbindEvents();\n setTimeout(() => {\n typeof handlers?.onScrubEnd === 'function' && handlers.onScrubEnd();\n }, 0);\n }\n };\n\n const onMouseDown = (event: MouseEvent) => {\n startScrubbing();\n event.preventDefault();\n onMouseMove(event);\n };\n\n const onMouseMove = (event: MouseEvent) => onScrub({ x: event.clientX, y: event.clientY });\n\n const onTouchStart = (event: TouchEvent) => {\n if (event.cancelable) {\n event.preventDefault();\n }\n\n startScrubbing();\n onTouchMove(event);\n };\n\n const onTouchMove = (event: TouchEvent) => {\n if (event.cancelable) {\n event.preventDefault();\n }\n\n onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });\n };\n\n ref.current?.addEventListener('mousedown', onMouseDown);\n ref.current?.addEventListener('touchstart', onTouchStart, { passive: false });\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener('mousedown', onMouseDown);\n ref.current.removeEventListener('touchstart', onTouchStart);\n }\n };\n }, [dir, onChange]);\n\n return { ref, active };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -39,7 +39,10 @@ function useNetwork() {
|
|
|
39
39
|
const [status, setStatus] = useState({
|
|
40
40
|
online: true
|
|
41
41
|
});
|
|
42
|
-
const handleConnectionChange = useCallback(
|
|
42
|
+
const handleConnectionChange = useCallback(
|
|
43
|
+
() => setStatus((current) => __spreadValues(__spreadValues({}, current), getConnection())),
|
|
44
|
+
[]
|
|
45
|
+
);
|
|
43
46
|
useWindowEvent("online", () => setStatus(__spreadValues({ online: true }, getConnection())));
|
|
44
47
|
useWindowEvent("offline", () => setStatus(__spreadValues({ online: false }, getConnection())));
|
|
45
48
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-network.js","sources":["../../src/use-network/use-network.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface NetworkStatus {\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';\n}\n\nfunction getConnection(): NetworkStatus {\n if (typeof navigator === 'undefined') {\n return {};\n }\n\n const _navigator = navigator as any;\n const connection: any =\n _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;\n\n if (!connection) {\n return {};\n }\n\n return {\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type,\n };\n}\n\nexport function useNetwork() {\n const [status, setStatus] = useState<{ online: boolean } & NetworkStatus>({\n online: true,\n });\n const handleConnectionChange = useCallback(\n () => setStatus((current) => ({ ...current, ...getConnection() })),\n []\n );\n\n useWindowEvent('online', () => setStatus({ online: true, ...getConnection() }));\n useWindowEvent('offline', () => setStatus({ online: false, ...getConnection() }));\n\n useEffect(() => {\n const _navigator = navigator as any;\n\n if (_navigator.connection) {\n setStatus({ online: _navigator.onLine, ...getConnection() });\n _navigator.connection.addEventListener('change', handleConnectionChange);\n return () => _navigator.connection.removeEventListener('change', handleConnectionChange);\n }\n\n return undefined;\n }, []);\n\n return status;\n}\n"],"names":[],"mappings":";;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAGF,SAAS,aAAa,GAAG;AACzB,EAAE,IAAI,OAAO,SAAS,KAAK,WAAW,EAAE;AACxC,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,UAAU,GAAG,SAAS,CAAC;AAC/B,EAAE,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,aAAa,IAAI,UAAU,CAAC,gBAAgB,CAAC;AACtG,EAAE,IAAI,CAAC,UAAU,EAAE;AACnB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO;AACT,IAAI,QAAQ,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,QAAQ;AAC/D,IAAI,WAAW,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,WAAW;AACrE,IAAI,aAAa,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,aAAa;AACzE,IAAI,GAAG,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,GAAG;AACrD,IAAI,QAAQ,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,QAAQ;AAC/D,IAAI,IAAI,EAAE,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI;AACvD,GAAG,CAAC;AACJ,CAAC;AACM,SAAS,UAAU,GAAG;AAC7B,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC;AACvC,IAAI,MAAM,EAAE,IAAI;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,sBAAsB,GAAG,WAAW,
|
|
1
|
+
{"version":3,"file":"use-network.js","sources":["../../src/use-network/use-network.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface NetworkStatus {\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';\n}\n\nfunction getConnection(): NetworkStatus {\n if (typeof navigator === 'undefined') {\n return {};\n }\n\n const _navigator = navigator as any;\n const connection: any =\n _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;\n\n if (!connection) {\n return {};\n }\n\n return {\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type,\n };\n}\n\nexport function useNetwork() {\n const [status, setStatus] = useState<{ online: boolean } & NetworkStatus>({\n online: true,\n });\n const handleConnectionChange = useCallback(\n () => setStatus((current) => ({ ...current, ...getConnection() })),\n []\n );\n\n useWindowEvent('online', () => setStatus({ online: true, ...getConnection() }));\n useWindowEvent('offline', () => setStatus({ online: false, ...getConnection() }));\n\n useEffect(() => {\n const _navigator = navigator as any;\n\n if (_navigator.connection) {\n setStatus({ online: _navigator.onLine, ...getConnection() });\n _navigator.connection.addEventListener('change', handleConnectionChange);\n return () => _navigator.connection.removeEventListener('change', handleConnectionChange);\n }\n\n return undefined;\n }, []);\n\n return status;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -14,17 +14,20 @@ function useResizeObserver() {
|
|
|
14
14
|
const frameID = useRef(0);
|
|
15
15
|
const ref = useRef(null);
|
|
16
16
|
const [rect, setRect] = useState(defaultState);
|
|
17
|
-
const observer = useMemo(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
const observer = useMemo(
|
|
18
|
+
() => typeof window !== "undefined" ? new ResizeObserver((entries) => {
|
|
19
|
+
const entry = entries[0];
|
|
20
|
+
if (entry) {
|
|
21
|
+
cancelAnimationFrame(frameID.current);
|
|
22
|
+
frameID.current = requestAnimationFrame(() => {
|
|
23
|
+
if (ref.current) {
|
|
24
|
+
setRect(entry.contentRect);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}) : null,
|
|
29
|
+
[]
|
|
30
|
+
);
|
|
28
31
|
useEffect(() => {
|
|
29
32
|
if (ref.current) {
|
|
30
33
|
observer == null ? void 0 : observer.observe(ref.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\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\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer?.observe(ref.current);\n }\n\n return () => {\n observer?.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACK,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO,
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\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\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer?.observe(ref.current);\n }\n\n return () => {\n observer?.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACK,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO;AAC1B,IAAI,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC1E,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,IAAI,KAAK,EAAE;AACjB,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,QAAQ,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACtD,UAAU,IAAI,GAAG,CAAC,OAAO,EAAE;AAC3B,YAAY,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACvC,WAAW;AACX,SAAS,CAAC,CAAC;AACX,OAAO;AACP,KAAK,CAAC,GAAG,IAAI;AACb,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAChE,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxD,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;"}
|
|
@@ -26,45 +26,48 @@ function useScrollIntoView({
|
|
|
26
26
|
cancelAnimationFrame(frameID.current);
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
const scrollIntoView = useCallback(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const start = (_a = getScrollStart({ parent: scrollableRef.current, axis })) != null ? _a : 0;
|
|
36
|
-
const change = getRelativePosition({
|
|
37
|
-
parent: scrollableRef.current,
|
|
38
|
-
target: targetRef.current,
|
|
39
|
-
axis,
|
|
40
|
-
alignment,
|
|
41
|
-
offset,
|
|
42
|
-
isList
|
|
43
|
-
}) - (scrollableRef.current ? 0 : start);
|
|
44
|
-
function animateScroll() {
|
|
45
|
-
if (startTime.current === 0) {
|
|
46
|
-
startTime.current = performance.now();
|
|
29
|
+
const scrollIntoView = useCallback(
|
|
30
|
+
({ alignment = "start" } = {}) => {
|
|
31
|
+
var _a;
|
|
32
|
+
shouldStop.current = false;
|
|
33
|
+
if (frameID.current) {
|
|
34
|
+
cancel();
|
|
47
35
|
}
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
|
|
51
|
-
const distance = start + change * easing(t);
|
|
52
|
-
setScrollParam({
|
|
36
|
+
const start = (_a = getScrollStart({ parent: scrollableRef.current, axis })) != null ? _a : 0;
|
|
37
|
+
const change = getRelativePosition({
|
|
53
38
|
parent: scrollableRef.current,
|
|
39
|
+
target: targetRef.current,
|
|
54
40
|
axis,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
41
|
+
alignment,
|
|
42
|
+
offset,
|
|
43
|
+
isList
|
|
44
|
+
}) - (scrollableRef.current ? 0 : start);
|
|
45
|
+
function animateScroll() {
|
|
46
|
+
if (startTime.current === 0) {
|
|
47
|
+
startTime.current = performance.now();
|
|
48
|
+
}
|
|
49
|
+
const now = performance.now();
|
|
50
|
+
const elapsed = now - startTime.current;
|
|
51
|
+
const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
|
|
52
|
+
const distance = start + change * easing(t);
|
|
53
|
+
setScrollParam({
|
|
54
|
+
parent: scrollableRef.current,
|
|
55
|
+
axis,
|
|
56
|
+
distance
|
|
57
|
+
});
|
|
58
|
+
if (!shouldStop.current && t < 1) {
|
|
59
|
+
frameID.current = requestAnimationFrame(animateScroll);
|
|
60
|
+
} else {
|
|
61
|
+
typeof onScrollFinish === "function" && onScrollFinish();
|
|
62
|
+
startTime.current = 0;
|
|
63
|
+
frameID.current = 0;
|
|
64
|
+
cancel();
|
|
65
|
+
}
|
|
64
66
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
animateScroll();
|
|
68
|
+
},
|
|
69
|
+
[axis, duration, easing, isList, offset, onScrollFinish, reducedMotion]
|
|
70
|
+
);
|
|
68
71
|
const handleStop = () => {
|
|
69
72
|
if (cancelable) {
|
|
70
73
|
shouldStop.current = true;
|
|
@@ -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
|
|
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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"}
|
|
@@ -18,7 +18,10 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
function useSetState(initialState) {
|
|
20
20
|
const [state, _setState] = useState(initialState);
|
|
21
|
-
const setState = useCallback(
|
|
21
|
+
const setState = useCallback(
|
|
22
|
+
(statePartial) => _setState((current) => __spreadValues(__spreadValues({}, current), typeof statePartial === "function" ? statePartial(current) : statePartial)),
|
|
23
|
+
[]
|
|
24
|
+
);
|
|
22
25
|
return [state, setState];
|
|
23
26
|
}
|
|
24
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-set-state.js","sources":["../../src/use-set-state/use-set-state.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nexport function useSetState<T extends Record<string, any>>(initialState: T) {\n const [state, _setState] = useState(initialState);\n const setState = useCallback(\n (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) =>\n _setState((current) => ({\n ...current,\n ...(typeof statePartial === 'function' ? statePartial(current) : statePartial),\n })),\n []\n );\n return [state, setState] as const;\n}\n"],"names":[],"mappings":";;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEK,SAAS,WAAW,CAAC,YAAY,EAAE;AAC1C,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACpD,EAAE,MAAM,QAAQ,GAAG,WAAW,
|
|
1
|
+
{"version":3,"file":"use-set-state.js","sources":["../../src/use-set-state/use-set-state.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nexport function useSetState<T extends Record<string, any>>(initialState: T) {\n const [state, _setState] = useState(initialState);\n const setState = useCallback(\n (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) =>\n _setState((current) => ({\n ...current,\n ...(typeof statePartial === 'function' ? statePartial(current) : statePartial),\n })),\n []\n );\n return [state, setState] as const;\n}\n"],"names":[],"mappings":";;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEK,SAAS,WAAW,CAAC,YAAY,EAAE;AAC1C,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACpD,EAAE,MAAM,QAAQ,GAAG,WAAW;AAC9B,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,OAAO,KAAK,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,YAAY,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AACpK,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B;;;;"}
|
|
@@ -7,7 +7,9 @@ function useUncontrolled({
|
|
|
7
7
|
onChange = () => {
|
|
8
8
|
}
|
|
9
9
|
}) {
|
|
10
|
-
const [uncontrolledValue, setUncontrolledValue] = useState(
|
|
10
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(
|
|
11
|
+
defaultValue !== void 0 ? defaultValue : finalValue
|
|
12
|
+
);
|
|
11
13
|
const handleUncontrolledChange = (val) => {
|
|
12
14
|
setUncontrolledValue(val);
|
|
13
15
|
onChange == null ? void 0 : onChange(val);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-uncontrolled.js","sources":["../../src/use-uncontrolled/use-uncontrolled.ts"],"sourcesContent":["import { useState } from 'react';\n\ninterface UseUncontrolledInput<T> {\n /** Value for controlled state */\n value?: T;\n\n /** Initial value for uncontrolled state */\n defaultValue?: T;\n\n /** Final value for uncontrolled state when value and defaultValue are not provided */\n finalValue?: T;\n\n /** Controlled state onChange handler */\n onChange?(value: T): void;\n}\n\nexport function useUncontrolled<T>({\n value,\n defaultValue,\n finalValue,\n onChange = () => {},\n}: UseUncontrolledInput<T>): [T, (value: T) => void, boolean] {\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue !== undefined ? defaultValue : finalValue\n );\n\n const handleUncontrolledChange = (val: T) => {\n setUncontrolledValue(val);\n onChange?.(val);\n };\n\n if (value !== undefined) {\n return [value as T, onChange, true];\n }\n\n return [uncontrolledValue as T, handleUncontrolledChange, false];\n}\n"],"names":[],"mappings":";;AACO,SAAS,eAAe,CAAC;AAChC,EAAE,KAAK;AACP,EAAE,YAAY;AACd,EAAE,UAAU;AACZ,EAAE,QAAQ,GAAG,MAAM;AACnB,GAAG;AACH,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"use-uncontrolled.js","sources":["../../src/use-uncontrolled/use-uncontrolled.ts"],"sourcesContent":["import { useState } from 'react';\n\ninterface UseUncontrolledInput<T> {\n /** Value for controlled state */\n value?: T;\n\n /** Initial value for uncontrolled state */\n defaultValue?: T;\n\n /** Final value for uncontrolled state when value and defaultValue are not provided */\n finalValue?: T;\n\n /** Controlled state onChange handler */\n onChange?(value: T): void;\n}\n\nexport function useUncontrolled<T>({\n value,\n defaultValue,\n finalValue,\n onChange = () => {},\n}: UseUncontrolledInput<T>): [T, (value: T) => void, boolean] {\n const [uncontrolledValue, setUncontrolledValue] = useState(\n defaultValue !== undefined ? defaultValue : finalValue\n );\n\n const handleUncontrolledChange = (val: T) => {\n setUncontrolledValue(val);\n onChange?.(val);\n };\n\n if (value !== undefined) {\n return [value as T, onChange, true];\n }\n\n return [uncontrolledValue as T, handleUncontrolledChange, false];\n}\n"],"names":[],"mappings":";;AACO,SAAS,eAAe,CAAC;AAChC,EAAE,KAAK;AACP,EAAE,YAAY;AACd,EAAE,UAAU;AACZ,EAAE,QAAQ,GAAG,MAAM;AACnB,GAAG;AACH,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ;AAC5D,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,YAAY,GAAG,UAAU;AACvD,GAAG,CAAC;AACJ,EAAE,MAAM,wBAAwB,GAAG,CAAC,GAAG,KAAK;AAC5C,IAAI,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC9B,IAAI,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC9C,GAAG,CAAC;AACJ,EAAE,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE;AACxB,IAAI,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;AACnC,GAAG;AACH,EAAE,OAAO,CAAC,iBAAiB,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC;AAC9D;;;;"}
|
|
@@ -2,8 +2,12 @@ import { useState } from 'react';
|
|
|
2
2
|
|
|
3
3
|
function useValidatedState(initialValue, validation, initialValidationState) {
|
|
4
4
|
const [value, setValue] = useState(initialValue);
|
|
5
|
-
const [lastValidValue, setLastValidValue] = useState(
|
|
6
|
-
|
|
5
|
+
const [lastValidValue, setLastValidValue] = useState(
|
|
6
|
+
validation(initialValue) ? initialValue : void 0
|
|
7
|
+
);
|
|
8
|
+
const [valid, setValid] = useState(
|
|
9
|
+
typeof initialValidationState === "boolean" ? initialValidationState : validation(initialValue)
|
|
10
|
+
);
|
|
7
11
|
const onChange = (val) => {
|
|
8
12
|
if (validation(val)) {
|
|
9
13
|
setLastValidValue(val);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-validated-state.js","sources":["../../src/use-validated-state/use-validated-state.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useValidatedState<T>(\n initialValue: T,\n validation: (value: T) => boolean,\n initialValidationState?: boolean\n) {\n const [value, setValue] = useState<T>(initialValue);\n const [lastValidValue, setLastValidValue] = useState<T | undefined>(\n validation(initialValue) ? initialValue : undefined\n );\n const [valid, setValid] = useState<boolean>(\n typeof initialValidationState === 'boolean' ? initialValidationState : validation(initialValue)\n );\n\n const onChange = (val: T) => {\n if (validation(val)) {\n setLastValidValue(val);\n setValid(true);\n } else {\n setValid(false);\n }\n\n setValue(val);\n };\n\n return [{ value, lastValidValue, valid }, onChange] as const;\n}\n"],"names":[],"mappings":";;AACO,SAAS,iBAAiB,CAAC,YAAY,EAAE,UAAU,EAAE,sBAAsB,EAAE;AACpF,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACnD,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"use-validated-state.js","sources":["../../src/use-validated-state/use-validated-state.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useValidatedState<T>(\n initialValue: T,\n validation: (value: T) => boolean,\n initialValidationState?: boolean\n) {\n const [value, setValue] = useState<T>(initialValue);\n const [lastValidValue, setLastValidValue] = useState<T | undefined>(\n validation(initialValue) ? initialValue : undefined\n );\n const [valid, setValid] = useState<boolean>(\n typeof initialValidationState === 'boolean' ? initialValidationState : validation(initialValue)\n );\n\n const onChange = (val: T) => {\n if (validation(val)) {\n setLastValidValue(val);\n setValid(true);\n } else {\n setValid(false);\n }\n\n setValue(val);\n };\n\n return [{ value, lastValidValue, valid }, onChange] as const;\n}\n"],"names":[],"mappings":";;AACO,SAAS,iBAAiB,CAAC,YAAY,EAAE,UAAU,EAAE,sBAAsB,EAAE;AACpF,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACnD,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ;AACtD,IAAI,UAAU,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,KAAK,CAAC;AACpD,GAAG,CAAC;AACJ,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ;AACpC,IAAI,OAAO,sBAAsB,KAAK,SAAS,GAAG,sBAAsB,GAAG,UAAU,CAAC,YAAY,CAAC;AACnG,GAAG,CAAC;AACJ,EAAE,MAAM,QAAQ,GAAG,CAAC,GAAG,KAAK;AAC5B,IAAI,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE;AACzB,MAAM,iBAAiB,CAAC,GAAG,CAAC,CAAC;AAC7B,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;AACrB,KAAK,MAAM;AACX,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtB,KAAK;AACL,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC;AAClB,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;AACtD;;;;"}
|
package/esm/utils/clamp/clamp.js
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
function clamp(value, min, max) {
|
|
2
|
+
if (min === void 0 && max === void 0) {
|
|
3
|
+
return value;
|
|
4
|
+
}
|
|
5
|
+
if (min !== void 0 && max === void 0) {
|
|
6
|
+
return Math.max(value, min);
|
|
7
|
+
}
|
|
8
|
+
if (min === void 0 && max !== void 0) {
|
|
9
|
+
return Math.min(value, max);
|
|
10
|
+
}
|
|
2
11
|
return Math.min(Math.max(value, min), max);
|
|
3
12
|
}
|
|
4
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n"],"names":[],"mappings":"AAAO,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C;;;;"}
|
|
1
|
+
{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number | undefined, max: number | undefined) {\n if (min === undefined && max === undefined) {\n return value;\n }\n\n if (min !== undefined && max === undefined) {\n return Math.max(value, min);\n }\n\n if (min === undefined && max !== undefined) {\n return Math.min(value, max);\n }\n\n return Math.min(Math.max(value, min!), max!);\n}\n"],"names":[],"mappings":"AAAO,SAAS,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,IAAI,GAAG,KAAK,KAAK,CAAC,EAAE;AACxC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,IAAI,GAAG,KAAK,KAAK,CAAC,EAAE;AACxC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,GAAG;AACH,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,IAAI,GAAG,KAAK,KAAK,CAAC,EAAE;AACxC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C;;;;"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export * from './utils';
|
|
2
|
+
export { useCallbackRef } from './use-callback-ref/use-callback-ref';
|
|
3
|
+
export { useDebounceCallback } from './use-debounced-callback/use-debounced-callback';
|
|
2
4
|
export { useClickOutside } from './use-click-outside/use-click-outside';
|
|
3
5
|
export { useClipboard } from './use-clipboard/use-clipboard';
|
|
4
6
|
export { useColorScheme } from './use-color-scheme/use-color-scheme';
|
|
@@ -19,7 +21,7 @@ export { useListState } from './use-list-state/use-list-state';
|
|
|
19
21
|
export { useLocalStorage } from './use-local-storage/use-local-storage';
|
|
20
22
|
export { useSessionStorage } from './use-session-storage/use-session-storage';
|
|
21
23
|
export { useMediaQuery } from './use-media-query/use-media-query';
|
|
22
|
-
export { useMergedRef, mergeRefs } from './use-merged-ref/use-merged-ref';
|
|
24
|
+
export { useMergedRef, mergeRefs, assignRef } from './use-merged-ref/use-merged-ref';
|
|
23
25
|
export { useMouse } from './use-mouse/use-mouse';
|
|
24
26
|
export { useMove, clampUseMovePosition } from './use-move/use-move';
|
|
25
27
|
export { usePagination } from './use-pagination/use-pagination';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useDebounceCallback(callback: () => void, delay: number): () => void;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { Ref } from 'react';
|
|
2
|
+
type PossibleRef<T> = Ref<T> | undefined;
|
|
3
|
+
export declare function assignRef<T>(ref: PossibleRef<T>, value: T): void;
|
|
4
|
+
export declare function mergeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
|
|
5
|
+
export declare function useMergedRef<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
|
|
6
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export interface UseMovePosition {
|
|
2
3
|
x: number;
|
|
3
4
|
y: number;
|
|
@@ -11,7 +12,7 @@ interface useMoveHandlers {
|
|
|
11
12
|
onScrubEnd?(): void;
|
|
12
13
|
}
|
|
13
14
|
export declare function useMove<T extends HTMLElement = HTMLDivElement>(onChange: (value: UseMovePosition) => void, handlers?: useMoveHandlers, dir?: 'ltr' | 'rtl'): {
|
|
14
|
-
ref: import("react").
|
|
15
|
+
ref: import("react").RefObject<T>;
|
|
15
16
|
active: boolean;
|
|
16
17
|
};
|
|
17
18
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function clamp(value: number, min: number, max: number): number;
|
|
1
|
+
export declare function clamp(value: number, min: number | undefined, max: number | undefined): number;
|
package/lib/utils/index.d.ts
CHANGED