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

package/lib/components/XFormComponent.js

@@ -17,6 +17,8 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormComponent = void 0;
 var react_1 = require("react");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
     function XFormComponent(props) {
@@ -24,24 +26,64 @@ var XFormComponent = /** @class */ (function (_super) {
         props.form.addXFormComponent(_this);
         return _this;
     }
-    // pomocna metodka, sluzi napr. na validaciu not null atributov
-    // should be overriden
-    XFormComponent.prototype.getFieldForEdit = function () {
-        return undefined;
+    // ******** read and write from/into form.state.object ***********
+    // reads value from form.state.object
+    // can be overridden, but this should work for every component
+    XFormComponent.prototype.getValueFromObject = function () {
+        var objectValue = null;
+        var object = this.props.form.state.object;
+        if (object !== null) {
+            objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, this.getField());
+            //  pre istotu dame na null, null je standard
+            if (objectValue === undefined) {
+                objectValue = null;
+            }
+        }
+        return objectValue;
+    };
+    // writes value into form.state.object
+    XFormComponent.prototype.onValueChangeBase = function (value) {
+        var error = this.validateOnChange(value);
+        this.props.form.onFieldChange(this.getField(), value, error);
+    };
+    XFormComponent.prototype.isReadOnly = function () {
+        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
+        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
     };
+    XFormComponent.prototype.getLabel = function () {
+        var _a;
+        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
+        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+        if (this.isNotNull() && !this.isReadOnly()) {
+            label = XUtils_1.XUtils.markNotNull(label);
+        }
+        return label;
+    };
+    XFormComponent.prototype.getLabelStyle = function () {
+        var _a, _b;
+        var labelStyle = (_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {};
+        var inline = (_b = this.props.inline) !== null && _b !== void 0 ? _b : false;
+        if (!inline) {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
+        }
+        else {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: 'auto' }); // podla dlzky labelu
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { marginLeft: '1rem' });
+        }
+        return labelStyle;
+    };
+    // *********** validation support ************
     // volane po kliknuti na Save
-    // vrati error message ak nezbehne "field validacia", ak zbehne, vrati undefined
+    // vrati (field, XError) ak nezbehne "field validacia", ak zbehne, vrati undefined
     XFormComponent.prototype.validate = function () {
+        // TODO - FILOZOFICKA OTAZKA - volat validaciu aj ked je field readOnly (this.isReadOnly() === true)? zatial dame ze hej...
         var value = this.getValueFromObject();
         // not null validacia + custom field validacia volana na onChange
         var errorOnChange = this.validateOnChange(value);
         // custom field validacia volana na onBlur (focus lost)
         // TODO
         if (errorOnChange) {
-            var field = this.getFieldForEdit();
-            if (field) {
-                return { field: field, xError: { onChange: errorOnChange } };
-            }
+            return { field: this.getField(), xError: { onChange: errorOnChange, fieldLabel: this.getLabel() } };
         }
         return undefined;
     };
@@ -55,49 +97,14 @@ var XFormComponent = /** @class */ (function (_super) {
         return undefined;
     };
     XFormComponent.prototype.validateNotNull = function (value) {
-        if (this.checkNotNull() && value === null) {
+        // validacia by mala sediet s metodou getLabel(), kde sa pridava * , preto tu mame aj test !this.isReadOnly() - id fieldy pri inserte nechceme testovat
+        // otazka je ci nevypinat validaciu pre readOnly fieldy vzdy (aj ked napr. readOnly vznikne dynamicky)
+        if (this.isNotNull() && !this.isReadOnly() && value === null) {
             return "Field is required.";
         }
         return undefined;
     };
-    // should be overriden
-    XFormComponent.prototype.checkNotNull = function () {
-        return false;
-    };
-    // should be overriden
-    XFormComponent.prototype.getValueFromObject = function () {
-        return null;
-    };
-    // vrati error message z form.state.errorMap
-    XFormComponent.prototype.getError = function () {
-        var field = this.getFieldForEdit();
-        if (field) {
-            var error = this.props.form.state.errorMap[field];
-            if (error) {
-                if (error.onChange || error.onBlur || error.form) {
-                    var message = '';
-                    if (error.onChange) {
-                        message += error.onChange;
-                    }
-                    if (error.onBlur) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.onBlur;
-                    }
-                    if (error.form) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.form;
-                    }
-                    return message;
-                }
-            }
-        }
-        return undefined;
-    };
-    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props
+    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props (asi ako v XAutoComplete)
     XFormComponent.prototype.getClassNameTooltip = function () {
         var error = this.getError();
         return error ? {
@@ -106,6 +113,11 @@ var XFormComponent = /** @class */ (function (_super) {
             tooltipOptions: { className: 'pink-tooltip', position: 'bottom' }
         } : {};
     };
+    // vrati error message z form.state.errorMap
+    XFormComponent.prototype.getError = function () {
+        var error = this.props.form.state.errorMap[this.getField()];
+        return error ? XUtils_1.XUtils.getXErrorMessage(error) : undefined;
+    };
     return XFormComponent;
 }(react_1.Component));
 exports.XFormComponent = XFormComponent;

package/lib/components/XFormDataTable2.d.ts

@@ -1,7 +1,8 @@
 import { XFormBase } from "./XFormBase";
 import { Component, ReactChild } from "react";
-import { Filters } from "../serverApi/FindParam";
+import { DataTableFilterMeta } from "primereact/datatable";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
+import { FilterMatchMode } from "primereact/api";
 export interface XDropdownOptionsMap {
     [assocField: string]: any[];
 }
@@ -11,6 +12,7 @@ export interface XFormDataTableProps {
     dataKey?: string;
     paginator?: boolean;
     rows?: number;
+    filterDisplay: "menu" | "row";
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
@@ -24,6 +26,7 @@ export interface XFormDataTableProps {
 }
 export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     static defaultProps: {
+        filterDisplay: string;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
@@ -36,12 +39,14 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     state: {
         selectedRow: {} | undefined;
         dropdownOptionsMap: XDropdownOptionsMap;
-        filters: Filters;
+        filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
     static getPathForColumn(columnProps: XFormColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
     getEntity(): string;
+    createInitFilters(): DataTableFilterMeta;
+    getFilterMatchMode(xField: XField): FilterMatchMode;
     onSelectionChange(event: any): void;
     onDropdownOptionsMapChange(dropdownOptionsMap: XDropdownOptionsMap): void;
     onFilter(event: any): void;
@@ -49,7 +54,6 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     getCheckboxFilterValue(field: string): boolean | null;
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
-    onBodyValueChange(field: string, rowData: any, newValue: any): void;
     bodyTemplate(columnProps: XFormColumnProps, rowData: any, xEntity: XEntity): any;
     onClickAddRowDefault(): void;
     onClickRemoveRowDefault(): void;
@@ -60,6 +64,7 @@ export interface XFormColumnProps {
     header?: any;
     readOnly?: boolean;
     dropdownInFilter?: boolean;
+    showFilterMenu?: boolean;
     width?: string;
 }
 export interface XFormInputSimpleColumnProps extends XFormColumnProps {

package/lib/components/XFormDataTable2.js

@@ -27,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];
@@ -71,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) {
@@ -87,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);
@@ -172,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);
@@ -190,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 });
     };
@@ -215,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 });
     };
@@ -227,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;
@@ -322,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) {
@@ -354,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;
+            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;
@@ -379,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',

package/lib/components/XFormNavigator3.js

@@ -16,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];
@@ -49,10 +53,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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;
@@ -102,7 +110,7 @@ var XFormNavigator3 = /** @class */ (function (_super) {
     };
     XFormNavigator3.prototype.render = function () {
         var _this = this;
-        var formElements = this.props.rootFormElement !== null ? __spreadArray([this.props.rootFormElement], __read(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/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

@@ -51,6 +51,6 @@ var 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

@@ -50,6 +50,6 @@ var 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/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;
 }