@uxf/data-grid 10.0.0-beta.21 → 10.0.0-beta.23

package/data-grid.js

@@ -121,7 +121,7 @@ const DataGrid = (props) => {
         react_1.default.createElement(Container, { noBorder: props.noBorder, className: props.className },
             react_1.default.createElement(Toolbar, { noBorder: props.noBorder },
                 react_1.default.createElement(ToolbarTabs, { activeTab: state.request.tab, onChange: (tab) => dispatch(actions_1.dataGridActions.changeTab(tab)), schema: props.schema }),
-                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, filtersData: state.request.f, fulltextValue: state.request.search, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText }),
+                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText, hiddenColumns: props.hiddenColumns, onChangeHiddenColumns: props.onChangeHiddenColumns, onCsvDownload: props.onCsvDownload, state: state }),
                 react_1.default.createElement(ToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(LinearProgress, { loading: !!state.loading }),
             react_1.default.createElement(FilterList, { gridName: props.gridName, onFilter: onFilter, filters: props.schema.filters, filtersData: state.request.f, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder }),

package/data-grid.stories.js

@@ -223,12 +223,16 @@ const loader = async (_, request) => {
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };
+const onCsvDownload = (request) => {
+    // eslint-disable-next-line no-console
+    console.log(request);
+};
 function Default() {
     const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)([]);
     const [selectedRows, setSelectedRows] = (0, react_1.useState)(new Set());
     const callbackRef = (0, _1.useCallbackRef)();
     return (react_1.default.createElement("div", { className: "min-h-screen bg-gray-50 p-4 dark:bg-gray-950" },
-        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", defaultConfig: {
+        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", onCsvDownload: onCsvDownload, defaultConfig: {
                 columns: {
                     id: { width: 50, hidden: true },
                     text: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "10.0.0-beta.21",
+  "version": "10.0.0-beta.23",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -30,7 +30,7 @@
     "node": ">=8.9"
   },
   "peerDependencies": {
-    "@uxf/ui": "10.0.0-beta.21",
+    "@uxf/ui": "10.0.0-beta.22",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "dayjs": "^1.11.7"

package/tailwindui/components/toolbar-control.js

@@ -32,6 +32,7 @@ const drawer_1 = require("./drawer");
 const toggle_1 = require("@uxf/ui/toggle");
 const actions_1 = require("../../store/actions");
 const show_1 = require("../show");
+const utils_1 = require("../../utils");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         var _a, _b;
@@ -47,21 +48,37 @@ function Filters(props) {
     })));
 }
 function Columns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: true, onChange: () => null })))));
+    const onHideColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), columnName]);
+    };
+    const onShowColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : [])].filter((v) => v !== columnName));
+    };
+    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 : "", value: !((_a = props.hiddenColumns) === null || _a === void 0 ? void 0 : _a.includes(column.name)), onChange: (value) => (value ? onShowColumn(column.name) : onHideColumn(column.name)) }));
+    })));
 }
 const ToolbarControl = (props) => {
     const [isFiltersOpen, setFiltersOpen] = (0, react_1.useState)(false);
     const [isColumnsOpen, setColumnsOpen] = (0, react_1.useState)(false);
+    const fulltextValue = props.state.request.search;
+    const filtersData = props.state.request.f;
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(show_1.Show, { when: props.showFulltext },
-            react_1.default.createElement(text_input_1.TextInput, { value: props.fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }) })),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-filter" },
+            react_1.default.createElement(text_input_1.TextInput, { value: fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }) })),
+        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
             react_1.default.createElement(icon_1.Icon, { name: "filter" })),
         react_1.default.createElement(show_1.Show, { when: props.onChangeHiddenColumns && props.hiddenColumns },
-            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F" },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
                 react_1.default.createElement(icon_1.Icon, { name: "table-columns" }))),
+        react_1.default.createElement(show_1.Show, { when: props.onCsvDownload },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onCsvDownload) === null || _a === void 0 ? void 0 : _a.call(props, (0, utils_1.createRequest)(props.state, props.schema.sort, props.schema.dir)); }, title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" }))),
         react_1.default.createElement(drawer_1.Drawer, { open: isFiltersOpen, onClose: () => setFiltersOpen(false), title: "Filtry" },
-            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: props.filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
+            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
         react_1.default.createElement(drawer_1.Drawer, { open: isColumnsOpen, onClose: () => setColumnsOpen(false), title: "Nastaven\u00ED sloupc\u016F" },
             react_1.default.createElement(Columns, { schema: props.schema, onChangeHiddenColumns: props.onChangeHiddenColumns, hiddenColumns: props.hiddenColumns }))));
 };

package/tailwindui/styles.css

@@ -144,7 +144,7 @@
         }
     }
 
-    &__plugin-filter {
+    &__plugin-button {
         @apply my-2 shrink-0;
 
         .uxf-icon {

package/types/components.d.ts

@@ -3,7 +3,8 @@ import { BaseGridType, Columns, Filter, Filters, Schema } from "./schema";
 import { RequestFilter, Response } from "./api";
 import { PaginationProps } from "@uxf/ui/pagination/pagination";
 import { CheckboxFormatterProps } from "react-data-grid";
-import { ChangeHiddenColumnsHandler } from "./core";
+import { ChangeHiddenColumnsHandler, CsvDownloadHandler } from "./core";
+import { DataGridState } from "./state";
 /**
  * Action cell
  */
@@ -152,14 +153,14 @@ export interface ToolbarControlProps {
     gridName: string | undefined;
     schema: Schema<any>;
     dispatch: (action: any) => void;
-    filtersData: RequestFilter[];
     filterHandlers: FilterHandlers;
-    fulltextValue: string;
     onFulltextChange: (value: string) => void;
     noBorder: boolean | null | undefined;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     showFulltext?: boolean;
+    state: DataGridState;
 }
 export type ToolbarControlComponent = React.FC<ToolbarControlProps>;
 /**

package/types/core.d.ts

@@ -2,6 +2,7 @@ import { Request, Response, ResultItem } from "./api";
 import { BaseGridType } from "./schema";
 export type KeyExtractor = (row: ResultItem) => number;
 export type ChangeHiddenColumnsHandler = (hiddenColumns: string[]) => void;
+export type CsvDownloadHandler = (request: Request) => void;
 export type Loader = (gridName: string | undefined, request: Request, encodedRequest: string) => Promise<Response>;
 export type CallbackRef = {
     reload: () => Promise<void>;

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

@@ -4,7 +4,7 @@ import { Request } from "./api";
 import { DataGridProps as RDGProps } from "react-data-grid";
 import { ToolbarCustomsProps } from "./components";
 import { UIComponents } from "./ui-components";
-import { CallbackRef, ChangeHiddenColumnsHandler, Config, KeyExtractor, Loader } from "./core";
+import { CallbackRef, ChangeHiddenColumnsHandler, Config, CsvDownloadHandler, KeyExtractor, Loader } from "./core";
 export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     callbackRef?: MutableRefObject<CallbackRef | undefined>;
     schema: Schema<GridType>;
@@ -14,6 +14,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     keyExtractor?: KeyExtractor;
     initialState?: Request | string;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     onChangeSelectedRows?: (selectedRows: Set<number>) => void;
     selectedRows?: Set<number>;