@michalrakus/x-react-web-lib 1.32.11 → 1.33.0

package/lib/components/XAutoCompleteBase.d.ts

@@ -53,6 +53,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
         scrollHeight: string;
     };
     autoCompleteRef: any;
+    autoCompleteInputRef: any;
     state: {
         inputChanged: boolean;
         inputValueState: string | undefined;
@@ -83,6 +84,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     onBlur(e: React.FocusEvent<HTMLInputElement>): void;
     createErrorMessage(): string;
     setFocusToInput(): void;
+    removeFocusFromInput(): void;
     setObjectValue(object: any, objectChange: OperationType): void;
     formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
     formDialogOnHide(): void;

package/lib/components/XAutoCompleteBase.js

@@ -135,6 +135,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
     function XAutoCompleteBase(props) {
         var _this = _super.call(this, props) || this;
         _this.autoCompleteRef = react_1.default.createRef();
+        _this.autoCompleteInputRef = react_1.default.createRef();
         _this.state = {
             inputChanged: false,
             inputValueState: undefined,
@@ -368,11 +369,19 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         }
     };
     XAutoCompleteBase.prototype.onSelect = function (e) {
+        var _this = this;
         // nevolame this.setObjectValue ak uz bol zavolany z onBlur
         if (!this.wasOnChangeCalled) {
             // nedovolime vybrat specialny zaznam ...
             if (!XAutoCompleteBase.isMoreSuggestions(e.value)) {
                 this.setObjectValue(e.value, XUtils_1.OperationType.None);
+                // ak sme na mobile, nechceme aby sa otvorila klavesnica mobilu, preto zavolame removeFocus
+                // pouzivame setTimeout, priame volanie nefungovalo
+                if (XUtils_1.XUtils.isMobile()) {
+                    setTimeout(function () {
+                        _this.removeFocusFromInput();
+                    }, 0); // Delaying blur to allow PrimeReact to finish its focus logic
+                }
             }
         }
     };
@@ -454,7 +463,11 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         }
     */
     XAutoCompleteBase.prototype.setFocusToInput = function () {
-        this.autoCompleteRef.current.focus();
+        //this.autoCompleteRef.current.focus(); bolo toto kedysi
+        this.autoCompleteInputRef.current.focus();
+    };
+    XAutoCompleteBase.prototype.removeFocusFromInput = function () {
+        this.autoCompleteInputRef.current.blur();
     };
     XAutoCompleteBase.prototype.setObjectValue = function (object, objectChange) {
         this.setState({ inputChanged: false, notValid: false });
@@ -727,7 +740,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // Dialog pre konkretny form:
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
-        return (react_1.default.createElement.apply(react_1.default, __spreadArray(__spreadArray(["div", { className: "x-auto-complete-base", style: { width: this.props.width, maxWidth: this.props.maxWidth } }, react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName, showEmptyMessage: true }))], __read(buttons), false), [this.props.valueForm != undefined ?
+        return (react_1.default.createElement.apply(react_1.default, __spreadArray(__spreadArray(["div", { className: "x-auto-complete-base", style: { width: this.props.width, maxWidth: this.props.maxWidth } }, react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, inputRef: this.autoCompleteInputRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName, showEmptyMessage: true }))], __read(buttons), false), [this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: this.state.formDialogOpened, onHide: this.formDialogOnHide }, react_1.default.cloneElement(this.props.valueForm, {
                     id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
                 } /*, this.props.valueForm.children*/))

package/lib/components/XFormDataTable2.d.ts

@@ -11,6 +11,7 @@ import { XFormComponentDT } from "./XFormComponentDT";
 import { XErrorMap } from "./XErrors";
 import { IconType } from "primereact/utils";
 import { ButtonProps } from "primereact/button";
+import { XSuggestionsLoadProp } from "./XAutoCompleteBase";
 export interface XRowTechData {
     xFormComponentDTList: Array<XFormComponentDT<any>>;
     errorMap: XErrorMap;
@@ -113,14 +114,18 @@ export interface XFormDropdownColumnProps extends XFormColumnBaseProps {
 }
 export interface XFormAutoCompleteColumnProps extends XFormColumnBaseProps {
     assocField: string;
-    displayField: string;
+    displayField: string | string[];
+    itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
     addRowEnabled: boolean;
     filter?: XTableFieldFilterProp;
     sortField?: string | DataTableSortMeta[];
     fields?: string[];
+    scrollHeight?: string;
     suggestions?: any[];
+    suggestionsLoad?: XSuggestionsLoadProp;
+    lazyLoadMaxRows?: number;
 }
 export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     assocField: string;

package/lib/components/XFormDataTable2.js

@@ -145,7 +145,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            return columnPropsAutoComplete.assocField + '.' + columnPropsAutoComplete.displayField;
+            // for simplicity we use here the first column (is used for filtering/sorting)
+            // TODO - all columns add in constructor (through method props.form.addField(...))
+            var displayField = Array.isArray(columnPropsAutoComplete.displayField) ? columnPropsAutoComplete.displayField[0] : columnPropsAutoComplete.displayField;
+            return columnPropsAutoComplete.assocField + '.' + displayField;
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
@@ -404,7 +407,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, addRowEnabled: columnPropsAutoComplete.addRowEnabled, filter: columnPropsAutoComplete.filter, sortField: columnPropsAutoComplete.sortField, fields: columnPropsAutoComplete.fields, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, itemTemplate: columnPropsAutoComplete.itemTemplate, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, addRowEnabled: columnPropsAutoComplete.addRowEnabled, filter: columnPropsAutoComplete.filter, sortField: columnPropsAutoComplete.sortField, fields: columnPropsAutoComplete.fields, scrollHeight: columnPropsAutoComplete.scrollHeight, suggestions: columnPropsAutoComplete.suggestions, suggestionsLoad: columnPropsAutoComplete.suggestionsLoad, lazyLoadMaxRows: columnPropsAutoComplete.lazyLoadMaxRows, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.32.11",
+  "version": "1.33.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",