@ducor/react
Version:
admin template ui interface
94 lines (93 loc) • 4.06 kB
JavaScript
import { isFunction } from "lodash";
import { useCallback, useEffect, useState } from "react";
import useWindowEvent from "./use-window-event";
var serializeJSON = function (value, name) {
try {
return JSON.stringify(value);
}
catch (_a) {
throw new Error("useLocalStorage ".concat(name, ": Failed to serialize the value"));
}
};
var deserializeJSON = function (value) {
if (!value)
return value;
try {
return JSON.parse(value);
}
catch (_a) {
return value;
}
};
var createStorage = function (type, name) {
var eventName = type === "localStorage" ? "ui-local-storage" : "ui-session-storage";
return function (_a) {
var key = _a.key, _b = _a.defaultValue, defaultValue = _b === void 0 ? undefined : _b, _c = _a.deserialize, deserialize = _c === void 0 ? deserializeJSON : _c, _d = _a.getInitialValueInEffect, getInitialValueInEffect = _d === void 0 ? true : _d, _e = _a.serialize, serialize = _e === void 0 ? function (value) { return serializeJSON(value, name); } : _e;
var readStorageValue = useCallback(function (skipStorage) {
if (typeof window === "undefined" ||
!(type in window) ||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
window[type] == null ||
skipStorage) {
return (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
}
var storageValue = window[type].getItem(key);
return storageValue !== null
? deserialize(storageValue)
: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
}, [key, deserialize, defaultValue]);
var _f = useState(readStorageValue(getInitialValueInEffect)), value = _f[0], setValue = _f[1];
var setStorageValue = useCallback(function (valOrFunc) {
if (isFunction(valOrFunc)) {
setValue(function (current) {
var result = valOrFunc(current);
window[type].setItem(key, serialize(result));
window.dispatchEvent(new CustomEvent(eventName, {
detail: { key: key, value: valOrFunc(current) },
}));
return result;
});
}
else {
window[type].setItem(key, serialize(valOrFunc));
window.dispatchEvent(new CustomEvent(eventName, { detail: { key: key, value: valOrFunc } }));
setValue(valOrFunc);
}
}, [key, serialize]);
var removeStorageValue = useCallback(function () {
window[type].removeItem(key);
setValue(defaultValue);
}, [defaultValue, key]);
useWindowEvent("storage", function (ev) {
var _a;
if (ev.storageArea === window[type] && ev.key === key)
setValue(deserialize((_a = ev.newValue) !== null && _a !== void 0 ? _a : undefined));
});
useWindowEvent(eventName, function (ev) {
if (ev.detail.key === key)
setValue(ev.detail.value);
});
useEffect(function () {
if (defaultValue !== undefined && value === undefined)
setStorageValue(defaultValue);
}, [defaultValue, value, setStorageValue]);
useEffect(function () {
if (getInitialValueInEffect)
setValue(readStorageValue());
}, [getInitialValueInEffect, readStorageValue]);
return [
value === undefined ? defaultValue : value,
setStorageValue,
removeStorageValue,
];
};
};
/**
* `useLocalStorage` is a custom hook for storing, updating, and retrieving values in local storage.
*
* @see Docs https://ui.ducor.net/hooks/use-local-storage
*/
var useLocalStorage = function (props) {
return createStorage("localStorage", "use-local-storage")(props);
};
export default useLocalStorage;