@michalrakus/x-react-web-lib 1.23.0 → 1.24.1

package/lib/components/XAutoCompleteBase.js

@@ -704,12 +704,12 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             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 })),
             dropdownButton,
             this.props.valueForm != undefined ?
-                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, {
+                react_1.default.createElement(dialog_1.Dialog, { 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*/))
                 : undefined,
             this.props.searchBrowse != undefined && !readOnly ?
-                react_1.default.createElement(dialog_1.Dialog, { visible: this.state.searchDialogOpened, onHide: this.searchDialogOnHide }, react_1.default.cloneElement(this.props.searchBrowse, { searchBrowseParams: this.createSearchBrowseParams() } /*, props.searchBrowse.children*/))
+                react_1.default.createElement(dialog_1.Dialog, { className: "x-dialog-without-header", visible: this.state.searchDialogOpened, onHide: this.searchDialogOnHide }, react_1.default.cloneElement(this.props.searchBrowse, { searchBrowseParams: this.createSearchBrowseParams() } /*, props.searchBrowse.children*/))
                 : undefined));
     };
     XAutoCompleteBase.valueMoreSuggestions = "...";

package/lib/components/XCheckbox.js

@@ -59,7 +59,7 @@ var XCheckbox = /** @class */ (function (_super) {
             ? 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();
+            var label = this.props.label; // nepridavame * ani ak je atribut not null (kedze sa pouziva jednoduchy checkbox, nie je mozne zadat null hodnotu)
             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);

package/lib/components/XFormBase.d.ts

@@ -35,6 +35,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     getXObject(): XObject;
     getObject(): any;
     isAddRow(): any;
+    isInDialog(): boolean;
     onFieldChange(field: string, value: any, error?: string | undefined, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;
     /**

package/lib/components/XFormBase.js

@@ -223,6 +223,10 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.isAddRow = function () {
         return this.props.id === undefined;
     };
+    // helper method
+    XFormBase.prototype.isInDialog = function () {
+        return this.props.onSaveOrCancel !== undefined;
+    };
     XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
         // field moze byt aj na asociovanom objekte (field length > 1, napr.: <assocX>.<fieldY>)
         // v takom pripade sa do errorMap zapise ako key cely field <assocX>.<fieldY>

package/lib/components/XFormHeader.d.ts

@@ -1,4 +1,12 @@
 import React from "react";
-export declare const XFormHeader: (props: {
-    label: string;
-}) => React.JSX.Element;
+import { XFormBase } from "./XFormBase";
+export declare const XFormHeader: {
+    (props: {
+        form?: XFormBase;
+        label: string;
+        appendNewRow: boolean;
+    }): React.JSX.Element;
+    defaultProps: {
+        appendNewRow: boolean;
+    };
+};

package/lib/components/XFormHeader.js

@@ -5,7 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormHeader = void 0;
 var react_1 = __importDefault(require("react"));
+var XLocale_1 = require("./XLocale");
 var XFormHeader = function (props) {
-    return (react_1.default.createElement("div", { className: "x-form-header" }, props.label));
+    var _a;
+    return (react_1.default.createElement("div", { className: "x-form-header" }, props.label + (props.appendNewRow && ((_a = props.form) === null || _a === void 0 ? void 0 : _a.isAddRow()) ? " - " + (0, XLocale_1.xLocaleOption)('newRow') : "")));
 };
 exports.XFormHeader = XFormHeader;
+exports.XFormHeader.defaultProps = {
+    appendNewRow: true
+};

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

@@ -2,6 +2,7 @@ import React from "react";
 import { XFormBase } from "../XFormBase";
 export interface XFormColProps {
     form?: XFormBase;
+    width?: string | "full";
     labelStyle?: React.CSSProperties;
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];

package/lib/components/XFormRowCol/XFormCol.js

@@ -7,6 +7,6 @@ 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, style: props.style, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, width: props.width, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormCol = XFormCol;

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

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormRowColProps {
     className: "x-form-row" | "x-form-inline-row" | "x-form-col";
     form?: XFormBase;
+    width?: string | "full";
     labelStyle?: React.CSSProperties;
     style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormRowCol = void 0;
 var react_1 = __importDefault(require("react"));
+var XUtils_1 = require("../XUtils");
 var XFormRowCol = function (props) {
     var childElemList;
     if (props.form || props.labelStyle) {
@@ -27,6 +28,12 @@ var XFormRowCol = function (props) {
     else {
         childElemList = props.children; // netreba klonovat - viac menej koli performance
     }
-    return react_1.default.createElement("div", { className: props.className, style: props.style }, childElemList);
+    var style = props.style;
+    if (props.width) {
+        style = style !== null && style !== void 0 ? style : {};
+        var width = (props.width === 'full' ? '100%' : props.width);
+        XUtils_1.XUtils.addCssPropIfNotExists(style, { width: width }); // props.style ma vyssiu prioritu ako props.width
+    }
+    return react_1.default.createElement("div", { className: props.className, style: style }, childElemList);
 };
 exports.XFormRowCol = XFormRowCol;

package/lib/components/XInputTextarea.js

@@ -43,13 +43,28 @@ var XInputTextarea = /** @class */ (function (_super) {
     };
     XInputTextarea.prototype.render = function () {
         var _a, _b;
+        var fieldStyle = undefined;
+        var labelStyle = this.getLabelStyle();
         var inputStyle = (_a = this.props.inputStyle) !== null && _a !== void 0 ? _a : {};
         var cols;
         if (this.props.cols === "full") {
             cols = undefined;
             // pridame width:100%
-            // ak nemame labelOnTop=true, musime odratat sirku labelu, inac sa label dostane nad input (koli flex-wrap: wrap)
-            var widthValue = this.props.labelOnTop ? '100%' : "calc(100% - ".concat(XUtils_1.XUtils.FIELD_LABEL_WIDTH, ")");
+            //fieldStyle = {width: '100%'};
+            var widthValue = void 0;
+            if (this.props.labelOnTop) {
+                widthValue = '100%';
+            }
+            else {
+                // ak nemame labelOnTop=true, musime odratat sirku labelu, inac sa label dostane nad input (koli flex-wrap: wrap)
+                var labelStyleWidth = labelStyle.width;
+                if (labelStyleWidth) {
+                    widthValue = "calc(100% - ".concat(labelStyleWidth, ")");
+                }
+                else {
+                    widthValue = '100%';
+                }
+            }
             XUtils_1.XUtils.addCssPropIfNotExists(inputStyle, { width: widthValue });
         }
         else {
@@ -67,8 +82,8 @@ var XInputTextarea = /** @class */ (function (_super) {
             labelElemId = "".concat(this.props.field, "_label_id");
         }
         // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
-        return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top' },
-            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
+        return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top', style: fieldStyle },
+            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
             labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
             this.props.form.state.object ?
                 react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })

package/lib/components/XLazyDataTable/XExportRowsDialog.js

@@ -185,20 +185,20 @@ var XExportRowsDialog = function (props) {
             if ((_a = props.dialogState.exportParams) === null || _a === void 0 ? void 0 : _a.existsToManyAssoc) {
                 elem.push(react_1.default.createElement("div", { key: "expDetailRowsExport", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDetailRowsExport')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.multilineExportTypeOptions, onChange: function (e) { return setDetailRowsExport(e.value); } })));
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.options(XUtils_1.XUtils.multilineExportTypeOptions), onChange: function (e) { return setDetailRowsExport(e.value); } })));
             }
         }
         if (exportType === ExportImportParam_1.ExportType.Csv) {
             elem.push([
                 react_1.default.createElement("div", { key: "expCsvSeparator", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.csvSeparatorOptions, onChange: function (e) { return setCsvSeparator(e.value); } })),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.options(XUtils_1.XUtils.csvSeparatorOptions), onChange: function (e) { return setCsvSeparator(e.value); } })),
                 react_1.default.createElement("div", { key: "expDecimalFormat", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.decimalFormatOptions, onChange: function (e) { return setDecimalFormat(e.value); } })),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.options(XUtils_1.XUtils.decimalFormatOptions), onChange: function (e) { return setDecimalFormat(e.value); } })),
                 react_1.default.createElement("div", { key: "expEncoding", className: "field grid" },
                     react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } }))
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.options(XUtils_1.XUtils.csvEncodingOptions), onChange: function (e) { return setCsvEncoding(e.value); } }))
             ]);
         }
     }
@@ -211,7 +211,7 @@ var XExportRowsDialog = function (props) {
             : null,
         react_1.default.createElement("div", { key: "expExportType", className: "field grid" },
             react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
-            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
+            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: XUtils_1.XUtils.options((_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions), onChange: function (e) { return setExportType(e.value); } })),
         elem,
         react_1.default.createElement("div", { key: "exportRows", className: "flex justify-content-center" },
             react_1.default.createElement(XButton_1.XButton, { label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onExport }))));

package/lib/components/XSearchButton.js

@@ -214,7 +214,7 @@ var XSearchButton = /** @class */ (function (_super) {
             react_1.default.createElement("div", { className: "x-search-button-base" },
                 react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: this.isReadOnly(), ref: this.inputTextRef, maxLength: xDisplayField.length, size: size, style: props.inputStyle }, this.getClassNameTooltip())),
                 react_1.default.createElement(button_1.Button, { icon: "pi pi-search", onClick: onClickSearch })),
-            react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, { searchBrowseParams: createSearchBrowseParams() } /*, props.searchBrowse.children*/))));
+            react_1.default.createElement(dialog_1.Dialog, { className: "x-dialog-without-header", visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, { searchBrowseParams: createSearchBrowseParams() } /*, props.searchBrowse.children*/))));
     };
     return XSearchButton;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XSearchButtonDT.js

@@ -181,7 +181,7 @@ var XSearchButtonDT = function (props) {
         react_1.default.createElement("div", { className: "x-search-button-base" },
             react_1.default.createElement(inputtext_1.InputText, { id: props.assocField, value: inputValue, onChange: onInputValueChange, onBlur: onInputBlur, readOnly: readOnly, ref: inputTextRef }),
             react_1.default.createElement(button_1.Button, { icon: "pi pi-search", onClick: onClickSearch })),
-        react_1.default.createElement(dialog_1.Dialog, { visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, {
+        react_1.default.createElement(dialog_1.Dialog, { className: "x-dialog-without-header", visible: dialogOpened, onHide: onHide }, react_1.default.cloneElement(props.searchBrowse, {
             searchBrowseParams: {
                 onChoose: onChoose,
                 displayFieldFilter: (inputChanged ? { field: props.displayField, constraint: { value: inputValueState, matchMode: "contains" } } : undefined),

package/lib/components/XUtils.d.ts

@@ -7,6 +7,7 @@ import { XCustomFilter, XCustomFilterItem } from "../serverApi/FindParam";
 import { DataTableSortMeta } from "primereact/datatable";
 import { XObject } from "./XObject";
 import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
+import { SelectItem } from "primereact/selectitem";
 export declare enum OperationType {
     None = 0,
     Insert = 1,
@@ -125,4 +126,5 @@ export declare class XUtils {
     static evalFilter(filter: XFilterOrFunction | undefined): XCustomFilter | undefined;
     static isTableRowInserted(tableRow: any): boolean;
     static xViewStatus(xViewStatusOrBoolean: XViewStatusOrBoolean): XViewStatus;
+    static options(valueStringList: string[]): SelectItem[];
 }

package/lib/components/XUtils.js

@@ -841,6 +841,10 @@ var XUtils = /** @class */ (function () {
         }
         return xViewStatus;
     };
+    // plain string does not work in Dropdown, bug in Primereact?
+    XUtils.options = function (valueStringList) {
+        return valueStringList.map(function (valueString) { return { value: valueString, label: valueString }; });
+    };
     XUtils.dropdownEmptyOptionValue = " ";
     XUtils.xBackendUrl = undefined;
     // nacachovany XToken - na rozlicnych miestach potrebujeme vediet uzivatela

package/lib/components/locale/x-en.json

@@ -11,6 +11,7 @@
         "pleaseSelectRow": "Please select the row.",
         "removeRowConfirm": "Are you sure to remove the selected row?",
         "removeRowFailed": "Remove row failed.",
+        "newRow": "new row",
         "save": "Save",
         "cancel": "Cancel",
         "expRowCount": "Row count",

package/package.json

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