@ljcl/storybook-addon-cssprops
Version:
Interact with css custom properties dynamically in the Storybook UI
67 lines (66 loc) • 2.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLocalStorage = void 0;
var react_1 = require("react");
var useWindowEvent_1 = require("./useWindowEvent");
function serializeJSON(value) {
try {
return JSON.stringify(value);
}
catch (error) {
throw new Error("[storybook-addon-cssprops]: Failed to serialize the value");
}
}
function deserializeJSON(value) {
try {
return JSON.parse(value);
}
catch (_a) {
return value;
}
}
function useLocalStorage(_a) {
var _b;
var key = _a.key, defaultValue = _a.defaultValue, _c = _a.getInitialValueInEffect, getInitialValueInEffect = _c === void 0 ? false : _c, _d = _a.deserialize, deserialize = _d === void 0 ? deserializeJSON : _d, _e = _a.serialize, serialize = _e === void 0 ? serializeJSON : _e;
var _f = (0, react_1.useState)(typeof window !== "undefined" &&
"localStorage" in window &&
!getInitialValueInEffect
? deserialize((_b = window.localStorage.getItem(key)) !== null && _b !== void 0 ? _b : undefined)
: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "")), value = _f[0], setValue = _f[1];
var setLocalStorageValue = (0, react_1.useCallback)(function (val) {
if (val instanceof Function) {
setValue(function (current) {
var result = val(current);
window.localStorage.setItem(key, serialize(result));
return result;
});
}
else {
window.localStorage.setItem(key, serialize(val));
setValue(val);
}
}, [key, serialize]);
(0, useWindowEvent_1.useWindowEvent)("storage", function (event) {
var _a;
if (event.storageArea === window.localStorage && event.key === key) {
setValue(deserialize((_a = event.newValue) !== null && _a !== void 0 ? _a : undefined));
}
});
(0, react_1.useEffect)(function () {
if (defaultValue !== undefined && value === undefined) {
setLocalStorageValue(defaultValue);
}
}, [defaultValue, value, setLocalStorageValue]);
(0, react_1.useEffect)(function () {
var _a;
if (getInitialValueInEffect) {
setValue(deserialize((_a = window.localStorage.getItem(key)) !== null && _a !== void 0 ? _a : undefined) ||
(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""));
}
}, [defaultValue, deserialize, getInitialValueInEffect, key]);
return [
value === undefined ? defaultValue : value,
setLocalStorageValue,
];
}
exports.useLocalStorage = useLocalStorage;