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

package/lib/components/XFieldSelector.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -14,7 +18,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;
 };
@@ -51,11 +55,11 @@ var react_1 = __importStar(require("react"));
 var treetable_1 = require("primereact/treetable");
 var column_1 = require("primereact/column");
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
-exports.XFieldSelector = function (props) {
+var XFieldSelector = function (props) {
     // poznamka: treeNodeList by sme mohli vypocitavat priamo, ale ked pouzijeme useState/useEffect tak sa createTreeNodeList zavola len raz pri vytvoreni komponentu
-    var _a = __read(react_1.useState([]), 2), treeNodeList = _a[0], setTreeNodeList = _a[1];
+    var _a = __read((0, react_1.useState)([]), 2), treeNodeList = _a[0], setTreeNodeList = _a[1];
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         setTreeNodeList(createTreeNodeList(props.entity, ""));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
     var createTreeNodeList = function (entity, keyPrefix) {
@@ -101,7 +105,8 @@ exports.XFieldSelector = function (props) {
         }
         return treeNodeList;
     };
-    return (react_1.default.createElement(treetable_1.TreeTable, { value: treeNodeList, selectionMode: "single", selectionKeys: props.selectionField, onSelectionChange: function (e) { return props.onSelectionChange(e.value); }, className: "x-field-treetable p-treetable-sm", scrollable: true, scrollHeight: "20rem" },
+    return (react_1.default.createElement(treetable_1.TreeTable, { value: treeNodeList, selectionMode: "single", selectionKeys: props.selectionField, onSelectionChange: function (e) { return props.onSelectionChange(Object.keys(e.value)[0]); }, className: "x-field-treetable p-treetable-sm", scrollable: true, scrollHeight: "20rem" },
         react_1.default.createElement(column_1.Column, { field: "name", header: "Field name", headerStyle: { width: "15.7rem" }, expander: true }),
         react_1.default.createElement(column_1.Column, { field: "type", header: "Type", headerStyle: { width: "9.3rem" } })));
 };
+exports.XFieldSelector = XFieldSelector;

package/lib/components/XFormBase.d.ts

@@ -1,13 +1,14 @@
 import { Component } from "react";
 import { XObject } from "./XObject";
 import { OperationType } from "./XUtils";
-import { XFormComponent } from "./XFormComponent";
-import { XFormDataTable2 } from "./XFormDataTable2";
+import { FieldOnChange, XFormComponent } from "./XFormComponent";
+import { TableFieldOnChange, XFormDataTable2, XRowTechData } from "./XFormDataTable2";
 import { XErrorMap, XErrors } from "./XErrors";
+export type XOnSaveOrCancelProp = (object: XObject | null, objectChange: OperationType) => void;
 export interface FormProps {
     id?: number;
     object?: XObject;
-    onSaveOrCancel?: (object: XObject | null, objectChange: OperationType) => void;
+    onSaveOrCancel?: XOnSaveOrCancelProp;
 }
 export declare function Form(entity: string): <T extends new (...args: any[]) => {}>(constructor: T) => {
     new (...args: any[]): {
@@ -21,7 +22,7 @@ export declare abstract class XFormBase extends Component<FormProps> {
         object: XObject | null;
         errorMap: XErrorMap;
     } | any;
-    xFormComponentList: Array<XFormComponent<any>>;
+    xFormComponentList: Array<XFormComponent<any, any>>;
     xFormDataTableList: Array<XFormDataTable2>;
     constructor(props: FormProps);
     componentDidMount(): Promise<void>;
@@ -29,20 +30,28 @@ export declare abstract class XFormBase extends Component<FormProps> {
     getXObject(): XObject;
     getObject(): any;
     isAddRow(): any;
-    onFieldChange(field: string, value: any, error?: string | undefined): void;
-    onTableFieldChange(assocField: string, rowIndex: number, field: string, value: any): void;
-    onObjectDataChange(): void;
+    onFieldChange(field: string, value: any, error?: string | undefined, onChange?: FieldOnChange, assocObjectChange?: OperationType): void;
+    onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: TableFieldOnChange, assocObjectChange?: OperationType): void;
+    /**
+     * @deprecated - mal by sa pouzivat onTableFieldChange
+     */
+    onObjectDataChange(row?: any, onChange?: TableFieldOnChange): void;
+    setStateXForm(): void;
     onTableAddRow(assocField: string, newRow: any, dataKey?: string, selectedRow?: {}): void;
     static getNextRowId(rowList: any[], dataKey: string): number;
     onTableRemoveRow(assocField: string, row: {}): void;
+    static getXRowTechData(row: any): XRowTechData;
     addField(field: string): void;
-    addXFormComponent(xFormComponent: XFormComponent<any>): void;
+    addXFormComponent(xFormComponent: XFormComponent<any, any>): void;
+    findXFormComponent(field: string): XFormComponent<any, any> | undefined;
     addXFormDataTable(xFormDataTable: XFormDataTable2): void;
     onClickSave(): Promise<void>;
     onClickCancel(): void;
     validateSave(): boolean;
     validateForm(): XErrorMap;
     fieldValidation(): XErrorMap;
+    preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): XErrors;
     preSave(object: XObject): void;
+    saveRow(): Promise<any>;
 }

package/lib/components/XFormBase.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 __());
@@ -38,7 +40,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -90,7 +92,6 @@ 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
@@ -142,10 +143,11 @@ var XFormBase = /** @class */ (function (_super) {
     }
     XFormBase.prototype.componentDidMount = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var object;
+            var object, operationType;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        console.log("volany XFormBase.componentDidMount()");
                         // kontrola (musi byt tu, v konstruktore este property nie je nastavena)
                         if (this.entity === undefined) {
                             throw "XFormBase: Property entity is not defined - use decorator @Form.";
@@ -153,18 +155,21 @@ var XFormBase = /** @class */ (function (_super) {
                         if (!(this.props.id !== undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, XUtils_1.XUtils.fetchById(this.entity, Array.from(this.fields), this.props.id)];
                     case 1:
+                        //console.log('XFormBase.componentDidMount ide nacitat objekt');
+                        //console.log(this.fields);
                         object = _a.sent();
-                        //console.log('XFormBase.componentDidMount nacital objekt:');
-                        //console.log(object);
-                        // const price = (object as any).price;
-                        // console.log(typeof price);
-                        // console.log(price);
-                        // const date = (object as any).carDate;
-                        // console.log(typeof date);
-                        // console.log(date);
-                        this.setState({ object: object });
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+                        operationType = XUtils_1.OperationType.Update;
+                        return [3 /*break*/, 3];
+                    case 2:
+                        // add new row
+                        object = this.state.object;
+                        operationType = XUtils_1.OperationType.Insert;
+                        _a.label = 3;
+                    case 3:
+                        this.preInitForm(object, operationType);
+                        console.log("volany XFormBase.componentDidMount() - ideme setnut object");
+                        this.setState({ object: object }, function () { return console.log("volany XFormBase.componentDidMount() - callback setState"); });
+                        return [2 /*return*/];
                 }
             });
         });
@@ -187,26 +192,52 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.isAddRow = function () {
         return this.props.id === undefined;
     };
-    XFormBase.prototype.onFieldChange = function (field, value, error) {
+    XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
         var object = this.getXObject();
         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
+        if (onChange) {
+            onChange({ object: object, assocObjectChange: assocObjectChange });
+        }
         // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object, errorMap: errorMap });
     };
-    XFormBase.prototype.onTableFieldChange = function (assocField, rowIndex, field, value) {
+    XFormBase.prototype.onTableFieldChange = function (rowData, field, value, error, onChange, assocObjectChange) {
         var object = this.getXObject();
-        var rowList = object[assocField];
-        rowList[rowIndex][field] = value;
+        rowData[field] = value;
+        // nastavime error do rowData do tech fieldu
+        var errorMap = XFormBase.getXRowTechData(rowData).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
+        if (onChange) {
+            onChange({ object: object, tableRow: rowData, assocObjectChange: assocObjectChange });
+        }
         // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
-        this.setState({ object: object });
+        this.setState({ object: object /*, errorMap: errorMap*/ });
     };
-    XFormBase.prototype.onObjectDataChange = function () {
+    /**
+     * @deprecated - mal by sa pouzivat onTableFieldChange
+     */
+    XFormBase.prototype.onObjectDataChange = function (row, onChange) {
         var object = this.state.object;
+        // tu zavolame onChange komponentu - object uz ma zapisanu zmenenu hodnotu, onChange nasledne zmeni dalsie hodnoty a nasledne sa zavola setState
+        if (onChange) {
+            // TODO - assocObjectChange dorobit
+            onChange({ object: object, tableRow: row, assocObjectChange: undefined });
+        }
         // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object });
     };
+    // lepsi nazov ako onObjectDataChange
+    // ak niekto zmenil this.state.object alebo this.state.errorMap, zmena sa prejavi vo formulari
+    // pouzivame napr. po zavolani onChange na XInputText
+    XFormBase.prototype.setStateXForm = function () {
+        // TODO - je to ok ze object menime takto?
+        // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
+        this.setState({ object: this.state.object, errorMap: this.state.errorMap });
+    };
     XFormBase.prototype.onTableAddRow = function (assocField, newRow, dataKey, selectedRow) {
         var object = this.getXObject();
         var rowList = object[assocField];
@@ -269,18 +300,54 @@ var XFormBase = /** @class */ (function (_super) {
         // TODO - tu mozno treba setnut funkciu - koli moznej asynchronicite
         this.setState({ object: object });
     };
+    // tato metoda (aj vsetky ostatne metody precujuce s row-mi) by mali byt skor na XFormDataTable2 (ta pozna "assocField" (OneToMany asociaciu))
+    XFormBase.getXRowTechData = function (row) {
+        // ak este nemame rowTechData, tak ho vytvorime
+        if (row.__x_rowTechData === undefined) {
+            // field '__x_rowTechData' vytvorime takymto specialnym sposobom, aby mal "enumerable: false", tympadom ho JSON.stringify nezaserializuje
+            // pri posielani objektu formulara na backend (pozor, zaroven sa neda tento field iterovat cez in operator a pod.)
+            var xRowTechData = { xFormComponentDTList: [], errorMap: {} };
+            Object.defineProperty(row, '__x_rowTechData', {
+                value: xRowTechData,
+                writable: false,
+                enumerable: false
+            });
+        }
+        return row.__x_rowTechData;
+    };
     XFormBase.prototype.addField = function (field) {
         this.fields.add(field);
     };
     XFormBase.prototype.addXFormComponent = function (xFormComponent) {
         this.xFormComponentList.push(xFormComponent);
     };
+    XFormBase.prototype.findXFormComponent = function (field) {
+        var e_2, _a;
+        try {
+            // TODO - vytvorit mapu (field, ref(xFormComponent)), bude to rychlejsie
+            // vytvorit len mapu (a list zrusit) je problem - mozme mat pre jeden field viacero (napr. asociacnych) componentov
+            for (var _b = __values(this.xFormComponentList), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var xFormComponent = _c.value;
+                if (xFormComponent.getField() === field) {
+                    return xFormComponent;
+                }
+            }
+        }
+        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 undefined;
+    };
     XFormBase.prototype.addXFormDataTable = function (xFormDataTable) {
         this.xFormDataTableList.push(xFormDataTable);
     };
     XFormBase.prototype.onClickSave = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var isAddRow, object, e_2;
+            var isAddRow, object, e_3;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -305,13 +372,13 @@ var XFormBase = /** @class */ (function (_super) {
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, XUtils_1.XUtils.fetch('saveRow', { entity: this.getEntity(), object: this.state.object, reload: this.props.onSaveOrCancel !== undefined })];
+                        return [4 /*yield*/, this.saveRow()];
                     case 2:
                         object = _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
-                        e_2 = _a.sent();
-                        XUtils_1.XUtils.showErrorMessage("Save row failed.", e_2);
+                        e_3 = _a.sent();
+                        XUtils_1.XUtils.showErrorMessage("Save row failed.", e_3);
                         return [2 /*return*/]; // zostavame vo formulari
                     case 4:
                         if (this.props.onSaveOrCancel !== undefined) {
@@ -338,26 +405,23 @@ var XFormBase = /** @class */ (function (_super) {
         }
     };
     XFormBase.prototype.validateSave = function () {
-        var e_3, _a;
+        var e_4, _a;
         var xErrorMap = this.validateForm();
-        // zatial takto
-        var msg = "";
+        // zatial takto jednoducho
+        var msg = XUtils_1.XUtils.getErrorMessages(xErrorMap);
         try {
-            for (var _b = __values(Object.entries(xErrorMap)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), field = _d[0], xError = _d[1];
-                if (xError) {
-                    if (xError.onChange || xError.onBlur || xError.form) {
-                        msg += field + ": " + xError.onChange + ", " + xError.onBlur + ", " + xError.form + XUtilsCommon_1.XUtilsCommon.newLine;
-                    }
-                }
+            // este spracujeme editovatelne tabulky
+            for (var _b = __values(this.xFormDataTableList), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var xFormDataTable = _c.value;
+                msg += xFormDataTable.getErrorMessages();
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         var ok = true;
         if (msg !== "") {
@@ -367,7 +431,7 @@ var XFormBase = /** @class */ (function (_super) {
         return ok;
     };
     XFormBase.prototype.validateForm = function () {
-        var e_4, _a;
+        var e_5, _a;
         var xErrorMap = this.fieldValidation();
         // form validation
         var xErrors = this.validate(this.getXObject());
@@ -375,23 +439,27 @@ var XFormBase = /** @class */ (function (_super) {
             for (var _b = __values(Object.entries(xErrors)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var _d = __read(_c.value, 2), field = _d[0], error = _d[1];
                 if (error) {
-                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error });
+                    // skusime zistit label
+                    var xFormComponent = this.findXFormComponent(field);
+                    var fieldLabel = xFormComponent ? xFormComponent.getLabel() : undefined;
+                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error, fieldLabel: fieldLabel });
                 }
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         // TODO - optimalizacia - netreba setovat stav ak by sme sli prec z formulara (ak by zbehla validacia aj save a isli by sme naspet do browsu)
-        this.setState({ errorMap: xErrorMap });
+        // setujeme aj this.state.object, lebo mohli pribudnut/odbudnut chyby na rowData v editovatelnych tabulkach
+        this.setState({ object: this.state.object, errorMap: xErrorMap });
         return xErrorMap;
     };
     XFormBase.prototype.fieldValidation = function () {
-        var e_5, _a, e_6, _b;
+        var e_6, _a, e_7, _b;
         var xErrorMap = {};
         try {
             for (var _c = __values(this.xFormComponentList), _d = _c.next(); !_d.done; _d = _c.next()) {
@@ -403,28 +471,31 @@ var XFormBase = /** @class */ (function (_super) {
                 }
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         try {
             for (var _e = __values(this.xFormDataTableList), _f = _e.next(); !_f.done; _f = _e.next()) {
                 var xFormDataTable = _f.value;
-                // TODO - validate table
+                xFormDataTable.validate();
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         return xErrorMap;
     };
+    // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
+    XFormBase.prototype.preInitForm = function (object, operationType) {
+    };
     // this method can be overriden in subclass if needed (custom validation)
     XFormBase.prototype.validate = function (object) {
         return {};
@@ -432,6 +503,14 @@ var XFormBase = /** @class */ (function (_super) {
     // this method can be overriden in subclass if needed (to modify object before save)
     XFormBase.prototype.preSave = function (object) {
     };
+    // this method can be overriden in subclass if needed (to use another service then default 'saveRow')
+    XFormBase.prototype.saveRow = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, XUtils_1.XUtils.fetch('saveRow', { entity: this.getEntity(), object: this.state.object, reload: this.props.onSaveOrCancel !== undefined })];
+            });
+        });
+    };
     return XFormBase;
 }(react_1.Component));
 exports.XFormBase = XFormBase;

package/lib/components/XFormBaseT.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 __());

package/lib/components/XFormComponent.d.ts

@@ -1,24 +1,36 @@
 import React, { Component } from "react";
 import { XFormBase } from "./XFormBase";
 import { XError } from "./XErrors";
-export interface XFormComponentProps {
+import { OperationType } from "./XUtils";
+import { XFieldChangeEvent } from "./XFieldChangeEvent";
+import { XCustomFilter } from "../serverApi/FindParam";
+export type FieldOnChange = (e: XFieldChangeEvent<any>) => void;
+export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | undefined);
+export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
     readOnly?: boolean;
     labelStyle?: React.CSSProperties;
     inline?: boolean;
+    onChange?: FieldOnChange;
 }
-export declare class XFormComponent<P extends XFormComponentProps> extends Component<P> {
-    constructor(props: P);
-    getFieldForEdit(): string | undefined;
+export declare abstract class XFormComponent<T, P extends XFormComponentProps<T>> extends Component<P> {
+    protected constructor(props: P);
+    abstract getField(): string;
+    getValueFromObject(): any;
+    onValueChangeBase(value: any, onChange?: FieldOnChange, assocObjectChange?: OperationType): void;
+    abstract isNotNull(): boolean;
+    isReadOnly(): boolean;
+    getLabel(): string;
+    getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;
         xError: XError;
     } | undefined;
     validateOnChange(value: any): string | undefined;
     validateNotNull(value: any): string | undefined;
-    checkNotNull(): boolean;
-    getValueFromObject(): any;
-    getError(): string | undefined;
     getClassNameTooltip(): {};
+    getError(): string | undefined;
+    callOnChangeFromOnBlur(): void;
+    getFilterBase(filter: XFilterProp | undefined): XCustomFilter | undefined;
 }