@michalrakus/x-react-web-lib 1.17.0 → 1.19.0

package/lib/components/XAutoCompleteDT.js

@@ -14,42 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -57,7 +21,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoCompleteDT = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormComponentDT_1 = require("./XFormComponentDT");
-var XUtils_1 = require("./XUtils");
 var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoCompleteDT = /** @class */ (function (_super) {
@@ -66,33 +29,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity), props.assocField);
         _this.errorInBase = undefined;
-        _this.state = {
-            suggestions: []
-        };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
         return _this;
     }
-    XAutoCompleteDT.prototype.componentDidMount = function () {
-        this.readAndSetSuggestions();
-    };
-    XAutoCompleteDT.prototype.readAndSetSuggestions = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var suggestions;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(this.props.suggestions === undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), this.props.displayField)];
-                    case 1:
-                        suggestions = _a.sent();
-                        this.setState({ suggestions: suggestions });
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
+    // componentDidMount() {
+    // }
     XAutoCompleteDT.prototype.getField = function () {
         return this.props.assocField;
     };
@@ -105,13 +47,6 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
         this.onValueChangeBase(object, this.props.onChange, objectChange);
-        if (objectChange !== XUtils_1.OperationType.None) {
-            // zmenil sa zaznam dobrovolnika v DB
-            // zatial len refreshneme z DB
-            // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
-            // ak bol delete (dobrovolnik === null), treba urobit refresh do DB (alebo si poslat id-cko zmazaneho zaznamu)
-            this.readAndSetSuggestions();
-        }
     };
     XAutoCompleteDT.prototype.onErrorChangeAutoCompleteBase = function (error) {
         this.errorInBase = error; // odlozime si error
@@ -128,13 +63,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.render = function () {
         var _this = this;
-        var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
         //const xDisplayField = XUtilsMetadataCommon.getXFieldByPath(xEntityAssoc, this.props.displayField);
         // TODO - size
         //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
-        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); } }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields } }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XCalendar.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
+/// <reference types="react" />
 export declare const XCalendar: (props: {
     id?: string | undefined;
     value: Date | null;
     onChange: (value: Date | null) => void;
-    onBlur?: ((event: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
     readOnly?: boolean | undefined;
     error?: string | undefined;
     datetime?: boolean | undefined;

package/lib/components/XCalendar.js

@@ -10,30 +10,99 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XCalendar = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var calendar_1 = require("primereact/calendar");
 var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XUtils_1 = require("./XUtils");
 // wrapper for Calendar component, maybe better name would be XInputDateBase
+// TODO - nefunguje rezim datetime pre zapis - dorobit konverziu!
 var XCalendar = function (props) {
     var _a;
+    // true, ak uzivatel typuje hodnotu
+    // false, ak uz uzivatel dotypoval (zavolal sa onBlur) - hodnotu berieme "z hora" (z prop.value)
+    var _b = __read((0, react_1.useState)(false), 2), inputChanged = _b[0], setInputChanged = _b[1];
+    // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
+    var _c = __read((0, react_1.useState)(undefined), 2), inputValueState = _c[0], setInputValueState = _c[1];
     var onChange = function (e) {
-        // z Calendar prichadza e.value - typ Date alebo null
+        // standardne prichadza z Calendar e.value - typ Date alebo null
         // typ Date prichadza ak uzivatel vyplnil validny datum, null (typeof e.value vracia "object") prichadza ak uzivatel vymazal datum
         // alebo je este datum nekompletny (uzivatel prave zadava datum)
-        // ak nastavime keepInvalid={true}, tak bude chodit nevalidny string (typeof e.value vracia "string")
-        //console.log(typeof e.value);
-        //console.log(e.value instanceof Date);
-        if (e.value instanceof Date || e.value === null) {
-            props.onChange(e.value);
+        // nastavili sme keepInvalid={true} -> bude chodit nevalidny string (typeof e.value vracia "string")
+        // naviac sme vypli parsovanie na datum (metoda parseDateTime), takze vzdy chodi "string" a konverziu robime v onBlur
+        setInputChanged(true);
+        setInputValueState(e.value); // vzdycky string
+    };
+    var onSelect = function (e) {
+        // musime tu zavolat props.onChange lebo event select zavola aj onChange ale my umyselne v onChange nevolame props.onChange
+        // (cakame na event blur, ktory po selecte nepride)
+        props.onChange(e.value); // vzdycky Date
+        // pre poriadok resetneme stav
+        setInputChanged(false);
+        setInputValueState(undefined);
+    };
+    var onBlur = function (e) {
+        if (inputChanged) {
+            // poznamka: e.target.value aj inputValueState obsahuju tu istu string hodnotu
+            var value = (0, XUtilsConversions_1.dateFromUI)(e.target.value);
+            props.onChange(value !== null && value !== void 0 ? value : null); // nekorektnu hodnotu reprezentovanu cez undefined budeme riesit akokeby user zadal null (field sa vyprazdni)
+            setInputChanged(false);
+            setInputValueState(undefined); // pre poriadok
+        }
+    };
+    var getInputValue = function () {
+        var inputValue;
+        if (inputChanged) {
+            inputValue = inputValueState; // vzdycky string
+        }
+        else {
+            inputValue = (0, XUtilsConversions_1.dateFromModel)(props.value);
         }
+        return inputValue;
     };
     var datetime = (_a = props.datetime) !== null && _a !== void 0 ? _a : false;
-    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: props.value, onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onBlur: props.onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
+    // poznamka: parseDateTime nerobi ziadny parse, nechceme aby Calendar "rusil" uzivatela pri typovani datumu
+    // konverzia (a volanie props.onChange) sa robi az pri onBlur
+    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
 };
 exports.XCalendar = XCalendar;

package/lib/components/XFormBase.js

@@ -92,6 +92,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormBase = exports.Form = void 0;
 var react_1 = require("react");
 var XUtils_1 = require("./XUtils");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 // class decorator ktory nastavuje property entity (dalo by sa to nastavovat v konstruktore ale decorator je menej ukecany)
 // ma sa pouzivat len na triedach odvodenych od XFormBase - obmedzenie som vsak nevedel nakodit
 // property sa nastavi az po zbehnuti konstruktora
@@ -217,8 +218,11 @@ var XFormBase = /** @class */ (function (_super) {
         return this.props.id === undefined;
     };
     XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
+        // field moze byt aj na asociovanom objekte (field length > 1, napr.: <assocX>.<fieldY>)
+        // v takom pripade sa do errorMap zapise ako key cely field <assocX>.<fieldY>
+        // (zlozitejsie riesenie by bolo zapisovat errors do specialneho technickeho atributu asociovaneho objektu ale zatial to nechame takto jednoducho)
         var object = this.getXObject();
-        object[field] = value;
+        XUtilsCommon_1.XUtilsCommon.setValueByPath(object, field, value);
         var errorMap = this.state.errorMap;
         errorMap[field] = __assign(__assign({}, errorMap[field]), { onChange: error });
         // tu zavolame onChange komponentu - object uz ma zapisanu zmenenu hodnotu, onChange nasledne zmeni dalsie hodnoty a nasledne sa zavola setState

package/lib/components/XFormComponent.js

@@ -51,13 +51,9 @@ var XFormComponent = /** @class */ (function (_super) {
     };
     XFormComponent.prototype.isReadOnly = function () {
         var readOnly;
-        if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
-            // if the length of field is 2 or more, then readOnly
-            readOnly = true;
-        }
         // the purpose of formReadOnly is to put the whole form to read only mode,
         // that's why the formReadOnly has higher prio then property this.props.readOnly
-        else if (this.props.form.formReadOnlyBase(this.getField())) {
+        if (this.props.form.formReadOnlyBase(this.getField())) {
             readOnly = true;
         }
         else if (typeof this.props.readOnly === 'boolean') {
@@ -75,7 +71,14 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         else {
             // readOnly is undefined
-            readOnly = false;
+            if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
+                // if the length of field is 2 or more, then readOnly
+                readOnly = true;
+            }
+            else {
+                // length of field is 1, default readOnly = false
+                readOnly = false;
+            }
         }
         return readOnly;
     };

package/lib/components/XFormDataTable2.d.ts

@@ -92,7 +92,7 @@ export type XTableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
 export type XTableFieldReadOnlyProp = boolean | ((object: any, tableRow: any) => boolean);
 export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
 export interface XFormColumnBaseProps {
-    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "custom";
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "textarea" | "custom";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
@@ -123,6 +123,11 @@ export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     displayField: string;
     searchBrowse: JSX.Element;
 }
+export interface XFormTextareaColumnProps extends XFormColumnBaseProps {
+    field: string;
+    rows: number;
+    autoResize?: boolean;
+}
 export interface XFormCustomColumnProps extends XFormColumnBaseProps {
     body: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
     field?: string;
@@ -155,6 +160,15 @@ export declare const XFormSearchButtonColumn: {
         columnViewStatus: boolean;
     };
 };
+export declare const XFormTextareaColumn: {
+    (props: XFormTextareaColumnProps): null;
+    defaultProps: {
+        type: string;
+        rows: number;
+        autoResize: boolean;
+        columnViewStatus: boolean;
+    };
+};
 export declare const XFormCustomColumn: {
     (props: XFormCustomColumnProps): null;
     defaultProps: {

package/lib/components/XFormDataTable2.js

@@ -60,7 +60,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XFormCustomColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormCustomColumn = exports.XFormTextareaColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
 var XFormBase_1 = require("./XFormBase");
 var react_1 = __importStar(require("react"));
 var XDropdownDT_1 = require("./XDropdownDT");
@@ -83,6 +83,7 @@ var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XLocale_1 = require("./XLocale");
 var XInputIntervalDT_1 = require("./XInputIntervalDT");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XInputTextareaDT_1 = require("./XInputTextareaDT");
 var XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -150,6 +151,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsSearchButton = columnProps;
             return columnPropsSearchButton.assocField + '.' + columnPropsSearchButton.displayField;
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            return columnPropsTextarea.field;
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -183,6 +188,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             isNullable = xAssoc.isNullable;
             readOnly = XFormDataTable2.isReadOnlyHeader(undefined, columnProps.readOnly);
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            isNullable = xField.isNullable;
+            readOnly = XFormDataTable2.isReadOnlyHeader(columnPropsTextarea.field, columnProps.readOnly);
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -375,10 +385,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
-                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "interval") {
-                body = react_1.default.createElement(XInputIntervalDT_1.XInputIntervalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+                body = react_1.default.createElement(XInputIntervalDT_1.XInputIntervalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "boolean") {
                 body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
@@ -400,6 +410,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsSearchButton = columnProps;
             body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            body = react_1.default.createElement(XInputTextareaDT_1.XInputTextareaDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsTextarea.field, rows: columnPropsTextarea.rows, autoResize: columnPropsTextarea.autoResize, rowData: rowData, readOnly: columnPropsTextarea.readOnly });
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -527,7 +541,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
         // default sortovanie - ak mame insert tak nesortujeme (drzime poradie v akom user zaznam vytvoril), ak mame update tak podla id zosortujeme (nech je to zobrazene vzdy rovnako)
-        var sortField = ((_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.form.isAddRow()) ? undefined : xEntity.idField;
+        var sortField = (_a = this.props.sortField) !== null && _a !== void 0 ? _a : (this.props.form.isAddRow() ? undefined : xEntity.idField);
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
         var readOnly = this.isReadOnly();
         // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit
@@ -723,6 +737,12 @@ var XFormSearchButtonColumn = function (props) {
 };
 exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
 exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });
+var XFormTextareaColumn = 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.XFormTextareaColumn = XFormTextareaColumn;
+exports.XFormTextareaColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "textarea", rows: 1, autoResize: true });
 var XFormCustomColumn = 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);

package/lib/components/XFormRowCol/XFormCol.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormColProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormCol: (props: XFormColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormCol.js

@@ -7,6 +7,6 @@ exports.XFormCol = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormCol = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormCol = XFormCol;

package/lib/components/XFormRowCol/XFormInlineRow.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormInlineRowProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormInlineRow: (props: XFormInlineRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormInlineRow.js

@@ -7,6 +7,6 @@ exports.XFormInlineRow = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormInlineRow = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-inline-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-inline-row", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormInlineRow = XFormInlineRow;

package/lib/components/XFormRowCol/XFormRow.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormRowProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormRow: (props: XFormRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRow.js

@@ -7,6 +7,6 @@ exports.XFormRow = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormRow = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-row", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormRow = XFormRow;

package/lib/components/XFormRowCol/XFormRowCol.d.ts

@@ -4,6 +4,7 @@ export interface XFormRowColProps {
     className: "x-form-row" | "x-form-inline-row" | "x-form-col";
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormRowCol: (props: XFormRowColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -27,6 +27,6 @@ var XFormRowCol = function (props) {
     else {
         childElemList = props.children; // netreba klonovat - viac menej koli performance
     }
-    return react_1.default.createElement("div", { className: props.className }, childElemList);
+    return react_1.default.createElement("div", { className: props.className, style: props.style }, childElemList);
 };
 exports.XFormRowCol = XFormRowCol;

package/lib/components/XInputDate.d.ts

@@ -8,6 +8,5 @@ export declare class XInputDate extends XInput<Date, XInputDateProps> {
     constructor(props: XInputDateProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    onBlur(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XInputDate.js

@@ -22,41 +22,27 @@ exports.XInputDate = void 0;
 var react_1 = __importDefault(require("react"));
 var XCalendar_1 = require("./XCalendar");
 var XInput_1 = require("./XInput");
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XInputDate = /** @class */ (function (_super) {
     __extends(XInputDate, _super);
     function XInputDate(props) {
         var _this = _super.call(this, props) || this;
         _this.onValueChange = _this.onValueChange.bind(_this);
-        _this.onBlur = _this.onBlur.bind(_this);
         return _this;
     }
     XInputDate.prototype.getValue = function () {
-        var value = null;
-        var objectValue = this.getValueFromObject();
-        // tuto zatial hack, mal by prist Date
-        if (typeof objectValue === 'string') {
-            value = new Date(objectValue);
-        }
-        else if (typeof objectValue === 'object' && objectValue instanceof Date) {
-            value = objectValue;
-        }
-        // value zostalo null ak nebol vykonany ziaden if
+        var value = (0, XUtilsConversions_1.dateFromModel)(this.getValueFromObject());
         return value;
     };
     XInputDate.prototype.onValueChange = function (value) {
         // z XCalendar prichadza value - typ Date alebo null
-        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)
-    XInputDate.prototype.onBlur = function (e) {
-        this.callOnChangeFromOnBlur();
+        this.onValueChangeBase(value, this.props.onChange);
     };
     XInputDate.prototype.render = function () {
         // 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(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime', onBlur: this.onBlur })));
+            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime' })));
     };
     return XInputDate;
 }(XInput_1.XInput));

package/lib/components/XInputDateDT.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { XFormBase } from "./XFormBase";
-import { XField } from "../serverApi/XEntityMetadata";
-import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
-export declare const XInputDateDT: (props: {
-    form: XFormBase;
-    xField: XField;
-    field: string;
-    rowData: any;
-    readOnly?: XTableFieldReadOnlyProp | undefined;
-}) => JSX.Element;
+import { XInputDT, XInputDTProps } from "./XInputDT";
+export interface XInputDateDTProps extends XInputDTProps {
+}
+export declare class XInputDateDT extends XInputDT<XInputDateDTProps> {
+    constructor(props: XInputDateDTProps);
+    getValue(): Date | null;
+    onValueChange(value: Date | null): void;
+    render(): JSX.Element;
+}