@uxf/data-grid 11.38.1 → 11.38.2

package/components.d.ts

@@ -1,5 +1,6 @@
 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,6 +26,10 @@ 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

@@ -27,6 +27,7 @@ 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"));
@@ -52,6 +53,10 @@ exports.components = {
         title: "DataGridCustomExample",
         stories: dataGridCustomExampleStories
     },
+    "data-grid-v2": {
+        title: "DataGridV2",
+        stories: dataGridV2Stories
+    },
     "export-button": {
         title: "ExportButton",
         stories: exportButtonStories

package/data-grid-v2.d.ts

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

package/data-grid-v2.js

@@ -0,0 +1,42 @@
+"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 no_rows_fallback_1 = require("./table/no-rows-fallback");
+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;
+function DataGridV2(props) {
+    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 }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, onCsvDownload: props.onCsvDownload, 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: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.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, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, 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: (_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, state: props.state })));
+}

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

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

package/data-grid-v2.stories.js

@@ -0,0 +1,92 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 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 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 merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
+const actionCell = {
+    width: 92,
+    Component: () => {
+        const actionCellActions = (0, buildArray_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: {
+        bool: { width: 80 },
+    },
+    filters: {
+        text: { placeholder: "Custom placeholder ..." },
+    },
+});
+function Default() {
+    const [hasSharedFilters, setHasSharedFilters] = (0, react_1.useState)(false);
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
+        schema: schema_1.schema,
+        initialUserConfig: {
+            columns: {
+                id: { width: 100 },
+                text: { minWidth: 300 },
+                mail: { minWidth: 300 },
+                tel: { minWidth: 300 },
+            },
+        },
+    });
+    const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
+        loader: loader_1.loader,
+        schema: schema_1.schema,
+        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(json_renderer_1.JsonRenderer, { value: state })));
+}

package/data-grid.js

@@ -16,7 +16,7 @@ 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 table_1 = require("./table");
 const no_rows_fallback_1 = require("./table/no-rows-fallback");
 const toolbar_1 = require("./toolbar");
 const toolbar_control_1 = require("./toolbar-control");
@@ -33,7 +33,7 @@ function DataGrid(props) {
                 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: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.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, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_1.DataGridTable, { NoRowsFallback: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.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, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, 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: (_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 }),

package/package.json

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

package/styles.css

@@ -32,7 +32,6 @@
 }
 
 .uxf-data-grid {
-    border: 1px solid var(--rdg-border-color);
     border-radius: theme("borderRadius.DEFAULT");
 
     &__action-cell {
@@ -287,6 +286,7 @@
     }
 
     &__table {
+        border: 1px solid var(--rdg-border-color);
         margin-top: 1px;
 
         &::-webkit-scrollbar {

package/table/table.js

@@ -50,7 +50,6 @@ function DataGridTable(props) {
         ? props.data.reduce((prev, curr) => prev + rowHeight(curr))
         : (rowHeight + 1) * props.data.length;
     const reactDataGridStyles = {
-        border: 0,
         borderRadius: 4,
         height: contentHeight + headerRowHeight + (props.data.length === 0 ? 44 : 0) + 4,
         overflowY: "hidden",

package/table-v2/components/action-cell.d.ts

@@ -1,2 +1,7 @@
-import React, { PropsWithChildren } from "react";
-export declare function ActionCell(props: PropsWithChildren): React.JSX.Element;
+import { ButtonListProps } from "@uxf/ui/button-list";
+import React from "react";
+export interface ActionCellProps {
+    buttons: ButtonListProps["buttons"];
+    visibleButtonsCount: ButtonListProps["visibleButtonsCount"];
+}
+export declare function ActionCell(props: ActionCellProps): React.JSX.Element;

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

@@ -4,7 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCell = ActionCell;
+const button_list_1 = require("@uxf/ui/button-list");
 const react_1 = __importDefault(require("react"));
 function ActionCell(props) {
-    return react_1.default.createElement("div", { className: "uxf-dg-table__action-cell" }, props.children);
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__action-cell" },
+        react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, size: "sm", variant: "secondary", visibleButtonsCount: props.visibleButtonsCount })));
 }

package/table-v2/styles.css

@@ -48,10 +48,33 @@
         }
     }
 
-    /* TODO tohle by asi nemělo mít classu uxf-data-grid */
-    .uxf-data-grid__action-cell-wrapper {
+    &__action-cell {
+        align-items: center;
+        background-color: var(--uxf-dg-table-action-cell-bg-color);
+        border-left: var(--uxf-dg-table-action-cell-left-divider-size) solid
+            var(--uxf-dg-table-action-cell-left-divider-color);
+        border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
+        display: flex;
+        height: 100%;
         justify-content: flex-end;
         padding: 0 theme("spacing.2");
+        position: sticky;
+        right: 0;
+        text-align: center;
+        width: 100%;
+
+        &--header {
+            background-color: var(--uxf-dg-table-header-action-cell-bg-color);
+            z-index: 2;
+        }
+
+        .uxf-icon {
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
+        }
     }
 
     &__row {
@@ -104,11 +127,12 @@
 
             &.is-sortable {
                 cursor: pointer;
+                gap: 4px;
             }
 
             .uxf-icon {
                 margin-left: auto;
-                width: 12px;
+                width: 8px;
             }
         }
 
@@ -142,20 +166,6 @@
         }
     }
 
-    &__action-cell {
-        background-color: var(--uxf-dg-table-action-cell-bg-color);
-        border-left: var(--uxf-dg-table-action-cell-left-divider-size) solid
-            var(--uxf-dg-table-action-cell-left-divider-color);
-        border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
-        position: sticky;
-        right: 0;
-
-        &--header {
-            background-color: var(--uxf-dg-table-header-action-cell-bg-color);
-            z-index: 2;
-        }
-    }
-
     &__column-resize-handle {
         bottom: 0;
         cursor: col-resize;

package/table-v2/table-v2.js

@@ -68,6 +68,5 @@ function DataGridTableV2(props) {
                 return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
                     react_1.default.createElement(BodyCell, { column: column, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row, value: row[column.name] })));
             }),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCell, null,
-                react_1.default.createElement(props.actionCell.Component, { reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row })))))))));
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(props.actionCell.Component, { reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row }))))))));
 }