@mantine/hooks 5.2.1 → 5.2.4
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-focus-return/use-focus-return.js +1 -1
- package/cjs/use-focus-return/use-focus-return.js.map +1 -1
- package/cjs/use-focus-within/use-focus-within.js +1 -1
- package/cjs/use-focus-within/use-focus-within.js.map +1 -1
- package/cjs/use-local-storage/use-local-storage.js +11 -6
- package/cjs/use-local-storage/use-local-storage.js.map +1 -1
- package/esm/use-focus-return/use-focus-return.js +1 -1
- package/esm/use-focus-return/use-focus-return.js.map +1 -1
- package/esm/use-focus-within/use-focus-within.js +1 -1
- package/esm/use-focus-within/use-focus-within.js.map +1 -1
- package/esm/use-local-storage/use-local-storage.js +12 -7
- package/esm/use-local-storage/use-local-storage.js.map +1 -1
- package/lib/use-local-storage/use-local-storage.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({ opened, shouldReturnFocus = true }: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened]);\n\n return returnFocus;\n}\n"],"names":["useRef","useDidUpdate"],"mappings":";;;;;;;AAEO,SAAS,cAAc,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,EAAE,EAAE;AACrE,EAAE,MAAM,iBAAiB,GAAGA,YAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,yBAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({ opened, shouldReturnFocus = true }: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened, shouldReturnFocus]);\n\n return returnFocus;\n}\n"],"names":["useRef","useDidUpdate"],"mappings":";;;;;;;AAEO,SAAS,cAAc,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,EAAE,EAAE;AACrE,EAAE,MAAM,iBAAiB,GAAGA,YAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,yBAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAClC,EAAE,OAAO,WAAW,CAAC;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, []);\n\n return { ref, focused };\n}\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;;;AACA,SAAS,qBAAqB,CAAC,KAAK,EAAE;AACtC,EAAE,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,EAAE;AAChG,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,OAAO;AACT,CAAC,GAAG,EAAE,EAAE;AACR,EAAE,MAAM,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AACjD,EAAE,MAAM,UAAU,GAAGD,YAAM,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE;AAC7D,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,GAAG,CAAC;AACJ,EAAEE,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC/D,MAAM,OAAO,MAAM;AACnB,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC/F,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACjG,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n return { ref, focused };\n}\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;;;AACA,SAAS,qBAAqB,CAAC,KAAK,EAAE;AACtC,EAAE,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,EAAE;AAChG,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,OAAO;AACT,CAAC,GAAG,EAAE,EAAE;AACR,EAAE,MAAM,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AACjD,EAAE,MAAM,UAAU,GAAGD,YAAM,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE;AAC7D,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,GAAG,CAAC;AACJ,EAAEE,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC/D,MAAM,OAAO,MAAM;AACnB,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC/F,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACjG,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AACtC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;AAC1B;;;;"}
|
|
@@ -26,8 +26,14 @@ function useLocalStorage({
|
|
|
26
26
|
deserialize = deserializeJSON,
|
|
27
27
|
serialize = serializeJSON
|
|
28
28
|
}) {
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
const readLocalStorageValue = React.useCallback((skipStorage) => {
|
|
30
|
+
if (typeof window === "undefined" || !("localStorage" in window) || skipStorage) {
|
|
31
|
+
return defaultValue != null ? defaultValue : "";
|
|
32
|
+
}
|
|
33
|
+
const storageValue = window.localStorage.getItem(key);
|
|
34
|
+
return storageValue !== null ? deserialize(storageValue) : defaultValue != null ? defaultValue : "";
|
|
35
|
+
}, [key, defaultValue]);
|
|
36
|
+
const [value, setValue] = React.useState(readLocalStorageValue(getInitialValueInEffect));
|
|
31
37
|
const setLocalStorageValue = React.useCallback((val) => {
|
|
32
38
|
if (val instanceof Function) {
|
|
33
39
|
setValue((current) => {
|
|
@@ -43,9 +49,9 @@ function useLocalStorage({
|
|
|
43
49
|
}
|
|
44
50
|
}, [key]);
|
|
45
51
|
useWindowEvent.useWindowEvent("storage", (event) => {
|
|
46
|
-
var
|
|
52
|
+
var _a;
|
|
47
53
|
if (event.storageArea === window.localStorage && event.key === key) {
|
|
48
|
-
setValue(deserialize((
|
|
54
|
+
setValue(deserialize((_a = event.newValue) != null ? _a : void 0));
|
|
49
55
|
}
|
|
50
56
|
});
|
|
51
57
|
useWindowEvent.useWindowEvent("mantine-local-storage", (event) => {
|
|
@@ -59,9 +65,8 @@ function useLocalStorage({
|
|
|
59
65
|
}
|
|
60
66
|
}, [defaultValue, value, setLocalStorageValue]);
|
|
61
67
|
React.useEffect(() => {
|
|
62
|
-
var _a2;
|
|
63
68
|
if (getInitialValueInEffect) {
|
|
64
|
-
setValue(
|
|
69
|
+
setValue(readLocalStorageValue());
|
|
65
70
|
}
|
|
66
71
|
}, []);
|
|
67
72
|
return [value === void 0 ? defaultValue : value, setLocalStorageValue];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-local-storage.js","sources":["../../src/use-local-storage/use-local-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseLocalStorage<T> {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local 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 local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error('@mantine/hooks use-local-storage: 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 useLocalStorage<T = string>({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = serializeJSON,\n}: UseLocalStorage<T>) {\n const
|
|
1
|
+
{"version":3,"file":"use-local-storage.js","sources":["../../src/use-local-storage/use-local-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseLocalStorage<T> {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local 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 local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error('@mantine/hooks use-local-storage: 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 useLocalStorage<T = string>({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = serializeJSON,\n}: UseLocalStorage<T>) {\n const readLocalStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (typeof window === 'undefined' || !('localStorage' in window) || skipStorage) {\n return (defaultValue ?? '') as T;\n }\n\n const storageValue = window.localStorage.getItem(key);\n\n return storageValue !== null ? deserialize(storageValue) : ((defaultValue ?? '') as T);\n },\n [key, defaultValue]\n );\n\n const [value, setValue] = useState<T>(readLocalStorageValue(getInitialValueInEffect));\n\n const setLocalStorageValue = useCallback(\n (val: T | ((prevState: T) => T)) => {\n if (val instanceof Function) {\n setValue((current) => {\n const result = val(current);\n window.localStorage.setItem(key, serialize(result));\n window.dispatchEvent(\n new CustomEvent('mantine-local-storage', { detail: { key, value: val(current) } })\n );\n return result;\n });\n } else {\n window.localStorage.setItem(key, serialize(val));\n window.dispatchEvent(\n new CustomEvent('mantine-local-storage', { detail: { key, value: val } })\n );\n setValue(val);\n }\n },\n [key]\n );\n\n useWindowEvent('storage', (event) => {\n if (event.storageArea === window.localStorage && event.key === key) {\n setValue(deserialize(event.newValue ?? undefined));\n }\n });\n\n useWindowEvent('mantine-local-storage', (event) => {\n if (event.detail.key === key) {\n setValue(event.detail.value);\n }\n });\n\n useEffect(() => {\n if (defaultValue !== undefined && value === undefined) {\n setLocalStorageValue(defaultValue);\n }\n }, [defaultValue, value, setLocalStorageValue]);\n\n useEffect(() => {\n if (getInitialValueInEffect) {\n setValue(readLocalStorageValue());\n }\n }, []);\n\n return [value === undefined ? defaultValue : value, setLocalStorageValue] as const;\n}\n"],"names":["useCallback","useState","useWindowEvent","useEffect"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({ opened, shouldReturnFocus = true }: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened]);\n\n return returnFocus;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,cAAc,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,EAAE,EAAE;AACrE,EAAE,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-return.js","sources":["../../src/use-focus-return/use-focus-return.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useDidUpdate } from '../use-did-update/use-did-update';\n\ninterface UseFocusReturn {\n opened: boolean;\n shouldReturnFocus?: boolean;\n}\n\n/** Returns focus to last active element, used in Modal and Drawer */\nexport function useFocusReturn({ opened, shouldReturnFocus = true }: UseFocusReturn) {\n const lastActiveElement = useRef<HTMLElement>();\n const returnFocus = () => {\n if (\n lastActiveElement.current &&\n 'focus' in lastActiveElement.current &&\n typeof lastActiveElement.current.focus === 'function'\n ) {\n lastActiveElement.current?.focus();\n }\n };\n\n useDidUpdate(() => {\n let timeout = -1;\n\n const clearFocusTimeout = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n window.clearTimeout(timeout);\n }\n };\n\n document.addEventListener('keydown', clearFocusTimeout);\n\n if (opened) {\n lastActiveElement.current = document.activeElement as HTMLElement;\n } else if (shouldReturnFocus) {\n timeout = window.setTimeout(returnFocus, 10);\n }\n\n return () => {\n window.clearTimeout(timeout);\n document.removeEventListener('keydown', clearFocusTimeout);\n };\n }, [opened, shouldReturnFocus]);\n\n return returnFocus;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,cAAc,CAAC,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,EAAE,EAAE;AACrE,EAAE,MAAM,iBAAiB,GAAG,MAAM,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,OAAO,iBAAiB,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;AACpI,MAAM,CAAC,EAAE,GAAG,iBAAiB,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;AACrE,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,YAAY,CAAC,MAAM;AACrB,IAAI,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;AACrB,IAAI,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK;AACzC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AAC/B,QAAQ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACrC,OAAO;AACP,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC5D,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,iBAAiB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;AACzD,KAAK,MAAM,IAAI,iBAAiB,EAAE;AAClC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAClC,EAAE,OAAO,WAAW,CAAC;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, []);\n\n return { ref, focused };\n}\n"],"names":[],"mappings":";;AACA,SAAS,qBAAqB,CAAC,KAAK,EAAE;AACtC,EAAE,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,EAAE;AAChG,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,OAAO;AACT,CAAC,GAAG,EAAE,EAAE;AACR,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACjD,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE;AAC7D,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC/D,MAAM,OAAO,MAAM;AACnB,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC/F,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACjG,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-within.js","sources":["../../src/use-focus-within/use-focus-within.ts"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\nfunction containsRelatedTarget(event: FocusEvent) {\n if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus,\n}: UseFocusWithinOptions = {}): { ref: React.MutableRefObject<T>; focused: boolean } {\n const ref = useRef<T>();\n const [focused, _setFocused] = useState(false);\n const focusedRef = useRef(false);\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event);\n }\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event);\n }\n };\n\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener('focusin', handleFocusIn);\n ref.current.addEventListener('focusout', handleFocusOut);\n\n return () => {\n ref.current?.removeEventListener('focusin', handleFocusIn);\n ref.current?.removeEventListener('focusout', handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n return { ref, focused };\n}\n"],"names":[],"mappings":";;AACA,SAAS,qBAAqB,CAAC,KAAK,EAAE;AACtC,EAAE,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,IAAI,KAAK,CAAC,aAAa,YAAY,WAAW,EAAE;AAChG,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,cAAc,CAAC;AAC/B,EAAE,MAAM;AACR,EAAE,OAAO;AACT,CAAC,GAAG,EAAE,EAAE;AACR,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACjD,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,UAAU,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,IAAI,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AAC7B,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE;AAC7D,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC7D,MAAM,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC/D,MAAM,OAAO,MAAM;AACnB,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAC/F,QAAQ,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACjG,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AACtC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;AAC1B;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useCallback, useState, useEffect } from 'react';
|
|
2
2
|
import { useWindowEvent } from '../use-window-event/use-window-event.js';
|
|
3
3
|
|
|
4
4
|
function serializeJSON(value) {
|
|
@@ -22,8 +22,14 @@ function useLocalStorage({
|
|
|
22
22
|
deserialize = deserializeJSON,
|
|
23
23
|
serialize = serializeJSON
|
|
24
24
|
}) {
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
const readLocalStorageValue = useCallback((skipStorage) => {
|
|
26
|
+
if (typeof window === "undefined" || !("localStorage" in window) || skipStorage) {
|
|
27
|
+
return defaultValue != null ? defaultValue : "";
|
|
28
|
+
}
|
|
29
|
+
const storageValue = window.localStorage.getItem(key);
|
|
30
|
+
return storageValue !== null ? deserialize(storageValue) : defaultValue != null ? defaultValue : "";
|
|
31
|
+
}, [key, defaultValue]);
|
|
32
|
+
const [value, setValue] = useState(readLocalStorageValue(getInitialValueInEffect));
|
|
27
33
|
const setLocalStorageValue = useCallback((val) => {
|
|
28
34
|
if (val instanceof Function) {
|
|
29
35
|
setValue((current) => {
|
|
@@ -39,9 +45,9 @@ function useLocalStorage({
|
|
|
39
45
|
}
|
|
40
46
|
}, [key]);
|
|
41
47
|
useWindowEvent("storage", (event) => {
|
|
42
|
-
var
|
|
48
|
+
var _a;
|
|
43
49
|
if (event.storageArea === window.localStorage && event.key === key) {
|
|
44
|
-
setValue(deserialize((
|
|
50
|
+
setValue(deserialize((_a = event.newValue) != null ? _a : void 0));
|
|
45
51
|
}
|
|
46
52
|
});
|
|
47
53
|
useWindowEvent("mantine-local-storage", (event) => {
|
|
@@ -55,9 +61,8 @@ function useLocalStorage({
|
|
|
55
61
|
}
|
|
56
62
|
}, [defaultValue, value, setLocalStorageValue]);
|
|
57
63
|
useEffect(() => {
|
|
58
|
-
var _a2;
|
|
59
64
|
if (getInitialValueInEffect) {
|
|
60
|
-
setValue(
|
|
65
|
+
setValue(readLocalStorageValue());
|
|
61
66
|
}
|
|
62
67
|
}, []);
|
|
63
68
|
return [value === void 0 ? defaultValue : value, setLocalStorageValue];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-local-storage.js","sources":["../../src/use-local-storage/use-local-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseLocalStorage<T> {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local 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 local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error('@mantine/hooks use-local-storage: 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 useLocalStorage<T = string>({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = serializeJSON,\n}: UseLocalStorage<T>) {\n const
|
|
1
|
+
{"version":3,"file":"use-local-storage.js","sources":["../../src/use-local-storage/use-local-storage.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface UseLocalStorage<T> {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local 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 local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction serializeJSON<T>(value: T) {\n try {\n return JSON.stringify(value);\n } catch (error) {\n throw new Error('@mantine/hooks use-local-storage: 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 useLocalStorage<T = string>({\n key,\n defaultValue = undefined,\n getInitialValueInEffect = true,\n deserialize = deserializeJSON,\n serialize = serializeJSON,\n}: UseLocalStorage<T>) {\n const readLocalStorageValue = useCallback(\n (skipStorage?: boolean): T => {\n if (typeof window === 'undefined' || !('localStorage' in window) || skipStorage) {\n return (defaultValue ?? '') as T;\n }\n\n const storageValue = window.localStorage.getItem(key);\n\n return storageValue !== null ? deserialize(storageValue) : ((defaultValue ?? '') as T);\n },\n [key, defaultValue]\n );\n\n const [value, setValue] = useState<T>(readLocalStorageValue(getInitialValueInEffect));\n\n const setLocalStorageValue = useCallback(\n (val: T | ((prevState: T) => T)) => {\n if (val instanceof Function) {\n setValue((current) => {\n const result = val(current);\n window.localStorage.setItem(key, serialize(result));\n window.dispatchEvent(\n new CustomEvent('mantine-local-storage', { detail: { key, value: val(current) } })\n );\n return result;\n });\n } else {\n window.localStorage.setItem(key, serialize(val));\n window.dispatchEvent(\n new CustomEvent('mantine-local-storage', { detail: { key, value: val } })\n );\n setValue(val);\n }\n },\n [key]\n );\n\n useWindowEvent('storage', (event) => {\n if (event.storageArea === window.localStorage && event.key === key) {\n setValue(deserialize(event.newValue ?? undefined));\n }\n });\n\n useWindowEvent('mantine-local-storage', (event) => {\n if (event.detail.key === key) {\n setValue(event.detail.value);\n }\n });\n\n useEffect(() => {\n if (defaultValue !== undefined && value === undefined) {\n setLocalStorageValue(defaultValue);\n }\n }, [defaultValue, value, setLocalStorageValue]);\n\n useEffect(() => {\n if (getInitialValueInEffect) {\n setValue(readLocalStorageValue());\n }\n }, []);\n\n return [value === undefined ? defaultValue : value, setLocalStorageValue] as const;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-local-storage.d.ts","sourceRoot":"","sources":["../../src/use-local-storage/use-local-storage.ts"],"names":[],"mappings":"AAGA,UAAU,eAAe,CAAC,CAAC;IACzB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IAEZ,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB,oEAAoE;IACpE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,0EAA0E;IAC1E,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC;IAE7B,uEAAuE;IACvE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;CAChC;AAkBD,wBAAgB,eAAe,CAAC,CAAC,GAAG,MAAM,EAAE,EAC1C,GAAG,EACH,YAAwB,EACxB,uBAA8B,EAC9B,WAA6B,EAC7B,SAAyB,GAC1B,EAAE,eAAe,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"use-local-storage.d.ts","sourceRoot":"","sources":["../../src/use-local-storage/use-local-storage.ts"],"names":[],"mappings":"AAGA,UAAU,eAAe,CAAC,CAAC;IACzB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IAEZ,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB,oEAAoE;IACpE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,0EAA0E;IAC1E,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC;IAE7B,uEAAuE;IACvE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;CAChC;AAkBD,wBAAgB,eAAe,CAAC,CAAC,GAAG,MAAM,EAAE,EAC1C,GAAG,EACH,YAAwB,EACxB,uBAA8B,EAC9B,WAA6B,EAC7B,SAAyB,GAC1B,EAAE,eAAe,CAAC,CAAC,CAAC,uCAiBM,CAAC,KAAK,CAAC,YA8CjC"}
|