@uxf/data-grid 11.56.0 → 11.57.0

package/README.md

@@ -44,17 +44,23 @@ yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest
 
 ```tsx
 import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
+import { useUserConfigLocalStorageAdapter } from "@uxf/data-grid/user-config-storage-adapters/local-storage";
+
+const { middleware, useUserConfig } = useUserConfigLocalStorageAdapter(schema);
 
 const { state, actions } = useDataGridControl({
-    schema ,
+    schema,
     initialState: "Request or string (base64 encoded request)",
     userConfig: {
         columns: {
             id: { isHidden: true },
         }
     },
+    middleware,
     isDebug: true,
 });
+
+useUserConfig(actions);
 ```
 
 ## Supported FilterHandlers
@@ -77,9 +83,14 @@ const { state, actions } = useDataGridControl({
 ```tsx
 import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
 import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
+import { useUserConfigLocalStorageAdapter } from "@uxf/data-grid/user-config-storage-adapters/local-storage";
 
 function BasicExample() {
-    const { state, actions } = useDataGridControl({ schema });
+    const { middleware, useUserConfig } = useUserConfigLocalStorageAdapter(schema);
+    const { state, actions } = useDataGridControl({ schema, middleware });
+    
+    useUserConfig(actions);
+    
     const { isLoading, error, data, reload } = useDataGridFetching(loader, schema, "grid-name", state);
 
     return (

package/_store/reducer.js

@@ -30,7 +30,7 @@ function getInitialState(schema, init, initialUserConfig) {
 }
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     switch (action.type) {
         case "CHANGE_PAGE":
             return {
@@ -194,6 +194,10 @@ const reducer = (state, action) => {
         case "REINITIALIZE_USER_CONFIG":
             return {
                 ...state,
+                request: {
+                    ...state.request,
+                    perPage: (_r = action.userConfig.perPage) !== null && _r !== void 0 ? _r : state.request.perPage,
+                },
                 userConfig: action.userConfig,
             };
         default:

package/data-grid-v2.stories.js

@@ -34,6 +34,7 @@ const data_grid_v2_1 = require("./data-grid-v2");
 const action_cell_1 = require("./table-v2/components/action-cell");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
+const local_storage_1 = require("./user-config-storage-adapters/local-storage");
 const merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
 const actionCell = {
     width: 92,
@@ -79,10 +80,12 @@ const FILTER_BEHAVIOR_OPTIONS = [
 ];
 function Default() {
     const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
+    const { middleware, useUserConfig } = (0, local_storage_1.useUserConfigLocalStorageAdapter)(schema_1.schema);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
-        middleware: (newState, action) => console.log("middlerware", { newState, action }),
+        middleware,
     });
+    useUserConfig(actions);
     const { isLoading, error, data, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema: schema_1.schema,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.56.0",
+    "version": "11.57.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",

package/table-v2/components/header-cell.js

@@ -28,7 +28,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 function HeaderCellComponent(props, ref) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const iconName = !props.column.sort
         ? null
         : ((_a = props.sort) === null || _a === void 0 ? void 0 : _a.dir) === "asc"
@@ -38,7 +38,7 @@ function HeaderCellComponent(props, ref) {
                 : "sort";
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: (0, cx_1.cx)(`uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__cell--type-${props.column.type}`, props.column.sort && "is-sortable"), onClick: props.onClick, ref: ref },
+    react_1.default.createElement("div", { className: (0, cx_1.cx)(`uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__cell--type-${props.column.type}`, props.column.sort && "is-sortable", ((_c = props.sort) === null || _c === void 0 ? void 0 : _c.dir) === "asc" && "is-sorted-asc", ((_d = props.sort) === null || _d === void 0 ? void 0 : _d.dir) === "desc" && "is-sorted-desc"), onClick: props.onClick, ref: ref },
         props.column.label,
         iconName && react_1.default.createElement(icon_1.Icon, { className: "ml-auto", name: iconName }),
         react_1.default.createElement("button", { className: "uxf-dg-table__column-resize-handle", onClick: (event) => event.stopPropagation(), onMouseDown: props.onResizeStart })));

package/types/user-config-storage-adapter.d.ts

@@ -0,0 +1,8 @@
+import { DataGridControl } from "../use-data-grid-control";
+import { Action } from "../use-data-grid-control/action";
+import { Middleware } from "../use-data-grid-control/use-middleware-reducer";
+import { DataGridState } from "./state";
+export type UserConfigStorageAdapter = {
+    middleware: Middleware<DataGridState<any>, Action>;
+    useUserConfig: (actions: DataGridControl["actions"]) => void;
+};

package/types/user-config-storage-adapter.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/use-data-grid-control/action.d.ts

@@ -44,3 +44,4 @@ export type Action = {
     type: "REINITIALIZE_USER_CONFIG";
     userConfig: any;
 };
+export declare const ACTIONS_CHANGING_USER_CONFIG: Array<Action["type"]>;

package/use-data-grid-control/action.js

@@ -1,2 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACTIONS_CHANGING_USER_CONFIG = void 0;
+exports.ACTIONS_CHANGING_USER_CONFIG = [
+    "CHANGE_PER_PAGE",
+    "HIDE_COLUMN",
+    "SHOW_COLUMN",
+    "UPDATE_USER_CONFIG",
+];

package/user-config-storage-adapters/local-storage.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from "../types";
+import { UserConfigStorageAdapter } from "../types/user-config-storage-adapter";
+export declare function useUserConfigLocalStorageAdapter(schema: Schema<any>): UserConfigStorageAdapter;

package/user-config-storage-adapters/local-storage.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserConfigLocalStorageAdapter = useUserConfigLocalStorageAdapter;
+const react_1 = require("react");
+const action_1 = require("../use-data-grid-control/action");
+const get_config_key_1 = require("../utils/get-config-key");
+const isObject = (value) => typeof value === "function" || (typeof value === "object" && Boolean(value));
+function useUserConfigLocalStorageAdapter(schema) {
+    const configKey = (0, get_config_key_1.getConfigKey)(schema);
+    return (0, react_1.useMemo)(() => ({
+        middleware: (newState, action) => {
+            if (action_1.ACTIONS_CHANGING_USER_CONFIG.includes(action.type)) {
+                window.localStorage.setItem(configKey, JSON.stringify(newState.userConfig));
+            }
+        },
+        useUserConfig: (actions) => {
+            (0, react_1.useEffect)(() => {
+                var _a;
+                let config = null;
+                try {
+                    config = JSON.parse((_a = window.localStorage.getItem(configKey)) !== null && _a !== void 0 ? _a : "{}");
+                }
+                catch {
+                    // ignore
+                }
+                if (isObject(config) && config !== null) {
+                    actions.reinitializeUserConfig(config);
+                }
+            }, [actions]);
+        },
+    }), [configKey]);
+}

package/utils/get-config-key.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from "../types";
+export declare function getConfigKey(schema: Schema<any>): string;

package/utils/get-config-key.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfigKey = getConfigKey;
+function getConfigKey(schema) {
+    return `data-grid-config__v2__${schema.name}`;
+}