@michalrakus/x-react-web-lib 1.7.1 → 1.7.3

package/XLocale.d.ts

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

package/XLocale.js

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

package/gulpfile.js

@@ -49,6 +49,7 @@ function generateApi(cb) {
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
         "./lib/components/XLazyDataTable",
+        "./lib/components/XLocale",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",
         "./lib/components/XSearchButton",

package/lib/components/XExportRowsDialog.js

@@ -85,6 +85,7 @@ var checkbox_1 = require("primereact/checkbox");
 var XButton_1 = require("./XButton");
 var XUtils_1 = require("./XUtils");
 var XUtilsConversions_1 = require("./XUtilsConversions");
+var XLocale_1 = require("./XLocale");
 var XExportRowsDialog = function (props) {
     var _a, _b;
     var _c = __read((0, react_1.useState)(ExportImportParam_1.ExportType.Csv), 2), exportType = _c[0], setExportType = _c[1];
@@ -153,16 +154,16 @@ var XExportRowsDialog = function (props) {
         if (exportType === ExportImportParam_1.ExportType.Csv) {
             elem = react_1.default.createElement("span", null,
                 react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Create header line"),
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expCreateHeaderLine')),
                     react_1.default.createElement(checkbox_1.Checkbox, { checked: createHeaderLine, onChange: function (e) { return setCreateHeaderLine(e.checked); } })),
                 react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Csv separator"),
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (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("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Decimal format"),
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (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("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Encoding"),
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (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); } })));
         }
     }
@@ -170,14 +171,14 @@ var XExportRowsDialog = function (props) {
     return (react_1.default.createElement(dialog_1.Dialog, { visible: props.dialogOpened, onShow: onShow, onHide: function () { return props.hideDialog(); } },
         props.rowCount ?
             react_1.default.createElement("div", { className: "field grid" },
-                react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Row count"),
+                react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expRowCount')),
                 react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.numberAsUI)((_a = props.rowCount) !== null && _a !== void 0 ? _a : null, 0), readOnly: true }))
             : null,
         react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { className: "col-fixed", style: { width: '9.3rem' } }, "Export type"),
+            react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
             react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_b = props.exportTypeOptions) !== null && _b !== void 0 ? _b : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
         elem,
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(XButton_1.XButton, { label: "Export", onClick: onExport }))));
+            react_1.default.createElement(XButton_1.XButton, { label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onExport }))));
 };
 exports.XExportRowsDialog = XExportRowsDialog;

package/lib/components/XFormBase.js

@@ -147,7 +147,7 @@ var XFormBase = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.log("volany XFormBase.componentDidMount()");
+                        //console.log("volany XFormBase.componentDidMount()");
                         // kontrola (musi byt tu, v konstruktore este property nie je nastavena)
                         if (this.entity === undefined) {
                             throw "XFormBase: Property entity is not defined - use decorator @Form.";
@@ -167,8 +167,8 @@ var XFormBase = /** @class */ (function (_super) {
                         _a.label = 3;
                     case 3:
                         this.preInitForm(object, operationType);
-                        console.log("volany XFormBase.componentDidMount() - ideme setnut object");
-                        this.setState({ object: object }, function () { return console.log("volany XFormBase.componentDidMount() - callback setState"); });
+                        //console.log("volany XFormBase.componentDidMount() - ideme setnut object");
+                        this.setState({ object: object } /*, () => console.log("volany XFormBase.componentDidMount() - callback setState")*/);
                         return [2 /*return*/];
                 }
             });

package/lib/components/XFormDataTable2.d.ts

@@ -35,9 +35,9 @@ export interface XFormDataTableProps {
     onClickAddRow?: () => void;
     onClickRemoveRow?: (row: any) => void;
     removeButtonInRow: boolean;
-    addRowLabel: string;
+    addRowLabel?: string;
     addRowIcon?: IconType<ButtonProps>;
-    removeRowLabel: string;
+    removeRowLabel?: string;
     removeRowIcon?: IconType<ButtonProps>;
     width?: string;
     children: ReactChild[];
@@ -52,8 +52,8 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
         shrinkWidth: boolean;
         showAddRemoveButtons: boolean;
         removeButtonInRow: boolean;
-        addRowLabel: string;
-        removeRowLabel: string;
+        addRowIcon: string;
+        removeRowIcon: string;
     };
     props: XFormDataTableProps;
     entity?: string;

package/lib/components/XFormDataTable2.js

@@ -79,6 +79,7 @@ var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var api_1 = require("primereact/api");
 var XAutoCompleteDT_1 = require("./XAutoCompleteDT");
 var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
+var XLocale_1 = require("./XLocale");
 var XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -261,8 +262,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         return filterMatchMode;
     };
     XFormDataTable2.prototype.onSelectionChange = function (event) {
-        console.log("zavolany onSelectionChange");
-        console.log(event.value);
+        //console.log("zavolany onSelectionChange");
+        //console.log(event.value);
         this.setState({ selectedRow: event.value });
     };
     XFormDataTable2.prototype.onDropdownOptionsMapChange = function (dropdownOptionsMap) {
@@ -494,6 +495,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     };
     XFormDataTable2.prototype.render = function () {
         var _this = this;
+        var _a, _b;
         var paginator = this.props.paginator !== undefined ? this.props.paginator : false;
         var rows = undefined;
         if (paginator) {
@@ -616,6 +618,13 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
             columnElemList.push(react_1.default.createElement(column_1.Column, { key: "removeButton", headerStyle: { width: '2rem' }, body: function (rowData) { return react_1.default.createElement(XButtonIconNarrow_1.XButtonIconNarrow, { icon: "pi pi-times", onClick: function () { return _this.removeRow(rowData); }, disabled: readOnly, addMargin: false }); } }));
         }
+        var addRowLabel = undefined;
+        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');
+        }
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: "flex justify-content-center" },
                 react_1.default.createElement("label", null, label)),
@@ -623,8 +632,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 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)),
             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: this.props.addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
-                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: this.props.removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
+                    react_1.default.createElement(XButton_1.XButton, { icon: this.props.addRowIcon, label: addRowLabel, onClick: this.onClickAddRow, disabled: readOnly }),
+                    this.props.removeButtonInRow ? undefined : react_1.default.createElement(XButton_1.XButton, { icon: this.props.removeRowIcon, label: removeRowLabel, onClick: this.onClickRemoveRowBySelection, disabled: readOnly }))
                 : undefined));
     };
     XFormDataTable2.defaultProps = {
@@ -636,9 +645,9 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         // tym ze pouzivame 200vh (max-height pre body), tak realne scrollovanie sa zapne az pri velmi vela riadkoch
         shrinkWidth: true,
         showAddRemoveButtons: true,
-        removeButtonInRow: false,
-        addRowLabel: 'Add row',
-        removeRowLabel: 'Remove row'
+        removeButtonInRow: true,
+        addRowIcon: "pi pi-plus",
+        removeRowIcon: "pi pi-times"
     };
     return XFormDataTable2;
 }(react_1.Component));

package/lib/components/XFormFooter.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormFooter = exports.xSaveButtonId = void 0;
 var react_1 = __importDefault(require("react"));
 var XButton_1 = require("./XButton");
+var XLocale_1 = require("./XLocale");
 // constant to be used in method formReadOnly to identify save button
 exports.xSaveButtonId = "x-save-button-id";
 // helper wrapper
 var XFormFooter = function (props) {
     var readOnly = props.form.formReadOnlyBase(exports.xSaveButtonId);
     return (react_1.default.createElement("div", { className: "flex justify-content-center" },
-        react_1.default.createElement(XButton_1.XButton, { label: "Save", onClick: props.form.onClickSave, disabled: readOnly }),
-        react_1.default.createElement(XButton_1.XButton, { label: "Cancel", onClick: props.form.onClickCancel })));
+        react_1.default.createElement(XButton_1.XButton, { icon: "pi pi-save", label: (0, XLocale_1.xLocaleOption)('save'), onClick: props.form.onClickSave, disabled: readOnly }),
+        react_1.default.createElement(XButton_1.XButton, { icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('cancel'), onClick: props.form.onClickCancel })));
 };
 exports.XFormFooter = XFormFooter;

package/lib/components/XInputFileList.d.ts

@@ -15,10 +15,10 @@ export interface XInputFileListProps {
     readOnly?: boolean;
     saveDest: "fileSystem" | "database";
     subdir?: string;
+    maxFileSize?: number;
 }
 export declare class XInputFileList extends Component<XInputFileListProps> {
     static defaultProps: {
-        chooseLabel: string;
         saveDest: string;
     };
     fileUploadRef: any;
@@ -28,6 +28,7 @@ export declare class XInputFileList extends Component<XInputFileListProps> {
     xFileField: string;
     constructor(props: XInputFileListProps);
     uploadHandler(event: FileUploadHandlerEvent): Promise<void>;
+    static sizeInMB(size: number): string;
     onDownloadFile(xFile: XFile): Promise<void>;
     onRemoveFile(fileItem: any): Promise<void>;
     render(): JSX.Element;

package/lib/components/XInputFileList.js

@@ -73,6 +73,8 @@ var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtils_1 = require("./XUtils");
 var XButton_1 = require("./XButton");
 var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
+var XUtilsConversions_1 = require("./XUtilsConversions");
+var XLocale_1 = require("./XLocale");
 var XInputFileList = /** @class */ (function (_super) {
     __extends(XInputFileList, _super);
     function XInputFileList(props) {
@@ -108,6 +110,11 @@ var XInputFileList = /** @class */ (function (_super) {
                     case 2:
                         if (!!_b.done) return [3 /*break*/, 8];
                         file = _b.value;
+                        // skontrolujeme velkost - robime to tuto, lebo ked nastavime maxFileSize na komponente FileUpload, tak prilis velky subor sem do handlera ani neposle
+                        if (this.props.maxFileSize !== undefined && file.size > this.props.maxFileSize) {
+                            alert((0, XLocale_1.xLocaleOption)('fileUploadSizeToBig', { fileName: file.name, fileSize: XInputFileList.sizeInMB(file.size), maxFileSize: XInputFileList.sizeInMB(this.props.maxFileSize) }));
+                            return [3 /*break*/, 7]; // ideme na dalsi subor
+                        }
                         xFile = void 0;
                         _d.label = 3;
                     case 3:
@@ -118,7 +125,7 @@ var XInputFileList = /** @class */ (function (_super) {
                         return [3 /*break*/, 6];
                     case 5:
                         e_1 = _d.sent();
-                        XUtils_1.XUtils.showErrorMessage("Upload of file \"".concat(file.name, "\" failed."), e_1);
+                        XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('fileUploadFailed', { fileName: file.name }), e_1);
                         this.fileUploadRef.current.clear(); // vyprazdnime hidden input, nech moze user znova zadat subory
                         return [2 /*return*/]; // prerusime upload tohto a dalsich suborov
                     case 6:
@@ -148,6 +155,10 @@ var XInputFileList = /** @class */ (function (_super) {
             });
         });
     };
+    XInputFileList.sizeInMB = function (size) {
+        var sizeInMB = size / (Math.pow(10, 6));
+        return (0, XUtilsConversions_1.numberAsUI)(sizeInMB, 2) + ' MB'; // zobrazime 2 desatinky
+    };
     XInputFileList.prototype.onDownloadFile = function (xFile) {
         return __awaiter(this, void 0, void 0, function () {
             var response, e_3, fileName, respBlob, url, a;
@@ -161,7 +172,7 @@ var XInputFileList = /** @class */ (function (_super) {
                         return [3 /*break*/, 3];
                     case 2:
                         e_3 = _a.sent();
-                        XUtils_1.XUtils.showErrorMessage("Download failed.", e_3);
+                        XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('fileDownloadFailed'), e_3);
                         return [2 /*return*/];
                     case 3:
                         fileName = xFile.name;
@@ -191,7 +202,7 @@ var XInputFileList = /** @class */ (function (_super) {
     XInputFileList.prototype.render = function () {
         var e_4, _a;
         var _this = this;
-        var _b, _c;
+        var _b, _c, _d;
         var label = (_b = this.props.label) !== null && _b !== void 0 ? _b : this.props.assocField;
         var readOnly = this.props.form.formReadOnlyBase(this.props.assocField) || ((_c = this.props.readOnly) !== null && _c !== void 0 ? _c : false);
         var object = this.props.form.state.object;
@@ -223,10 +234,9 @@ var XInputFileList = /** @class */ (function (_super) {
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("label", null, label),
             elemList,
-            react_1.default.createElement(fileupload_1.FileUpload, { ref: this.fileUploadRef, mode: "basic", multiple: true, auto: true, customUpload: true, uploadHandler: this.uploadHandler, chooseLabel: this.props.chooseLabel, className: "m-1", disabled: readOnly })));
+            react_1.default.createElement(fileupload_1.FileUpload, { ref: this.fileUploadRef, mode: "basic", multiple: true, auto: true, customUpload: true, uploadHandler: this.uploadHandler, chooseLabel: (_d = this.props.chooseLabel) !== null && _d !== void 0 ? _d : (0, XLocale_1.xLocaleOption)('addRow'), className: "m-1", disabled: readOnly })));
     };
     XInputFileList.defaultProps = {
-        chooseLabel: "Add",
         saveDest: "fileSystem"
     };
     return XInputFileList;

package/lib/components/XLazyDataTable.js

@@ -114,6 +114,7 @@ var XExportRowsDialog_1 = require("./XExportRowsDialog");
 var api_1 = require("primereact/api");
 var XCalendar_1 = require("./XCalendar");
 var XInputDecimalBase_1 = require("./XInputDecimalBase");
+var XLocale_1 = require("./XLocale");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -384,7 +385,7 @@ var XLazyDataTable = function (props) {
             }
         }
         else {
-            alert("Please select the row.");
+            alert((0, XLocale_1.xLocaleOption)('pleaseSelectRow'));
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -404,7 +405,7 @@ var XLazyDataTable = function (props) {
                     return [3 /*break*/, 4];
                 case 3:
                     e_5 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_5);
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_5);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -415,7 +416,7 @@ var XLazyDataTable = function (props) {
                     }
                     return [3 /*break*/, 10];
                 case 5:
-                    if (!window.confirm('Are you sure to remove the selected row?')) return [3 /*break*/, 10];
+                    if (!window.confirm((0, XLocale_1.xLocaleOption)('removeRowConfirm'))) return [3 /*break*/, 10];
                     _a.label = 6;
                 case 6:
                     _a.trys.push([6, 8, , 9]);
@@ -427,7 +428,7 @@ var XLazyDataTable = function (props) {
                     return [3 /*break*/, 9];
                 case 8:
                     e_6 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage("Remove row failed.", e_6);
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_6);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -437,7 +438,7 @@ var XLazyDataTable = function (props) {
                     _a.label = 10;
                 case 10: return [3 /*break*/, 12];
                 case 11:
-                    alert("Please select the row.");
+                    alert((0, XLocale_1.xLocaleOption)('pleaseSelectRow'));
                     _a.label = 12;
                 case 12: return [2 /*return*/];
             }
@@ -686,7 +687,8 @@ var XLazyDataTable = function (props) {
     // pouzivame paginatorLeft aj paginatorRight (aj prazdny) pouzivame, aby bol default paginator v strede (bez paginatorLeft je default paginator presunuty dolava a naopak)
     // sirku div-ov este nastavujeme v css na 10rem
     var paginatorLeft = react_1.default.createElement("div", null,
-        "Total records: ",
+        (0, XLocale_1.xLocaleOption)('totalRecords'),
+        ": ",
         value.totalRecords);
     var paginatorRight = react_1.default.createElement("div", null);
     if (props.editMode === true) {
@@ -852,18 +854,18 @@ var XLazyDataTable = function (props) {
     });
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(XButton_1.XButton, { label: "Filter", onClick: onClickFilter }),
-            react_1.default.createElement(XButton_1.XButton, { label: "Clear filter", onClick: onClickClearFilter })),
+            react_1.default.createElement(XButton_1.XButton, { key: "filter", label: (0, XLocale_1.xLocaleOption)('filter'), onClick: onClickFilter }),
+            react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter })),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            props.onAddRow !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Add row", onClick: onClickAddRow }) : null,
-            props.onEdit !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Edit", onClick: onClickEdit }) : null,
-            props.removeRow !== undefined && props.removeRow !== false ? react_1.default.createElement(XButton_1.XButton, { label: "Remove row", onClick: onClickRemoveRow }) : null,
-            exportRows ? react_1.default.createElement(XButton_1.XButton, { label: "Export rows", onClick: onClickExport }) : null,
+            props.onAddRow !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
+            props.onEdit !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,
+            props.removeRow !== undefined && props.removeRow !== false ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
+            exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
             props.appButtons,
-            props.searchTableParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { label: "Choose", onClick: onClickChoose }) : null,
-            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null)));
+            props.searchTableParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
+            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null)));
 };
 exports.XLazyDataTable = XLazyDataTable;
 exports.XLazyDataTable.defaultProps = {

package/lib/components/XLocale.d.ts

@@ -0,0 +1,26 @@
+export interface XLocaleOptions {
+    filter?: string;
+    clearFilter?: string;
+    addRow?: string;
+    editRow?: string;
+    removeRow?: string;
+    exportRows?: string;
+    chooseRow?: string;
+    totalRecords?: string;
+    pleaseSelectRow?: string;
+    removeRowConfirm?: string;
+    removeRowFailed?: string;
+    save?: string;
+    cancel?: string;
+    expRowCount?: string;
+    expExportType?: string;
+    expCreateHeaderLine?: string;
+    expCsvSeparator?: string;
+    expDecimalFormat?: string;
+    expEncoding?: string;
+    fileUploadSizeToBig?: string;
+    fileUploadFailed?: string;
+    fileDownloadFailed?: string;
+}
+export declare function xAddLocale(locale: string, xOptions: XLocaleOptions): void;
+export declare function xLocaleOption(xOptionKey: string, options?: any[string]): any;

package/lib/components/XLocale.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.xLocaleOption = exports.xAddLocale = void 0;
+var api_1 = __importStar(require("primereact/api"));
+// using json-loader module we import x-en.json file into variable xEnJsonObject
+var x_en_json_1 = __importDefault(require("./locale/x-en.json"));
+// under this key are x-locale saved inside of PrimeReact locale
+var xOptionsKey = "xOptions";
+function xAddLocale(locale, xOptions) {
+    (0, api_1.updateLocaleOption)(xOptionsKey, xOptions, locale);
+}
+exports.xAddLocale = xAddLocale;
+// using this method are x-locale read
+function xLocaleOption(xOptionKey, options) {
+    var _locale = api_1.default.locale || 'en';
+    try {
+        var optionValue = (0, api_1.localeOptions)(_locale)[xOptionsKey][xOptionKey];
+        if (optionValue && options) {
+            for (var key in options) {
+                if (options.hasOwnProperty(key)) {
+                    optionValue = optionValue.replace("{".concat(key, "}"), options[key]);
+                }
+            }
+        }
+        return optionValue;
+    }
+    catch (error) {
+        throw new Error("The ".concat(xOptionKey, " option is not found in the current x-locale('").concat(_locale, "')."));
+    }
+}
+exports.xLocaleOption = xLocaleOption;
+// add en locale into PrimeReact locale (global variable "locales" declared in file Locale.js)
+xAddLocale('en', x_en_json_1.default.en);

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

@@ -0,0 +1,26 @@
+{
+    "en": {
+        "filter": "Filter",
+        "clearFilter": "Clear filter",
+        "addRow": "Add",
+        "editRow": "Edit",
+        "removeRow": "Remove",
+        "exportRows": "Export",
+        "chooseRow": "Choose",
+        "totalRecords": "Total records",
+        "pleaseSelectRow": "Please select the row.",
+        "removeRowConfirm": "Are you sure to remove the selected row?",
+        "removeRowFailed": "Remove row failed.",
+        "save": "Save",
+        "cancel": "Cancel",
+        "expRowCount": "Row count",
+        "expExportType": "Export type",
+        "expCreateHeaderLine": "Create header line",
+        "expCsvSeparator": "Csv separator",
+        "expDecimalFormat": "Decimal format",
+        "expEncoding": "Encoding",
+        "fileUploadSizeToBig": "Upload of file \"{fileName}\" was canceled: file size {fileSize} is more than maximum allowed size {maxFileSize}.",
+        "fileUploadFailed": "Upload of file \"{fileName}\" failed.",
+        "fileDownloadFailed": "File download failed."
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -38,9 +38,9 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "primeflex": "^3.3.0",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primereact": "~9.2.1",
+    "primereact": "~9.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"