@michalrakus/x-react-web-lib 1.13.0 → 1.14.0

package/XFormCol.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormCol';

package/XFormCol.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormCol.js');

package/XFormInlineRow.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormInlineRow';

package/XFormInlineRow.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormInlineRow.js');

package/XFormRow.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormRow';

package/XFormRow.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormRow.js');

package/XFormRowCol.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormRowCol/XFormRowCol';

package/XFormRowCol.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormRowCol/XFormRowCol.js');

package/gulpfile.js

@@ -18,6 +18,11 @@ function generateApi(cb) {
         "./lib/administration/XBrowseMetaBrowse",
         "./lib/administration/XBrowseMetaForm",
 
+        "./lib/components/XFormRowCol/XFormCol",
+        "./lib/components/XFormRowCol/XFormInlineRow",
+        "./lib/components/XFormRowCol/XFormRow",
+        "./lib/components/XFormRowCol/XFormRowCol",
+
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",

package/lib/components/XAutoComplete.d.ts

@@ -14,7 +14,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     sortField?: string | DataTableSortMeta[];
     suggestions?: any[];
     lazy?: boolean;
-    size?: number;
+    width?: string;
     inputStyle?: React.CSSProperties;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {

package/lib/components/XAutoComplete.js

@@ -138,14 +138,10 @@ var XAutoComplete = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
-        //const xDisplayField = XUtilsMetadataCommon.getXFieldByPath(xEntityAssoc, this.props.displayField);
-        // TODO - readOnly
-        // 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("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, 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(), 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 })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -13,6 +13,7 @@ export interface XAutoCompleteBaseProps {
     valueForm?: JSX.Element;
     idField?: string;
     maxLength?: number;
+    width?: string;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;

package/lib/components/XAutoCompleteBase.js

@@ -405,7 +405,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <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("div", { className: "x-auto-complete-base" },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, field: this.props.field, 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))),
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, field: this.props.field, 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), { style: { width: this.props.width } })),
             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 row' }, react_1.default.cloneElement(this.props.valueForm, {

package/lib/components/XDropdownDTFilter.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XDropdownDTFilter: (props: {
     entity: string;
     path: string;
     value: any;
     onValueChange: (field: string, displayValue: any) => void;
+    filter?: XCustomFilter | undefined;
+    sortField?: string | undefined;
 }) => JSX.Element;

package/lib/components/XDropdownDTFilter.js

@@ -98,13 +98,14 @@ var XDropdownDTFilter = function (props) {
     };
     var findOptions = function (entity, path, displayField) { return __awaiter(void 0, void 0, void 0, function () {
         var xAssoc, options, emptyOption;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getLastXAssocByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(entity), path);
-                    return [4 /*yield*/, XUtils_1.XUtils.fetchRows(xAssoc.entityName, undefined, displayField)];
+                    return [4 /*yield*/, XUtils_1.XUtils.fetchRows(xAssoc.entityName, props.filter, (_a = props.sortField) !== null && _a !== void 0 ? _a : displayField)];
                 case 1:
-                    options = _a.sent();
+                    options = _b.sent();
                     emptyOption = {};
                     emptyOption[displayField] = XUtils_1.XUtils.dropdownEmptyOptionValue;
                     options.splice(0, 0, emptyOption); // null polozka (nepridavat pre not null atributy)

package/lib/components/XFormDataTable2.d.ts

@@ -2,6 +2,7 @@ import { XFormBase } from "./XFormBase";
 import { Component, ReactChild } from "react";
 import { DataTableFilterMeta } from "primereact/datatable";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
+import { XViewStatusOrBoolean } from "./XUtils";
 import { FilterMatchMode } from "primereact/api";
 import { XTableFieldChangeEvent } from "./XFieldChangeEvent";
 import { XCustomFilter } from "../serverApi/FindParam";
@@ -65,8 +66,8 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
-    getPathForColumn(columnProps: XFormColumnProps): string;
-    static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
+    getPathForColumn(columnProps: XFormColumnBaseProps): string;
+    static getHeader(columnProps: XFormColumnBaseProps, xEntity: XEntity, field: string, xField: XField): string;
     static isReadOnlyHeader(path: string | undefined, readOnly: XTableFieldReadOnlyProp | undefined): boolean;
     getEntity(): string;
     createInitFilters(): DataTableFilterMeta;
@@ -78,7 +79,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     getCheckboxFilterValue(field: string): boolean | null;
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
-    bodyTemplate(columnProps: XFormColumnProps, tableReadOnly: boolean, rowData: any, xEntity: XEntity): any;
+    bodyTemplate(columnProps: XFormColumnBaseProps, tableReadOnly: boolean, rowData: any, xEntity: XEntity): any;
     onClickAddRow(): void;
     onClickRemoveRowBySelection(): void;
     removeRow(row: any): void;
@@ -89,7 +90,7 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
 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 XFormColumnProps {
+export interface XFormColumnBaseProps {
     type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
@@ -97,17 +98,18 @@ export interface XFormColumnProps {
     showFilterMenu?: boolean;
     width?: string;
     onChange?: XTableFieldOnChange;
+    columnViewStatus: XViewStatusOrBoolean;
 }
-export interface XFormInputSimpleColumnProps extends XFormColumnProps {
+export interface XFormColumnProps extends XFormColumnBaseProps {
     field: string;
 }
-export interface XFormDropdownColumnProps extends XFormColumnProps {
+export interface XFormDropdownColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     sortField?: string;
     filter?: XCustomFilter;
 }
-export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
+export interface XFormAutoCompleteColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     searchBrowse?: JSX.Element;
@@ -115,32 +117,36 @@ export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
     filter?: XTableFieldFilterProp;
     suggestions?: any[];
 }
-export interface XFormSearchButtonColumnProps extends XFormColumnProps {
+export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     assocField: string;
     displayField: string;
     searchBrowse: JSX.Element;
 }
 export declare const XFormColumn: {
-    (props: XFormInputSimpleColumnProps): null;
+    (props: XFormColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormDropdownColumn: {
     (props: XFormDropdownColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormAutoCompleteColumn: {
     (props: XFormAutoCompleteColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };
 export declare const XFormSearchButtonColumn: {
     (props: XFormSearchButtonColumnProps): null;
     defaultProps: {
         type: string;
+        columnViewStatus: boolean;
     };
 };

package/lib/components/XFormDataTable2.js

@@ -350,8 +350,19 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
     XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
         var body;
+        // columnProps.columnViewStatus "ReadOnly" has higher prio then tableReadOnly
         // tableReadOnly has higher prio then property readOnly
-        var readOnly = tableReadOnly ? true : columnProps.readOnly;
+        // (viewStatus "Hidden" - column is not rendered (bodyTemplate not called), viewStatus "ReadWrite" (default) - tableReadOnly/columnProps.readOnly is applied)
+        var readOnly;
+        if (XUtils_1.XUtils.xViewStatus(columnProps.columnViewStatus) === XUtils_1.XViewStatus.ReadOnly) {
+            readOnly = true;
+        }
+        else if (tableReadOnly) {
+            readOnly = true;
+        }
+        else {
+            readOnly = columnProps.readOnly;
+        }
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
             var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, columnPropsInputSimple.field);
@@ -497,7 +508,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     };
     XFormDataTable2.prototype.render = function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c;
+        var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.getEntity());
         var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
         var rows = undefined;
         if (paginator) {
@@ -509,13 +521,14 @@ 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 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
         var thisLocal = this;
         var object = this.props.form.state.object;
         var valueList = object !== null ? object[this.props.assocField] : [];
-        var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.getEntity());
         var scrollWidth = undefined; // vypnute horizontalne scrollovanie
         var scrollHeight = undefined; // vypnute vertikalne scrollovanie
         if (this.props.scrollable) {
@@ -543,7 +556,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             tableStyle = __assign(__assign({}, tableStyle), { width: width });
         }
         // pre lepsiu citatelnost vytvarame stlpce uz tu
-        var columnElemList = react_1.default.Children.map(this.props.children, function (child) {
+        var columnElemList = react_1.default.Children.map(this.props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
             // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
             // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
             // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
@@ -624,14 +637,14 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         var removeRowLabel = undefined;
         if (this.props.showAddRemoveButtons) {
             // calling xLocaleOption does not work in standard default values initialisation place (public static defaultProps)
-            addRowLabel = (_a = this.props.addRowLabel) !== null && _a !== void 0 ? _a : (0, XLocale_1.xLocaleOption)('addRow');
-            removeRowLabel = (_b = this.props.removeRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('removeRow');
+            addRowLabel = (_b = this.props.addRowLabel) !== null && _b !== void 0 ? _b : (0, XLocale_1.xLocaleOption)('addRow');
+            removeRowLabel = (_c = this.props.removeRowLabel) !== null && _c !== void 0 ? _c : (0, XLocale_1.xLocaleOption)('removeRow');
         }
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
             react_1.default.createElement("div", { className: "flex justify-content-center" },
-                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: this.props.sortField !== undefined ? [{ field: this.props.sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+                react_1.default.createElement(datatable_1.DataTable, { ref: function (el) { return _this.dt = el; }, value: valueList, dataKey: this.dataKey, paginator: paginator, rows: rows, totalRecords: valueList.length, filterDisplay: filterDisplay, filters: this.state.filters, onFilter: this.onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: sortField !== undefined ? [{ field: sortField, order: 1 }] : undefined, selectionMode: "single", selection: this.state.selectedRow, onSelectionChange: this.onSelectionChange, className: "p-datatable-sm x-form-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, scrollable: this.props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
             this.props.showAddRemoveButtons ?
                 react_1.default.createElement("div", { className: "flex justify-content-center" },
                     react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
@@ -639,8 +652,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 : undefined));
     };
     XFormDataTable2.defaultProps = {
-        filterDisplay: "row",
-        sortable: true,
+        filterDisplay: "none",
+        sortable: false,
         scrollable: true,
         scrollWidth: '100%',
         scrollHeight: '200vh',
@@ -654,35 +667,31 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     return XFormDataTable2;
 }(react_1.Component));
 exports.XFormDataTable2 = XFormDataTable2;
+// default props for XFormColumnBaseProps
+var XFormColumnBase_defaultProps = {
+    columnViewStatus: true
+};
 var XFormColumn = 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.XFormColumn = XFormColumn;
-exports.XFormColumn.defaultProps = {
-    type: "inputSimple"
-};
+exports.XFormColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "inputSimple" });
 var XFormDropdownColumn = 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.XFormDropdownColumn = XFormDropdownColumn;
-exports.XFormDropdownColumn.defaultProps = {
-    type: "dropdown"
-};
+exports.XFormDropdownColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "dropdown" });
 var XFormAutoCompleteColumn = 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.XFormAutoCompleteColumn = XFormAutoCompleteColumn;
-exports.XFormAutoCompleteColumn.defaultProps = {
-    type: "autoComplete"
-};
+exports.XFormAutoCompleteColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "autoComplete" });
 var XFormSearchButtonColumn = 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.XFormSearchButtonColumn = XFormSearchButtonColumn;
-exports.XFormSearchButtonColumn.defaultProps = {
-    type: "searchButton"
-};
+exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });

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

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

package/lib/components/XFormRowCol/XFormCol.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 });
+};
+exports.XFormCol = XFormCol;

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

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

package/lib/components/XFormRowCol/XFormInlineRow.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 });
+};
+exports.XFormInlineRow = XFormInlineRow;

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

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

package/lib/components/XFormRowCol/XFormRow.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 });
+};
+exports.XFormRow = XFormRow;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { XFormBase } from "../XFormBase";
+export interface XFormRowColProps {
+    className: "x-form-row" | "x-form-inline-row" | "x-form-col";
+    form?: XFormBase;
+    labelStyle?: React.CSSProperties;
+    children: JSX.Element | JSX.Element[];
+}
+export declare const XFormRowCol: (props: XFormRowColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormRowCol = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormRowCol = function (props) {
+    var childElemList;
+    if (props.form || props.labelStyle) {
+        // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
+        // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
+        childElemList = react_1.default.Children.map(props.children, function (child) {
+            var _a, _b;
+            // klonujeme len nase X* komponenty (napr. XInputText), child.type.name vracia nazov komponenty (napr. XInputText)
+            // ak vyklonujeme cudziu komponentu, funguje, ale prida do nej property labelstyle=[object Object]
+            if (child.type.name && child.type.name.startsWith("X")) {
+                return react_1.default.cloneElement(child, { form: (_a = child.props.form) !== null && _a !== void 0 ? _a : props.form, labelStyle: (_b = child.props.labelStyle) !== null && _b !== void 0 ? _b : props.labelStyle });
+            }
+            else {
+                return child;
+            }
+        });
+    }
+    else {
+        childElemList = props.children; // netreba klonovat - viac menej koli performance
+    }
+    return react_1.default.createElement("div", { className: props.className }, childElemList);
+};
+exports.XFormRowCol = XFormRowCol;

package/lib/components/XLazyDataTable.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactChild } from 'react';
 import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { XViewStatusOrBoolean } from "./XUtils";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
 import { XOnSaveOrCancelProp } from "./XFormBase";
@@ -86,11 +87,19 @@ export interface XLazyColumnProps {
     header?: any;
     align?: "left" | "center" | "right";
     dropdownInFilter?: boolean;
+    dropdownFilter?: XCustomFilter;
+    dropdownSortField?: string;
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
     aggregateType?: XAggregateType;
+    columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
-export declare const XLazyColumn: (props: XLazyColumnProps) => null;
+export declare const XLazyColumn: {
+    (props: XLazyColumnProps): null;
+    defaultProps: {
+        columnViewStatus: boolean;
+    };
+};

package/lib/components/XLazyDataTable.js

@@ -720,7 +720,7 @@ var XLazyDataTable = function (props) {
     // export pre search button-y zatial vypneme
     var exportRows = (props.searchBrowseParams === undefined);
     // pre lepsiu citatelnost vytvarame stlpce uz tu
-    var columnElemList = react_1.default.Children.map(props.children, function (child) {
+    var columnElemList = react_1.default.Children.map(props.children.filter(function (child) { return XUtils_1.XUtils.xViewStatus(child.props.columnViewStatus) !== XUtils_1.XViewStatus.Hidden; }), function (child) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
         // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
         // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
@@ -759,7 +759,7 @@ var XLazyDataTable = function (props) {
             }
             else if (childColumn.props.dropdownInFilter) {
                 var dropdownValue = getDropdownFilterValue(childColumn.props.field);
-                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange });
+                filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: props.entity, path: childColumn.props.field, value: dropdownValue, onValueChange: onDropdownFilterChange, filter: childColumn.props.dropdownFilter, sortField: childColumn.props.dropdownSortField });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
                 betweenFilter = getBetweenFilter(childColumn.props.betweenFilter, props.betweenFilter);
@@ -902,3 +902,6 @@ var XLazyColumn = function (props) {
     return (null);
 };
 exports.XLazyColumn = XLazyColumn;
+exports.XLazyColumn.defaultProps = {
+    columnViewStatus: true // XViewStatus.ReadWrite
+};

package/lib/components/XUtils.d.ts

@@ -13,6 +13,12 @@ export declare enum OperationType {
     Update = 2,
     Remove = 3
 }
+export declare enum XViewStatus {
+    ReadWrite = 0,
+    ReadOnly = 1,
+    Hidden = 2
+}
+export type XViewStatusOrBoolean = XViewStatus | boolean;
 export interface IPostgresInterval {
     years?: number;
     months?: number;
@@ -103,5 +109,7 @@ export declare class XUtils {
     static normalizeString(value: string): string;
     static createCustomFilterItems(customFilter: XCustomFilter | undefined): XCustomFilterItem[] | undefined;
     static filterAnd(...filters: (XCustomFilter | undefined)[]): XCustomFilterItem[] | undefined;
+    static filterIdIn(idField: string, idList: number[]): XCustomFilter;
     static isTableRowInserted(tableRow: any): boolean;
+    static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
 }

package/lib/components/XUtils.js

@@ -83,7 +83,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XUtils = exports.OperationType = void 0;
+exports.XUtils = exports.XViewStatus = exports.OperationType = void 0;
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var ExportImportParam_1 = require("../serverApi/ExportImportParam");
@@ -97,6 +97,12 @@ var OperationType;
     OperationType[OperationType["Update"] = 2] = "Update";
     OperationType[OperationType["Remove"] = 3] = "Remove";
 })(OperationType = exports.OperationType || (exports.OperationType = {}));
+var XViewStatus;
+(function (XViewStatus) {
+    XViewStatus[XViewStatus["ReadWrite"] = 0] = "ReadWrite";
+    XViewStatus[XViewStatus["ReadOnly"] = 1] = "ReadOnly";
+    XViewStatus[XViewStatus["Hidden"] = 2] = "Hidden";
+})(XViewStatus = exports.XViewStatus || (exports.XViewStatus = {}));
 var XUtils = /** @class */ (function () {
     function XUtils() {
     }
@@ -725,10 +731,26 @@ var XUtils = /** @class */ (function () {
         return customFilterItemsResult;
     };
     // pomocna metodka
+    // ak je idList prazdny, vytvori podmienku id IN (0) a nevrati ziadne zaznamy
+    XUtils.filterIdIn = function (idField, idList) {
+        return { where: "[".concat(idField, "] IN (:...idList)"), params: { "idList": idList.length > 0 ? idList : [0] } };
+    };
+    // pomocna metodka
     XUtils.isTableRowInserted = function (tableRow) {
         var _a;
         return (_a = tableRow.__x_generatedRowId) !== null && _a !== void 0 ? _a : false; // specialny priznak, ze sme vygenerovali id-cko
     };
+    // pomocna metodka
+    XUtils.xViewStatus = function (xViewStatusOrBoolean) {
+        var xViewStatus;
+        if (typeof xViewStatusOrBoolean === "boolean") {
+            xViewStatus = xViewStatusOrBoolean ? XViewStatus.ReadWrite : XViewStatus.Hidden;
+        }
+        else {
+            xViewStatus = xViewStatusOrBoolean;
+        }
+        return xViewStatus;
+    };
     XUtils.dropdownEmptyOptionValue = " ";
     XUtils.xBackendUrl = undefined;
     // nacachovany XToken - na rozlicnych miestach potrebujeme vediet uzivatela

package/package.json

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