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

package/lib/components/XAutoComplete.d.ts

@@ -2,37 +2,37 @@ import React from "react";
 import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
+import { XSuggestionsLoadProp } from "./XAutoCompleteBase";
 import { XError } from "./XErrors";
 import { XObject } from "./XObject";
 import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
-    displayField: string;
+    displayField: string | string[];
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
+    suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    lazyLoadMaxRows?: number;
+    splitQueryValue?: boolean;
+    minLength?: number;
     filter?: XFilterProp;
     sortField?: string | DataTableSortMeta[];
     fields?: string[];
-    suggestions?: any[];
-    lazy?: boolean;
     width?: string;
+    scrollHeight?: string;
     inputStyle?: React.CSSProperties;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {
     protected xAssoc: XAssoc;
     protected errorInBase: string | undefined;
-    state: {
-        suggestions: any[];
-    };
     constructor(props: XAutoCompleteProps);
-    componentDidMount(): void;
-    readAndSetSuggestions(setStateCallback?: () => void): Promise<void>;
     getField(): string;
     isNotNull(): boolean;
+    getFirstDisplayField(): string;
     getValue(): any | null;
     onChangeAutoCompleteBase(object: any, objectChange: OperationType): void;
     onErrorChangeAutoCompleteBase(error: string | undefined): void;
-    onSearchStart(finishSearchStart?: () => void): void;
     validate(): {
         field: string;
         xError: XError;

package/lib/components/XAutoComplete.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.XAutoComplete = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormComponent_1 = require("./XFormComponent");
-var XUtils_1 = require("./XUtils");
 var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoComplete = /** @class */ (function (_super) {
@@ -66,65 +29,32 @@ var XAutoComplete = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocField);
         _this.errorInBase = undefined;
-        _this.state = {
-            suggestions: []
-        };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
-        _this.onSearchStart = _this.onSearchStart.bind(_this);
-        props.form.addField(props.assocField + '.' + props.displayField);
+        props.form.addField(props.assocField + '.' + _this.getFirstDisplayField());
         return _this;
     }
-    XAutoComplete.prototype.componentDidMount = function () {
-        //console.log("volany XAutoComplete.componentDidMount()");
-        if (!this.props.lazy) {
-            this.readAndSetSuggestions();
-        }
-    };
-    XAutoComplete.prototype.readAndSetSuggestions = function (setStateCallback) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var suggestions;
-            return __generator(this, function (_b) {
-                switch (_b.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), (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField, this.props.fields)];
-                    case 1:
-                        suggestions = _b.sent();
-                        this.setState({ suggestions: suggestions }, setStateCallback);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
+    // componentDidMount() {
+    // }
     XAutoComplete.prototype.getField = function () {
         return this.props.assocField;
     };
     XAutoComplete.prototype.isNotNull = function () {
         return !this.xAssoc.isNullable;
     };
+    XAutoComplete.prototype.getFirstDisplayField = function () {
+        return Array.isArray(this.props.displayField) ? this.props.displayField[0] : this.props.displayField;
+    };
     XAutoComplete.prototype.getValue = function () {
         var assocObject = this.getValueFromObject();
         return assocObject;
     };
     XAutoComplete.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();
-        }
     };
     XAutoComplete.prototype.onErrorChangeAutoCompleteBase = function (error) {
         this.errorInBase = error; // odlozime si error
     };
-    XAutoComplete.prototype.onSearchStart = function (finishSearchStart) {
-        this.readAndSetSuggestions(finishSearchStart);
-    };
     // overrides method in XFormComponent
     XAutoComplete.prototype.validate = function () {
         if (this.errorInBase) {
@@ -136,12 +66,11 @@ var XAutoComplete = /** @class */ (function (_super) {
     };
     XAutoComplete.prototype.render = function () {
         var _this = this;
-        var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            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, width: this.props.width, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); }, onSearchStart: this.props.lazy ? this.onSearchStart : undefined })));
+            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, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields } })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -4,41 +4,69 @@ import { OperationType } from "./XUtils";
 import { MenuItem } from "primereact/menuitem";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { XCustomFilter } from "../serverApi/FindParam";
+import { DataTableSortMeta } from "primereact/datatable";
+export type XSuggestionsLoadProp = "eager" | "onSearchStart" | "lazy";
+export type XSuggestionsLoadType = "suggestions" | XSuggestionsLoadProp;
+export type XFilterOrFunction = XCustomFilter | (() => XCustomFilter | undefined);
+export interface XQuery {
+    entity: string;
+    filter?: XFilterOrFunction;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+}
 export interface XAutoCompleteBaseProps {
     value: any;
-    suggestions: any[];
     onChange: (object: any, objectChange: OperationType) => void;
-    field: string;
+    suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    suggestionsQuery?: XQuery;
+    lazyLoadMaxRows: number;
+    field: string | string[];
+    splitQueryValue: boolean;
     searchBrowse?: JSX.Element;
     valueForm?: JSX.Element;
     idField?: string;
-    maxLength?: number;
+    minLength?: number;
     width?: string;
+    scrollHeight?: string;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
     setFocusOnCreate?: boolean;
-    customFilterFunction?: () => XCustomFilter | undefined;
-    onSearchStart?: (finishSearchStart?: () => void) => void;
 }
 export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps> {
+    private static valueMoreSuggestions;
+    static defaultProps: {
+        lazyLoadMaxRows: number;
+        splitQueryValue: boolean;
+        minLength: number;
+        scrollHeight: string;
+    };
     autoCompleteRef: any;
     state: {
         inputChanged: boolean;
         inputValueState: string | undefined;
         notValid: boolean;
+        suggestions: any[] | undefined;
         filteredSuggestions: any[] | undefined;
         formDialogOpened: boolean;
         searchDialogOpened: boolean;
     };
-    wasSearchStartCalled: boolean;
+    suggestionsLoadedForOSS: boolean;
+    wasOnChangeCalled: boolean;
     formDialogObjectId: number | undefined;
     formDialogInitValuesForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
+    getXSuggestionsLoadType(): XSuggestionsLoadType;
+    getFields(): string[];
+    getFirstField(): string;
     componentDidMount(): void;
+    loadSuggestions(): Promise<void>;
+    fetchSuggestions(): Promise<any[]>;
+    getSortField(): string | DataTableSortMeta[] | undefined;
     completeMethod(event: {
         query: string;
-    }): void;
+    }): Promise<void>;
     onChange(e: AutoCompleteChangeEvent): void;
     onSelect(e: any): void;
     onBlur(e: React.FocusEvent<HTMLInputElement>): void;
@@ -54,7 +82,11 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     createDropdownItem(splitButtonItems: MenuItem[]): void;
     onOpenDropdown(e: any): void;
     openDropdown(e: any): void;
+    onEditAssocValue(): void;
     computeInputValue(): any;
+    itemTemplate(suggestion: any, index: number): React.ReactNode;
+    computeDisplayValue(suggestion: any): string;
+    static isMoreSuggestions(suggestion: any): boolean;
     createSearchBrowseParams(): XSearchBrowseParams;
     render(): JSX.Element;
 }