@uxf/data-grid 11.0.0-beta.6 → 11.0.0-beta.7

package/_store/reducer.d.ts

@@ -2,7 +2,7 @@ import { Nullish } from "@uxf/core/types";
 import { Reducer } from "react";
 import { Request } from "../types/api";
 import { Schema } from "../types/schema";
-import { DataGridState } from "../types/state";
-export declare const getInitialState: (schema: Schema<any>, init?: Request | string | Nullish) => DataGridState;
+import { DataGridState, DataGridUserConfig } from "../types/state";
+export declare const getInitialState: (schema: Schema<any>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig | Nullish) => DataGridState;
 export declare const reducer: Reducer<DataGridState, any>;
 export declare const debugReducer: Reducer<DataGridState, any>;

package/_store/reducer.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const utils_1 = require("../utils");
-const getInitialState = (schema, init) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+const getInitialState = (schema, init, initialUserConfig) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const initialState = (0, is_nil_1.isNil)(init) ? {} : typeof init === "string" ? (_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {} : init;
     return {
         request: {
@@ -12,18 +12,21 @@ const getInitialState = (schema, init) => {
             page: (_c = initialState.page) !== null && _c !== void 0 ? _c : 0,
             dir: (_d = initialState.dir) !== null && _d !== void 0 ? _d : schema.dir,
             sort: (_e = initialState.sort) !== null && _e !== void 0 ? _e : schema.sort,
-            perPage: (_f = initialState.perPage) !== null && _f !== void 0 ? _f : schema.perPage,
-            tab: (_j = (_h = (_g = schema.tabs) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : null,
+            perPage: (_g = (_f = initialState.perPage) !== null && _f !== void 0 ? _f : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _g !== void 0 ? _g : schema.perPage,
+            tab: (_k = (_j = (_h = schema.tabs) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.name) !== null && _k !== void 0 ? _k : null,
             search: "",
         },
-        columnConfig: {},
+        userConfig: {
+            columns: (_l = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _l !== void 0 ? _l : {},
+            perPage: (_m = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _m !== void 0 ? _m : schema.perPage,
+        },
         tabRequests: {},
     };
 };
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     switch (action.type) {
         case "CHANGE_PAGE":
             return {
@@ -40,6 +43,10 @@ const reducer = (state, action) => {
                     ...state.request,
                     perPage: action.perPage,
                 },
+                userConfig: {
+                    ...state.userConfig,
+                    perPage: action.perPage,
+                },
             };
         case "FILTER":
             // eslint-disable-next-line no-case-declarations
@@ -121,24 +128,30 @@ const reducer = (state, action) => {
         case "HIDE_COLUMN":
             return {
                 ...state,
-                columnConfig: {
-                    ...state.columnConfig,
-                    [action.name]: {
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        ...((_j = state.columnConfig[action.name]) !== null && _j !== void 0 ? _j : {}),
-                        isHidden: true,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                            ...((_k = (_j = state.userConfig.columns) === null || _j === void 0 ? void 0 : _j[action.name]) !== null && _k !== void 0 ? _k : {}),
+                            isHidden: true,
+                        },
                     },
                 },
             };
         case "SHOW_COLUMN":
             return {
                 ...state,
-                columnConfig: {
-                    ...state.columnConfig,
-                    [action.name]: {
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        ...((_k = state.columnConfig[action.name]) !== null && _k !== void 0 ? _k : {}),
-                        isHidden: false,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                            ...((_m = (_l = state.userConfig.columns) === null || _l === void 0 ? void 0 : _l[action.name]) !== null && _m !== void 0 ? _m : {}),
+                            isHidden: false,
+                        },
                     },
                 },
             };

package/hidden-columns/hidden-columns.js

@@ -8,10 +8,8 @@ const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importDefault(require("react"));
 function HiddenColumns(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
-        var _a;
-        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", 
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            value: !((_a = props.state.columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden), onChange: (value) => value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name) }));
+        var _a, _b;
+        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden), onChange: (value) => value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name) }));
     })));
 }
 exports.HiddenColumns = HiddenColumns;

package/package.json

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

package/selected-rows-toolbar/selected-rows-toolbar.stories.js

@@ -25,6 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 const schema_1 = require("../_story-utils/schema");
 const use_data_grid_control_1 = require("../use-data-grid-control");
@@ -35,7 +37,8 @@ function Default() {
         actions.setSelectedRows([{ id: 1 }, { id: 2 }]);
     }, [actions]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: state, actions: actions }),
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: state, actions: actions, Actions: () => (react_1.default.createElement(button_1.Button, { isIconButton: true },
+                react_1.default.createElement(icon_1.Icon, { name: "camera" }))) }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/styles.css

@@ -316,6 +316,8 @@
     &__selected-rows-toolbar-actions {
         @apply space-x-2;
 
+        align-items: center;
+        display: flex;
         padding-left: theme("spacing.4");
     }
 

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -1,3 +1,4 @@
 import { Column } from "react-data-grid";
+import { DataGridState } from "../../types";
 import { TableProps } from "../types";
-export declare function useReactDataGridColumns(props: TableProps<any>): Column<any>[];
+export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState): Column<any>[];

package/table/hooks/use-react-data-grid-columns.js

@@ -29,16 +29,22 @@ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = require("react-data-grid");
 const action_cell_base_1 = require("../components/action-cell-base");
-function useReactDataGridColumns(props) {
+function useReactDataGridColumns(props, state) {
     var _a;
     const { onReload, actionCellWidth, schema, isRowSelectable, BodyCells, getOpenUrl, onOpen, getEditUrl, onEdit, onRemove, } = props;
     const ActionCell = (_a = props.ActionCell) !== null && _a !== void 0 ? _a : action_cell_base_1.ActionCellBase;
+    const columnsConfig = state.userConfig.columns;
     return (0, react_1.useMemo)(() => {
+        var _a;
         const columns = [];
         if (isRowSelectable) {
             columns.push(react_data_grid_1.SelectColumn);
         }
         for (const schemaColumn of schema.columns) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if ((_a = columnsConfig === null || columnsConfig === void 0 ? void 0 : columnsConfig[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) {
+                continue;
+            }
             columns.push({
                 key: schemaColumn.name,
                 name: schemaColumn.label,
@@ -76,6 +82,7 @@ function useReactDataGridColumns(props) {
         });
         return columns;
     }, [
+        columnsConfig,
         ActionCell,
         actionCellWidth,
         schema.columns,

package/table/table.js

@@ -56,7 +56,7 @@ function Table(props) {
         renderCheckbox: (args) => react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { ...args }),
         noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: error, loading: isLoading }),
     }), [NoRowsFallback, error, isLoading]);
-    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props);
+    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props, props.state);
     const onSelectRows = (value) => {
         const selectedRows = Array.from(value).map((id) => props.data.find((row) => keyExtractor(row) === id));
         props.actions.setSelectedRows(selectedRows);

package/types/state.d.ts

@@ -13,11 +13,15 @@ interface ColumnConfig {
     isHidden: boolean;
     width?: number;
 }
+export interface DataGridUserConfig {
+    columns?: Record<string, ColumnConfig>;
+    perPage?: number;
+}
 export interface DataGridState {
     response?: Response;
     request: GridRequest;
     selectedRows?: any[];
-    columnConfig: Record<string, ColumnConfig>;
+    userConfig: DataGridUserConfig;
     tabRequests: {
         [tab: string]: GridRequest;
     };

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

@@ -1,13 +1,15 @@
 import { Nullish } from "@uxf/core/types";
 import { Request } from "../types/api";
 import { Schema } from "../types/schema";
+import { DataGridUserConfig } from "../types/state";
 interface Config {
     schema: Schema<any>;
     initialState?: Request | string | Nullish;
     isDebug?: boolean;
+    initialUserConfig?: DataGridUserConfig | Nullish;
 }
 export declare function useDataGridControl(config: Config): {
-    state: import("..").DataGridState;
+    state: import("../types/state").DataGridState;
     actions: {
         changePage: (page: number) => void;
         changePerPage: (perPage: number) => void;

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const reducer_1 = require("../_store/reducer");
 const actions_factory_1 = require("./actions-factory");
 function useDataGridControl(config) {
-    const [state, dispatch] = (0, react_1.useReducer)(config.isDebug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(config.schema, config.initialState));
+    const [state, dispatch] = (0, react_1.useReducer)(config.isDebug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(config.schema, config.initialState, config.initialUserConfig));
     const actions = (0, react_1.useMemo)(() => (0, actions_factory_1.createActions)(dispatch), [dispatch]);
     return { state, actions };
 }