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

package/{tailwindui/components/select-row-checkbox.js → selected-rows-toolbar/selected-rows-toolbar.stories.js}

@@ -23,18 +23,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectRowCheckbox = void 0;
-const checkbox_1 = require("@uxf/ui/checkbox");
+exports.Default = void 0;
+const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
 const react_1 = __importStar(require("react"));
-const SelectRowComponent = (props) => {
-    var _a;
-    const handleChange = (value, e) => {
-        if (typeof value !== "undefined") {
-            const shiftKey = (e === null || e === void 0 ? void 0 : e.nativeEvent) && e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false;
-            props.onChange(value, shiftKey);
-        }
-    };
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__select-row-checkbox-wrapper" },
-        react_1.default.createElement(checkbox_1.Checkbox, { ...props, value: (_a = props.checked) !== null && _a !== void 0 ? _a : false, onChange: handleChange })));
-};
-exports.SelectRowCheckbox = (0, react_1.forwardRef)(SelectRowComponent);
+const schema_1 = require("../_story-utils/schema");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    (0, react_1.useEffect)(() => {
+        actions.setSelectedRows([{ id: 1 }, { id: 2 }]);
+    }, [actions]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: state, actions: actions }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/table/components/select-row-checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { RenderCheckboxProps } from "react-data-grid";
+export declare function SelectRowCheckbox(props: RenderCheckboxProps): React.JSX.Element;

package/table/components/select-row-checkbox.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectRowCheckbox = void 0;
+const checkbox_1 = require("@uxf/ui/checkbox");
+const react_1 = __importDefault(require("react"));
+function SelectRowCheckbox(props) {
+    var _a;
+    const handleChange = (value, e) => {
+        if (typeof value !== "undefined") {
+            const shiftKey = (e === null || e === void 0 ? void 0 : e.nativeEvent) && e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false;
+            props.onChange(value, shiftKey);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__select-row-checkbox-wrapper" },
+        react_1.default.createElement(checkbox_1.Checkbox, { ...props, value: (_a = props.checked) !== null && _a !== void 0 ? _a : false, onChange: handleChange })));
+}
+exports.SelectRowCheckbox = SelectRowCheckbox;

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -0,0 +1,3 @@
+import { Column } from "react-data-grid";
+import { TableProps } from "../types";
+export declare function useReactDataGridColumns(props: TableProps<any>): Column<any>[];

package/table/hooks/use-react-data-grid-columns.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.useReactDataGridColumns = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const react_data_grid_1 = require("react-data-grid");
+const action_cell_base_1 = require("../components/action-cell-base");
+function useReactDataGridColumns(props) {
+    var _a;
+    const { onReload, actionCellWidth, schema, isRowSelectable, BodyCells, getOpenUrl, onOpen, getEditUrl, onEdit, onRemove, } = props;
+    const ActionCell = (_a = props.ActionCell) !== null && _a !== void 0 ? _a : action_cell_base_1.ActionCellBase;
+    return (0, react_1.useMemo)(() => {
+        const columns = [];
+        if (isRowSelectable) {
+            columns.push(react_data_grid_1.SelectColumn);
+        }
+        for (const schemaColumn of schema.columns) {
+            columns.push({
+                key: schemaColumn.name,
+                name: schemaColumn.label,
+                headerCellClass: (0, cx_1.cx)("uxf-data-grid__cell", "uxf-data-grid__cell--header", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
+                resizable: true,
+                sortable: schemaColumn.sort,
+                width: schemaColumn.width,
+                minWidth: schemaColumn.minWidth,
+                maxWidth: schemaColumn.maxWidth,
+                cellClass: (0, cx_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
+                renderCell: (p) => {
+                    var _a;
+                    const columnType = schemaColumn.type;
+                    const BodyCell = (_a = BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells[columnType]) !== null && _a !== void 0 ? _a : BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells.default;
+                    if (!BodyCell) {
+                        return null;
+                    }
+                    return (react_1.default.createElement(BodyCell, { column: {
+                            name: p.column.key,
+                            label: p.column.name,
+                            sort: p.column.sortable,
+                            type: columnType,
+                        }, row: p.row, value: p.row[p.column.key], reload: () => onReload === null || onReload === void 0 ? void 0 : onReload() }));
+                },
+            });
+        }
+        columns.push({
+            key: "__action_column",
+            name: "",
+            resizable: false,
+            headerCellClass: "uxf-data-grid__action-cell",
+            cellClass: "uxf-data-grid__action-cell",
+            width: actionCellWidth,
+            renderCell: (p) => (0, is_not_nil_1.isNotNil)(ActionCell) ? (react_1.default.createElement(ActionCell, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row, getEditUrl: getEditUrl, onEdit: onEdit, getOpenUrl: getOpenUrl, onOpen: onOpen, onRemove: onRemove })) : null,
+        });
+        return columns;
+    }, [
+        ActionCell,
+        actionCellWidth,
+        schema.columns,
+        BodyCells,
+        isRowSelectable,
+        onOpen,
+        getOpenUrl,
+        onEdit,
+        getEditUrl,
+        onRemove,
+        onReload,
+    ]);
+}
+exports.useReactDataGridColumns = useReactDataGridColumns;

package/table/index.d.ts

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

package/table/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("./table"), exports);

package/table/no-rows-fallback.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+export interface NoRowsFallbackProps {
+    error?: any;
+    loading: boolean;
+}
+export type NoRowsFallbackComponent = FC<NoRowsFallbackProps>;
+export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/{tailwindui/components → table}/no-rows-fallback.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoRowsFallback = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const utils_1 = require("../../utils");
-const NoRowsFallback = (props) => {
-    return (react_1.default.createElement("div", { className: (0, utils_1.cx)("uxf-data-grid__fallback", props.loading && "is-loading", props.error && "is-error") }, props.loading ? (react_1.default.createElement(react_1.default.Fragment, null, "Na\u010D\u00EDt\u00E1m...")) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
+function NoRowsFallback(props) {
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__fallback", props.loading && "is-loading", props.error && "is-error") }, props.loading ? (react_1.default.createElement(react_1.default.Fragment, null, "Na\u010D\u00EDt\u00E1m...")) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(icon_1.Icon, { name: "warning", size: 24 }),
         react_1.default.createElement("p", null, "Vyskytla se chyba"))) : (react_1.default.createElement(react_1.default.Fragment, null, "\u017D\u00E1dn\u00E9 z\u00E1znamy"))));
-};
+}
 exports.NoRowsFallback = NoRowsFallback;

package/table/table.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TableProps } from "./types";
+export declare function Table(props: TableProps<any>): React.JSX.Element | null;

package/table/table.js

@@ -0,0 +1,80 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
+const react_1 = __importStar(require("react"));
+const react_data_grid_1 = __importDefault(require("react-data-grid"));
+const select_row_checkbox_1 = require("./components/select-row-checkbox");
+const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
+const defaultKeyExtractor = (r) => r.id;
+const DefaultNoRowsFallback = () => react_1.default.createElement("div", null, "no rows");
+function Table(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
+    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    const keyExtractor = (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor;
+    const contentHeight = typeof rowHeight === "function"
+        ? props.data.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        : (rowHeight + 1) * props.data.length;
+    const reactDataGridStyles = {
+        border: 0,
+        borderRadius: 4,
+        height: contentHeight + headerRowHeight + (props.data.length === 0 ? 44 : 0) + 4,
+        overflowY: "hidden",
+    };
+    const NoRowsFallback = (_d = props.NoRowsFallback) !== null && _d !== void 0 ? _d : DefaultNoRowsFallback;
+    const isLoading = !!props.isLoading;
+    const error = props.error;
+    const components = (0, react_1.useMemo)(() => ({
+        renderCheckbox: (args) => react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { ...args }),
+        noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: error, loading: isLoading }),
+    }), [NoRowsFallback, error, isLoading]);
+    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props);
+    const onSelectRows = (value) => {
+        const selectedRows = Array.from(value).map((id) => props.data.find((row) => keyExtractor(row) === id));
+        props.actions.setSelectedRows(selectedRows);
+    };
+    const onSortColumnChange = (sortColumns) => {
+        if (sortColumns.length > 0) {
+            props.actions.sort(sortColumns[0].columnKey, sortColumns[0].direction.toLowerCase());
+        }
+        else {
+            props.actions.sortClear();
+        }
+    };
+    const sortColumns = props.state.request.sort && props.state.request.dir
+        ? [{ columnKey: props.state.request.sort, direction: props.state.request.dir.toUpperCase() }]
+        : [];
+    if (!isMounted) {
+        return null;
+    }
+    return (react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: "uxf-data-grid__table", columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components }));
+}
+exports.Table = Table;

package/table/table.stories.d.ts

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

package/table/table.stories.js

@@ -0,0 +1,20 @@
+"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 data_1 = require("../_story-utils/data");
+const schema_1 = require("../_story-utils/schema");
+const body_cell_1 = require("../body-cell");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const table_1 = require("./table");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, BodyCells: body_cell_1.BodyCells, isRowSelectable: true, onOpen: console.log, onEdit: console.log, onRemove: console.log }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/table/types.d.ts

@@ -0,0 +1,26 @@
+import { Nullish } from "@uxf/core/types";
+import { DataGridProps as RDGProps } from "react-data-grid";
+import { ActionCellComponent, BodyCellComponents, KeyExtractor, Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+import { NoRowsFallbackComponent } from "./no-rows-fallback";
+export interface TableProps<Row> extends DataGridControl {
+    schema: Schema<any>;
+    data: Row[];
+    isLoading?: boolean;
+    error?: any | Nullish;
+    onReload?: () => void;
+    rowHeight?: RDGProps<any>["rowHeight"];
+    headerRowHeight?: RDGProps<any>["headerRowHeight"];
+    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    keyExtractor?: KeyExtractor;
+    BodyCells?: BodyCellComponents<any, any>;
+    ActionCell?: ActionCellComponent<any>;
+    actionCellWidth?: number;
+    NoRowsFallback?: NoRowsFallbackComponent;
+    isRowSelectable?: boolean;
+    onOpen?: (row: Row) => void;
+    getOpenUrl?: (row: Row) => string | null | undefined;
+    onEdit?: (row: Row) => void;
+    getEditUrl?: (row: Row) => string | null | undefined;
+    onRemove?: (row: Row, reload: () => void) => void;
+}

package/table/types.js

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

package/toolbar-control/index.d.ts

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

package/toolbar-control/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("./toolbar-control"), exports);

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

@@ -0,0 +1,13 @@
+import { Nullish } from "@uxf/core/types";
+import React from "react";
+import { FilterHandlers } from "../filter-handler";
+import { CsvDownloadHandler, Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+export interface ToolbarControlProps extends DataGridControl {
+    gridName: string | undefined;
+    schema: Schema<any>;
+    filterHandlers: FilterHandlers;
+    onCsvDownload?: CsvDownloadHandler;
+    isBorderHidden?: boolean | Nullish;
+}
+export declare function ToolbarControl(props: ToolbarControlProps): React.JSX.Element;

package/toolbar-control/toolbar-control.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarControl = void 0;
+const hide_1 = require("@uxf/core/components/hide");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importDefault(require("react"));
+const export_button_1 = require("../export-button");
+const filters_button_1 = require("../filters-button");
+const fulltext_input_1 = require("../fulltext-input");
+const hidden_columns_button_1 = require("../hidden-columns-button");
+function ToolbarControl(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.FulltextInput, { state: props.state, actions: props.actions })),
+        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers }),
+        react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
+        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload }))));
+}
+exports.ToolbarControl = ToolbarControl;

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

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

package/toolbar-control/toolbar-control.stories.js

@@ -0,0 +1,20 @@
+"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 toolbar_control_1 = require("./toolbar-control");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "flex flex-row" },
+            react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers, gridName: "grid-name", onCsvDownload: console.log })),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/toolbar-customs/index.d.ts

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

package/toolbar-customs/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("./toolbar-customs"), exports);

package/toolbar-customs/toolbar-customs.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from "react";
+export interface ToolbarCustomsProps {
+    buttons?: {
+        label: string | ReactElement;
+        onClick?: () => void;
+        href?: string;
+        variant?: "default" | "outlined" | "text";
+    }[];
+}
+export declare function ToolbarCustoms(props: ToolbarCustomsProps): React.JSX.Element | null;

package/{tailwindui/components → toolbar-customs}/toolbar-customs.js

@@ -7,12 +7,12 @@ exports.ToolbarCustoms = void 0;
 const button_1 = require("@uxf/ui/button");
 const button_list_1 = require("@uxf/ui/button-list");
 const react_1 = __importDefault(require("react"));
-const ToolbarCustoms = (props) => {
+function ToolbarCustoms(props) {
     if (!props.buttons) {
         return null;
     }
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs" },
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-mobile" }, props.buttons.length === 1 ? (react_1.default.createElement(button_1.Button, { href: props.buttons[0].href, onClick: props.buttons[0].onClick, size: "sm", variant: props.buttons[0].variant }, props.buttons[0].label)) : (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, visibleButtonsCount: 1, size: "sm", openButton: { variant: "white" } }))),
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { key: index, href: button.href, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
-};
+}
 exports.ToolbarCustoms = ToolbarCustoms;

package/toolbar-customs/toolbar-customs.stories.d.ts

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

package/toolbar-customs/toolbar-customs.stories.js

@@ -0,0 +1,16 @@
+"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 react_1 = __importDefault(require("react"));
+const toolbar_customs_1 = require("./toolbar-customs");
+function Default() {
+    return (react_1.default.createElement(toolbar_customs_1.ToolbarCustoms, { buttons: [
+            { label: "Default", href: "/", variant: "default" },
+            { label: "Text", href: "/", variant: "text" },
+            { label: "Outlined", href: "/", variant: "outlined" },
+        ] }));
+}
+exports.Default = Default;

package/toolbar-tabs/index.d.ts

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

package/toolbar-tabs/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("./toolbar-tabs"), exports);

package/toolbar-tabs/toolbar-tabs.d.ts

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

package/{tailwindui/components → toolbar-tabs}/toolbar-tabs.js

@@ -4,33 +4,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarTabs = void 0;
+const show_1 = require("@uxf/core/components/show");
+const cx_1 = require("@uxf/core/utils/cx");
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const modal_service_1 = require("@uxf/ui/modal/modal-service");
 const react_1 = __importDefault(require("react"));
-const utils_1 = require("../../utils");
-const show_1 = require("../show");
 function Tab(props) {
-    return (react_1.default.createElement("button", { className: (0, utils_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick }, props.title));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick }, props.title));
 }
-const ToolbarTabs = (props) => {
+function ToolbarTabs(props) {
     var _a, _b, _c, _d;
-    return (react_1.default.createElement(show_1.Show, { when: (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length },
+    return (react_1.default.createElement(show_1.Show, { when: !!((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs" },
-            react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.activeTab === t.name, onClick: () => props.onChange(t.name) })))),
+            react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t.name) })))),
             react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--mobile" },
                 react_1.default.createElement(button_1.Button, { variant: "text", className: "uxf-data-grid__toolbar-tabs-button", size: "sm", onClick: () => {
                         var _a;
                         return (0, modal_service_1.openModal)({
                             children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, variant: "text", size: "xl", onClick: () => {
-                                    props.onChange(item.name);
+                                    props.actions.changeTab(item.name);
                                     (0, modal_service_1.closeModal)();
                                 } },
-                                item.name === props.activeTab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),
+                                item.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),
                                 react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-modal-button-text" }, item.label)))))),
                         });
                     } },
-                    react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-nav-text" }, (_d = (_c = props.schema.tabs) === null || _c === void 0 ? void 0 : _c.find((t) => t.name === props.activeTab)) === null || _d === void 0 ? void 0 : _d.label),
+                    react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-nav-text" }, (_d = (_c = props.schema.tabs) === null || _c === void 0 ? void 0 : _c.find((t) => t.name === props.state.request.tab)) === null || _d === void 0 ? void 0 : _d.label),
                     react_1.default.createElement(icon_1.Icon, { name: "caretDown", className: "uxf-data-grid__toolbar-tabs-button-icon", size: 16 }))))));
-};
+}
 exports.ToolbarTabs = ToolbarTabs;

package/toolbar-tabs/toolbar-tabs.stories.d.ts

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

package/toolbar-tabs/toolbar-tabs.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 toolbar_tabs_1 = require("./toolbar-tabs");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toolbar_tabs_1.ToolbarTabs, { state: state, actions: actions, schema: schema_1.schema }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;