@uxf/data-grid 11.38.3 → 11.39.0

package/_store/reducer.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = void 0;
 exports.getInitialState = getInitialState;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const empty_object_1 = require("@uxf/core/constants/empty-object");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const deepmerge_1 = __importDefault(require("deepmerge"));
 const utils_1 = require("../utils");
@@ -28,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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     switch (action.type) {
         case "CHANGE_PAGE":
             return {
@@ -120,26 +122,34 @@ const reducer = (state, action) => {
             };
         case "CHANGE_TAB": {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            const tabHistory = (_d = state.tabRequests[action.tab.name]) !== null && _d !== void 0 ? _d : {};
+            const tabHistory = (_d = state.tabRequests[action.tab.name]) !== null && _d !== void 0 ? _d : empty_object_1.EMPTY_OBJECT;
             return {
                 ...state,
-                request: action.filterBehavior === "sharedFilters"
-                    ? { ...state.request, tab: action.tab.name }
-                    : {
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        f: (_e = tabHistory.f) !== null && _e !== void 0 ? _e : [],
-                        s: (_g = (_f = tabHistory.s) !== null && _f !== void 0 ? _f : action.tab.s) !== null && _g !== void 0 ? _g : state.request.s,
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        search: (_h = tabHistory.search) !== null && _h !== void 0 ? _h : "",
+                request: {
+                    ...state.request,
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    page: (_e = tabHistory.page) !== null && _e !== void 0 ? _e : 0,
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    perPage: (_f = tabHistory.perPage) !== null && _f !== void 0 ? _f : state.request.perPage,
+                    tab: action.tab.name,
+                    // when sharedFiltersAndSearchAndSort, f, s and search is in common state.request, i.e. same like
+                    //...(action.filterBehavior === "sharedFiltersAndSearchAndSort" && {}),
+                    // sort is handled separately for each tab
+                    ...(action.filterBehavior === "sharedFiltersAndSearch" && {
+                        s: (_h = (_g = tabHistory.s) !== null && _g !== void 0 ? _g : action.tab.s) !== null && _h !== void 0 ? _h : state.request.s,
+                    }),
+                    // filter, search and sort are all handled separately for each tab
+                    ...(action.filterBehavior === "filtersPerTab" && {
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        page: (_j = tabHistory.page) !== null && _j !== void 0 ? _j : 0,
+                        f: (_j = tabHistory.f) !== null && _j !== void 0 ? _j : empty_array_1.EMPTY_ARRAY,
+                        s: (_l = (_k = tabHistory.s) !== null && _k !== void 0 ? _k : action.tab.s) !== null && _l !== void 0 ? _l : state.request.s,
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        perPage: (_k = tabHistory.perPage) !== null && _k !== void 0 ? _k : state.request.perPage,
-                        tab: action.tab.name,
-                    },
+                        search: (_m = tabHistory.search) !== null && _m !== void 0 ? _m : "",
+                    }),
+                },
                 tabRequests: {
                     ...state.tabRequests,
-                    [(_l = state.request.tab) !== null && _l !== void 0 ? _l : "__DEFAULT_TAB__"]: state.request,
+                    [(_o = state.request.tab) !== null && _o !== void 0 ? _o : "__DEFAULT_TAB__"]: state.request,
                 },
             };
         }
@@ -156,7 +166,7 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            ...(_m = state.userConfig.columns) === null || _m === void 0 ? void 0 : _m[action.name],
+                            ...(_p = state.userConfig.columns) === null || _p === void 0 ? void 0 : _p[action.name],
                             isHidden: true,
                         },
                     },
@@ -170,7 +180,7 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            ...(_o = state.userConfig.columns) === null || _o === void 0 ? void 0 : _o[action.name],
+                            ...(_q = state.userConfig.columns) === null || _q === void 0 ? void 0 : _q[action.name],
                             isHidden: false,
                         },
                     },

package/data-grid-v2.stories.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const buildArray_1 = require("@uxf/core/utils/buildArray");
-const toggle_1 = require("@uxf/ui/toggle");
+const radio_group_1 = require("@uxf/ui/radio-group");
 const react_1 = __importStar(require("react"));
 const json_renderer_1 = require("./_story-utils/json-renderer");
 const loader_1 = require("./_story-utils/loader");
@@ -67,8 +67,13 @@ const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithC
         text: { placeholder: "Custom placeholder ..." },
     },
 });
+const FILTER_BEHAVIOR_OPTIONS = [
+    { id: "filtersPerTab", label: "filterPerTab" },
+    { id: "sharedFiltersAndSearch", label: "sharedFiltersAndSearch" },
+    { id: "sharedFiltersAndSearchAndSort", label: "sharedFiltersAndSearchAndSort" },
+];
 function Default() {
-    const [hasSharedFilters, setHasSharedFilters] = (0, react_1.useState)(false);
+    const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
         initialUserConfig: {
@@ -86,7 +91,7 @@ function Default() {
         state,
     });
     return (react_1.default.createElement("div", { className: "p-10" },
-        react_1.default.createElement(toggle_1.Toggle, { label: "Has shared Filters for all Tabs", name: "hasSharedFilters", onChange: (value) => setHasSharedFilters(Boolean(value)), value: hasSharedFilters }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: hasSharedFilters ? "sharedFilters" : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/data-grid.stories.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const buildArray_1 = require("@uxf/core/utils/buildArray");
-const toggle_1 = require("@uxf/ui/toggle");
+const radio_group_1 = require("@uxf/ui/radio-group");
 const react_1 = __importStar(require("react"));
 const json_renderer_1 = require("./_story-utils/json-renderer");
 const loader_1 = require("./_story-utils/loader");
@@ -67,8 +67,13 @@ const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithC
         text: { placeholder: "Custom placeholder ..." },
     },
 });
+const FILTER_BEHAVIOR_OPTIONS = [
+    { id: "filtersPerTab", label: "filterPerTab" },
+    { id: "sharedFiltersAndSearch", label: "sharedFiltersAndSearch" },
+    { id: "sharedFiltersAndSearchAndSort", label: "sharedFiltersAndSearchAndSort" },
+];
 function Default() {
-    const [hasSharedFilters, setHasSharedFilters] = (0, react_1.useState)(false);
+    const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
         initialUserConfig: {
@@ -86,7 +91,7 @@ function Default() {
         state,
     });
     return (react_1.default.createElement("div", { className: "p-10" },
-        react_1.default.createElement(toggle_1.Toggle, { label: "Has shared Filters for all Tabs", name: "hasSharedFilters", onChange: (value) => setHasSharedFilters(Boolean(value)), value: hasSharedFilters }),
-        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: hasSharedFilters ? "sharedFilters" : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior, variant: "row" }),
+        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/fulltext-input/fulltext-input.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
-export type DataGridFulltextInputProps = DataGridControl;
+export type DataGridFulltextInputProps = DataGridControl & {
+    placeholder?: string;
+};
 export declare function DataGridFulltextInput(props: DataGridFulltextInputProps): React.JSX.Element;

package/fulltext-input/fulltext-input.js

@@ -8,5 +8,6 @@ const icon_1 = require("@uxf/ui/icon");
 const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
 function DataGridFulltextInput(props) {
-    return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-data-grid__plugin-fulltext", hiddenLabel: true, label: "Vyhled\u00E1v\u00E1n\u00ED", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), name: "fulltext", onChange: props.actions.search, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", size: "small", value: props.state.request.search }));
+    var _a;
+    return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-data-grid__plugin-fulltext", hiddenLabel: true, label: "Vyhled\u00E1v\u00E1n\u00ED", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), name: "fulltext", onChange: props.actions.search, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : "Pište pro hledání", size: "small", value: props.state.request.search }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.38.3",
+    "version": "11.39.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -33,7 +33,7 @@
     "dependencies": {
         "@uxf/core": "11.35.0",
         "@uxf/core-react": "11.38.3",
-        "@uxf/ui": "11.38.3",
+        "@uxf/ui": "11.39.0",
         "dayjs": "1.11.13",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.2",

package/toolbar-control/toolbar-control.d.ts

@@ -8,5 +8,6 @@ export interface DataGridToolbarControlProps extends DataGridControl {
     filterHandlers: FilterHandlers;
     onCsvDownload?: CsvDownloadHandler;
     isBorderHidden?: boolean | Nullish;
+    fulltextInputPlaceholder?: string;
 }
 export declare function DataGridToolbarControl(props: DataGridToolbarControlProps): React.JSX.Element;

package/toolbar-control/toolbar-control.js

@@ -14,7 +14,7 @@ const hidden_columns_button_1 = require("../hidden-columns-button");
 function DataGridToolbarControl(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
-            react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { actions: props.actions, state: props.state })),
+            react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { actions: props.actions, placeholder: props.fulltextInputPlaceholder, state: props.state })),
         (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.DataGridExportButton, { actions: props.actions, onCsvDownload: props.onCsvDownload, schema: props.schema, state: props.state })),
         react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: props.actions, schema: props.schema, state: props.state }),
         react_1.default.createElement(filters_button_1.DataGridFiltersButton, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state })));

package/types/components.d.ts

@@ -28,4 +28,4 @@ export interface FilterProps<StateValue> {
     onChange: (value: StateValue | undefined, op?: string) => void;
     onClear: () => void;
 }
-export type ChangeTabFilterBehavior = "sharedFilters" | "filtersPerTab";
+export type ChangeTabFilterBehavior = "sharedFiltersAndSearch" | "sharedFiltersAndSearchAndSort" | "filtersPerTab";