@michalrakus/x-react-web-lib 1.36.0 → 1.36.1

package/gulpfile.js

@@ -30,7 +30,9 @@ function generateApi(cb) {
         "./lib/components/XLazyDataTable/XLazyDataTable",
         "./lib/components/XLazyDataTable/XMultilineRenderer",
 
+        "./lib/components/useXStateLocal",
         "./lib/components/useXStateSession",
+        "./lib/components/useXStateStorage",
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",

package/lib/components/XFormBase.d.ts

@@ -10,6 +10,7 @@ export interface XFormProps {
     id?: number;
     initValues?: object;
     onSaveOrCancel?: XOnSaveOrCancelProp;
+    isInDialog?: boolean;
 }
 export declare function Form(entity: string): <T extends new (...args: any[]) => {}>(constructor: T) => {
     new (...args: any[]): {

package/lib/components/XFormBase.js

@@ -235,7 +235,8 @@ var XFormBase = /** @class */ (function (_super) {
     };
     // helper method
     XFormBase.prototype.isInDialog = function () {
-        return this.props.onSaveOrCancel !== undefined;
+        var _a;
+        return (_a = this.props.isInDialog) !== null && _a !== void 0 ? _a : false;
     };
     // helper method
     XFormBase.prototype.isTabViewUsed = function () {

package/lib/components/XFormDialog.js

@@ -16,7 +16,7 @@ var XFormDialog = function (props) {
     };
     var form = (_a = props.dialogState.form) !== null && _a !== void 0 ? _a : props.form;
     return (react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: props.dialogState.opened, onHide: onHide }, form ? react_1.default.cloneElement(form, {
-        id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.dialogState.onSaveOrCancel
+        id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.dialogState.onSaveOrCancel, isInDialog: true
     } /*, props.form.children*/) : null));
 };
 exports.XFormDialog = XFormDialog;

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactChild } from 'react';
 import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableRowExpansionTemplate, DataTableSortMeta } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
-import { XViewStatusOrBoolean } from "../XUtils";
+import { XStorageType, XViewStatusOrBoolean } from "../XUtils";
 import { XSearchBrowseParams } from "../XSearchBrowseParams";
 import { XAggregateFunction, XCustomFilter } from "../../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "../XFormBase";
@@ -58,6 +58,7 @@ export interface XLazyDataTableRef {
 }
 export interface XLazyDataTableProps {
     entity: string;
+    stateStorage?: XStorageType;
     stateKey?: string;
     label?: string;
     labelStyle?: React.CSSProperties;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -145,8 +145,8 @@ var XOcfDropdown_1 = require("./XOcfDropdown");
 var XFieldSetBase_1 = require("../XFieldSet/XFieldSetBase");
 var XAutoCompleteBase_1 = require("../XAutoCompleteBase");
 var XInputTextBase_1 = require("../XInputTextBase");
-var useXStateSession_1 = require("../useXStateSession");
-var useXStateSessionBase_1 = require("../useXStateSessionBase");
+var useXStateStorage_1 = require("../useXStateStorage");
+var useXStateStorageBase_1 = require("../useXStateStorageBase");
 var _ = __importStar(require("lodash"));
 var XDocTemplateButton_1 = require("../../modules/docTemplates/XDocTemplateButton");
 var XFormDialog_1 = require("../XFormDialog");
@@ -162,12 +162,12 @@ var XStateKeySuffix;
 })(XStateKeySuffix || (exports.XStateKeySuffix = XStateKeySuffix = {}));
 exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
-    var _c = _a.paginator, paginator = _c === void 0 ? true : _c, _d = _a.rows, rows = _d === void 0 ? 30 : _d, _e = _a.filterDisplay, filterDisplay = _e === void 0 ? "row" : _e, _f = _a.autoFilter, autoFilter = _f === void 0 ? false : _f, _g = _a.showFilterButtons, showFilterButtons = _g === void 0 ? true : _g, _h = _a.fullTextSearch, fullTextSearch = _h === void 0 ? true : _h, _j = _a.multilineSwitch, multilineSwitch = _j === void 0 ? false : _j, _k = _a.multilineSwitchInitValue, multilineSwitchInitValue = _k === void 0 ? "allLines" : _k, _l = _a.multilineSwitchFewLinesCount, multilineSwitchFewLinesCount = _l === void 0 ? 2 : _l, _m = _a.scrollable, scrollable = _m === void 0 ? true : _m, _o = _a.scrollWidth, scrollWidth = _o === void 0 ? 'viewport' : _o, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
-    _p = _a.scrollHeight, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
-    scrollHeight = _p === void 0 ? 'viewport' : _p, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
-    _q = _a.shrinkWidth, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
-    shrinkWidth = _q === void 0 ? true : _q, propsRest = __rest(_a, ["paginator", "rows", "filterDisplay", "autoFilter", "showFilterButtons", "fullTextSearch", "multilineSwitch", "multilineSwitchInitValue", "multilineSwitchFewLinesCount", "scrollable", "scrollWidth", "scrollHeight", "shrinkWidth"]);
-    var props = __assign({ paginator: paginator, rows: rows, filterDisplay: filterDisplay, autoFilter: autoFilter, showFilterButtons: showFilterButtons, fullTextSearch: fullTextSearch, multilineSwitch: multilineSwitch, multilineSwitchInitValue: multilineSwitchInitValue, multilineSwitchFewLinesCount: multilineSwitchFewLinesCount, scrollable: scrollable, scrollWidth: scrollWidth, scrollHeight: scrollHeight, shrinkWidth: shrinkWidth }, propsRest);
+    var _c = _a.stateStorage, stateStorage = _c === void 0 ? "session" : _c, _d = _a.paginator, paginator = _d === void 0 ? true : _d, _e = _a.rows, rows = _e === void 0 ? 30 : _e, _f = _a.filterDisplay, filterDisplay = _f === void 0 ? "row" : _f, _g = _a.autoFilter, autoFilter = _g === void 0 ? false : _g, _h = _a.showFilterButtons, showFilterButtons = _h === void 0 ? true : _h, _j = _a.fullTextSearch, fullTextSearch = _j === void 0 ? true : _j, _k = _a.multilineSwitch, multilineSwitch = _k === void 0 ? false : _k, _l = _a.multilineSwitchInitValue, multilineSwitchInitValue = _l === void 0 ? "allLines" : _l, _m = _a.multilineSwitchFewLinesCount, multilineSwitchFewLinesCount = _m === void 0 ? 2 : _m, _o = _a.scrollable, scrollable = _o === void 0 ? true : _o, _p = _a.scrollWidth, scrollWidth = _p === void 0 ? 'viewport' : _p, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
+    _q = _a.scrollHeight, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
+    scrollHeight = _q === void 0 ? 'viewport' : _q, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
+    _r = _a.shrinkWidth, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
+    shrinkWidth = _r === void 0 ? true : _r, propsRest = __rest(_a, ["stateStorage", "paginator", "rows", "filterDisplay", "autoFilter", "showFilterButtons", "fullTextSearch", "multilineSwitch", "multilineSwitchInitValue", "multilineSwitchFewLinesCount", "scrollable", "scrollWidth", "scrollHeight", "shrinkWidth"]);
+    var props = __assign({ stateStorage: stateStorage, paginator: paginator, rows: rows, filterDisplay: filterDisplay, autoFilter: autoFilter, showFilterButtons: showFilterButtons, fullTextSearch: fullTextSearch, multilineSwitch: multilineSwitch, multilineSwitchInitValue: multilineSwitchInitValue, multilineSwitchFewLinesCount: multilineSwitchFewLinesCount, scrollable: scrollable, scrollWidth: scrollWidth, scrollHeight: scrollHeight, shrinkWidth: shrinkWidth }, propsRest);
     // must be here, is used in createFiltersInit()
     var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
     var createAggregateItems = function () {
@@ -320,7 +320,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         return "x-ldt-state-".concat((_a = props.stateKey) !== null && _a !== void 0 ? _a : props.entity, "-").concat(stateKeySuffix);
     };
     var removePagingFromStorage = function () {
-        XUtils_1.XUtils.removeValueFromStorage(getStateKey(XStateKeySuffix.pagingFirst));
+        XUtils_1.XUtils.removeValueFromStorage(props.stateStorage, getStateKey(XStateKeySuffix.pagingFirst));
     };
     // premenne platne pre cely component (obdoba member premennych v class-e)
     var primeReactContext = react_1.default.useContext(api_1.PrimeReactContext); // probably does not work and deprecated PrimeReact.filterMatchModeOptions is used
@@ -338,15 +338,15 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
     // ak mame fieldSet stlpce (stlpce ktore maju zadany fieldSetId a zobrazuju hodnoty podla fieldSet-u),
     // tak sem nacitame mapy umoznujuce ziskanie labelov zakliknutych field-ov
     // poznamka: uz by sa zislo mat vytvorene objekty (instancie) pre stlpce a do nich zapisovat pripadny XFieldSetMap, filter (teraz je vo "filters")
-    var _r = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _r[0], setXFieldSetMaps = _r[1];
-    var _s = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _s[0], setValue = _s[1];
-    var _t = __read((0, react_1.useState)(undefined), 2), expandedRows = _t[0], setExpandedRows = _t[1];
-    var _u = __read((0, react_1.useState)(false), 2), loading = _u[0], setLoading = _u[1];
-    var _v = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _v[0], setFirst = _v[1];
-    var _w = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rowsLocal = _w[0], setRowsLocal = _w[1];
+    var _s = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _s[0], setXFieldSetMaps = _s[1];
+    var _t = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _t[0], setValue = _t[1];
+    var _u = __read((0, react_1.useState)(undefined), 2), expandedRows = _u[0], setExpandedRows = _u[1];
+    var _v = __read((0, react_1.useState)(false), 2), loading = _v[0], setLoading = _v[1];
+    var _w = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _w[0], setFirst = _w[1];
+    var _x = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rowsLocal = _x[0], setRowsLocal = _x[1];
     // "filters" have special initialState function different from that used in useXStateSession
     var filtersInitialStateFunction = function () {
-        var filtersInit = XUtils_1.XUtils.getValueFromStorage(getStateKey(XStateKeySuffix.filters), null);
+        var filtersInit = XUtils_1.XUtils.getValueFromStorage(props.stateStorage, getStateKey(XStateKeySuffix.filters), null);
         if (filtersInit != null) {
             // we have filters from session - if we have props.filters, we always override the values from session (values from props.filters have higher priority)
             filtersInit = overrideFilters(filtersInit, props.filters);
@@ -357,23 +357,23 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         }
         return filtersInit;
     };
-    var _x = __read((0, useXStateSessionBase_1.useXStateSessionBase)(getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _x[0], setFilters = _x[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var _y = __read((0, useXStateStorageBase_1.useXStateStorageBase)(props.stateStorage, getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _y[0], setFilters = _y[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
-    var _y = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _y[0], setFtsInputValue = _y[1];
-    var _z = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _z[0], setOptionalCustomFilter = _z[1];
-    var _0 = __read((_b = props.multilineSwitchValue) !== null && _b !== void 0 ? _b : (0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _0[0], setMultilineSwitchValue = _0[1];
-    var _1 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _1[0], setMultiSortMeta = _1[1];
-    var _2 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _2[0], setSelectedRow = _2[1];
+    var _z = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _z[0], setFtsInputValue = _z[1];
+    var _0 = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _0[0], setOptionalCustomFilter = _0[1];
+    var _1 = __read((_b = props.multilineSwitchValue) !== null && _b !== void 0 ? _b : (0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _1[0], setMultilineSwitchValue = _1[1];
+    var _2 = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _2[0], setMultiSortMeta = _2[1];
+    var _3 = __read((0, useXStateStorage_1.useXStateStorage)(props.stateStorage, getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _3[0], setSelectedRow = _3[1];
     /**
      * @deprecated was used to reread data after save/cancel of the form when using XFormNavigator (deprecated)
      */
-    var _3 = __read((0, react_1.useState)(false), 2), dataLoaded = _3[0], setDataLoaded = _3[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _4 = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _4[0], setExportRowsDialogState = _4[1];
+    var _4 = __read((0, react_1.useState)(false), 2), dataLoaded = _4[0], setDataLoaded = _4[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _5 = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _5[0], setExportRowsDialogState = _5[1];
     //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
-    var _5 = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _5[0], setFiltersAfterFiltering = _5[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _6 = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _6[0], setFtsInputValueAfterFiltering = _6[1]; // tak isto ako filtersAfterFiltering
-    var _7 = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _7[0], setOptionalCustomFilterAfterFiltering = _7[1]; // tak isto ako filtersAfterFiltering
-    var _8 = __read((0, react_1.useState)({ opened: false }), 2), formDialogState = _8[0], setFormDialogState = _8[1];
+    var _6 = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _6[0], setFiltersAfterFiltering = _6[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _7 = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _7[0], setFtsInputValueAfterFiltering = _7[1]; // tak isto ako filtersAfterFiltering
+    var _8 = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _8[0], setOptionalCustomFilterAfterFiltering = _8[1]; // tak isto ako filtersAfterFiltering
+    var _9 = __read((0, react_1.useState)({ opened: false }), 2), formDialogState = _9[0], setFormDialogState = _9[1];
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -1470,7 +1470,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
             props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[dataKey] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
             props.appButtonsForRow && props.searchBrowseParams === undefined ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); }, style: xAppButton.style }); }) : null,
-            props.appButtons && props.searchBrowseParams === undefined,
+            props.searchBrowseParams === undefined ? props.appButtons : null,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
             props.editForm != undefined ? react_1.default.createElement(XFormDialog_1.XFormDialog, { key: "formDialog", dialogState: formDialogState }) : null,
             exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : null),

package/lib/components/XUtils.d.ts

@@ -22,6 +22,7 @@ export declare enum XViewStatus {
     Hidden = "hidden"
 }
 export type XViewStatusOrBoolean = XViewStatus | boolean;
+export type XStorageType = "none" | "session" | "local";
 export interface IPostgresInterval {
     years?: number;
     months?: number;
@@ -110,10 +111,10 @@ export declare class XUtils {
     static isTableRowInserted(tableRow: any): boolean;
     static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
     static options(valueStringList: string[]): SelectItem[];
-    static saveValueIntoStorage(key: string, value: any): void;
-    static getValueFromStorage(key: string, initValue: any): any;
-    static removeValueFromStorage(key: string): void;
-    static clearStorage(): void;
+    static saveValueIntoStorage(xStorageType: XStorageType, key: string, value: any): void;
+    static getValueFromStorage(xStorageType: XStorageType, key: string, initValue: any): any;
+    static removeValueFromStorage(xStorageType: XStorageType, key: string): void;
+    static clearStorage(xStorageType: XStorageType): void;
     static reloadIfNewVersion(): void;
     static reloadIfNewVersionNow(): Promise<void>;
     static isLocalhost(): boolean;

package/lib/components/XUtils.js

@@ -713,7 +713,7 @@ var XUtils = exports.XUtils = /** @class */ (function () {
     XUtils.options = function (valueStringList) {
         return valueStringList.map(function (valueString) { return { value: valueString, label: valueString }; });
     };
-    XUtils.saveValueIntoStorage = function (key, value) {
+    XUtils.saveValueIntoStorage = function (xStorageType, key, value) {
         // value can be also string or null or undefined
         // if we don't have object that can be serialised to json, we create special object
         var valueObject;
@@ -727,12 +727,23 @@ var XUtils = exports.XUtils = /** @class */ (function () {
             // value is null or string or boolean or number or Date...
             valueObject = { _xValue: value };
         }
-        sessionStorage.setItem(key, XUtilsCommon_1.XUtilsCommon.objectAsJSON(valueObject));
+        if (xStorageType === "session") {
+            sessionStorage.setItem(key, XUtilsCommon_1.XUtilsCommon.objectAsJSON(valueObject));
+        }
+        else if (xStorageType === "local") {
+            localStorage.setItem(key, XUtilsCommon_1.XUtilsCommon.objectAsJSON(valueObject));
+        }
     };
-    XUtils.getValueFromStorage = function (key, initValue) {
+    XUtils.getValueFromStorage = function (xStorageType, key, initValue) {
         // if the value is not found in storage, initValue is returned
         var value;
-        var item = sessionStorage.getItem(key);
+        var item = null;
+        if (xStorageType === "session") {
+            item = sessionStorage.getItem(key);
+        }
+        else if (xStorageType === "local") {
+            item = localStorage.getItem(key);
+        }
         if (item !== null) {
             try {
                 var valueObject = JSON.parse(item);
@@ -750,7 +761,7 @@ var XUtils = exports.XUtils = /** @class */ (function () {
             }
             catch (e) {
                 // exception should not happen
-                console.log("XUtils.getValueFromStorage: Could not parse/process item from session. key = ".concat(key, ", item = ").concat(item, ". Error: ").concat(e));
+                console.log("XUtils.getValueFromStorage: Could not parse/process item from storage \"".concat(xStorageType, "\". key = ").concat(key, ", item = ").concat(item, ". Error: ").concat(e));
                 value = initValue;
             }
         }
@@ -759,11 +770,21 @@ var XUtils = exports.XUtils = /** @class */ (function () {
         }
         return value;
     };
-    XUtils.removeValueFromStorage = function (key) {
-        sessionStorage.removeItem(key);
+    XUtils.removeValueFromStorage = function (xStorageType, key) {
+        if (xStorageType === "session") {
+            sessionStorage.removeItem(key);
+        }
+        else if (xStorageType === "local") {
+            localStorage.removeItem(key);
+        }
     };
-    XUtils.clearStorage = function () {
-        sessionStorage.clear();
+    XUtils.clearStorage = function (xStorageType) {
+        if (xStorageType === "session") {
+            sessionStorage.clear();
+        }
+        else if (xStorageType === "local") {
+            localStorage.clear();
+        }
     };
     // hleper method used for items of XLazyDataTable (shortcut ldt)
     // static getValueFromStorageLdt(entity: string, stateKeySuffix: XStateKeySuffix, initValue: any): any {
@@ -863,7 +884,8 @@ var XUtils = exports.XUtils = /** @class */ (function () {
         // data in session may not correspond with new structures in new version
         // e.g. if we add new column to XLazyDataTable, filter operator/value for this column new column is missing in data from session and application will crash
         // simple solution is to clear session
-        XUtils.clearStorage();
+        XUtils.clearStorage("session");
+        XUtils.clearStorage("local");
         // page reload (like pressing F5 or Enter on url bar)
         // warning - if user has typed some data in form, the data will be lost
         window.location.reload();

package/lib/components/useXStateLocal.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useXStateLocal<T>(key: string, initialState: T): [T, Dispatch<SetStateAction<T>>];

package/lib/components/useXStateLocal.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useXStateLocal = void 0;
+var useXStateStorage_1 = require("./useXStateStorage");
+// TODO - initialState sholud be value | function returning T, and the function should be called in function "initialStateFunction"
+function useXStateLocal(key, initialState) {
+    return (0, useXStateStorage_1.useXStateStorage)("local", key, initialState);
+}
+exports.useXStateLocal = useXStateLocal;

package/lib/components/useXStateSession.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useXStateSession = void 0;
-var XUtils_1 = require("./XUtils");
-var useXStateSessionBase_1 = require("./useXStateSessionBase");
+var useXStateStorage_1 = require("./useXStateStorage");
 // TODO - initialState sholud be value | function returning T, and the function should be called in function "initialStateFunction"
 function useXStateSession(key, initialState) {
-    return (0, useXStateSessionBase_1.useXStateSessionBase)(key, function () { return XUtils_1.XUtils.getValueFromStorage(key, initialState); });
+    return (0, useXStateStorage_1.useXStateStorage)("session", key, initialState);
 }
 exports.useXStateSession = useXStateSession;

package/lib/components/useXStateStorage.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from "react";
+import { XStorageType } from "./XUtils";
+export declare function useXStateStorage<T>(xStorageType: XStorageType, key: string, initialState: T): [T, Dispatch<SetStateAction<T>>];

package/lib/components/useXStateStorage.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useXStateStorage = void 0;
+var XUtils_1 = require("./XUtils");
+var useXStateStorageBase_1 = require("./useXStateStorageBase");
+// TODO - initialState sholud be value | function returning T, and the function should be called in function "initialStateFunction"
+function useXStateStorage(xStorageType, key, initialState) {
+    return (0, useXStateStorageBase_1.useXStateStorageBase)(xStorageType, key, function () { return XUtils_1.XUtils.getValueFromStorage(xStorageType, key, initialState); });
+}
+exports.useXStateStorage = useXStateStorage;

package/lib/components/useXStateStorageBase.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from "react";
+import { XStorageType } from "./XUtils";
+export declare function useXStateStorageBase<T>(xStorageType: XStorageType, key: string, initialStateFunction: () => T): [T, Dispatch<SetStateAction<T>>];

package/lib/components/{useXStateSessionBase.js → useXStateStorageBase.js}

@@ -16,17 +16,17 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useXStateSessionBase = void 0;
+exports.useXStateStorageBase = void 0;
 var react_1 = require("react");
 var XUtils_1 = require("./XUtils");
 // this base version enables to use custom version of function that computes initialState
-// (in usual case useXStateSession shoud be used)
-function useXStateSessionBase(key, initialStateFunction) {
+// (in usual case useXStateStorage shoud be used)
+function useXStateStorageBase(xStorageType, key, initialStateFunction) {
     var _a = __read((0, react_1.useState)(initialStateFunction), 2), value = _a[0], setValue = _a[1];
     var setValueIntoSession = function (value) {
         setValue(value);
-        XUtils_1.XUtils.saveValueIntoStorage(key, value);
+        XUtils_1.XUtils.saveValueIntoStorage(xStorageType, key, value);
     };
     return [value, setValueIntoSession];
 }
-exports.useXStateSessionBase = useXStateSessionBase;
+exports.useXStateStorageBase = useXStateStorageBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",

package/useXStateLocal.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/useXStateLocal';

package/useXStateLocal.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/useXStateLocal.js');

package/useXStateStorage.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/useXStateStorage';

package/useXStateStorage.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/useXStateStorage.js');

package/lib/components/useXStateSessionBase.d.ts

@@ -1,2 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-export declare function useXStateSessionBase<T>(key: string, initialStateFunction: () => T): [T, Dispatch<SetStateAction<T>>];