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

package/lib/components/XFormDataTable2.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -25,7 +27,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];
@@ -38,7 +44,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -69,6 +75,7 @@ var XInputDecimalDT_1 = require("./XInputDecimalDT");
 var XInputDateDT_1 = require("./XInputDateDT");
 var XCheckboxDT_1 = require("./XCheckboxDT");
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
+var api_1 = require("primereact/api");
 var XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -85,7 +92,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         _this.state = {
             selectedRow: undefined,
             dropdownOptionsMap: {},
-            filters: {}
+            filters: _this.createInitFilters()
         };
         _this.onClickAddRowDefault = _this.onClickAddRowDefault.bind(_this);
         _this.onClickRemoveRowDefault = _this.onClickRemoveRowDefault.bind(_this);
@@ -170,6 +177,58 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         return this.entity;
     };
+    XFormDataTable2.prototype.createInitFilters = function () {
+        var e_2, _a;
+        var initFilters = {};
+        var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity());
+        try {
+            // TODO - asi by bolo fajn si tieto field, xField niekam ulozit a iterovat ulozene hodnoty, pouziva sa to na viacerych miestach
+            for (var _b = __values(this.props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                var childColumn = child; // nevedel som to krajsie...
+                var field = XFormDataTable2.getPathForColumn(childColumn.props);
+                var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, field);
+                // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
+                var filterMatchMode = this.getFilterMatchMode(xField);
+                var filterItem = void 0;
+                if (this.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_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return initFilters;
+    };
+    XFormDataTable2.prototype.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;
+    };
     XFormDataTable2.prototype.onSelectionChange = function (event) {
         console.log("zavolany onSelectionChange");
         console.log(event.value);
@@ -188,11 +247,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, this.state.filters);
         if (checkboxValue !== null) {
-            filtersCloned[field] = { value: checkboxValue ? "true" : "false", matchMode: "equals" };
+            filtersCloned[field] = { value: checkboxValue ? "true" : "false", 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 };
         }
         this.setState({ filters: filtersCloned });
     };
@@ -213,11 +273,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         // TODO - treba vyklonovat?
         var filtersCloned = __assign({}, this.state.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 };
         }
         this.setState({ filters: filtersCloned });
     };
@@ -225,17 +286,22 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         var dropdownValue = XUtils_1.XUtils.dropdownEmptyOptionValue;
         var filterValue = this.state.filters[field];
         if (filterValue !== undefined && filterValue !== null) {
-            dropdownValue = filterValue.value;
+            if (filterValue.value !== null) {
+                dropdownValue = filterValue.value;
+            }
         }
         return dropdownValue;
     };
-    XFormDataTable2.prototype.onBodyValueChange = function (field, rowData, newValue) {
-        //console.log("onBodyValueChange");
-        // 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
-        this.props.form.onObjectDataChange();
-    };
+    /*  pravdepodobne zombie
+        onBodyValueChange (field: string, rowData: any, newValue: any) {
+            //console.log("onBodyValueChange");
+    
+            // 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
+            this.props.form.onObjectDataChange();
+        }
+    */
     // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
     XFormDataTable2.prototype.bodyTemplate = function (columnProps, rowData, xEntity) {
         var body;
@@ -320,13 +386,14 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         if (this.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 (this.props.width !== undefined) {
             var width = this.props.width;
             if (!isNaN(Number(width))) { // if width is number
                 width = width + 'rem';
             }
-            tableStyle = { width: width };
+            tableStyle = __assign(__assign({}, tableStyle), { width: width });
         }
         // pre lepsiu citatelnost vytvarame stlpce uz tu
         var columnElemList = react_1.default.Children.map(this.props.children, function (child) {
@@ -352,17 +419,36 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 var dropdownValue = thisLocal.getDropdownFilterValue(field);
                 filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
             }
+            // *********** showFilterMenu ***********
+            var showFilterMenu;
+            if (childColumnProps.showFilterMenu !== undefined) {
+                showFilterMenu = childColumnProps.showFilterMenu;
+            }
+            else {
+                showFilterMenu = true; // default
+                if (thisLocal.props.filterDisplay === "row") {
+                    if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
+                        showFilterMenu = false;
+                    }
+                }
+            }
+            // *********** showClearButton ***********
+            // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
+            var showClearButton = thisLocal.props.filterDisplay === "menu";
             // *********** width/headerStyle ***********
             var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
             if (width === undefined || width === "default") {
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, childColumnProps.type, header);
+                // TODO - if filter not used at all, then buttons flags should be false
+                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
+                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, filterMenuInFilterRow, childColumnProps.type, header, filterButtonInHeader);
             }
             var headerStyle = {};
             if (width !== undefined) {
                 headerStyle = { width: width };
             }
             // *********** align ***********
-            var align = "left"; // default
+            var align = undefined; // default undefined (left)
             // do buducna
             // if (childColumnProps.align !== undefined) {
             //     align = childColumnProps.align;
@@ -377,25 +463,19 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 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: field, header: header, filter: true, sortable: true, filterElement: filterElement, headerStyle: headerStyle, style: style, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, rowData, xEntity); } });
+            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: true, sortable: true, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, rowData, xEntity); } });
         });
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: this.props.filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement(XButton_1.XButton, { label: "Add row", onClick: onClickAddRow }),
                 react_1.default.createElement(XButton_1.XButton, { label: "Remove row", onClick: onClickRemoveRow }))));
     };
     XFormDataTable2.defaultProps = {
+        filterDisplay: "row",
         scrollable: true,
         scrollWidth: '100%',
         scrollHeight: '200vh',
@@ -405,24 +485,27 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     return XFormDataTable2;
 }(react_1.Component));
 exports.XFormDataTable2 = XFormDataTable2;
-exports.XFormColumn = function (props) {
+var XFormColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
+exports.XFormColumn = XFormColumn;
 exports.XFormColumn.defaultProps = {
     type: "inputSimple"
 };
-exports.XFormDropdownColumn = function (props) {
+var XFormDropdownColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
+exports.XFormDropdownColumn = XFormDropdownColumn;
 exports.XFormDropdownColumn.defaultProps = {
     type: "dropdown"
 };
-exports.XFormSearchButtonColumn = function (props) {
+var XFormSearchButtonColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);
 };
+exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
 exports.XFormSearchButtonColumn.defaultProps = {
     type: "searchButton"
 };

package/lib/components/XFormFooter.js

@@ -7,8 +7,9 @@ exports.XFormFooter = void 0;
 var react_1 = __importDefault(require("react"));
 var XButton_1 = require("./XButton");
 // helper wrapper
-exports.XFormFooter = function (props) {
+var XFormFooter = function (props) {
     return (react_1.default.createElement("div", { className: "flex justify-content-center" },
         react_1.default.createElement(XButton_1.XButton, { label: "Save", onClick: props.form.onClickSave }),
         react_1.default.createElement(XButton_1.XButton, { label: "Cancel", onClick: props.form.onClickCancel })));
 };
+exports.XFormFooter = XFormFooter;

package/lib/components/XFormNavigator3.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -14,7 +16,11 @@ var __extends = (this && this.__extends) || (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];
@@ -27,7 +33,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -47,9 +53,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormNavigator3 = void 0;
@@ -99,7 +110,7 @@ var XFormNavigator3 = /** @class */ (function (_super) {
     };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
-        var formElements = this.props.rootFormElement !== null ? __spread([this.props.rootFormElement], this.state.formElements) : this.state.formElements;
+        var formElements = this.props.rootFormElement !== null ? __spreadArray([this.props.rootFormElement], __read(this.state.formElements), false) : this.state.formElements;
         var forms = formElements.map(function (formElement, index) {
             var displayed = (index === formElements.length - 1);
             // klonovanim elementu pridame atribut openForm={this.openForm} (nemusime tento atribut pridavat pri vytvarani elementu)

package/lib/components/XHolders.js

@@ -5,9 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XHolder2 = exports.XHolder1 = void 0;
 var react_1 = __importDefault(require("react"));
-exports.XHolder1 = function (props) {
+var XHolder1 = function (props) {
     return react_1.default.createElement("div", null, props.element);
 };
-exports.XHolder2 = function (props) {
+exports.XHolder1 = XHolder1;
+var XHolder2 = function (props) {
     return react_1.default.createElement("div", null, props.element);
 };
+exports.XHolder2 = XHolder2;

package/lib/components/XInput.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XField } from "../serverApi/XEntityMetadata";
+export interface XInputProps extends XFormComponentProps {
+    field: string;
+    inputStyle?: React.CSSProperties;
+}
+export declare abstract class XInput<P extends XInputProps> extends XFormComponent<P> {
+    protected xField: XField;
+    protected constructor(props: P);
+    getField(): string;
+    isNotNull(): boolean;
+}

package/lib/components/XInput.js

@@ -0,0 +1,38 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XInput = void 0;
+var XUtilsMetadata_1 = require("./XUtilsMetadata");
+var XFormComponent_1 = require("./XFormComponent");
+// spolocna nadtrieda pre jednoduche inputy (nie asociacne)
+var XInput = /** @class */ (function (_super) {
+    __extends(XInput, _super);
+    function XInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
+        props.form.addField(props.field);
+        return _this;
+    }
+    XInput.prototype.getField = function () {
+        return this.props.field;
+    };
+    XInput.prototype.isNotNull = function () {
+        return !this.xField.isNullable;
+    };
+    return XInput;
+}(XFormComponent_1.XFormComponent));
+exports.XInput = XInput;

package/lib/components/XInputDate.js

@@ -10,7 +10,7 @@ var XUtilsConversions_1 = require("./XUtilsConversions");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
-exports.XInputDate = function (props) {
+var XInputDate = function (props) {
     var _a;
     props.form.addField(props.field);
     var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
@@ -51,5 +51,6 @@ exports.XInputDate = function (props) {
     }
     return (react_1.default.createElement("div", { className: "field grid" },
         react_1.default.createElement("label", { htmlFor: props.field, className: "col-fixed", style: { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH } }, label),
-        react_1.default.createElement(calendar_1.Calendar, { id: props.field, value: fieldValue, onChange: onValueChange, disabled: readOnly, showIcon: true, dateFormat: XUtilsConversions_1.dateFormatCalendar(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false })));
+        react_1.default.createElement(calendar_1.Calendar, { id: props.field, value: fieldValue, onChange: onValueChange, disabled: readOnly, showIcon: true, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false })));
 };
+exports.XInputDate = XInputDate;

package/lib/components/XInputDateDT.js

@@ -8,7 +8,7 @@ var XUtilsConversions_1 = require("./XUtilsConversions");
 var calendar_1 = require("primereact/calendar");
 var react_1 = __importDefault(require("react"));
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-exports.XInputDateDT = function (props) {
+var XInputDateDT = function (props) {
     var showTime = (props.xField.type === 'datetime');
     var cssClassName = showTime ? 'x-input-datetime' : 'x-input-date';
     // ak mame path, field je vzdy readOnly
@@ -50,5 +50,6 @@ exports.XInputDateDT = function (props) {
     // TODO - nefunguje dobre pridavanie noveho riadku - su tam stare neupdatnute hodnoty - este to asi neopravili https://github.com/primefaces/primereact/issues/1277
     // test mame na TestovaciForm
     // appendTo={document.body} appenduje overlay panel na element body - eliminuje problem s overflow (pozri poznamku v XDropdownDTFilter)
-    return (react_1.default.createElement(calendar_1.Calendar, { appendTo: document.body, id: props.field, value: fieldValue, onChange: function (e) { return onValueChange(props.field, props.rowData, e.value); }, disabled: readOnly, showIcon: true, dateFormat: XUtilsConversions_1.dateFormatCalendar(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false }));
+    return (react_1.default.createElement(calendar_1.Calendar, { appendTo: document.body, id: props.field, value: fieldValue, onChange: function (e) { return onValueChange(props.field, props.rowData, e.value); }, disabled: readOnly, showIcon: true, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false }));
 };
+exports.XInputDateDT = XInputDateDT;

package/lib/components/XInputDecimal.js

@@ -9,7 +9,7 @@ var inputnumber_1 = require("primereact/inputnumber");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
-exports.XInputDecimal = function (props) {
+var XInputDecimal = function (props) {
     var _a, _b, _c;
     props.form.addField(props.field);
     var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
@@ -58,3 +58,4 @@ exports.XInputDecimal = function (props) {
         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 })));
 };
+exports.XInputDecimal = XInputDecimal;

package/lib/components/XInputDecimalDT.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var inputnumber_1 = require("primereact/inputnumber");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-exports.XInputDecimalDT = function (props) {
+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
@@ -49,3 +49,4 @@ exports.XInputDecimalDT = function (props) {
     }
     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" }));
 };
+exports.XInputDecimalDT = XInputDecimalDT;

package/lib/components/XInputText.d.ts

@@ -1,16 +1,11 @@
-import React from "react";
-import { XFormComponent, XFormComponentProps } from "./XFormComponent";
-import { XField } from "../serverApi/XEntityMetadata";
-export interface XInputTextProps extends XFormComponentProps {
-    field: string;
+/// <reference types="react" />
+import { XInput, XInputProps } from "./XInput";
+export interface XInputTextProps extends XInputProps {
     size?: number;
-    inputStyle?: React.CSSProperties;
 }
-export declare class XInputText extends XFormComponent<XInputTextProps> {
-    protected xField: XField;
+export declare class XInputText extends XInput<XInputTextProps> {
     constructor(props: XInputTextProps);
-    getFieldForEdit(): string | undefined;
-    checkNotNull(): boolean;
-    getValueFromObject(): any;
+    getValue(): string;
+    onValueChange(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XInputText.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -29,68 +31,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XInputText = void 0;
 var react_1 = __importDefault(require("react"));
-var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XUtils_1 = require("./XUtils");
 var XUtilsConversions_1 = require("./XUtilsConversions");
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var inputtext_1 = require("primereact/inputtext");
-var XFormComponent_1 = require("./XFormComponent");
+var XInput_1 = require("./XInput");
 var XInputText = /** @class */ (function (_super) {
     __extends(XInputText, _super);
     function XInputText(props) {
         var _this = _super.call(this, props) || this;
-        _this.xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPathStr(props.form.getEntity(), props.field);
-        props.form.addField(props.field);
+        _this.onValueChange = _this.onValueChange.bind(_this);
         return _this;
     }
-    // TODO - prerobit - len field nech vracia
-    XInputText.prototype.getFieldForEdit = function () {
-        // TODO - zohladnit aj aktualny readOnly stav
-        if (!XUtils_1.XUtils.isReadOnly(this.props.field, this.props.readOnly)) {
-            return this.props.field;
-        }
-        return undefined;
-    };
-    XInputText.prototype.checkNotNull = function () {
-        // TODO - zohladnit aj aktualny readOnly stav
-        return !this.xField.isNullable && !XUtils_1.XUtils.isReadOnly(this.props.field, this.props.readOnly);
+    XInputText.prototype.getValue = function () {
+        // konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
+        var value = this.getValueFromObject();
+        return (0, XUtilsConversions_1.stringAsUI)(value);
     };
-    XInputText.prototype.getValueFromObject = function () {
-        var objectValue = null;
-        var object = this.props.form.state.object;
-        if (object !== null) {
-            objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, this.props.field);
-            //  pre istotu dame na null, null je standard
-            if (objectValue === undefined) {
-                objectValue = null;
-            }
-        }
-        return objectValue;
+    XInputText.prototype.onValueChange = function (e) {
+        var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+        this.onValueChangeBase(value);
     };
     XInputText.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c;
-        var props = this.props;
-        var xField = this.xField;
-        var label = (_a = props.label) !== null && _a !== void 0 ? _a : props.field;
-        if (this.checkNotNull()) {
-            label = XUtils_1.XUtils.markNotNull(label);
-        }
-        var readOnly = XUtils_1.XUtils.isReadOnly(props.field, props.readOnly);
-        var size = (_b = props.size) !== null && _b !== void 0 ? _b : xField.length;
-        var labelStyle = (_c = props.labelStyle) !== null && _c !== void 0 ? _c : { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH };
-        var onValueChange = function (e) {
-            var value = XUtilsConversions_1.stringFromUI(e.target.value);
-            var error = _this.validateOnChange(value);
-            props.form.onFieldChange(props.field, value, error);
-        };
-        // konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        var fieldValue = XUtilsConversions_1.stringAsUI(this.getValueFromObject());
+        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: props.field, className: "col-fixed", style: labelStyle }, label),
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.field, value: fieldValue, onChange: onValueChange, readOnly: readOnly, maxLength: xField.length, size: size, style: props.inputStyle }, this.getClassNameTooltip()))));
+            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()))));
     };
     return XInputText;
-}(XFormComponent_1.XFormComponent));
+}(XInput_1.XInput));
 exports.XInputText = XInputText;