@michalrakus/x-react-web-lib 1.8.0 → 1.9.0

package/lib/components/XAutoCompleteBase.js

@@ -1,371 +1,371 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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;
-};
-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.XAutoCompleteBase = void 0;
-var react_1 = __importStar(require("react"));
-var autocomplete_1 = require("primereact/autocomplete");
-var splitbutton_1 = require("primereact/splitbutton");
-var dialog_1 = require("primereact/dialog");
-var XUtils_1 = require("./XUtils");
-var button_1 = require("primereact/button");
-var XAutoCompleteBase = /** @class */ (function (_super) {
-    __extends(XAutoCompleteBase, _super);
-    function XAutoCompleteBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this.autoCompleteRef = react_1.default.createRef();
-        _this.state = {
-            inputChanged: false,
-            inputValueState: undefined,
-            notValid: false,
-            filteredSuggestions: undefined,
-            formDialogOpened: false
-        };
-        _this.completeMethod = _this.completeMethod.bind(_this);
-        _this.onChange = _this.onChange.bind(_this);
-        _this.onSelect = _this.onSelect.bind(_this);
-        _this.onBlur = _this.onBlur.bind(_this);
-        _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
-        _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
-        _this.itemTemplate = _this.itemTemplate.bind(_this);
-        return _this;
-    }
-    XAutoCompleteBase.prototype.componentDidMount = function () {
-        if (this.props.setFocusOnCreate) {
-            this.setFocusToInput();
-        }
-    };
-    XAutoCompleteBase.prototype.getDisplayValue = function (suggestion) {
-        var displayValue;
-        if (typeof this.props.field === 'string') {
-            displayValue = suggestion[this.props.field];
-        }
-        else {
-            // this.props.field is function returning string
-            displayValue = this.props.field(suggestion);
-        }
-        return displayValue;
-    };
-    XAutoCompleteBase.prototype.completeMethod = function (event) {
-        var _this = this;
-        var filteredSuggestions;
-        if (!event.query.trim().length) {
-            filteredSuggestions = __spreadArray([], __read(this.props.suggestions), false);
-        }
-        else {
-            var queryNormalized_1 = XUtils_1.XUtils.normalizeString(event.query);
-            filteredSuggestions = this.props.suggestions.filter(function (suggestion) {
-                var fieldValue = _this.getDisplayValue(suggestion);
-                // specialna null polozka (prazdny objekt) - test dame az za test fieldValue na undefined - koli performance
-                if (fieldValue === undefined && Object.keys(suggestion).length === 0) {
-                    return false;
-                }
-                // bolo:
-                //return XUtils.normalizeString(fieldValue).startsWith(queryNormalized);
-                return XUtils_1.XUtils.normalizeString(fieldValue).indexOf(queryNormalized_1) !== -1;
-            });
-        }
-        this.setState({ filteredSuggestions: filteredSuggestions });
-    };
-    XAutoCompleteBase.prototype.onChange = function (e) {
-        if (typeof e.value === 'string') {
-            this.setState({ inputChanged: true, inputValueState: e.value });
-        }
-    };
-    XAutoCompleteBase.prototype.onSelect = function (e) {
-        this.setObjectValue(e.value, XUtils_1.OperationType.None);
-    };
-    XAutoCompleteBase.prototype.onBlur = function (e) {
-        // optimalizacia - testujeme len ak inputChanged === true
-        if (this.state.inputChanged) {
-            if (e.target.value === '') {
-                this.setObjectValue(null, XUtils_1.OperationType.None); // prazdny retazec znamena null hodnotu
-            }
-            else {
-                // skusime ci filteredSuggestions nemaju prave jeden element
-                var filteredSuggestions = this.state.filteredSuggestions;
-                if (filteredSuggestions && filteredSuggestions.length === 1) {
-                    this.setObjectValue(filteredSuggestions[0], XUtils_1.OperationType.None);
-                }
-                else {
-                    // tu by sme mohli skusit vyratat vysledok pre filteredSuggestions este raz, mozno este vypocet filteredSuggestions nedobehol
-                    // mohli by sme: zobrazit vsetky povolene hodnoty (v dialogu/v dropdown liste), zobrazit nejaky alert
-                    //alert("invalid value");
-                    // radi by sme stopli dalsie event-y (napr. stlacenie buttonu, ktore vyvolalo stratu focus-u), ale nezafungovalo nam to
-                    //e.preventDefault();
-                    //e.stopPropagation();
-                    // nefunguje ani toto
-                    //console.log('stop propagation');
-                    //console.log(e);
-                    //e.nativeEvent.stopImmediatePropagation();
-                    //e.preventDefault();
-                    // zobrazime dropdown list aby sme usera upovedomili ze ma vybrat nejaku hodnotu
-                    // toto neni moc prakticke ak mame vela poloziek v dropdown-e - lepsi by bol asi confirm, ci pridat novu polozku do DB
-                    // zrusil som, lebo pri vybere z dropdownu kliknutim sa vola tento onBlur (este pred onSelect), zobrazi sa iny dropdown ako vidi uzivatel a vyberie sa z neho ina polozka ako je ta na ktoru klikol user
-                    //this.autoCompleteRef.current.onDropdownClick();
-                    // vratime focus do inputu
-                    // obycajne setnutie focusu nefunguje, treba v setnut focus v samostatnom evente
-                    // TODO - aj nejaky stop event skusit
-                    //console.log('onBlur - setujem timeout');
-                    //setTimeout(() => {this.onBlurInvalidInput();}, 100);
-                    // najnovsi sposob
-                    // TODO - problem - ak zapisem nejake znaky a vyselektujem nejaky zaznam tak vznikne cerveny preblik (az nasledny onSelect zrusi state.notValid = true)
-                    // zial neviem odlisit event sposobeny selektnutim zaznamu a event sposobeny kliknutim niekam vedla
-                    //console.log(e);
-                    this.setState({ notValid: true }); // ocervenime input
-                    this.props.onErrorChange(this.createErrorMessage()); // ohlasime nevalidnost parentovi
-                }
-            }
-        }
-    };
-    XAutoCompleteBase.prototype.createErrorMessage = function () {
-        return "Value \"".concat(this.state.inputValueState, "\" was not found among valid values.");
-    };
-    /*
-        onBlurInvalidInput() {
-            // ak uzivatel vyvolal onBlur kliknutim na polozku dropdown list-u, tak sa v priebehu 100 ms (oneskorenie volania onBlurInvalidInput()) zavolal onSelect,
-            // zmenil sa inputChanged a netreba nic riesit
-            if (this.state.inputChanged) {
-                console.log('onBlurInvalidInput - idem otvorit confirm');
-                if (window.confirm(`Value "${this.state.inputValueState}" was not found among valid values, create new valid value?`)) {
-                    // otvorime dialog na insert
-                    this.formDialogObjectId = undefined;
-                    // TODO - pridat ako novu prop metodu ktora bude vracat bude mat parameter this.state.inputValueState a vrati object
-                    // ak bude tato metoda undefined, tak zostane tato povodna funkcionalita
-                    this.formDialogInitObjectForInsert = {};
-                    this.formDialogInitObjectForInsert[this.props.field] = this.state.inputValueState;
-                    this.setState({formDialogOpened: true});
-                }
-                else {
-                    // vratime focus do inputu, je tam nevalidna hodnota
-                    console.log('onBlurInvalidInput - idem vratit focus');
-                    this.setFocusToInput();
-                }
-            }
-        }
-    */
-    XAutoCompleteBase.prototype.setFocusToInput = function () {
-        this.autoCompleteRef.current.focus();
-    };
-    XAutoCompleteBase.prototype.setObjectValue = function (object, objectChange) {
-        this.setState({ inputChanged: false, notValid: false });
-        this.props.onChange(object, objectChange);
-        this.props.onErrorChange(undefined); // uz nie sme v nevalidnom stave
-    };
-    XAutoCompleteBase.prototype.formDialogOnSaveOrCancel = function (object, objectChange) {
-        if (object !== null) {
-            // ak bol save, treba tento novy object pouzit
-            this.setObjectValue(object, objectChange);
-            // treba upravit this.state.filteredSuggestions? setli sme novy objekt, panel so suggestions by mal byt zavrety - TODO - overit
-        }
-        else {
-            // bol cancel, vratime focus do inputu ak treba
-            if (this.state.inputChanged) {
-                this.setFocusToInput();
-            }
-        }
-        this.setState({ formDialogOpened: false });
-    };
-    XAutoCompleteBase.prototype.formDialogOnHide = function () {
-        this.setState({ formDialogOpened: false });
-        // ak mame v inpute neplatnu hodnotu, vratime kurzor na input
-        if (this.state.inputChanged) {
-            this.setFocusToInput();
-        }
-    };
-    // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
-    XAutoCompleteBase.prototype.computeInputValue = function () {
-        var inputValue = null;
-        if (!this.state.inputChanged) {
-            // poznamka: ak object === null tak treba do inputu zapisovat prazdny retazec, ak by sme pouzili null, neprejavila by sa zmena v modeli na null
-            var object = this.props.value;
-            if (typeof this.props.field === 'string') {
-                inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
-            }
-            else {
-                inputValue = (object !== null) ? this.props.field(object) : "";
-            }
-        }
-        else {
-            inputValue = this.state.inputValueState;
-        }
-        return inputValue;
-    };
-    XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
-        // @ts-ignore
-        return this.props.field(suggestion);
-    };
-    XAutoCompleteBase.prototype.render = function () {
-        var _this = this;
-        var _a;
-        var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
-        var dropdownButton;
-        if (this.props.valueForm) {
-            // mame CRUD operacie, potrebujeme SplitButton
-            var splitButtonItems = [];
-            splitButtonItems.push({
-                icon: 'pi pi-plus',
-                command: function (e) {
-                    // otvorime dialog na insert
-                    _this.formDialogObjectId = undefined;
-                    _this.formDialogInitObjectForInsert = {};
-                    // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
-                    if (_this.state.inputChanged && typeof _this.props.field === 'string') {
-                        _this.formDialogInitObjectForInsert[_this.props.field] = _this.state.inputValueState;
-                    }
-                    _this.setState({ formDialogOpened: true });
-                }
-            });
-            splitButtonItems.push({
-                icon: 'pi pi-pencil',
-                command: function (e) {
-                    if (_this.state.inputChanged) {
-                        alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
-                        _this.setFocusToInput();
-                    }
-                    else {
-                        if (_this.props.value === null) {
-                            alert('Please select some row.');
-                        }
-                        else {
-                            // otvorime dialog na update
-                            if (_this.props.idField === undefined) {
-                                throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
-                            }
-                            _this.formDialogObjectId = _this.props.value[_this.props.idField];
-                            _this.formDialogInitObjectForInsert = undefined;
-                            _this.setState({ formDialogOpened: true });
-                        }
-                    }
-                }
-            });
-            // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
-            // {
-            //     icon: 'pi pi-times',
-            //     command: (e: any) => {
-            //         console.log('remove');
-            //     }
-            // },
-            splitButtonItems.push({
-                icon: 'pi pi-chevron-down',
-                command: function (e) {
-                    // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
-                    // neprakticke ak mame vela poloziek v suggestions list
-                    // krasne zobrazi cely objekt!
-                    // this.autoCompleteRef.current je element <AutoComplete .../>, ktory vytvarame v render metode
-                    //console.log(this.autoCompleteRef.current);
-                    // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
-                    _this.autoCompleteRef.current.search(e, '', 'dropdown');
-                }
-            });
-            dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
-        }
-        else {
-            // mame len 1 operaciu - dame jednoduchy button
-            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.autoCompleteRef.current.search(e, '', 'dropdown'); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
-        }
-        // vypocitame inputValue
-        var inputValue = this.computeInputValue();
-        // poznamka: asi by sa dalo pouzivat vzdy len itemTemplate (nepouzivat field)
-        var fieldOrItemTemplate;
-        if (typeof this.props.field === 'string') {
-            fieldOrItemTemplate = { field: this.props.field };
-        }
-        else {
-            fieldOrItemTemplate = { itemTemplate: this.itemTemplate };
-        }
-        var error;
-        if (this.state.notValid) {
-            // ak je v nevalidnom stave, tak ma tato chybova hlaska prednost pred ostatnymi (ak nahodou su)
-            error = this.createErrorMessage();
-        }
-        else {
-            error = this.props.error;
-        }
-        // Dialog pre konkretny form:
-        // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitObjectForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
-        // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
-        return (react_1.default.createElement("div", { className: "x-auto-complete-base" },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod }, fieldOrItemTemplate, { onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
-            dropdownButton,
-            this.props.valueForm != undefined && !readOnly ?
-                react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New record' }, react_1.default.cloneElement(this.props.valueForm, {
-                    id: this.formDialogObjectId, object: this.formDialogInitObjectForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
-                }, this.props.valueForm.children))
-                : undefined));
-    };
-    return XAutoCompleteBase;
-}(react_1.Component));
-exports.XAutoCompleteBase = XAutoCompleteBase;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+};
+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.XAutoCompleteBase = void 0;
+var react_1 = __importStar(require("react"));
+var autocomplete_1 = require("primereact/autocomplete");
+var splitbutton_1 = require("primereact/splitbutton");
+var dialog_1 = require("primereact/dialog");
+var XUtils_1 = require("./XUtils");
+var button_1 = require("primereact/button");
+var XAutoCompleteBase = /** @class */ (function (_super) {
+    __extends(XAutoCompleteBase, _super);
+    function XAutoCompleteBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.autoCompleteRef = react_1.default.createRef();
+        _this.state = {
+            inputChanged: false,
+            inputValueState: undefined,
+            notValid: false,
+            filteredSuggestions: undefined,
+            formDialogOpened: false
+        };
+        _this.completeMethod = _this.completeMethod.bind(_this);
+        _this.onChange = _this.onChange.bind(_this);
+        _this.onSelect = _this.onSelect.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
+        _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
+        _this.itemTemplate = _this.itemTemplate.bind(_this);
+        return _this;
+    }
+    XAutoCompleteBase.prototype.componentDidMount = function () {
+        if (this.props.setFocusOnCreate) {
+            this.setFocusToInput();
+        }
+    };
+    XAutoCompleteBase.prototype.getDisplayValue = function (suggestion) {
+        var displayValue;
+        if (typeof this.props.field === 'string') {
+            displayValue = suggestion[this.props.field];
+        }
+        else {
+            // this.props.field is function returning string
+            displayValue = this.props.field(suggestion);
+        }
+        return displayValue;
+    };
+    XAutoCompleteBase.prototype.completeMethod = function (event) {
+        var _this = this;
+        var filteredSuggestions;
+        if (!event.query.trim().length) {
+            filteredSuggestions = __spreadArray([], __read(this.props.suggestions), false);
+        }
+        else {
+            var queryNormalized_1 = XUtils_1.XUtils.normalizeString(event.query);
+            filteredSuggestions = this.props.suggestions.filter(function (suggestion) {
+                var fieldValue = _this.getDisplayValue(suggestion);
+                // specialna null polozka (prazdny objekt) - test dame az za test fieldValue na undefined - koli performance
+                if (fieldValue === undefined && Object.keys(suggestion).length === 0) {
+                    return false;
+                }
+                // bolo:
+                //return XUtils.normalizeString(fieldValue).startsWith(queryNormalized);
+                return XUtils_1.XUtils.normalizeString(fieldValue).indexOf(queryNormalized_1) !== -1;
+            });
+        }
+        this.setState({ filteredSuggestions: filteredSuggestions });
+    };
+    XAutoCompleteBase.prototype.onChange = function (e) {
+        if (typeof e.value === 'string') {
+            this.setState({ inputChanged: true, inputValueState: e.value });
+        }
+    };
+    XAutoCompleteBase.prototype.onSelect = function (e) {
+        this.setObjectValue(e.value, XUtils_1.OperationType.None);
+    };
+    XAutoCompleteBase.prototype.onBlur = function (e) {
+        // optimalizacia - testujeme len ak inputChanged === true
+        if (this.state.inputChanged) {
+            if (e.target.value === '') {
+                this.setObjectValue(null, XUtils_1.OperationType.None); // prazdny retazec znamena null hodnotu
+            }
+            else {
+                // skusime ci filteredSuggestions nemaju prave jeden element
+                var filteredSuggestions = this.state.filteredSuggestions;
+                if (filteredSuggestions && filteredSuggestions.length === 1) {
+                    this.setObjectValue(filteredSuggestions[0], XUtils_1.OperationType.None);
+                }
+                else {
+                    // tu by sme mohli skusit vyratat vysledok pre filteredSuggestions este raz, mozno este vypocet filteredSuggestions nedobehol
+                    // mohli by sme: zobrazit vsetky povolene hodnoty (v dialogu/v dropdown liste), zobrazit nejaky alert
+                    //alert("invalid value");
+                    // radi by sme stopli dalsie event-y (napr. stlacenie buttonu, ktore vyvolalo stratu focus-u), ale nezafungovalo nam to
+                    //e.preventDefault();
+                    //e.stopPropagation();
+                    // nefunguje ani toto
+                    //console.log('stop propagation');
+                    //console.log(e);
+                    //e.nativeEvent.stopImmediatePropagation();
+                    //e.preventDefault();
+                    // zobrazime dropdown list aby sme usera upovedomili ze ma vybrat nejaku hodnotu
+                    // toto neni moc prakticke ak mame vela poloziek v dropdown-e - lepsi by bol asi confirm, ci pridat novu polozku do DB
+                    // zrusil som, lebo pri vybere z dropdownu kliknutim sa vola tento onBlur (este pred onSelect), zobrazi sa iny dropdown ako vidi uzivatel a vyberie sa z neho ina polozka ako je ta na ktoru klikol user
+                    //this.autoCompleteRef.current.onDropdownClick();
+                    // vratime focus do inputu
+                    // obycajne setnutie focusu nefunguje, treba v setnut focus v samostatnom evente
+                    // TODO - aj nejaky stop event skusit
+                    //console.log('onBlur - setujem timeout');
+                    //setTimeout(() => {this.onBlurInvalidInput();}, 100);
+                    // najnovsi sposob
+                    // TODO - problem - ak zapisem nejake znaky a vyselektujem nejaky zaznam tak vznikne cerveny preblik (az nasledny onSelect zrusi state.notValid = true)
+                    // zial neviem odlisit event sposobeny selektnutim zaznamu a event sposobeny kliknutim niekam vedla
+                    //console.log(e);
+                    this.setState({ notValid: true }); // ocervenime input
+                    this.props.onErrorChange(this.createErrorMessage()); // ohlasime nevalidnost parentovi
+                }
+            }
+        }
+    };
+    XAutoCompleteBase.prototype.createErrorMessage = function () {
+        return "Value \"".concat(this.state.inputValueState, "\" was not found among valid values.");
+    };
+    /*
+        onBlurInvalidInput() {
+            // ak uzivatel vyvolal onBlur kliknutim na polozku dropdown list-u, tak sa v priebehu 100 ms (oneskorenie volania onBlurInvalidInput()) zavolal onSelect,
+            // zmenil sa inputChanged a netreba nic riesit
+            if (this.state.inputChanged) {
+                console.log('onBlurInvalidInput - idem otvorit confirm');
+                if (window.confirm(`Value "${this.state.inputValueState}" was not found among valid values, create new valid value?`)) {
+                    // otvorime dialog na insert
+                    this.formDialogObjectId = undefined;
+                    // TODO - pridat ako novu prop metodu ktora bude vracat bude mat parameter this.state.inputValueState a vrati object
+                    // ak bude tato metoda undefined, tak zostane tato povodna funkcionalita
+                    this.formDialogInitObjectForInsert = {};
+                    this.formDialogInitObjectForInsert[this.props.field] = this.state.inputValueState;
+                    this.setState({formDialogOpened: true});
+                }
+                else {
+                    // vratime focus do inputu, je tam nevalidna hodnota
+                    console.log('onBlurInvalidInput - idem vratit focus');
+                    this.setFocusToInput();
+                }
+            }
+        }
+    */
+    XAutoCompleteBase.prototype.setFocusToInput = function () {
+        this.autoCompleteRef.current.focus();
+    };
+    XAutoCompleteBase.prototype.setObjectValue = function (object, objectChange) {
+        this.setState({ inputChanged: false, notValid: false });
+        this.props.onChange(object, objectChange);
+        this.props.onErrorChange(undefined); // uz nie sme v nevalidnom stave
+    };
+    XAutoCompleteBase.prototype.formDialogOnSaveOrCancel = function (object, objectChange) {
+        if (object !== null) {
+            // ak bol save, treba tento novy object pouzit
+            this.setObjectValue(object, objectChange);
+            // treba upravit this.state.filteredSuggestions? setli sme novy objekt, panel so suggestions by mal byt zavrety - TODO - overit
+        }
+        else {
+            // bol cancel, vratime focus do inputu ak treba
+            if (this.state.inputChanged) {
+                this.setFocusToInput();
+            }
+        }
+        this.setState({ formDialogOpened: false });
+    };
+    XAutoCompleteBase.prototype.formDialogOnHide = function () {
+        this.setState({ formDialogOpened: false });
+        // ak mame v inpute neplatnu hodnotu, vratime kurzor na input
+        if (this.state.inputChanged) {
+            this.setFocusToInput();
+        }
+    };
+    // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
+    XAutoCompleteBase.prototype.computeInputValue = function () {
+        var inputValue = null;
+        if (!this.state.inputChanged) {
+            // poznamka: ak object === null tak treba do inputu zapisovat prazdny retazec, ak by sme pouzili null, neprejavila by sa zmena v modeli na null
+            var object = this.props.value;
+            if (typeof this.props.field === 'string') {
+                inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
+            }
+            else {
+                inputValue = (object !== null) ? this.props.field(object) : "";
+            }
+        }
+        else {
+            inputValue = this.state.inputValueState;
+        }
+        return inputValue;
+    };
+    XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
+        // @ts-ignore
+        return this.props.field(suggestion);
+    };
+    XAutoCompleteBase.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
+        var dropdownButton;
+        if (this.props.valueForm) {
+            // mame CRUD operacie, potrebujeme SplitButton
+            var splitButtonItems = [];
+            splitButtonItems.push({
+                icon: 'pi pi-plus',
+                command: function (e) {
+                    // otvorime dialog na insert
+                    _this.formDialogObjectId = undefined;
+                    _this.formDialogInitObjectForInsert = {};
+                    // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
+                    if (_this.state.inputChanged && typeof _this.props.field === 'string') {
+                        _this.formDialogInitObjectForInsert[_this.props.field] = _this.state.inputValueState;
+                    }
+                    _this.setState({ formDialogOpened: true });
+                }
+            });
+            splitButtonItems.push({
+                icon: 'pi pi-pencil',
+                command: function (e) {
+                    if (_this.state.inputChanged) {
+                        alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
+                        _this.setFocusToInput();
+                    }
+                    else {
+                        if (_this.props.value === null) {
+                            alert('Please select some row.');
+                        }
+                        else {
+                            // otvorime dialog na update
+                            if (_this.props.idField === undefined) {
+                                throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
+                            }
+                            _this.formDialogObjectId = _this.props.value[_this.props.idField];
+                            _this.formDialogInitObjectForInsert = undefined;
+                            _this.setState({ formDialogOpened: true });
+                        }
+                    }
+                }
+            });
+            // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
+            // {
+            //     icon: 'pi pi-times',
+            //     command: (e: any) => {
+            //         console.log('remove');
+            //     }
+            // },
+            splitButtonItems.push({
+                icon: 'pi pi-chevron-down',
+                command: function (e) {
+                    // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
+                    // neprakticke ak mame vela poloziek v suggestions list
+                    // krasne zobrazi cely objekt!
+                    // this.autoCompleteRef.current je element <AutoComplete .../>, ktory vytvarame v render metode
+                    //console.log(this.autoCompleteRef.current);
+                    // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
+                    _this.autoCompleteRef.current.search(e, '', 'dropdown');
+                }
+            });
+            dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
+        }
+        else {
+            // mame len 1 operaciu - dame jednoduchy button
+            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.autoCompleteRef.current.search(e, '', 'dropdown'); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
+        }
+        // vypocitame inputValue
+        var inputValue = this.computeInputValue();
+        // poznamka: asi by sa dalo pouzivat vzdy len itemTemplate (nepouzivat field)
+        var fieldOrItemTemplate;
+        if (typeof this.props.field === 'string') {
+            fieldOrItemTemplate = { field: this.props.field };
+        }
+        else {
+            fieldOrItemTemplate = { itemTemplate: this.itemTemplate };
+        }
+        var error;
+        if (this.state.notValid) {
+            // ak je v nevalidnom stave, tak ma tato chybova hlaska prednost pred ostatnymi (ak nahodou su)
+            error = this.createErrorMessage();
+        }
+        else {
+            error = this.props.error;
+        }
+        // Dialog pre konkretny form:
+        // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitObjectForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
+        // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
+        return (react_1.default.createElement("div", { className: "x-auto-complete-base" },
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod }, fieldOrItemTemplate, { onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
+            dropdownButton,
+            this.props.valueForm != undefined && !readOnly ?
+                react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New record' }, react_1.default.cloneElement(this.props.valueForm, {
+                    id: this.formDialogObjectId, object: this.formDialogInitObjectForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
+                }, this.props.valueForm.children))
+                : undefined));
+    };
+    return XAutoCompleteBase;
+}(react_1.Component));
+exports.XAutoCompleteBase = XAutoCompleteBase;