@uxf/data-grid 11.0.0-beta.13 → 11.0.0-beta.15

package/_story-utils/grid-type.d.ts

@@ -19,5 +19,6 @@ export type GridType = {
         link: "string";
         sele: "select";
         seleBool: "select";
+        multiSelect: "multiSelect";
     };
 };

package/_story-utils/loader.js

@@ -29,7 +29,7 @@ const loader = async (_, request) => {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     return {
         count: filteredData.length,
-        totalCount: filteredData.length,
+        totalCount: data_1.data.length,
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };

package/_story-utils/schema.js

@@ -31,6 +31,17 @@ exports.schema = {
                 { id: 2, label: "B" },
             ],
         },
+        {
+            name: "multiSelect",
+            label: "Multi select",
+            type: "multiSelect",
+            options: [
+                { label: "Option 1", id: "option-1" },
+                { label: "Option 2", id: "option-2" },
+                { label: "Option 3", id: "option-3" },
+                { label: "Option 4", id: "option-4" },
+            ],
+        },
         {
             name: "seleBool",
             type: "select",

package/data-grid.js

@@ -23,7 +23,7 @@ const toolbar_tabs_1 = require("./toolbar-tabs");
 const classes_1 = require("./utils/classes");
 const DefaultSelectedRowsToolbarActions = () => null;
 function DataGrid(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.noBorder && classes_1.NO_BORDER_CLASS, props.className) },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__toolbar", props.noBorder && classes_1.NO_BORDER_CLASS) },
@@ -35,8 +35,8 @@ function DataGrid(props) {
             react_1.default.createElement(table_1.Table, { state: props.state, actions: props.actions, schema: props.schema, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, BodyCells: (_h = (_g = props.ui) === null || _g === void 0 ? void 0 : _g.BodyCells) !== null && _h !== void 0 ? _h : body_cell_1.BodyCells, NoRowsFallback: (_k = (_j = props.ui) === null || _j === void 0 ? void 0 : _j.NoRowsFallback) !== null && _k !== void 0 ? _k : no_rows_fallback_1.NoRowsFallback, ActionCell: (_m = (_l = props.ui) === null || _l === void 0 ? void 0 : _l.ActionCell) !== null && _m !== void 0 ? _m : action_cell_base_1.ActionCellBase, onRemove: props.onRemove, onEdit: props.onEdit, getEditUrl: props.getEditUrl, onOpen: props.onOpen, getOpenUrl: props.getOpenUrl, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__footer", props.noBorder && classes_1.NO_BORDER_CLASS) },
                 react_1.default.createElement(rows_per_page_select_1.RowsPerPageSelect, { state: props.state, actions: props.actions }),
-                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, totalCount: (_p = (_o = props.data) === null || _o === void 0 ? void 0 : _o.totalCount) !== null && _p !== void 0 ? _p : 0 }),
-                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, count: (_r = (_q = props.data) === null || _q === void 0 ? void 0 : _q.count) !== null && _r !== void 0 ? _r : 0 }))),
-        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_t = (_s = props.ui) === null || _s === void 0 ? void 0 : _s.SelectedRowsToolbarActions) !== null && _t !== void 0 ? _t : DefaultSelectedRowsToolbarActions })));
+                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, count: (_p = (_o = props.data) === null || _o === void 0 ? void 0 : _o.count) !== null && _p !== void 0 ? _p : 0, totalCount: (_r = (_q = props.data) === null || _q === void 0 ? void 0 : _q.totalCount) !== null && _r !== void 0 ? _r : 0 }),
+                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, count: (_t = (_s = props.data) === null || _s === void 0 ? void 0 : _s.count) !== null && _t !== void 0 ? _t : 0 }))),
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_v = (_u = props.ui) === null || _u === void 0 ? void 0 : _u.SelectedRowsToolbarActions) !== null && _v !== void 0 ? _v : DefaultSelectedRowsToolbarActions })));
 }
 exports.DataGrid = DataGrid;

package/filter-handler/index.js

@@ -22,6 +22,7 @@ const bool_filter_1 = __importDefault(require("./bool-filter"));
 const boolean_filter_1 = __importDefault(require("./boolean-filter"));
 const date_1 = __importDefault(require("./date"));
 const interval_filter_1 = __importDefault(require("./interval-filter"));
+const multi_select_1 = __importDefault(require("./multi-select"));
 const select_filter_1 = __importDefault(require("./select-filter"));
 const text_filter_1 = __importDefault(require("./text-filter"));
 __exportStar(require("./types"), exports);
@@ -33,5 +34,6 @@ exports.defaultFilterHandlers = {
     boolean: boolean_filter_1.default,
     checkbox: boolean_filter_1.default,
     interval: interval_filter_1.default,
+    multiSelect: multi_select_1.default,
     select: select_filter_1.default,
 };

package/filter-handler/multi-select.d.ts

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

package/filter-handler/multi-select.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const chip_1 = require("@uxf/ui/chip");
+const multi_select_1 = require("@uxf/ui/multi-select");
+const react_1 = __importDefault(require("react"));
+const multiSelect = {
+    input: (props) => {
+        var _a, _b;
+        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: (_b = props.value.value) === null || _b === void 0 ? void 0 : _b.map((id) => { var _a; return (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id); }), onChange: (value) => {
+                props.onFilter({
+                    ...props.value,
+                    value: (0, is_nil_1.isNil)(value) || value.length === 0 ? null : value.map((item) => item.id),
+                });
+            } }));
+    },
+    listItem: (props) => {
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0",
+            props.value.value
+                .map((id) => { var _a, _b; return (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id)) === null || _b === void 0 ? void 0 : _b.label; })
+                .join(", ")));
+    },
+};
+exports.default = multiSelect;

package/package.json

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

package/row-counts/row-counts.d.ts

@@ -3,5 +3,6 @@ import { DataGridControl } from "../use-data-grid-control";
 export interface RowCountsProps {
     state: DataGridControl["state"];
     totalCount: number;
+    count: number;
 }
 export declare function RowCounts(props: RowCountsProps): React.JSX.Element;

package/row-counts/row-counts.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowCounts = void 0;
+const show_1 = require("@uxf/core/components/show");
 const react_1 = __importDefault(require("react"));
 function RowCounts(props) {
     const fromNumber = props.state.request.page * props.state.request.perPage + 1;
@@ -13,6 +14,11 @@ function RowCounts(props) {
         "-",
         toNumber,
         " z ",
-        props.totalCount));
+        props.count,
+        " ",
+        react_1.default.createElement(show_1.Show, { when: props.count !== props.totalCount },
+            "(celkem ",
+            props.totalCount,
+            ")")));
 }
 exports.RowCounts = RowCounts;

package/row-counts/row-counts.stories.js

@@ -10,6 +10,6 @@ const use_data_grid_control_1 = require("../use-data-grid-control");
 const row_counts_1 = require("./row-counts");
 function Default() {
     const { state } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
-    return react_1.default.createElement(row_counts_1.RowCounts, { state: state, totalCount: 150 });
+    return react_1.default.createElement(row_counts_1.RowCounts, { state: state, totalCount: 150, count: 100 });
 }
 exports.Default = Default;