@uxf/data-grid 11.102.0 → 11.103.0

package/column-types.d.ts

@@ -1,7 +1,7 @@
 import { DateString, DatetimeString } from "@uxf/core/date";
 import { Money } from "@uxf/core/money";
 export interface ColumnTypes {
-    bool: boolean | null;
+    boolean: boolean | null;
     chip: {
         id: string | number;
         label: string;

package/components.d.ts

@@ -1,6 +1,5 @@
 import * as dataGridStories from "./data-grid.stories";
 import * as dataGridCustomExampleStories from "./data-grid-custom-example.stories";
-import * as dataGridV2Stories from "./data-grid-v2.stories";
 import * as exportButtonStories from "./export-button/export-button.stories";
 import * as filterListStories from "./filter-list/filter-list.stories";
 import * as filtersStories from "./filters/filters.stories";
@@ -25,10 +24,6 @@ export declare const components: {
         readonly title: "DataGridCustomExample";
         readonly stories: typeof dataGridCustomExampleStories;
     };
-    readonly "data-grid-v2": {
-        readonly title: "DataGridV2";
-        readonly stories: typeof dataGridV2Stories;
-    };
     readonly "export-button": {
         readonly title: "ExportButton";
         readonly stories: typeof exportButtonStories;

package/components.js

@@ -37,7 +37,6 @@ exports.components = void 0;
 // generated file
 const dataGridStories = __importStar(require("./data-grid.stories"));
 const dataGridCustomExampleStories = __importStar(require("./data-grid-custom-example.stories"));
-const dataGridV2Stories = __importStar(require("./data-grid-v2.stories"));
 const exportButtonStories = __importStar(require("./export-button/export-button.stories"));
 const filterListStories = __importStar(require("./filter-list/filter-list.stories"));
 const filtersStories = __importStar(require("./filters/filters.stories"));
@@ -62,10 +61,6 @@ exports.components = {
         title: "DataGridCustomExample",
         stories: dataGridCustomExampleStories
     },
-    "data-grid-v2": {
-        title: "DataGridV2",
-        stories: dataGridV2Stories
-    },
     "export-button": {
         title: "ExportButton",
         stories: exportButtonStories

package/data-grid.js

@@ -23,19 +23,19 @@ const toolbar_customs_1 = require("./toolbar-customs");
 const toolbar_tabs_1 = require("./toolbar-tabs");
 const DefaultSelectedRowsToolbarActions = () => null;
 function DataGrid(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
-                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
-                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, tabCounts: props.isWithTabCounts ? (_a = props.data) === null || _a === void 0 ? void 0 : _a.tabCounts : undefined, variant: props.tabsVariant }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, fulltextInputPlaceholder: props.fulltextInputPlaceholder, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
-            react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_c = props.bodyCells) !== null && _c !== void 0 ? _c : body_cell_1.BodyCells, data: (_e = (_d = props.data) === null || _d === void 0 ? void 0 : _d.result) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_c = props.filterHandlers) !== null && _c !== void 0 ? _c : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_d = props.bodyCells) !== null && _d !== void 0 ? _d : body_cell_1.BodyCells, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
-                react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_g = (_f = props.data) === null || _f === void 0 ? void 0 : _f.count) !== null && _g !== void 0 ? _g : 0, state: props.state, totalCount: (_j = (_h = props.data) === null || _h === void 0 ? void 0 : _h.totalCount) !== null && _j !== void 0 ? _j : 0 }),
-                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_l = (_k = props.data) === null || _k === void 0 ? void 0 : _k.count) !== null && _l !== void 0 ? _l : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
-        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_m = props.SelectedRowsToolbarActions) !== null && _m !== void 0 ? _m : DefaultSelectedRowsToolbarActions, actions: props.actions, reload: props.reload, state: props.state })));
+                react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, state: props.state, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),
+                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions, actions: props.actions, reload: props.reload, state: props.state })));
 }

package/package.json

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

package/types/data-grid-props.d.ts

@@ -26,6 +26,8 @@ export type DataGridBaseProps<GridType extends BaseGridType> = {
     className?: string;
     customActions?: DataGridToolbarCustomsProps["buttons"];
     filterHandlers?: FilterHandlers;
+    fulltextInputPlaceholder?: string;
+    isWithTabCounts?: boolean;
     getCsvDownloadUrl?: CsvDownloadGetUrl;
     gridName?: string;
     headerRowHeight?: number;

package/data-grid-v2.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { BaseGridType, DataGridProps } from "./types";
-export declare function DataGridV2<GridType extends BaseGridType>(props: DataGridProps<GridType>): React.JSX.Element;

package/data-grid-v2.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridV2 = DataGridV2;
-const empty_array_1 = require("@uxf/core/constants/empty-array");
-const react_1 = __importDefault(require("react"));
-const body_cell_1 = require("./body-cell");
-const filter_handler_1 = require("./filter-handler");
-const filter_list_1 = require("./filter-list");
-const footer_1 = require("./footer");
-const linear_progress_1 = require("./linear-progress");
-const pagination_1 = require("./pagination");
-const root_1 = require("./root");
-const row_counts_1 = require("./row-counts");
-const rows_per_page_select_1 = require("./rows-per-page-select");
-const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
-const table_v2_1 = require("./table-v2");
-const toolbar_1 = require("./toolbar");
-const toolbar_control_1 = require("./toolbar-control");
-const toolbar_customs_1 = require("./toolbar-customs");
-const toolbar_tabs_1 = require("./toolbar-tabs");
-const DefaultSelectedRowsToolbarActions = () => null;
-// TODO remove (DataGrid is now identical with DataGridV2)
-function DataGridV2(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
-            react_1.default.createElement(toolbar_1.DataGridToolbar, null,
-                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
-                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { HiddenColumnsComponent: props.HiddenColumnsComponent, actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
-                react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
-            react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
-            react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_c = props.bodyCells) !== null && _c !== void 0 ? _c : body_cell_1.BodyCells, data: (_e = (_d = props.data) === null || _d === void 0 ? void 0 : _d.result) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
-            react_1.default.createElement(footer_1.DataGridFooter, null,
-                react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
-                react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_g = (_f = props.data) === null || _f === void 0 ? void 0 : _f.count) !== null && _g !== void 0 ? _g : 0, state: props.state, totalCount: (_j = (_h = props.data) === null || _h === void 0 ? void 0 : _h.totalCount) !== null && _j !== void 0 ? _j : 0 }),
-                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_l = (_k = props.data) === null || _k === void 0 ? void 0 : _k.count) !== null && _l !== void 0 ? _l : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
-        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_m = props.SelectedRowsToolbarActions) !== null && _m !== void 0 ? _m : DefaultSelectedRowsToolbarActions, actions: props.actions, reload: props.reload, state: props.state })));
-}

package/data-grid-v2.stories.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;

package/data-grid-v2.stories.js

@@ -1,117 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
-const build_array_1 = require("@uxf/core/utils/build-array");
-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");
-const schema_1 = require("./_story-utils/schema");
-const data_grid_v2_1 = require("./data-grid-v2");
-const hidden_columns_1 = require("./hidden-columns");
-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,
-    Component: () => {
-        const actionCellActions = (0, build_array_1.buildArray)()
-            .add({
-            icon: "arrow-right",
-            isIconButton: true,
-            href: "https://www.uxf.cz",
-            target: "_blank",
-        })
-            .add({
-            icon: "file",
-            label: "Download",
-            onClick: console.log,
-        })
-            .add({
-            icon: "cloud",
-            label: "Reload",
-            onClick: console.log,
-        });
-        return react_1.default.createElement(action_cell_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
-    },
-};
-const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, {
-    perPage: 100,
-    columns: {
-        text: { width: 200 },
-        tel: { minWidth: 160, width: 400 },
-        mail: { minWidth: 200 },
-        bool: { width: 120 },
-        chips: { minWidth: 200 },
-        toMany: { minWidth: 200 },
-        money: { width: "2fr" },
-    },
-    filters: {
-        text: { placeholder: "Custom placeholder ..." },
-    },
-});
-const FILTER_BEHAVIOR_OPTIONS = [
-    { id: "filtersPerTab", label: "filterPerTab" },
-    { id: "sharedFiltersAndSearch", label: "sharedFiltersAndSearch" },
-    { id: "sharedFiltersAndSearchAndSort", label: "sharedFiltersAndSearchAndSort" },
-];
-const HIDDEN_COLUMNS_SORTABLE_OPTIONS = [
-    { id: "default", label: "Vypnuto" },
-    { id: "sortable", label: "Zapnuto" },
-];
-function Default() {
-    const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
-    const [hiddenColumnsBehavior, setHiddenColumnsBehavior] = (0, react_1.useState)("default");
-    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,
-    });
-    useUserConfig(actions);
-    const { isLoading, error, data, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
-        loader: loader_1.loader,
-        schema: schema_1.schema,
-        state,
-    });
-    const clearLocalStorageUserConfig = (0, local_storage_1.useClearLocalStorageUserConfig)(schema_1.schema);
-    return (react_1.default.createElement("div", { className: "p-10" },
-        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(radio_group_1.RadioGroup, { className: "mb-2 mt-4", label: "\u0158azen\u00ED sloupc\u016F (Drag&Drop)", name: "hiddenColumnsSortable", onChange: (value) => setHiddenColumnsBehavior(value), options: HIDDEN_COLUMNS_SORTABLE_OPTIONS, value: hiddenColumnsBehavior, variant: "row" }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { HiddenColumnsComponent: hiddenColumnsBehavior === "sortable" ? hidden_columns_1.DataGridHiddenColumnsSortable : undefined, actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", customActions: [{ onClick: clearLocalStorageUserConfig, label: "Smazat user config" }], data: data, error: error, getCsvDownloadUrl: () => ``, isLoading: isLoading, isRowSelectDisabled: (row) => row.id === 6, isRowsSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state, tabsVariant: "segmented" }),
-        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
-}