@michalrakus/x-react-web-lib 0.25.0 → 1.1.0

package/lib/components/XLazyDataTable.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -44,7 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -65,6 +69,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -81,17 +96,6 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XLazyColumn = exports.XLazyDataTable = void 0;
 var react_1 = __importStar(require("react"));
@@ -107,32 +111,88 @@ var XButtonIconSmall_1 = require("./XButtonIconSmall");
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XExportRowsDialog_1 = require("./XExportRowsDialog");
+var api_1 = require("primereact/api");
 var XLazyDataTable = function (props) {
-    var dataTableEl = react_1.useRef(null);
-    var _a = __read(react_1.useState({ rowList: [], totalRecords: 0 }), 2), value = _a[0], setValue = _a[1];
-    var _b = __read(react_1.useState(false), 2), loading = _b[0], setLoading = _b[1];
-    var _c = __read(react_1.useState(0), 2), first = _c[0], setFirst = _c[1];
-    var _d = __read(react_1.useState(props.paginator ? props.rows : undefined), 2), rows = _d[0], setRows = _d[1];
-    var filtersInit = {};
+    // must be here, is used in createInitFilters()
+    var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity);
+    var createInitFilters = function () {
+        var e_1, _a;
+        var initFilters = {};
+        //let columns = dataTableEl.current.props.children; - does not work
+        var columns = props.children;
+        try {
+            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                var column = columns_1_1.value;
+                var xLazyColumn = column; // nevedel som to krajsie...
+                var field = xLazyColumn.props.field;
+                var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, field);
+                // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
+                var filterMatchMode = getFilterMatchMode(xField);
+                var filterItem = void 0;
+                if (props.filterDisplay === "menu") {
+                    // DataTableOperatorFilterMetaData: operator + filter values
+                    filterItem = {
+                        operator: api_1.FilterOperator.OR,
+                        constraints: [{ value: null, matchMode: filterMatchMode }]
+                    };
+                }
+                else {
+                    // props.filterDisplay === "row"
+                    // DataTableFilterMetaData: filter value
+                    filterItem = { value: null, matchMode: filterMatchMode };
+                }
+                initFilters[field] = filterItem;
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return initFilters;
+    };
+    var getFilterMatchMode = function (xField) {
+        var filterMatchMode;
+        if (xField.type === "string") {
+            filterMatchMode = api_1.FilterMatchMode.STARTS_WITH;
+        }
+        // zatial vsetky ostatne EQUALS
+        else if (xField.type === "decimal" || xField.type === "number" || xField.type === "date" || xField.type === "datetime" || xField.type === "boolean") {
+            filterMatchMode = api_1.FilterMatchMode.EQUALS;
+        }
+        else {
+            throw "XField ".concat(xField.name, ": unknown xField.type = ").concat(xField.type);
+        }
+        return filterMatchMode;
+    };
+    var dataTableEl = (0, react_1.useRef)(null);
+    var _a = __read((0, react_1.useState)({ rowList: [], totalRecords: 0 }), 2), value = _a[0], setValue = _a[1];
+    var _b = __read((0, react_1.useState)(false), 2), loading = _b[0], setLoading = _b[1];
+    var _c = __read((0, react_1.useState)(0), 2), first = _c[0], setFirst = _c[1];
+    var _d = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _d[0], setRows = _d[1];
+    var filtersInit = createInitFilters();
     if (props.searchTableParams !== undefined && props.searchTableParams.filter !== undefined) {
+        // TODO - zohladnit "menu" filtrovanie
         filtersInit[props.searchTableParams.displayField] = { value: props.searchTableParams.filter, matchMode: "startsWith" };
     }
-    var _e = __read(react_1.useState(filtersInit), 2), filters = _e[0], setFilters = _e[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
-    var _f = __read(react_1.useState([]), 2), multiSortMeta = _f[0], setMultiSortMeta = _f[1];
-    var _g = __read(react_1.useState(null), 2), selectedRow = _g[0], setSelectedRow = _g[1];
-    var _h = __read(react_1.useState(false), 2), dataLoaded = _h[0], setDataLoaded = _h[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _j = __read(react_1.useState(false), 2), exportRowsDialogOpened = _j[0], setExportRowsDialogOpened = _j[1];
-    var _k = __read(react_1.useState(), 2), exportRowsDialogRowCount = _k[0], setExportRowsDialogRowCount = _k[1]; // param pre dialog
-    var _l = __read(react_1.useState(filtersInit), 2), filtersAfterFiltering = _l[0], setFiltersAfterFiltering = _l[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _e = __read((0, react_1.useState)(filtersInit), 2), filters = _e[0], setFilters = _e[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var _f = __read((0, react_1.useState)([]), 2), multiSortMeta = _f[0], setMultiSortMeta = _f[1];
+    var _g = __read((0, react_1.useState)(null), 2), selectedRow = _g[0], setSelectedRow = _g[1];
+    var _h = __read((0, react_1.useState)(false), 2), dataLoaded = _h[0], setDataLoaded = _h[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _j = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _j[0], setExportRowsDialogOpened = _j[1];
+    var _k = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _k[0], setExportRowsDialogRowCount = _k[1]; // param pre dialog
+    var _l = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _l[0], setFiltersAfterFiltering = _l[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
         if (props.displayed === undefined) {
             loadData();
             //console.log("XLazyDataTable - data loaded (simple)");
         }
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         // sposob pozivany pri XFormNavigator (potrebujeme refreshnut data pri navrate z formulara)
         if (props.displayed !== undefined) {
             if (props.displayed) {
@@ -150,6 +210,7 @@ var XLazyDataTable = function (props) {
             }
         }
     }); // eslint-disable-line react-hooks/exhaustive-deps
+    // TODO - preco je to tu? presunut dole ak sa da...
     var dataKey = props.dataKey !== undefined ? props.dataKey : XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity).idField;
     var onPage = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -210,43 +271,43 @@ var XLazyDataTable = function (props) {
     var getFields = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_1, _a;
+        var e_2, _a;
         var fields = [];
         var columns = dataTableEl.current.props.children;
         try {
-            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
-                var column = columns_1_1.value;
+            for (var columns_2 = __values(columns), columns_2_1 = columns_2.next(); !columns_2_1.done; columns_2_1 = columns_2.next()) {
+                var column = columns_2_1.value;
                 fields.push(column.props.field);
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
             try {
-                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                if (columns_2_1 && !columns_2_1.done && (_a = columns_2.return)) _a.call(columns_2);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_2) throw e_2.error; }
         }
         return fields;
     };
     var getHeaders = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_2, _a;
+        var e_3, _a;
         var headers = [];
         var columns = dataTableEl.current.props.children;
         try {
-            for (var columns_2 = __values(columns), columns_2_1 = columns_2.next(); !columns_2_1.done; columns_2_1 = columns_2.next()) {
-                var column = columns_2_1.value;
+            for (var columns_3 = __values(columns), columns_3_1 = columns_3.next(); !columns_3_1.done; columns_3_1 = columns_3.next()) {
+                var column = columns_3_1.value;
                 // pozor! headers tahame z primereact DataTable a napr. pri editacii nemusi byt v atribute header string
                 headers.push(column.props.header);
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
-                if (columns_2_1 && !columns_2_1.done && (_a = columns_2.return)) _a.call(columns_2);
+                if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_3) throw e_3.error; }
         }
         return headers;
     };
@@ -283,7 +344,7 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_3, e_4;
+        var reread, e_4, e_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -298,8 +359,8 @@ var XLazyDataTable = function (props) {
                     reread = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_3 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_3);
+                    e_4 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_4);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -318,8 +379,8 @@ var XLazyDataTable = function (props) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_4 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_4);
+                    e_5 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_5);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -349,7 +410,7 @@ var XLazyDataTable = function (props) {
         });
     }); };
     var exportRowsDialogOnHide = function (ok, exportType, csvParam) { return __awaiter(void 0, void 0, void 0, function () {
-        var path, exportParam, response, e_5, fileExt, fileName, respBlob, url, a;
+        var path, exportParam, response, e_6, fileExt, fileName, respBlob, url, a;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -371,12 +432,12 @@ var XLazyDataTable = function (props) {
                     response = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_5 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Export failed.", e_5);
+                    e_6 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage("Export failed.", e_6);
                     return [2 /*return*/];
                 case 4:
                     fileExt = exportType;
-                    fileName = props.entity + "." + fileExt;
+                    fileName = "".concat(props.entity, ".").concat(fileExt);
                     return [4 /*yield*/, response.blob()];
                 case 5:
                     respBlob = _a.sent();
@@ -400,15 +461,18 @@ var XLazyDataTable = function (props) {
             console.log("Nie je vyselectovany ziaden zaznam.");
         }
     };
+    // ****** checkbox vo filtri ********
+    // pouziva sa len pre simple filtrovanie (filterDisplay="row")
     var onCheckboxFilterChange = function (field, checkboxValue) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, filters);
         if (checkboxValue !== null) {
-            filtersCloned[field] = { value: checkboxValue ? "1" : "0", matchMode: "equals" };
+            filtersCloned[field] = { value: checkboxValue ? "1" : "0", matchMode: api_1.FilterMatchMode.EQUALS };
         }
         else {
             // pouzivatel zrusil hodnotu vo filtri (vybral prazdny stav v checkboxe), zrusime polozku z filtra
-            delete filtersCloned[field];
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
         }
         setFilters(filtersCloned);
     };
@@ -425,15 +489,18 @@ var XLazyDataTable = function (props) {
         }
         return checkboxValue;
     };
+    // ****** dropdown vo filtri ********
+    // pouziva sa len pre simple filtrovanie (filterDisplay="row")
     var onDropdownFilterChange = function (field, displayValue) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, filters);
         if (displayValue !== XUtils_1.XUtils.dropdownEmptyOptionValue) {
-            filtersCloned[field] = { value: displayValue, matchMode: "equals" };
+            filtersCloned[field] = { value: displayValue, matchMode: api_1.FilterMatchMode.EQUALS };
         }
         else {
             // pouzivatel zrusil hodnotu vo filtri (vybral prazdny riadok), zrusime polozku z filtra
-            delete filtersCloned[field];
+            //delete filtersCloned[field];
+            filtersCloned[field] = { value: null, matchMode: api_1.FilterMatchMode.EQUALS };
         }
         setFilters(filtersCloned);
     };
@@ -441,7 +508,9 @@ var XLazyDataTable = function (props) {
         var dropdownValue = XUtils_1.XUtils.dropdownEmptyOptionValue;
         var filterValue = filters[field];
         if (filterValue !== undefined && filterValue !== null) {
-            dropdownValue = filterValue.value;
+            if (filterValue.value !== null) {
+                dropdownValue = filterValue.value;
+            }
         }
         return dropdownValue;
     };
@@ -457,7 +526,7 @@ var XLazyDataTable = function (props) {
             else if (typeof rowDataValue === 'number') {
                 numberValue = rowDataValue;
             }
-            bodyValue = XUtilsConversions_1.numberAsUI(numberValue, xField.scale);
+            bodyValue = (0, XUtilsConversions_1.numberAsUI)(numberValue, xField.scale);
         }
         else if (xField.type === "date") {
             // tuto zatial hack, mal by prist Date
@@ -468,7 +537,7 @@ var XLazyDataTable = function (props) {
             else if (typeof rowDataValue === 'object' && rowDataValue instanceof Date) {
                 dateValue = rowDataValue;
             }
-            bodyValue = XUtilsConversions_1.dateAsUI(dateValue);
+            bodyValue = (0, XUtilsConversions_1.dateAsUI)(dateValue);
         }
         else if (xField.type === "datetime") {
             // tuto zatial hack, mal by prist Date
@@ -479,7 +548,7 @@ var XLazyDataTable = function (props) {
             else if (typeof rowDataValue === 'object' && rowDataValue instanceof Date) {
                 dateValue = rowDataValue;
             }
-            bodyValue = XUtilsConversions_1.datetimeAsUI(dateValue);
+            bodyValue = (0, XUtilsConversions_1.datetimeAsUI)(dateValue);
         }
         else if (xField.type === "boolean") {
             // TODO - efektivnejsie by bolo renderovat len prislusne ikonky
@@ -487,8 +556,7 @@ var XLazyDataTable = function (props) {
         }
         return bodyValue;
     };
-    var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity);
-    // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" okna (viewport-u)
+    // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" do okna (viewport-u)
     var scrollWidth = undefined; // vypnute horizontalne scrollovanie
     var scrollHeight = undefined; // vypnute vertikalne scrollovanie
     if (props.scrollable) {
@@ -513,17 +581,20 @@ var XLazyDataTable = function (props) {
                 if (props.searchTableParams === undefined) {
                     // sme v standardnom formulari
                     viewHeight = '100vh';
-                    headerFooterHeight = XUtils_1.XUtils.toPX0('20.89rem') - XUtils_1.XUtils.toPX0('4.43rem'); // experimentalne zistena vyska header/footer (body - table body) bez formFooterHeight
+                    // experimentalne zistena vyska header/footer
+                    // da sa vyratat ako vysku body (celej stranky) - vyska div-u ktory sa scrolluje (div na ktorom je style="max-height: calc(100vh - 266.42px);)
+                    // (treba odratat vysku paginatora a formFooterHeight (lebo tie sa odratavaju nizsie))
+                    headerFooterHeight = XUtils_1.XUtils.toPX0('10.89rem');
                 }
                 else {
                     // sme v dialogu
                     if (XUtils_1.XUtils.isMobile()) {
                         viewHeight = '98vh'; // .p-dialog pre mobil ma max-height: 98%
-                        headerFooterHeight = XUtils_1.XUtils.toPX0('17.60rem'); // rucne zratane
+                        headerFooterHeight = XUtils_1.XUtils.toPX0('12.03rem'); // rucne zratane
                     }
                     else {
                         viewHeight = '90vh'; // .p-dialog pre desktop ma max-height: 90%
-                        headerFooterHeight = XUtils_1.XUtils.toPX0('18.60rem'); // rucne zratane (desktop ma vecsi margin dole na dialogu)
+                        headerFooterHeight = XUtils_1.XUtils.toPX0('13.03rem'); // rucne zratane (desktop ma vecsi margin dole na dialogu)
                     }
                 }
                 // pridame vysku paging-u, ak treba
@@ -534,7 +605,7 @@ var XLazyDataTable = function (props) {
                 if (props.formFooterHeight !== undefined) {
                     headerFooterHeight += XUtils_1.XUtils.toPX0(XUtils_1.XUtils.processGridBreakpoints(props.formFooterHeight));
                 }
-                scrollHeight = "calc(" + viewHeight + " - " + headerFooterHeight + "px)";
+                scrollHeight = "calc(".concat(viewHeight, " - ").concat(headerFooterHeight, "px)");
             }
         }
     }
@@ -545,13 +616,14 @@ var XLazyDataTable = function (props) {
     if (props.shrinkWidth) {
         style.maxWidth = 'min-content'; // ak nic nedame (nechame auto), tak (v pripade ak nebudeme mat horizontalny scrollbar) natiahne tabulku na celu sirku stranky, co nechceme
     }
-    var tableStyle;
+    // pri prechode z Primereact 6.x na 9.x sa tableLayout zmenil z fixed na auto a nefungovalo nastavenie sirok stlpcov - docasne teda takto
+    var tableStyle = { tableLayout: 'fixed' };
     if (props.width !== undefined) {
         var width = props.width;
         if (!isNaN(Number(width))) { // if width is number
             width = width + 'rem';
         }
-        tableStyle = { width: width };
+        tableStyle = __assign(__assign({}, tableStyle), { width: width });
     }
     // check
     if ((props.editMode === true || props.editMode === false) && props.editModeHandlers === undefined) {
@@ -606,6 +678,22 @@ var XLazyDataTable = function (props) {
             var dropdownValue = getDropdownFilterValue(childColumn.props.field);
             filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange });
         }
+        // *********** showFilterMenu ***********
+        var showFilterMenu;
+        if (childColumn.props.showFilterMenu !== undefined) {
+            showFilterMenu = childColumn.props.showFilterMenu;
+        }
+        else {
+            showFilterMenu = true; // default
+            if (props.filterDisplay === "row") {
+                if (xField.type === "boolean" || childColumn.props.dropdownInFilter) {
+                    showFilterMenu = false;
+                }
+            }
+        }
+        // *********** showClearButton ***********
+        // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
+        var showClearButton = props.filterDisplay === "menu";
         // *********** body ***********
         // TODO - mozno by bolo dobre vytvarat body pre kazdy field, nech je to vsetko konzistentne
         var body;
@@ -615,14 +703,17 @@ var XLazyDataTable = function (props) {
         // *********** width/headerStyle ***********
         var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
         if (width === undefined || width === "default") {
-            width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, headerLabel);
+            // TODO - if filter not used at all, then buttons flags should be false
+            var filterMenuInFilterRow = props.filterDisplay === "row" && showFilterMenu;
+            var filterButtonInHeader = props.filterDisplay === "menu";
+            width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, undefined, headerLabel, filterButtonInHeader);
         }
-        var headerStyle;
+        var headerStyle = {};
         if (width !== undefined) {
             headerStyle = { width: width };
         }
         // *********** align ***********
-        var align = "left"; // default
+        var align = undefined; // default undefined (left)
         if (childColumn.props.align !== undefined && childColumn.props.align !== null) {
             align = childColumn.props.align;
         }
@@ -635,20 +726,13 @@ var XLazyDataTable = function (props) {
                 align = "center";
             }
         }
-        // *********** style ***********
-        var style;
-        // TODO - pouzit className a nie style
-        if (align === "center" || align === "right") {
-            style = { 'textAlign': align };
-            headerStyle = __assign(__assign({}, headerStyle), style); // headerStyle overrides style in TH cell
-        }
-        return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, filter: true, sortable: true, filterElement: filterElement, body: body, headerStyle: headerStyle, style: style });
+        return react_1.default.createElement(column_1.Column, { field: childColumn.props.field, header: header, filter: true, sortable: true, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, body: body, headerStyle: headerStyle, align: align });
     });
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter })),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             props.onAddRow !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Add row", onClick: onClickAddRow }) : null,
             props.onEdit !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Edit", onClick: onClickEdit }) : null,
@@ -662,6 +746,7 @@ exports.XLazyDataTable = XLazyDataTable;
 exports.XLazyDataTable.defaultProps = {
     paginator: true,
     rows: 10,
+    filterDisplay: "row",
     scrollable: true,
     scrollWidth: 'viewport',
     scrollHeight: 'viewport',

package/lib/components/XLoginForm.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -33,7 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -78,8 +82,8 @@ var password_1 = require("primereact/password");
 var button_1 = require("primereact/button");
 var XUtils_1 = require("./XUtils");
 var XLoginForm = function (props) {
-    var _a = __read(react_1.useState(""), 2), username = _a[0], setUsername = _a[1];
-    var _b = __read(react_1.useState(""), 2), password = _b[0], setPassword = _b[1];
+    var _a = __read((0, react_1.useState)(""), 2), username = _a[0], setUsername = _a[1];
+    var _b = __read((0, react_1.useState)(""), 2), password = _b[0], setPassword = _b[1];
     var onClickLogIn = function () { return __awaiter(void 0, void 0, void 0, function () {
         var xUserAuthenticationRequest, xUserAuthenticationResponse, customUser;
         return __generator(this, function (_a) {
@@ -98,7 +102,7 @@ var XLoginForm = function (props) {
                     _a.label = 3;
                 case 3:
                     // zatial si ulozime len username/password (koli http basic autentifikacii)
-                    props.setXToken({ username: username, password: password, customUser: customUser });
+                    props.setXToken({ username: username, password: password, xUser: customUser });
                     // metoda pouzivana v XLoginDialog
                     if (props.onLogin) {
                         props.onLogin();

package/lib/components/XResponseError.js

@@ -20,7 +20,7 @@ var XResponseError = /** @class */ (function (_super) {
     __extends(XResponseError, _super);
     function XResponseError(path, status, statusText, body) {
         var _newTarget = this.constructor;
-        var _this = _super.call(this, "Http request \"" + path + "\" failed. Status: " + status + ", status text: " + statusText) || this;
+        var _this = _super.call(this, "Http request \"".concat(path, "\" failed. Status: ").concat(status, ", status text: ").concat(statusText)) || this;
         // see: typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html
         Object.setPrototypeOf(_this, _newTarget.prototype); // restore prototype chain
         _this.name = XResponseError.name; // stack traces display correctly now

package/lib/components/XSearchButton.d.ts

@@ -18,8 +18,7 @@ export declare class XSearchButton extends XFormComponent<XSearchButtonProps> {
         dialogOpened: boolean;
     };
     constructor(props: XSearchButtonProps);
-    getFieldForEdit(): string | undefined;
-    checkNotNull(): boolean;
-    getValueFromObject(): any;
+    getField(): string;
+    isNotNull(): boolean;
     render(): JSX.Element;
 }