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

package/lib/components/XInputDecimal.js

@@ -1,4 +1,30 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,55 +33,46 @@ exports.XInputDecimal = void 0;
 var react_1 = __importDefault(require("react"));
 var inputnumber_1 = require("primereact/inputnumber");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-var XUtils_1 = require("./XUtils");
-var XInputDecimal = function (props) {
-    var _a, _b, _c;
-    props.form.addField(props.field);
-    var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
-    var _d = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(xField), useGrouping = _d.useGrouping, fractionDigits = _d.fractionDigits, min = _d.min, max = _d.max, size = _d.size;
-    var label = (_a = props.label) !== null && _a !== void 0 ? _a : props.field;
-    var readOnly = XUtils_1.XUtils.isReadOnly(props.field, props.readOnly);
-    if (!xField.isNullable && !readOnly) {
-        label = XUtils_1.XUtils.markNotNull(label);
-    }
-    var sizeInput = props.size !== undefined ? props.size : size;
-    var inline = (_b = props.inline) !== null && _b !== void 0 ? _b : false;
-    var labelStyle = (_c = props.labelStyle) !== null && _c !== void 0 ? _c : {};
-    if (!inline) {
-        XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
+var XInput_1 = require("./XInput");
+var XInputDecimal = /** @class */ (function (_super) {
+    __extends(XInputDecimal, _super);
+    function XInputDecimal(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        return _this;
     }
-    else {
-        XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: 'auto' }); // podla dlzky labelu
-        XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { marginLeft: '1rem' });
-    }
-    var onValueChange = function (e) {
-        // z InputNumber prichadza e.value - typ number alebo null
-        props.form.onFieldChange(props.field, e.value);
-    };
-    var fieldValue = undefined;
-    var object = props.form.state.object;
-    if (object !== null) {
-        var objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, props.field);
-        //  pre istotu dame na null, null je standard
-        //if (objectValue === undefined) {
-        //    objectValue = null;
-        //}
-        // TODO - konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        // - otestovat ci zmena na null funguje dobre -
-        //fieldValue = stringAsUI(objectValue);
+    XInputDecimal.prototype.getValue = function () {
+        var value = undefined;
+        var objectValue = this.getValueFromObject();
         // tuto zatial hack, mal by prist number
         if (typeof objectValue === 'string') {
-            fieldValue = parseFloat(objectValue);
+            value = parseFloat(objectValue);
         }
         else if (typeof objectValue === 'number') {
-            fieldValue = objectValue;
+            value = objectValue;
         }
-        // fieldValue zostalo undefined (konvertujeme null -> undefined) - InputNumber pozaduje undefined, nechce null
-    }
-    // note: style overrides size (width of the input according to character count)
-    return (react_1.default.createElement("div", { className: "field grid" },
-        react_1.default.createElement("label", { htmlFor: props.field, className: "col-fixed", style: labelStyle }, label),
-        react_1.default.createElement(inputnumber_1.InputNumber, { id: props.field, value: fieldValue, onChange: onValueChange, disabled: readOnly, mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, style: props.inputStyle })));
-};
+        // value zostalo undefined ak nebol vykonany ziaden if (konvertujeme null -> undefined) - InputNumber pozaduje undefined, nechce null
+        return value;
+    };
+    XInputDecimal.prototype.onValueChange = function (e) {
+        // z InputNumber prichadza e.value - typ number alebo null
+        this.onValueChangeBase(e.value);
+    };
+    // nedame do onChange inputu, lebo by sa nas onChange volal po kazdej zmene pismenka
+    // ak bude treba, mozme este dorobit metodu "onChange2", ktora sa bude volat po kazdej zmene pismenka (asi iba do XInputText)
+    XInputDecimal.prototype.onBlur = function (e) {
+        this.callOnChangeFromOnBlur();
+    };
+    XInputDecimal.prototype.render = function () {
+        var _a;
+        var _b = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _b.useGrouping, fractionDigits = _b.fractionDigits, min = _b.min, max = _b.max, size = _b.size;
+        var sizeInput = (_a = this.props.size) !== null && _a !== void 0 ? _a : size;
+        // note: style overrides size (width of the input according to character count)
+        return (react_1.default.createElement("div", { className: "field grid" },
+            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
+    };
+    return XInputDecimal;
+}(XInput_1.XInput));
 exports.XInputDecimal = XInputDecimal;

package/lib/components/XInputDecimalDT.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { XFormBase } from "./XFormBase";
-export declare const XInputDecimalDT: (props: {
-    form: XFormBase;
-    entity: string;
-    field: string;
-    rowData: any;
-    readOnly?: boolean | undefined;
-}) => JSX.Element;
+import { XInputDT, XInputDTProps } from "./XInputDT";
+export interface XInputDecimalDTProps extends XInputDTProps {
+}
+export declare class XInputDecimalDT extends XInputDT<XInputDecimalDTProps> {
+    constructor(props: XInputDecimalDTProps);
+    getValue(): number | undefined;
+    onValueChange(e: any): void;
+    onBlur(e: any): void;
+    render(): JSX.Element;
+}

package/lib/components/XInputDecimalDT.js

@@ -1,4 +1,30 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,46 +33,42 @@ exports.XInputDecimalDT = void 0;
 var react_1 = __importDefault(require("react"));
 var inputnumber_1 = require("primereact/inputnumber");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-var XInputDecimalDT = function (props) {
-    var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.entity, props.field);
-    var _a = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(xField), useGrouping = _a.useGrouping, fractionDigits = _a.fractionDigits, min = _a.min, max = _a.max;
-    // ak mame path, field je vzdy readOnly
-    var readOnly;
-    var posDot = props.field.indexOf(".");
-    if (posDot !== -1) {
-        readOnly = true;
-    }
-    else {
-        readOnly = props.readOnly !== undefined ? props.readOnly : false;
+var XInputDT_1 = require("./XInputDT");
+var XUtils_1 = require("./XUtils");
+var XInputDecimalDT = /** @class */ (function (_super) {
+    __extends(XInputDecimalDT, _super);
+    function XInputDecimalDT(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        return _this;
     }
-    var onValueChange = function (field, rowData, newValue) {
-        // z InputNumber prichadza e.value - typ number alebo null
-        // zmenime hodnotu v modeli (odtial sa hodnota cita)
-        rowData[field] = newValue;
-        // kedze "rowData" je sucastou "props.form.state.object", tak nam staci zavolat setState({object: object}), aby sa zmena prejavila
-        props.form.onObjectDataChange();
-    };
-    var fieldValue = undefined;
-    // test na undefined je tu koli insertu noveho riadku
-    if (props.rowData !== undefined && props.rowData !== null) {
-        var rowDataValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(props.rowData, props.field);
-        //  pre istotu dame na null, null je standard
-        //if (rowDataValue === undefined) {
-        //    rowDataValue = null;
-        //}
-        // TODO - konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        // - otestovat ci zmena na null funguje dobre -
-        //fieldValue = stringAsUI(rowDataValue);
+    XInputDecimalDT.prototype.getValue = function () {
+        var value = undefined;
+        var rowDataValue = this.getValueFromRowData();
         // tuto zatial hack, mal by prist number
         if (typeof rowDataValue === 'string') {
-            fieldValue = parseFloat(rowDataValue);
+            value = parseFloat(rowDataValue);
         }
         else if (typeof rowDataValue === 'number') {
-            fieldValue = rowDataValue;
+            value = rowDataValue;
         }
-        // fieldValue zostalo undefined (konvertujeme null -> undefined) - InputNumber pozaduje undefined, nechce null
-    }
-    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.field, value: fieldValue, onChange: function (e) { return onValueChange(props.field, props.rowData, e.value); }, disabled: readOnly, mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, className: "x-input-to-resize" }));
-};
+        // value zostalo undefined ak nebol vykonany ziaden if (konvertujeme null -> undefined) - InputNumber pozaduje undefined, nechce null
+        return value;
+    };
+    XInputDecimalDT.prototype.onValueChange = function (e) {
+        // z InputNumber prichadza e.value - typ number alebo null
+        this.onValueChangeBase(e.value);
+    };
+    // nedame do onChange inputu, lebo by sa nas onChange volal po kazdej zmene pismenka
+    // ak bude treba, mozme este dorobit metodu "onChange2", ktora sa bude volat po kazdej zmene pismenka (asi iba do XInputText)
+    XInputDecimalDT.prototype.onBlur = function (e) {
+        this.callOnChangeFromOnBlur();
+    };
+    XInputDecimalDT.prototype.render = function () {
+        var _a = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _a.useGrouping, fractionDigits = _a.fractionDigits, min = _a.min, max = _a.max;
+        return (react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, onBlur: this.onBlur }, XUtils_1.XUtils.addClassName(XUtils_1.XUtils.createErrorProps(this.getError()), "x-input-to-resize"))));
+    };
+    return XInputDecimalDT;
+}(XInputDT_1.XInputDT));
 exports.XInputDecimalDT = XInputDecimalDT;

package/lib/components/XInputText.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { XInput, XInputProps } from "./XInput";
-export interface XInputTextProps extends XInputProps {
+export interface XInputTextProps extends XInputProps<string> {
     size?: number;
 }
-export declare class XInputText extends XInput<XInputTextProps> {
+export declare class XInputText extends XInput<string, XInputTextProps> {
     constructor(props: XInputTextProps);
     getValue(): string;
     onValueChange(e: any): void;
+    onBlur(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XInputText.js

@@ -39,6 +39,7 @@ var XInputText = /** @class */ (function (_super) {
     function XInputText(props) {
         var _this = _super.call(this, props) || this;
         _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
         return _this;
     }
     XInputText.prototype.getValue = function () {
@@ -50,13 +51,18 @@ var XInputText = /** @class */ (function (_super) {
         var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
         this.onValueChangeBase(value);
     };
+    // nedame do onChange inputu, lebo by sa nas onChange volal po kazdej zmene pismenka
+    // ak bude treba, mozme este dorobit metodu "onChange2", ktora sa bude volat po kazdej zmene pismenka (asi iba do XInputText)
+    XInputText.prototype.onBlur = function (e) {
+        this.callOnChangeFromOnBlur();
+    };
     XInputText.prototype.render = function () {
         var _a;
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip()))));
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XInputTextarea.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { XInput, XInputProps } from "./XInput";
-export interface XInputTextareaProps extends XInputProps {
+export interface XInputTextareaProps extends XInputProps<string> {
     rows: number;
     cols?: number | "full";
     labelOnTop?: boolean;
 }
-export declare class XInputTextarea extends XInput<XInputTextareaProps> {
+export declare class XInputTextarea extends XInput<string, XInputTextareaProps> {
     static defaultProps: {
         cols: string;
         labelOnTop: boolean;

package/lib/components/XLazyDataTable.d.ts

@@ -1,5 +1,7 @@
 import { ReactChild } from 'react';
 import { SearchTableParams } from "./SearchTableParams";
+import { XCustomFilter } from "../serverApi/FindParam";
+import { XOnSaveOrCancelProp } from "./XFormBase";
 export interface XEditModeHandlers {
     onStart: () => void;
     onSave: () => void;
@@ -24,7 +26,10 @@ export interface XLazyDataTableProps {
     onAddRow?: () => void;
     onEdit?: (selectedRow: any) => void;
     removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
+    onRemoveRow?: XOnSaveOrCancelProp;
     appButtons?: any;
+    customFilter?: XCustomFilter;
+    initSortField?: string;
     searchTableParams?: SearchTableParams;
     width?: string;
     editMode?: boolean;

package/lib/components/XLazyDataTable.js

@@ -128,20 +128,7 @@ var XLazyDataTable = function (props) {
                 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;
+                initFilters[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -167,18 +154,40 @@ var XLazyDataTable = function (props) {
         }
         return filterMatchMode;
     };
+    var createFilterItem = function (filterDisplay, constraint) {
+        var filterItem;
+        if (filterDisplay === "menu") {
+            // DataTableOperatorFilterMetaData: operator + filter values
+            filterItem = {
+                operator: api_1.FilterOperator.OR,
+                constraints: [constraint]
+            };
+        }
+        else {
+            // props.filterDisplay === "row"
+            // DataTableFilterMetaData: filter value
+            filterItem = constraint;
+        }
+        return filterItem;
+    };
+    // premenne platne pre cely component (obdoba member premennych v class-e)
     var dataTableEl = (0, react_1.useRef)(null);
+    var customFilter = props.customFilter;
     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" };
+    if (props.searchTableParams !== undefined) {
+        var displayFieldFilter = props.searchTableParams.displayFieldFilter;
+        if (displayFieldFilter !== undefined) {
+            filtersInit[displayFieldFilter.field] = createFilterItem(props.filterDisplay, displayFieldFilter.constraint);
+        }
+        // ak mame props.searchTableParams.customFilter, pridame ho
+        customFilter = XUtils_1.XUtils.filterAnd(customFilter, props.searchTableParams.customFilter);
     }
     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 _f = __read((0, react_1.useState)(props.initSortField ? [{ field: props.initSortField, order: 1 }] : []), 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];
@@ -216,7 +225,7 @@ var XLazyDataTable = function (props) {
         return __generator(this, function (_a) {
             //console.log("zavolany onPage");
             setFirst(event.first);
-            loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: event.first, rows: rows, filters: filters, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
+            loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: event.first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
             return [2 /*return*/];
         });
     }); };
@@ -230,14 +239,14 @@ var XLazyDataTable = function (props) {
         //console.log("zavolany onSort - this.state.multiSortMeta = " + JSON.stringify(multiSortMeta));
         //console.log("zavolany onSort - event.multiSortMeta = " + JSON.stringify(event.multiSortMeta));
         setMultiSortMeta(event.multiSortMeta);
-        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields() });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: event.multiSortMeta, entity: props.entity, fields: getFields() });
     };
     var onClickFilter = function () {
         //console.log("zavolany onClickFilter");
         loadData();
     };
     var loadData = function () {
-        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
+        loadDataBase({ resultType: FindParam_1.ResultType.RowCountAndPagedRows, first: first, rows: rows, filters: filters, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() });
     };
     var loadDataBase = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
         var findResult;
@@ -365,6 +374,9 @@ var XLazyDataTable = function (props) {
                 case 4:
                     if (reread) {
                         loadData();
+                        if (props.onRemoveRow) {
+                            props.onRemoveRow(selectedRow, XUtils_1.OperationType.Remove);
+                        }
                     }
                     return [3 /*break*/, 10];
                 case 5:
@@ -384,6 +396,9 @@ var XLazyDataTable = function (props) {
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
+                    if (props.onRemoveRow) {
+                        props.onRemoveRow(selectedRow, XUtils_1.OperationType.Remove);
+                    }
                     _a.label = 10;
                 case 10: return [3 /*break*/, 12];
                 case 11:
@@ -398,7 +413,7 @@ var XLazyDataTable = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, first: first, rows: rows, filters: filtersAfterFiltering, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() };
+                    findParam = { resultType: FindParam_1.ResultType.OnlyRowCount, first: first, rows: rows, filters: filtersAfterFiltering, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields() };
                     return [4 /*yield*/, findByFilter(findParam)];
                 case 1:
                     findResult = _a.sent();
@@ -423,7 +438,7 @@ var XLazyDataTable = function (props) {
                     if (csvParam && csvParam.useHeaderLine) {
                         csvParam.headers = getHeaders();
                     }
-                    exportParam = { exportType: exportType, filters: filtersAfterFiltering, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), csvParam: csvParam };
+                    exportParam = { exportType: exportType, filters: filtersAfterFiltering, customFilter: customFilter, multiSortMeta: multiSortMeta, entity: props.entity, fields: getFields(), csvParam: csvParam };
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
@@ -706,7 +721,7 @@ var XLazyDataTable = function (props) {
             // 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);
+            width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, undefined, headerLabel, true, filterButtonInHeader);
         }
         var headerStyle = {};
         if (width !== undefined) {

package/lib/components/XSearchButton.d.ts

@@ -1,17 +1,19 @@
 import React from "react";
-import { XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
-export interface XSearchButtonProps extends XFormComponentProps {
+import { XObject } from "./XObject";
+export interface XSearchButtonProps extends XFormComponentProps<XObject> {
     assocField: string;
     displayField: string;
     searchTable: any;
     assocForm?: any;
+    filter?: XFilterProp;
     size?: number;
     inputStyle?: React.CSSProperties;
 }
-export declare class XSearchButton extends XFormComponent<XSearchButtonProps> {
+export declare class XSearchButton extends XFormComponent<XObject, XSearchButtonProps> {
     protected xAssoc: XAssoc;
-    inputTextEl: any;
+    inputTextRef: any;
     state: {
         inputChanged: boolean;
         inputValueState: any;

package/lib/components/XSearchButton.js

@@ -78,7 +78,7 @@ var XSearchButton = /** @class */ (function (_super) {
     function XSearchButton(props) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.form.getEntity()), props.assocField);
-        _this.inputTextEl = react_1.default.createRef();
+        _this.inputTextRef = react_1.default.createRef();
         // POVODNY KOD
         //this.overlayPanelEl = React.createRef();
         _this.state = {
@@ -127,20 +127,18 @@ var XSearchButton = /** @class */ (function (_super) {
             setInputValueState(e.target.value);
         };
         var onInputBlur = function (e) { return __awaiter(_this, void 0, void 0, function () {
-            var rows;
+            var displayFieldFilter, customFilter, rows;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!inputChanged) return [3 /*break*/, 3];
-                        if (!(e.target.value === '')) return [3 /*break*/, 1];
+                        if (!(e.target.value === '' || e.target.value === undefined || e.target.value === null)) return [3 /*break*/, 1];
                         setValueToModel(null); // prazdny retazec znamena null hodnotu
                         return [3 /*break*/, 3];
-                    case 1: return [4 /*yield*/, XUtils_1.XUtils.fetchMany('findRowsForAssoc', {
-                            entity: props.form.entity,
-                            assocField: props.assocField,
-                            displayField: props.displayField,
-                            filter: e.target.value
-                        })];
+                    case 1:
+                        displayFieldFilter = { filter: "[".concat(props.displayField, "] LIKE :xDisplayFieldValue"), values: { "xDisplayFieldValue": "".concat(e.target.value, "%") } };
+                        customFilter = this.getFilterBase(this.props.filter);
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, XUtils_1.XUtils.filterAnd(displayFieldFilter, customFilter))];
                     case 2:
                         rows = _a.sent();
                         if (rows.length === 0) {
@@ -164,7 +162,7 @@ var XSearchButton = /** @class */ (function (_super) {
             });
         }); };
         var setValueToModel = function (row) {
-            _this.onValueChangeBase(row);
+            _this.onValueChangeBase(row, _this.props.onChange);
             setInputChanged(false);
         };
         var onClickSearch = function (e) {
@@ -198,24 +196,28 @@ var XSearchButton = /** @class */ (function (_super) {
             setDialogOpened(false);
             // ak mame v inpute neplatnu hodnotu, musime vratit kurzor na input
             if (inputChanged) {
-                _this.inputTextEl.current.element.focus(); // neviem preco tu trebalo pridat "element", asi primereact wrapuje react element
+                _this.inputTextRef.current.focus();
             }
         };
         // {React.createElement(props.searchTable, {searchTableParams: {onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}, ...props.searchTableProps}, null)}
         // <BrandSearchTable searchTableParams={{onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}} qqq="fiha"/>
+        // takto cez metodku, mozno sa metodka vola len ked sa otvori dialog a usetrime nieco...
+        var createSearchTableParams = function () {
+            return {
+                onChoose: onChoose,
+                displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "startsWith" } } : undefined),
+                customFilter: _this.getFilterBase(_this.props.filter)
+            };
+        };
         // vypocitame inputValue
         var inputValue = computeInputValue();
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
             react_1.default.createElement("div", { className: "x-search-button-base" },
-                react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: this.isReadOnly(), ref: this.inputTextEl, maxLength: xDisplayField.length, size: size, style: props.inputStyle }, this.getClassNameTooltip())),
+                react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: this.isReadOnly(), ref: this.inputTextRef, maxLength: xDisplayField.length, size: size, style: props.inputStyle }, this.getClassNameTooltip())),
                 react_1.default.createElement(button_1.Button, { label: "...", onClick: onClickSearch })),
             react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchTable, {
-                searchTableParams: {
-                    onChoose: onChoose,
-                    displayField: props.displayField,
-                    filter: (inputChanged ? inputValueState : undefined)
-                }
+                searchTableParams: createSearchTableParams()
             }, props.searchTable.children))));
     };
     return XSearchButton;

package/lib/components/XSearchButtonDT.js

@@ -83,7 +83,7 @@ var button_1 = require("primereact/button");
 var dialog_1 = require("primereact/dialog");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XSearchButtonDT = function (props) {
-    var inputTextEl = (0, react_1.useRef)(null);
+    var inputTextRef = (0, react_1.useRef)(null);
     var _a = __read((0, react_1.useState)(false), 2), inputChanged = _a[0], setInputChanged = _a[1]; // priznak, ci uzivatel typovanim zmenil hodnotu v inpute
     var _b = __read((0, react_1.useState)(null), 2), inputValueState = _b[0], setInputValueState = _b[1]; // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
     var _c = __read((0, react_1.useState)(false), 2), dialogOpened = _c[0], setDialogOpened = _c[1];
@@ -172,7 +172,7 @@ var XSearchButtonDT = function (props) {
         setDialogOpened(false);
         // ak mame v inpute neplatnu hodnotu, musime vratit kurzor na input
         if (inputChanged) {
-            inputTextEl.current.element.focus(); // neviem preco tu trebalo pridat "element", asi primereact wrapuje react element
+            inputTextRef.current.focus();
         }
     };
     // {React.createElement(props.searchTable, {searchTableParams: {onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined)}, ...props.searchTableProps}, null)}
@@ -181,7 +181,7 @@ var XSearchButtonDT = function (props) {
     var inputValue = computeInputValue();
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "x-search-button-base" },
-            react_1.default.createElement(inputtext_1.InputText, { id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: readOnly, ref: inputTextEl }),
+            react_1.default.createElement(inputtext_1.InputText, { id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: readOnly, ref: inputTextRef }),
             react_1.default.createElement(button_1.Button, { label: "...", onClick: onClickSearch })),
         react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchTable, { searchTableParams: { onChoose: onChoose, displayField: props.displayField, filter: (inputChanged ? inputValueState : undefined) } }, props.searchTable.children))));
 };