@uxf/data-grid 10.0.7 → 11.0.0-beta.1

package/data-grid.stories.js

@@ -24,223 +24,21 @@ 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 toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importStar(require("react"));
-const _1 = require("./");
-const tailwindui_1 = require("./tailwindui");
-exports.default = {
-    title: "DataGrid/Tailwind",
-    component: tailwindui_1.DataGrid,
-};
-const schema = {
-    columns: [
-        { name: "id", type: "number", label: "Id", sort: true },
-        { name: "text", type: "string", label: "Text", sort: true },
-        { name: "bool", type: "boolean", label: "Boolean" },
-        { name: "mail", type: "email", label: "E-mail" },
-        { name: "tel", type: "phone", label: "Phone" },
-        { name: "link", type: "url", label: "Link" },
-        { name: "day", type: "date", label: "Date" },
-        { name: "dayAndTime", type: "datetime", label: "Datetime" },
-    ],
-    filters: [
-        { name: "text", type: "text", label: "Text" },
-        { name: "bool", type: "boolean", label: "Boolean" },
-        { name: "ival", type: "interval", label: "Super interval" },
-        { name: "mail", type: "string", label: "E-mail" },
-        { name: "tel", type: "string", label: "Phone" },
-        { name: "link", type: "string", label: "Link" },
-        {
-            name: "sele",
-            type: "select",
-            label: "Select",
-            options: [
-                { id: "", label: "" },
-                { id: 1, label: "A" },
-                { id: 2, label: "B" },
-            ],
-        },
-        {
-            name: "seleBool",
-            type: "select",
-            label: "Select Boolean",
-            options: [
-                { id: "", label: "" },
-                { id: 1, label: "Ano" },
-                { id: 0, label: "Ne" },
-            ],
-        },
-    ],
-    tabs: [
-        { name: "all", label: "All" },
-        { name: "only-odd-ids", label: "Only odd ids blablabla" },
-        // { name: "only-odd-ids", label: "Only odd ids" },
-    ],
-    dir: _1.DataGridSortDir.Asc,
-    sort: "id",
-    perPage: 10,
-    fullText: true,
-};
-const data = [
-    {
-        id: 1,
-        text: "Red",
-        bool: undefined,
-        tel: null,
-        mail: "dev@uxf.cz",
-        link: null,
-        day: "1998-09-15",
-        dayAndTime: null,
-    },
-    {
-        id: 2,
-        text: "Blue",
-        bool: null,
-        tel: undefined,
-        mail: "dev@uxf.cz",
-        link: undefined,
-        day: "2023-01-05",
-        dayAndTime: null,
-    },
-    {
-        id: 3,
-        text: "Green",
-        bool: true,
-        tel: "777888999",
-        mail: undefined,
-        link: null,
-        day: "1998-09-15",
-        dayAndTime: undefined,
-    },
-    {
-        id: 4,
-        text: "Gray",
-        bool: false,
-        tel: "555777888",
-        mail: "dev@uxf.cz",
-        link: "https://www.uxf.cz",
-        day: "2023-01-05",
-        dayAndTime: undefined,
-    },
-    {
-        id: 5,
-        text: "Pink",
-        bool: false,
-        tel: "45654412",
-        mail: undefined,
-        link: undefined,
-        day: "2023-01-05",
-        dayAndTime: "2000-10-31T01:30:00.000-05:00",
-    },
-    {
-        id: 6,
-        text: "Yellow",
-        bool: false,
-        tel: null,
-        mail: "root@uxf.cz",
-        link: "https://www.uxf.cz",
-        day: undefined,
-        dayAndTime: "2000-10-31T01:30:00.000-05:00",
-    },
-    {
-        id: 7,
-        text: "Black",
-        bool: true,
-        tel: null,
-        mail: "dev@uxf.cz",
-        link: null,
-        day: "1998-09-15",
-        dayAndTime: "2012-08-10T00:00:00.000-13:00",
-    },
-    {
-        id: 8,
-        text: "White",
-        bool: false,
-        tel: undefined,
-        mail: null,
-        link: "https://www.uxf.cz",
-        day: undefined,
-        dayAndTime: "2000-10-31T01:30:00.000-05:00",
-    },
-    {
-        id: 9,
-        text: "Liberty",
-        bool: false,
-        tel: "999888777",
-        mail: "dev@uxf.cz",
-        link: "https://google.com",
-        day: null,
-        dayAndTime: "2012-08-10T00:00:00.000-13:00",
-    },
-    {
-        id: 10,
-        text: "Blue",
-        bool: false,
-        tel: "777888999",
-        mail: "root@uxf.cz",
-        link: "https://google.com",
-        day: null,
-        dayAndTime: "2012-08-10T00:00:00.000-13:00",
-    },
-    {
-        id: 11,
-        text: "Purple",
-        bool: false,
-        tel: "777888999",
-        mail: null,
-        link: "https://google.com",
-        day: null,
-        dayAndTime: "2000-12-31T01:00:00.000-07:30",
-    },
-];
-const loader = async (_, request) => {
-    const { page = 1, perPage = 10, tab, sort, dir, f } = request;
-    // eslint-disable-next-line no-console
-    console.log("filter", f === null || f === void 0 ? void 0 : f.length);
-    const filteredData = data
-        .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
-        .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
-        .sort((a, b) => {
-        if (!sort || !dir) {
-            return 1;
-        }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const first = a[sort];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const second = b[sort];
-        if (typeof first === "number") {
-            return dir === "asc" ? first - second : second - first;
-        }
-        return dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
-    });
-    // eslint-disable-next-line no-console
-    console.log("loader", request);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    return {
-        count: filteredData.length,
-        totalCount: filteredData.length,
-        result: filteredData.slice(page * perPage, page * perPage + perPage),
-    };
-};
-const onCsvDownload = (request) => {
-    // eslint-disable-next-line no-console
-    console.log(request);
-};
+const loader_1 = require("./_story-utils/loader");
+const schema_1 = require("./_story-utils/schema");
+const data_grid_1 = require("./data-grid");
+const use_data_grid_control_1 = require("./use-data-grid-control");
+const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
 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: (row, reload) => {
-                console.log(row, reload);
-                reload();
-            }, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", onCsvDownload: onCsvDownload, defaultConfig: {
-                columns: {
-                    id: { width: 50, hidden: true },
-                    text: {},
-                    bool: { width: 50 },
-                },
-            }, debug: true })));
+    const [noBorder, setNoBorder] = (0, react_1.useState)(false);
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)(schema_1.schema);
+    const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)(loader_1.loader, schema_1.schema, "grid-name", state);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value) }),
+        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, onRemove: console.log, getOpenUrl: () => "https://www.uxf.cz", getEditUrl: () => "https://www.uxf.cz" }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/export-button/export-button.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CsvDownloadHandler } from "../types/core";
+import { Schema } from "../types/schema";
+import { DataGridControl } from "../use-data-grid-control";
+interface ExportButtonProps extends DataGridControl {
+    onCsvDownload: CsvDownloadHandler;
+    schema: Schema<any>;
+}
+export declare function ExportButton(props: ExportButtonProps): React.JSX.Element;
+export {};

package/export-button/export-button.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportButton = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+function ExportButton(props) {
+    return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request, 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" })));
+}
+exports.ExportButton = ExportButton;

package/export-button/export-button.stories.d.ts

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

package/export-button/export-button.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
+const react_1 = __importDefault(require("react"));
+const schema_1 = require("../_story-utils/schema");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const export_button_1 = require("./export-button");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)(schema_1.schema, null, true);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(export_button_1.ExportButton, { state: state, actions: actions, schema: schema_1.schema, onCsvDownload: console.log }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/export-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./export-button";

package/{tailwindui → export-button}/index.js

@@ -14,6 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/action-cell-base"), exports);
-__exportStar(require("./data-grid"), exports);
-__exportStar(require("./ui"), exports);
+__exportStar(require("./export-button"), exports);

package/{tailwindui/filter-handler → filter-handler}/bool-filter.d.ts

@@ -1,3 +1,3 @@
-import { FilterHandler } from "../../types";
+import { FilterHandler } from "./types";
 declare const BoolFilterHandler: FilterHandler;
 export default BoolFilterHandler;

package/{tailwindui/filter-handler → filter-handler}/boolean-filter.d.ts

@@ -1,3 +1,3 @@
-import { FilterHandler } from "../../types";
+import { FilterHandler } from "./types";
 declare const BooleanFilterHandler: FilterHandler;
 export default BooleanFilterHandler;

package/filter-handler/index.d.ts

@@ -0,0 +1,4 @@
+import { FilterHandler } from "./types";
+export * from "./types";
+export type FilterHandlers = Record<string, FilterHandler>;
+export declare const defaultFilterHandlers: FilterHandlers;

package/{tailwindui/filter-handler → filter-handler}/index.js

@@ -1,4 +1,18 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,6 +23,7 @@ const boolean_filter_1 = __importDefault(require("./boolean-filter"));
 const interval_filter_1 = __importDefault(require("./interval-filter"));
 const select_filter_1 = __importDefault(require("./select-filter"));
 const text_filter_1 = __importDefault(require("./text-filter"));
+__exportStar(require("./types"), exports);
 exports.defaultFilterHandlers = {
     text: text_filter_1.default,
     string: text_filter_1.default,

package/{tailwindui/filter-handler → filter-handler}/interval-filter.d.ts

@@ -1,3 +1,3 @@
-import { FilterHandler } from "../../types";
+import { FilterHandler } from "./types";
 declare const IntervalFilterHandler: FilterHandler;
 export default IntervalFilterHandler;

package/{tailwindui/filter-handler → filter-handler}/interval-filter.js

@@ -15,7 +15,7 @@ const IntervalFilterHandler = {
             : { name: props.filter.name, value: { from: null, to: null } };
         return (react_1.default.createElement("div", { key: props.filter.name },
             react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--interval" },
-                react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} od:`, value: props.value.value ? props.value.value.from : null, onChange: (val) => {
+                react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} od:`, value: props.value.value ? props.value.value.from : "", onChange: (val) => {
                         return props.onFilter({
                             ...initializedValue,
                             value: {
@@ -25,7 +25,7 @@ const IntervalFilterHandler = {
                         });
                     } }),
                 react_1.default.createElement("div", { className: "uxf-data-grid__filter-gap" }, "\u2013"),
-                react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} do:`, value: props.value.value ? props.value.value.to : null, onChange: (val) => {
+                react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} do:`, value: props.value.value ? props.value.value.to : "", onChange: (val) => {
                         return props.onFilter({
                             ...initializedValue,
                             value: {

package/{tailwindui/filter-handler → filter-handler}/select-filter.d.ts

@@ -1,3 +1,3 @@
-import { FilterHandler } from "../../types";
+import { FilterHandler } from "./types";
 declare const SelectFilterHandler: FilterHandler;
 export default SelectFilterHandler;

package/{tailwindui/filter-handler → filter-handler}/text-filter.d.ts

@@ -1,3 +1,3 @@
-import { FilterHandler } from "../../types";
+import { FilterHandler } from "./types";
 declare const TextFilterHandler: FilterHandler;
 export default TextFilterHandler;

package/filter-handler/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from "react";
+import { FilterProps } from "../types/components";
+import { BaseGridType, Filters } from "../types/schema";
+export type FilterComponent<F extends BaseGridType["filters"], T = any> = ComponentType<FilterProps<Filters<F>, T>>;
+export interface FilterHandler {
+    input: FilterComponent<any>;
+    listItem: FilterComponent<any>;
+}

package/filter-handler/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/filter-list/filter-list.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FilterHandlers } from "../filter-handler";
+import { Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+export interface FilterListProps extends DataGridControl {
+    gridName?: string;
+    filterHandlers: FilterHandlers;
+    className?: string;
+    schema: Schema<any>;
+}
+export declare function FilterList(props: FilterListProps): React.JSX.Element | null;

package/{tailwindui/components → filter-list}/filter-list.js

@@ -4,15 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterList = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
-const FilterList = (props) => {
-    const renderedFilters = props.filtersData
+function FilterList(props) {
+    const renderedFilters = props.state.request.f
         .map((filterRequest) => {
         var _a;
         if (typeof filterRequest.value !== "number" && !filterRequest.value) {
             return null;
         }
-        const filter = props.filters.find((f) => f.name === filterRequest.name);
+        const filter = props.schema.filters.find((f) => f.name === filterRequest.name);
         if (!filter) {
             return null;
         }
@@ -22,12 +23,12 @@ const FilterList = (props) => {
         if (!FilterListItem) {
             return null;
         }
-        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, filter: filter, onFilter: props.onFilter, gridName: props.gridName, value: filterRequest, onClear: () => props.onFilter({ name: filter.name, value: null }) }));
+        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, filter: filter, onFilter: props.actions.filter, gridName: props.gridName, value: filterRequest, onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
     })
         .filter((item) => !!item);
     if (renderedFilters.length === 0) {
         return null;
     }
-    return react_1.default.createElement("div", { className: "uxf-data-grid__filter-list" }, renderedFilters);
-};
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__filter-list", props.className) }, renderedFilters);
+}
 exports.FilterList = FilterList;

package/filter-list/filter-list.stories.d.ts

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

package/filter-list/filter-list.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
+const react_1 = __importDefault(require("react"));
+const schema_1 = require("../_story-utils/schema");
+const filter_handler_1 = require("../filter-handler");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const filter_list_1 = require("./filter-list");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)(schema_1.schema, null, true);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(filter_list_1.FilterList, { state: state, actions: actions, schema: schema_1.schema, gridName: "grid-name", filterHandlers: filter_handler_1.defaultFilterHandlers }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/filter-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./filter-list";

package/filter-list/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./filter-list"), exports);

package/filters/filters.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FilterHandlers } from "../filter-handler";
+import { Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+interface FiltersProps extends DataGridControl {
+    gridName: string | undefined;
+    schema: Schema<any>;
+    filterHandlers: FilterHandlers;
+}
+export declare function Filters(props: FiltersProps): React.JSX.Element;
+export {};

package/filters/filters.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = void 0;
+const react_1 = __importDefault(require("react"));
+function Filters(props) {
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
+        var _a, _b;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const FilterInput = (_a = props.filterHandlers[filter.type]) === null || _a === void 0 ? void 0 : _a.input;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!FilterInput) {
+            // eslint-disable-next-line no-console
+            console.warn(`Unknown filter "${filter.type}".`);
+            return null;
+        }
+        return (react_1.default.createElement(FilterInput, { key: filter.name, gridName: props.gridName, filter: filter, value: (_b = props.state.request.f.find((f) => f.name === filter.name)) !== null && _b !== void 0 ? _b : {
+                name: filter.name,
+                value: null,
+            }, onFilter: (requestFilter) => props.actions.filter(requestFilter), onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
+    })));
+}
+exports.Filters = Filters;

package/filters/filters.stories.d.ts

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

package/filters/filters.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
+const react_1 = __importDefault(require("react"));
+const schema_1 = require("../_story-utils/schema");
+const filter_handler_1 = require("../filter-handler");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const filters_1 = require("./filters");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)(schema_1.schema, null, true);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(filters_1.Filters, { state: state, actions: actions, schema: schema_1.schema, gridName: "grid-name", filterHandlers: filter_handler_1.defaultFilterHandlers }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/filters/index.d.ts

@@ -0,0 +1 @@
+export * from "./filters";

package/filters/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./filters"), exports);

package/filters-button/filters-button.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FilterHandlers } from "../filter-handler";
+import { Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+interface FiltersButtonProps extends DataGridControl {
+    gridName: string | undefined;
+    schema: Schema<any>;
+    filterHandlers: FilterHandlers;
+}
+export declare function FiltersButton(props: FiltersButtonProps): React.JSX.Element | null;
+export {};

package/{tailwindui/show.js → filters-button/filters-button.js}

@@ -23,12 +23,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Show = void 0;
+exports.FiltersButton = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
-const Show = (props) => {
-    if (!props.when) {
+const drawer_1 = require("../_components/drawer");
+const filters_1 = require("../filters");
+function FiltersButton(props) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    if (props.schema.filters.length === 0) {
         return null;
     }
-    return react_1.default.createElement(react_1.Fragment, null, props.children);
-};
-exports.Show = Show;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setIsOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
+            react_1.default.createElement(icon_1.Icon, { name: "filter" })),
+        react_1.default.createElement(drawer_1.Drawer, { open: isOpen, onClose: () => setIsOpen(false) },
+            react_1.default.createElement(filters_1.Filters, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers }))));
+}
+exports.FiltersButton = FiltersButton;

package/filters-button/filters-button.stories.d.ts

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