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

package/lib/components/XAutoCompleteBase.js

@@ -404,8 +404,8 @@ 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("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), { style: { width: this.props.width } })),
+        return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
+            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))),
             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/XCheckbox.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { XInput, XInputProps } from "./XInput";
+import { CheckboxChangeEvent } from "primereact/checkbox";
 export declare class XCheckbox extends XInput<boolean, XInputProps<boolean>> {
     constructor(props: XInputProps<boolean>);
     getValue(): boolean | null;
-    onValueChange(e: any): void;
+    checkboxOnValueChange(e: CheckboxChangeEvent): void;
+    triStateCheckboxOnValueChange(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XCheckbox.js

@@ -22,11 +22,13 @@ exports.XCheckbox = void 0;
 var react_1 = __importDefault(require("react"));
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XInput_1 = require("./XInput");
+var checkbox_1 = require("primereact/checkbox");
 var XCheckbox = /** @class */ (function (_super) {
     __extends(XCheckbox, _super);
     function XCheckbox(props) {
         var _this = _super.call(this, props) || this;
-        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.checkboxOnValueChange = _this.checkboxOnValueChange.bind(_this);
+        _this.triStateCheckboxOnValueChange = _this.triStateCheckboxOnValueChange.bind(_this);
         return _this;
     }
     XCheckbox.prototype.getValue = function () {
@@ -34,7 +36,10 @@ var XCheckbox = /** @class */ (function (_super) {
         var value = this.getValueFromObject();
         return value;
     };
-    XCheckbox.prototype.onValueChange = function (e) {
+    XCheckbox.prototype.checkboxOnValueChange = function (e) {
+        this.onValueChangeBase(e.checked, this.props.onChange);
+    };
+    XCheckbox.prototype.triStateCheckboxOnValueChange = function (e) {
         var newValue = e.value;
         // pri klikani na TriStateCheckbox prichadza v newValue cyklicky: true -> false -> null
         // ak mame not null atribut, tak pri null hodnote skocime rovno na true
@@ -47,10 +52,19 @@ var XCheckbox = /** @class */ (function (_super) {
         this.onValueChangeBase(newValue, this.props.onChange);
     };
     XCheckbox.prototype.render = function () {
+        var _a;
         // note: style overrides size (width of the input according to character count)
-        return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle })));
+        // pre not null atributy pouzijeme standardny checkbox aby sme pre false mali prazdny biely checkbox - TODO - pomenit ikonky na TriStateCheckbox aby to pekne sedelo
+        var element = this.isNotNull()
+            ? react_1.default.createElement(checkbox_1.Checkbox, { id: this.props.field, checked: (_a = this.getValue()) !== null && _a !== void 0 ? _a : false, onChange: this.checkboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip })
+            : react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.triStateCheckboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip });
+        if (!this.props.onlyInput) {
+            var label = this.getLabel();
+            element = react_1.default.createElement("div", { className: "field grid" },
+                label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
+                element);
+        }
+        return element;
     };
     return XCheckbox;
 }(XInput_1.XInput));

package/lib/components/XFormComponent.d.ts

@@ -10,19 +10,22 @@ export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | unde
 export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
+    tooltip?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;
     onChange?: XFieldOnChange;
+    onlyInput?: boolean;
 }
 export declare abstract class XFormComponent<T, P extends XFormComponentProps<T>> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromObject(): any;
     onValueChangeBase(value: any, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
-    getLabel(): string;
+    getLabel(): string | undefined;
     getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;

package/lib/components/XFormComponent.js

@@ -21,8 +21,10 @@ var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
+    // mali sme problem ze aplikacny onChange sa volal aj ked uzivatel iba klikol do inputu a odisiel z neho
     function XFormComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         props.form.addXFormComponent(_this);
         return _this;
     }
@@ -45,6 +47,7 @@ var XFormComponent = /** @class */ (function (_super) {
     XFormComponent.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onFieldChange(this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponent.prototype.isReadOnly = function () {
         var readOnly;
@@ -76,12 +79,14 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         return readOnly;
     };
+    // ak je label undefined, label element sa nevykresli
     XFormComponent.prototype.getLabel = function () {
-        var _a;
-        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
-        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
-        if (this.isNotNull() && !this.isReadOnly()) {
-            label = XUtils_1.XUtils.markNotNull(label);
+        var label = this.props.label;
+        if (label !== undefined) {
+            // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+            if (this.isNotNull() && !this.isReadOnly()) {
+                label = XUtils_1.XUtils.markNotNull(label);
+            }
         }
         return label;
     };
@@ -147,12 +152,13 @@ var XFormComponent = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponent.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva

package/lib/components/XFormComponentDT.d.ts

@@ -12,6 +12,7 @@ export interface XFormComponentDTProps {
     onChange?: XTableFieldOnChange;
 }
 export declare abstract class XFormComponentDT<P extends XFormComponentDTProps> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromRowData(): any;

package/lib/components/XFormComponentDT.js

@@ -24,6 +24,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     __extends(XFormComponentDT, _super);
     function XFormComponentDT(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         XFormBase_1.XFormBase.getXRowTechData(props.rowData).xFormComponentDTList.push(_this);
         return _this;
     }
@@ -46,6 +47,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     XFormComponentDT.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onTableFieldChange(this.props.rowData, this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponentDT.prototype.isReadOnly = function () {
         var readOnly;
@@ -114,12 +116,13 @@ var XFormComponentDT = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponentDT.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object, tableRow: this.props.rowData, assocObjectChange: undefined });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva, aj to nie pre vsetky

package/lib/components/XFormDataTable2.d.ts

@@ -1,6 +1,7 @@
 import { XFormBase } from "./XFormBase";
-import { Component, ReactChild } from "react";
+import React, { Component, ReactChild } from "react";
 import { DataTableFilterMeta } from "primereact/datatable";
+import { ColumnBodyOptions } from "primereact/column";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
 import { XViewStatusOrBoolean } from "./XUtils";
 import { FilterMatchMode } from "primereact/api";
@@ -91,7 +92,7 @@ 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 XFormColumnBaseProps {
-    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "custom";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
@@ -122,6 +123,10 @@ export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     displayField: string;
     searchBrowse: JSX.Element;
 }
+export interface XFormCustomColumnProps extends XFormColumnBaseProps {
+    body: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
+    field?: string;
+}
 export declare const XFormColumn: {
     (props: XFormColumnProps): null;
     defaultProps: {
@@ -150,3 +155,10 @@ export declare const XFormSearchButtonColumn: {
         columnViewStatus: boolean;
     };
 };
+export declare const XFormCustomColumn: {
+    (props: XFormCustomColumnProps): null;
+    defaultProps: {
+        type: string;
+        columnViewStatus: boolean;
+    };
+};

package/lib/components/XFormDataTable2.js

@@ -60,7 +60,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormCustomColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
 var XFormBase_1 = require("./XFormBase");
 var react_1 = __importStar(require("react"));
 var XDropdownDT_1 = require("./XDropdownDT");
@@ -118,8 +118,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
-                props.form.addField(field);
+                if (childColumn.props.type !== "custom") {
+                    var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
+                    props.form.addField(field);
+                }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -231,24 +233,27 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(this.props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = this.getPathForColumn(childColumn.props);
-                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-                // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
-                var filterMatchMode = this.getFilterMatchMode(xField);
-                var filterItem = void 0;
-                if (this.props.filterDisplay === "menu") {
-                    // DataTableOperatorFilterMetaData: operator + filter values
-                    filterItem = {
-                        operator: api_1.FilterOperator.OR,
-                        constraints: [{ value: null, matchMode: filterMatchMode }]
-                    };
-                }
-                else {
-                    // props.filterDisplay === "row"
-                    // DataTableFilterMetaData: filter value
-                    filterItem = { value: null, matchMode: filterMatchMode };
+                // zatial nepodporujeme filter pre custom stlpce
+                if (childColumn.props.type !== "custom") {
+                    var field = this.getPathForColumn(childColumn.props);
+                    var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
+                    // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
+                    var filterMatchMode = this.getFilterMatchMode(xField);
+                    var filterItem = void 0;
+                    if (this.props.filterDisplay === "menu") {
+                        // DataTableOperatorFilterMetaData: operator + filter values
+                        filterItem = {
+                            operator: api_1.FilterOperator.OR,
+                            constraints: [{ value: null, matchMode: filterMatchMode }]
+                        };
+                    }
+                    else {
+                        // props.filterDisplay === "row"
+                        // DataTableFilterMetaData: filter value
+                        filterItem = { value: null, matchMode: filterMatchMode };
+                    }
+                    initFilters[field] = filterItem;
                 }
-                initFilters[field] = filterItem;
             }
         }
         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -562,72 +567,95 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
             var childColumn = child; // nevedel som to krajsie...
             var childColumnProps = childColumn.props;
-            // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
-            // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
-            var field = thisLocal.getPathForColumn(childColumnProps);
-            // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
-            var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-            // *********** header ***********
-            var header = XFormDataTable2.getHeader(childColumnProps, xEntity, field, xField);
-            // *********** filterElement ***********
+            var fieldParam;
+            var header;
             var filterElement;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (xField.type === "boolean") {
-                    var checkboxValue = thisLocal.getCheckboxFilterValue(field);
-                    filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field, e.value); } });
-                }
-                else if (childColumnProps.dropdownInFilter) {
-                    var dropdownValue = thisLocal.getDropdownFilterValue(field);
-                    filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
-                }
+            var showFilterMenu;
+            var width;
+            var align;
+            var body;
+            if (childColumnProps.type === "custom") {
+                // len jednoduche hodnoty, zatial nebude takmer ziadna podpora
+                var columnPropsCustom = childColumnProps;
+                fieldParam = columnPropsCustom.field;
+                header = columnPropsCustom.header;
+                filterElement = undefined;
+                showFilterMenu = false;
+                width = XUtils_1.XUtils.processPropWidth(columnPropsCustom.width);
+                align = undefined;
+                body = columnPropsCustom.body;
             }
-            // *********** showFilterMenu ***********
-            var showFilterMenu = false;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (childColumnProps.showFilterMenu !== undefined) {
-                    showFilterMenu = childColumnProps.showFilterMenu;
+            else {
+                // fieldy ktore su v modeli (existuje xField)
+                // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
+                // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
+                var field_1 = thisLocal.getPathForColumn(childColumnProps);
+                // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
+                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field_1);
+                // *********** header ***********
+                header = XFormDataTable2.getHeader(childColumnProps, xEntity, field_1, xField);
+                // *********** filterElement ***********
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (xField.type === "boolean") {
+                        var checkboxValue = thisLocal.getCheckboxFilterValue(field_1);
+                        filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field_1, e.value); } });
+                    }
+                    else if (childColumnProps.dropdownInFilter) {
+                        var dropdownValue = thisLocal.getDropdownFilterValue(field_1);
+                        filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field_1, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
+                    }
                 }
-                else {
-                    showFilterMenu = true; // default
-                    if (thisLocal.props.filterDisplay === "row") {
-                        if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
-                            showFilterMenu = false;
+                // *********** showFilterMenu ***********
+                showFilterMenu = false;
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (childColumnProps.showFilterMenu !== undefined) {
+                        showFilterMenu = childColumnProps.showFilterMenu;
+                    }
+                    else {
+                        showFilterMenu = true; // default
+                        if (thisLocal.props.filterDisplay === "row") {
+                            if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
+                                showFilterMenu = false;
+                            }
                         }
                     }
                 }
+                // *********** width/headerStyle ***********
+                width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
+                if (width === undefined || width === "default") {
+                    var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                    var sortableButtonInHeader = thisLocal.props.sortable;
+                    var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
+                    width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
+                }
+                // *********** align ***********
+                align = undefined; // default undefined (left)
+                // do buducna
+                // if (childColumnProps.align !== undefined) {
+                //     align = childColumnProps.align;
+                // }
+                // else {
+                // decimal defaultne zarovnavame doprava
+                // if (xField.type === "decimal") {
+                //     align = "right";
+                // }
+                // else
+                if (xField.type === "boolean") {
+                    align = "center";
+                }
+                // }
+                // *********** body ***********
+                body = function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); };
+                fieldParam = field_1;
             }
             // *********** showClearButton ***********
             // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
             var showClearButton = thisLocal.props.filterDisplay === "menu";
-            // *********** width/headerStyle ***********
-            var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
-            if (width === undefined || width === "default") {
-                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
-                var sortableButtonInHeader = thisLocal.props.sortable;
-                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
-            }
             var headerStyle = {};
             if (width !== undefined) {
                 headerStyle = { width: width };
             }
-            // *********** align ***********
-            var align = undefined; // default undefined (left)
-            // do buducna
-            // if (childColumnProps.align !== undefined) {
-            //     align = childColumnProps.align;
-            // }
-            // else {
-            // decimal defaultne zarovnavame doprava
-            // if (xField.type === "decimal") {
-            //     align = "right";
-            // }
-            // else
-            if (xField.type === "boolean") {
-                align = "center";
-            }
-            // }
-            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); } });
+            return react_1.default.createElement(column_1.Column, { field: fieldParam, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: body });
         });
         if (this.props.showAddRemoveButtons && this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
@@ -695,3 +723,9 @@ var XFormSearchButtonColumn = function (props) {
 };
 exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
 exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });
+var XFormCustomColumn = 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.XFormCustomColumn = XFormCustomColumn;
+exports.XFormCustomColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "custom" });

package/lib/components/XInputDecimal.js

@@ -69,8 +69,9 @@ var XInputDecimal = /** @class */ (function (_super) {
         var _b = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _b.useGrouping, fractionDigits = _b.fractionDigits, min = _b.min, max = _b.max, size = _b.size;
         var sizeInput = (_a = this.props.size) !== null && _a !== void 0 ? _a : size;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputDecimal;

package/lib/components/XInputDecimalBase.d.ts

@@ -9,4 +9,5 @@ export declare const XInputDecimalBase: (props: {
     min?: number | undefined;
     max?: number | undefined;
     size?: number | undefined;
+    className?: string | undefined;
 }) => JSX.Element;

package/lib/components/XInputDecimalBase.js

@@ -13,6 +13,6 @@ var XInputDecimalBase = function (props) {
         props.onChange(e.value);
     };
     // null konvertujeme na undefined (zevraj InputNumber nechce null)
-    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size }));
+    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size, className: props.className }));
 };
 exports.XInputDecimalBase = XInputDecimalBase;

package/lib/components/XInputText.js

@@ -60,8 +60,9 @@ var XInputText = /** @class */ (function (_super) {
         var _a;
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputText;

package/lib/components/XLazyDataTable.js

@@ -634,7 +634,7 @@ var XLazyDataTable = function (props) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = 'calc(100vw - 1.4rem)'; // 20px okraje
+                scrollWidth = 'calc(100vw - 2.2rem)'; // povodne bolo 1.4rem (20px okraje) ale pri vela stlpcoch vznikal horizontalny scrollbar
             }
         }
         if (props.scrollHeight !== "none") {

package/package.json

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