@michalrakus/x-react-web-lib 1.35.0 → 1.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/components/XAutoCompleteBase.d.ts +2 -4
  2. package/lib/components/XAutoCompleteBase.js +11 -22
  3. package/lib/components/XFormDialog.d.ts +12 -0
  4. package/lib/components/XFormDialog.js +20 -0
  5. package/lib/components/XLazyDataTable/XLazyDataTable.d.ts +21 -33
  6. package/lib/components/XLazyDataTable/XLazyDataTable.js +103 -66
  7. package/lib/components/XUtils.js +6 -2
  8. package/package.json +1 -1
package/lib/components/XAutoCompleteBase.d.ts CHANGED
@@ -5,6 +5,7 @@ import { MenuItemCommandEvent } from "primereact/menuitem";
5
5
  import { XSearchBrowseParams } from "./XSearchBrowseParams";
6
6
  import { DataTableSortMeta } from "primereact/datatable";
7
7
  import { XEntity } from "../serverApi/XEntityMetadata";
8
+ import { XFormDialogState } from "./XFormDialog";
8
9
  interface XButtonItem {
9
10
  icon: any | undefined;
10
11
  tooltip?: string;
@@ -62,14 +63,12 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
62
63
  notValid: boolean;
63
64
  suggestions: any[] | undefined;
64
65
  filteredSuggestions: any[] | undefined;
65
- formDialogOpened: boolean;
66
+ formDialogState: XFormDialogState;
66
67
  searchDialogOpened: boolean;
67
68
  };
68
69
  suggestionsLoadedForOSS: boolean;
69
70
  wasOnChangeCalled: boolean;
70
71
  xEntity: XEntity | undefined;
71
- formDialogObjectId: number | undefined;
72
- formDialogInitValuesForInsert: any | undefined;
73
72
  constructor(props: XAutoCompleteBaseProps);
74
73
  getXSuggestionsLoadType(): XSuggestionsLoadType;
75
74
  getFields(): string[];
@@ -89,7 +88,6 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
89
88
  removeFocusFromInput(): void;
90
89
  setObjectValue(object: any, objectChange: OperationType): void;
91
90
  formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
92
- formDialogOnHide(): void;
93
91
  searchDialogOnChoose(chosenRow: any): void;
94
92
  searchDialogOnHide(): void;
95
93
  createInsertItem(buttonItems: XButtonItem[]): void;
package/lib/components/XAutoCompleteBase.js CHANGED
@@ -130,6 +130,7 @@ var XUtils_1 = require("./XUtils");
130
130
  var button_1 = require("primereact/button");
131
131
  var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
132
132
  var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
133
+ var XFormDialog_1 = require("./XFormDialog");
133
134
  var XAutoCompleteBase = /** @class */ (function (_super) {
134
135
  __extends(XAutoCompleteBase, _super);
135
136
  function XAutoCompleteBase(props) {
@@ -142,7 +143,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
142
143
  notValid: false,
143
144
  suggestions: undefined,
144
145
  filteredSuggestions: undefined,
145
- formDialogOpened: false,
146
+ formDialogState: { opened: false },
146
147
  searchDialogOpened: false
147
148
  };
148
149
  _this.suggestionsLoadedForOSS = false;
@@ -169,7 +170,6 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
169
170
  _this.itemTemplateString = _this.itemTemplateString.bind(_this);
170
171
  _this.computeDefaultDisplayValue = _this.computeDefaultDisplayValue.bind(_this);
171
172
  _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
172
- _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
173
173
  _this.searchDialogOnChoose = _this.searchDialogOnChoose.bind(_this);
174
174
  _this.searchDialogOnHide = _this.searchDialogOnHide.bind(_this);
175
175
  return _this;
@@ -494,14 +494,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
494
494
  this.setFocusToInput();
495
495
  }
496
496
  }
497
- this.setState({ formDialogOpened: false });
498
- };
499
- XAutoCompleteBase.prototype.formDialogOnHide = function () {
500
- this.setState({ formDialogOpened: false });
501
- // ak mame v inpute neplatnu hodnotu, vratime kurzor na input
502
- if (this.state.inputChanged) {
503
- this.setFocusToInput();
504
- }
497
+ var formDialogState = { opened: false };
498
+ this.setState({ formDialogState: formDialogState });
505
499
  };
506
500
  XAutoCompleteBase.prototype.searchDialogOnChoose = function (chosenRow) {
507
501
  this.setState({ searchDialogOpened: false });
@@ -532,13 +526,13 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
532
526
  }
533
527
  else {
534
528
  // otvorime dialog na insert
535
- _this.formDialogObjectId = undefined;
536
- _this.formDialogInitValuesForInsert = {};
529
+ var initValues = {};
537
530
  // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
538
531
  if (_this.state.inputChanged) {
539
- _this.formDialogInitValuesForInsert[_this.getFirstField()] = _this.state.inputValueState;
532
+ initValues[_this.getFirstField()] = _this.state.inputValueState;
540
533
  }
541
- _this.setState({ formDialogOpened: true });
534
+ var formDialogState = { opened: true, id: undefined, initValues: initValues };
535
+ _this.setState({ formDialogState: formDialogState });
542
536
  }
543
537
  }
544
538
  });
@@ -614,9 +608,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
614
608
  if (this.props.idField === undefined) {
615
609
  throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
616
610
  }
617
- this.formDialogObjectId = this.props.value[this.props.idField];
618
- this.formDialogInitValuesForInsert = undefined;
619
- this.setState({ formDialogOpened: true });
611
+ var formDialogState = { opened: true, id: this.props.value[this.props.idField], initValues: undefined };
612
+ this.setState({ formDialogState: formDialogState });
620
613
  };
621
614
  // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
622
615
  XAutoCompleteBase.prototype.computeInputValue = function () {
@@ -740,13 +733,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
740
733
  else {
741
734
  error = this.props.error;
742
735
  }
743
- // Dialog pre konkretny form:
744
- // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
745
736
  // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
746
737
  return (react_1.default.createElement.apply(react_1.default, __spreadArray(__spreadArray(["div", { className: "x-auto-complete-base", style: { width: this.props.width, maxWidth: this.props.maxWidth } }, react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, inputRef: this.autoCompleteInputRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName, showEmptyMessage: true }))], __read(buttons), false), [this.props.valueForm != undefined ?
747
- react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: this.state.formDialogOpened, onHide: this.formDialogOnHide }, react_1.default.cloneElement(this.props.valueForm, {
748
- id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
749
- } /*, this.props.valueForm.children*/))
738
+ react_1.default.createElement(XFormDialog_1.XFormDialog, { key: "dialog-form", dialogState: this.state.formDialogState, form: this.props.valueForm, onSaveOrCancel: this.formDialogOnSaveOrCancel })
750
739
  : undefined, this.props.searchBrowse != undefined && !readOnly ?
751
740
  react_1.default.createElement(dialog_1.Dialog, { key: "dialog-browse", 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*/))
752
741
  : undefined], false)));
package/lib/components/XFormDialog.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { XOnSaveOrCancelProp } from "./XFormBase";
3
+ export interface XFormDialogState {
4
+ opened: boolean;
5
+ id?: number;
6
+ initValues?: object;
7
+ }
8
+ export declare const XFormDialog: (props: {
9
+ dialogState: XFormDialogState;
10
+ form: JSX.Element;
11
+ onSaveOrCancel: XOnSaveOrCancelProp;
12
+ }) => React.JSX.Element;
package/lib/components/XFormDialog.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.XFormDialog = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var dialog_1 = require("primereact/dialog");
9
+ var XUtils_1 = require("./XUtils");
10
+ var XFormDialog = function (props) {
11
+ var onHide = function () {
12
+ if (props.onSaveOrCancel) {
13
+ props.onSaveOrCancel(null, XUtils_1.OperationType.None);
14
+ }
15
+ };
16
+ return (react_1.default.createElement(dialog_1.Dialog, { key: "dialog-form", className: "x-dialog-without-header", visible: props.dialogState.opened, onHide: onHide }, react_1.default.cloneElement(props.form, {
17
+ id: props.dialogState.id, initValues: props.dialogState.initValues, onSaveOrCancel: props.onSaveOrCancel
18
+ } /*, this.props.valueForm.children*/)));
19
+ };
20
+ exports.XFormDialog = XFormDialog;
package/lib/components/XLazyDataTable/XLazyDataTable.d.ts CHANGED
@@ -47,6 +47,10 @@ export declare enum XStateKeySuffix {
47
47
  selectedRow = "selected-row",
48
48
  multilineSwitchValue = "multiline-switch-value"
49
49
  }
50
+ export interface XLazyDataTableRef {
51
+ reread: () => void;
52
+ setupExpandedRows: () => void;
53
+ }
50
54
  export interface XLazyDataTableProps {
51
55
  entity: string;
52
56
  stateKey?: string;
@@ -55,21 +59,22 @@ export interface XLazyDataTableProps {
55
59
  dataKey?: string;
56
60
  rowExpansionTemplate?: (row: any, options: DataTableRowExpansionTemplate) => React.ReactNode;
57
61
  showExpandedRow?: (row: any, multilineSwitchValue: XMultilineRenderType) => boolean;
58
- paginator: boolean;
59
- rows: number;
60
- filterDisplay: "menu" | "row";
62
+ paginator?: boolean;
63
+ rows?: number;
64
+ filterDisplay?: "menu" | "row";
61
65
  betweenFilter?: XBetweenFilterProp;
62
- autoFilter: boolean;
63
- showFilterButtons: boolean;
66
+ autoFilter?: boolean;
67
+ showFilterButtons?: boolean;
64
68
  showExportRows?: boolean;
65
- scrollable: boolean;
66
- scrollWidth: string;
67
- scrollHeight: string;
69
+ scrollable?: boolean;
70
+ scrollWidth?: string;
71
+ scrollHeight?: string;
68
72
  formFooterHeight?: string;
69
- shrinkWidth: boolean;
73
+ shrinkWidth?: boolean;
70
74
  onResetTable?: () => void;
71
- onAddRow?: (filters: DataTableFilterMeta) => void;
72
- onEdit?: (selectedRow: any) => void;
75
+ editForm?: JSX.Element;
76
+ onAddRow?: ((filters: DataTableFilterMeta) => void) | false;
77
+ onEdit?: ((selectedRow: any) => void) | false;
73
78
  removeRow?: ((selectedRow: any) => Promise<boolean>) | boolean;
74
79
  onRemoveRow?: XOnSaveOrCancelProp;
75
80
  docTemplates?: true | ((entity: string) => Promise<XtDocTemplate[]>);
@@ -79,11 +84,11 @@ export interface XLazyDataTableProps {
79
84
  customFilter?: XCustomFilter;
80
85
  optionalCustomFilters?: XOptionalCustomFilter[];
81
86
  sortField?: string | DataTableSortMeta[];
82
- fullTextSearch: boolean | string[];
87
+ fullTextSearch?: boolean | string[];
83
88
  fields?: string[];
84
- multilineSwitch: boolean;
85
- multilineSwitchInitValue: XMultilineRenderType;
86
- multilineSwitchFewLinesCount: number;
89
+ multilineSwitch?: boolean;
90
+ multilineSwitchInitValue?: XMultilineRenderType;
91
+ multilineSwitchFewLinesCount?: number;
87
92
  multilineSwitchValue?: [XMultilineRenderType, React.Dispatch<React.SetStateAction<XMultilineRenderType>>];
88
93
  headerBodyRight?: React.ReactNode;
89
94
  searchBrowseParams?: XSearchBrowseParams;
@@ -96,24 +101,7 @@ export interface XLazyDataTableProps {
96
101
  displayed?: boolean;
97
102
  children: ReactChild[];
98
103
  }
99
- export declare const XLazyDataTable: {
100
- (props: XLazyDataTableProps): React.JSX.Element;
101
- defaultProps: {
102
- paginator: boolean;
103
- rows: number;
104
- filterDisplay: string;
105
- autoFilter: boolean;
106
- showFilterButtons: boolean;
107
- fullTextSearch: boolean;
108
- multilineSwitch: boolean;
109
- multilineSwitchInitValue: string;
110
- multilineSwitchFewLinesCount: number;
111
- scrollable: boolean;
112
- scrollWidth: string;
113
- scrollHeight: string;
114
- shrinkWidth: boolean;
115
- };
116
- };
104
+ export declare const XLazyDataTable: React.ForwardRefExoticComponent<XLazyDataTableProps & React.RefAttributes<XLazyDataTableRef>>;
117
105
  export type XGetFilterItem = (field: string) => DataTableFilterMetaData | DataTableOperatorFilterMetaData;
118
106
  export type XSetFilterItem = (field: string, filterItem: DataTableFilterMetaData | DataTableOperatorFilterMetaData, autoFilter: boolean) => void;
119
107
  export type XFilterElementParams = {
package/lib/components/XLazyDataTable/XLazyDataTable.js CHANGED
@@ -69,6 +69,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
69
69
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
70
70
  }
71
71
  };
72
+ var __rest = (this && this.__rest) || function (s, e) {
73
+ var t = {};
74
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
75
+ t[p] = s[p];
76
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
77
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
78
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
79
+ t[p[i]] = s[p[i]];
80
+ }
81
+ return t;
82
+ };
72
83
  var __values = (this && this.__values) || function(o) {
73
84
  var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
74
85
  if (m) return m.call(o);
@@ -138,6 +149,7 @@ var useXStateSession_1 = require("../useXStateSession");
138
149
  var useXStateSessionBase_1 = require("../useXStateSessionBase");
139
150
  var _ = __importStar(require("lodash"));
140
151
  var XDocTemplateButton_1 = require("../../modules/docTemplates/XDocTemplateButton");
152
+ var XFormDialog_1 = require("../XFormDialog");
141
153
  var XStateKeySuffix;
142
154
  (function (XStateKeySuffix) {
143
155
  XStateKeySuffix["filters"] = "filters";
@@ -148,8 +160,14 @@ var XStateKeySuffix;
148
160
  XStateKeySuffix["selectedRow"] = "selected-row";
149
161
  XStateKeySuffix["multilineSwitchValue"] = "multiline-switch-value";
150
162
  })(XStateKeySuffix = exports.XStateKeySuffix || (exports.XStateKeySuffix = {}));
151
- var XLazyDataTable = function (props) {
152
- var _a, _b;
163
+ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
164
+ var _b, _c;
165
+ var _d = _a.paginator, paginator = _d === void 0 ? true : _d, _e = _a.rows, rows = _e === void 0 ? 10 : _e, _f = _a.filterDisplay, filterDisplay = _f === void 0 ? "row" : _f, _g = _a.autoFilter, autoFilter = _g === void 0 ? false : _g, _h = _a.showFilterButtons, showFilterButtons = _h === void 0 ? true : _h, _j = _a.fullTextSearch, fullTextSearch = _j === void 0 ? true : _j, _k = _a.multilineSwitch, multilineSwitch = _k === void 0 ? false : _k, _l = _a.multilineSwitchInitValue, multilineSwitchInitValue = _l === void 0 ? "allLines" : _l, _m = _a.multilineSwitchFewLinesCount, multilineSwitchFewLinesCount = _m === void 0 ? 2 : _m, _o = _a.scrollable, scrollable = _o === void 0 ? true : _o, _p = _a.scrollWidth, scrollWidth = _p === void 0 ? 'viewport' : _p, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
166
+ _q = _a.scrollHeight, // nastavi sirku tabulky na (100vw - nieco) (ak bude obsah sirsi, zapne horizontalny scrollbar)
167
+ scrollHeight = _q === void 0 ? 'viewport' : _q, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
168
+ _r = _a.shrinkWidth, // nastavi vysku tabulky na (100vh - nieco) (ak bude obsah vecsi, zapne vertikalny scrollbar)
169
+ shrinkWidth = _r === void 0 ? true : _r, propsRest = __rest(_a, ["paginator", "rows", "filterDisplay", "autoFilter", "showFilterButtons", "fullTextSearch", "multilineSwitch", "multilineSwitchInitValue", "multilineSwitchFewLinesCount", "scrollable", "scrollWidth", "scrollHeight", "shrinkWidth"]);
170
+ var props = __assign({ paginator: paginator, rows: rows, filterDisplay: filterDisplay, autoFilter: autoFilter, showFilterButtons: showFilterButtons, fullTextSearch: fullTextSearch, multilineSwitch: multilineSwitch, multilineSwitchInitValue: multilineSwitchInitValue, multilineSwitchFewLinesCount: multilineSwitchFewLinesCount, scrollable: scrollable, scrollWidth: scrollWidth, scrollHeight: scrollHeight, shrinkWidth: shrinkWidth }, propsRest);
153
171
  // must be here, is used in createFiltersInit()
154
172
  var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
155
173
  var createAggregateItems = function () {
@@ -320,12 +338,12 @@ var XLazyDataTable = function (props) {
320
338
  // ak mame fieldSet stlpce (stlpce ktore maju zadany fieldSetId a zobrazuju hodnoty podla fieldSet-u),
321
339
  // tak sem nacitame mapy umoznujuce ziskanie labelov zakliknutych field-ov
322
340
  // poznamka: uz by sa zislo mat vytvorene objekty (instancie) pre stlpce a do nich zapisovat pripadny XFieldSetMap, filter (teraz je vo "filters")
323
- var _c = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _c[0], setXFieldSetMaps = _c[1];
324
- var _d = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _d[0], setValue = _d[1];
325
- var _e = __read((0, react_1.useState)(undefined), 2), expandedRows = _e[0], setExpandedRows = _e[1];
326
- var _f = __read((0, react_1.useState)(false), 2), loading = _f[0], setLoading = _f[1];
327
- var _g = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _g[0], setFirst = _g[1];
328
- var _h = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _h[0], setRows = _h[1];
341
+ var _s = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _s[0], setXFieldSetMaps = _s[1];
342
+ var _t = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _t[0], setValue = _t[1];
343
+ var _u = __read((0, react_1.useState)(undefined), 2), expandedRows = _u[0], setExpandedRows = _u[1];
344
+ var _v = __read((0, react_1.useState)(false), 2), loading = _v[0], setLoading = _v[1];
345
+ var _w = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.pagingFirst), 0), 2), first = _w[0], setFirst = _w[1];
346
+ var _x = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rowsLocal = _x[0], setRowsLocal = _x[1];
329
347
  // "filters" have special initialState function different from that used in useXStateSession
330
348
  var filtersInitialStateFunction = function () {
331
349
  var filtersInit = XUtils_1.XUtils.getValueFromStorage(getStateKey(XStateKeySuffix.filters), null);
@@ -339,19 +357,20 @@ var XLazyDataTable = function (props) {
339
357
  }
340
358
  return filtersInit;
341
359
  };
342
- var _j = __read((0, useXStateSessionBase_1.useXStateSessionBase)(getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _j[0], setFilters = _j[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
360
+ var _y = __read((0, useXStateSessionBase_1.useXStateSessionBase)(getStateKey(XStateKeySuffix.filters), filtersInitialStateFunction), 2), filters = _y[0], setFilters = _y[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
343
361
  var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
344
- var _k = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _k[0], setFtsInputValue = _k[1];
345
- var _l = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _l[0], setOptionalCustomFilter = _l[1];
346
- var _m = __read((_a = props.multilineSwitchValue) !== null && _a !== void 0 ? _a : (0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _m[0], setMultilineSwitchValue = _m[1];
347
- var _o = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _o[0], setMultiSortMeta = _o[1];
348
- var _p = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _p[0], setSelectedRow = _p[1];
349
- var _q = __read((_b = props.dataLoadedState) !== null && _b !== void 0 ? _b : (0, react_1.useState)(false), 2), dataLoaded = _q[0], setDataLoaded = _q[1]; // priznak kde si zapiseme, ci uz sme nacitali data
350
- var _r = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _r[0], setExportRowsDialogState = _r[1];
362
+ var _z = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.ftsInputValue), initFtsInputValue), 2), ftsInputValue = _z[0], setFtsInputValue = _z[1];
363
+ var _0 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.optionalCustomFilter), undefined), 2), optionalCustomFilter = _0[0], setOptionalCustomFilter = _0[1];
364
+ var _1 = __read((_b = props.multilineSwitchValue) !== null && _b !== void 0 ? _b : (0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multilineSwitchValue), props.multilineSwitchInitValue), 2), multilineSwitchValue = _1[0], setMultilineSwitchValue = _1[1];
365
+ var _2 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.multiSortMeta), XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _2[0], setMultiSortMeta = _2[1];
366
+ var _3 = __read((0, useXStateSession_1.useXStateSession)(getStateKey(XStateKeySuffix.selectedRow), null), 2), selectedRow = _3[0], setSelectedRow = _3[1];
367
+ var _4 = __read((_c = props.dataLoadedState) !== null && _c !== void 0 ? _c : (0, react_1.useState)(false), 2), dataLoaded = _4[0], setDataLoaded = _4[1]; // priznak kde si zapiseme, ci uz sme nacitali data
368
+ var _5 = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _5[0], setExportRowsDialogState = _5[1];
351
369
  //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
352
- var _s = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _s[0], setFiltersAfterFiltering = _s[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
353
- var _t = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _t[0], setFtsInputValueAfterFiltering = _t[1]; // tak isto ako filtersAfterFiltering
354
- var _u = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _u[0], setOptionalCustomFilterAfterFiltering = _u[1]; // tak isto ako filtersAfterFiltering
370
+ var _6 = __read((0, react_1.useState)(filters), 2), filtersAfterFiltering = _6[0], setFiltersAfterFiltering = _6[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
371
+ var _7 = __read((0, react_1.useState)(ftsInputValue), 2), ftsInputValueAfterFiltering = _7[0], setFtsInputValueAfterFiltering = _7[1]; // tak isto ako filtersAfterFiltering
372
+ var _8 = __read((0, react_1.useState)(optionalCustomFilter), 2), optionalCustomFilterAfterFiltering = _8[0], setOptionalCustomFilterAfterFiltering = _8[1]; // tak isto ako filtersAfterFiltering
373
+ var _9 = __read((0, react_1.useState)({ opened: false }), 2), formDialogState = _9[0], setFormDialogState = _9[1];
355
374
  // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
356
375
  (0, react_1.useEffect)(function () {
357
376
  // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -378,6 +397,10 @@ var XLazyDataTable = function (props) {
378
397
  }
379
398
  }
380
399
  }); // eslint-disable-line react-hooks/exhaustive-deps
400
+ (0, react_1.useImperativeHandle)(ref, function () { return ({
401
+ reread: reread,
402
+ setupExpandedRows: function () { return setupExpandedRows(value, multilineSwitchValue); }
403
+ }); });
381
404
  // TODO - preco je to tu? presunut dole ak sa da...
382
405
  var dataKey = props.dataKey !== undefined ? props.dataKey : XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity).idField;
383
406
  var onPage = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -463,6 +486,10 @@ var XLazyDataTable = function (props) {
463
486
  findParam.multiSortMeta = multiSortMetaLocal;
464
487
  loadDataBase(findParam);
465
488
  };
489
+ // API function
490
+ var reread = function () {
491
+ loadData();
492
+ };
466
493
  var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
467
494
  return __generator(this, function (_a) {
468
495
  switch (_a.label) {
@@ -483,7 +510,7 @@ var XLazyDataTable = function (props) {
483
510
  return {
484
511
  resultType: FindParam_1.ResultType.RowCountAndPagedRows,
485
512
  first: first,
486
- rows: rows,
513
+ rows: rowsLocal,
487
514
  filters: filters,
488
515
  fullTextSearch: createXFullTextSearch(ftsInputValue),
489
516
  customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilter),
@@ -724,51 +751,76 @@ var XLazyDataTable = function (props) {
724
751
  onRowDoubleClickBase(event.data);
725
752
  };
726
753
  var onRowDoubleClickBase = function (row) {
727
- if (props.onEdit !== undefined && props.searchBrowseParams === undefined) {
728
- props.onEdit(row);
754
+ if (props.searchBrowseParams === undefined) {
755
+ editRow(row);
729
756
  }
730
- else if (props.searchBrowseParams !== undefined) {
757
+ else {
731
758
  props.searchBrowseParams.onChoose(row);
732
759
  }
733
760
  };
734
761
  var onClickAddRow = function () {
735
762
  //console.log("zavolany onClickAddRow");
736
- if (props.onAddRow !== undefined) {
763
+ if (typeof props.onAddRow === 'function') {
737
764
  props.onAddRow(filters);
738
765
  }
766
+ else if (props.editForm !== undefined && props.onAddRow !== false) {
767
+ setFormDialogState({
768
+ opened: true,
769
+ id: undefined,
770
+ initValues: {}
771
+ });
772
+ }
739
773
  };
740
- var onClickEdit = function () {
741
- //console.log("zavolany onClickEdit");
774
+ var onClickEditRow = function () {
775
+ //console.log("zavolany onClickEditRow");
742
776
  if (selectedRow !== null) {
743
- if (props.onEdit !== undefined) {
744
- props.onEdit(selectedRow);
745
- }
777
+ editRow(selectedRow);
746
778
  }
747
779
  else {
748
780
  alert((0, XLocale_1.xLocaleOption)('pleaseSelectRow'));
749
781
  }
750
782
  };
783
+ var editRow = function (row) {
784
+ if (typeof props.onEdit === 'function') {
785
+ props.onEdit(row);
786
+ }
787
+ else if (props.editForm !== undefined && props.onEdit !== false) {
788
+ setFormDialogState({
789
+ opened: true,
790
+ id: row[dataKey],
791
+ initValues: undefined
792
+ });
793
+ }
794
+ };
795
+ var editRowOnSaveOrCancel = function (object, objectChange) {
796
+ if (object !== null) {
797
+ // save was pressed, reread from DB
798
+ loadData();
799
+ }
800
+ // if object === null, then cancel was pressed, we do nothing, we just close the dialog
801
+ setFormDialogState({ opened: false });
802
+ };
751
803
  var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
752
- var reread, e_9, e_10;
804
+ var reread_1, e_9, e_10;
753
805
  return __generator(this, function (_a) {
754
806
  switch (_a.label) {
755
807
  case 0:
756
808
  if (!(selectedRow !== null)) return [3 /*break*/, 11];
757
809
  if (!(props.removeRow instanceof Function)) return [3 /*break*/, 5];
758
- reread = true;
810
+ reread_1 = true;
759
811
  _a.label = 1;
760
812
  case 1:
761
813
  _a.trys.push([1, 3, , 4]);
762
814
  return [4 /*yield*/, props.removeRow(selectedRow)];
763
815
  case 2:
764
- reread = _a.sent();
816
+ reread_1 = _a.sent();
765
817
  return [3 /*break*/, 4];
766
818
  case 3:
767
819
  e_9 = _a.sent();
768
820
  XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
769
821
  return [3 /*break*/, 4];
770
822
  case 4:
771
- if (reread) {
823
+ if (reread_1) {
772
824
  loadData();
773
825
  if (props.onRemoveRow) {
774
826
  props.onRemoveRow(selectedRow, XUtils_1.OperationType.Remove);
@@ -821,7 +873,7 @@ var XLazyDataTable = function (props) {
821
873
  findParam = {
822
874
  resultType: FindParam_1.ResultType.OnlyRowCount,
823
875
  first: first,
824
- rows: rows,
876
+ rows: rowsLocal,
825
877
  filters: filtersAfterFiltering,
826
878
  fullTextSearch: createXFullTextSearch(ftsInputValueAfterFiltering),
827
879
  customFilterItems: createXCustomFilterItems(customFilterItems, optionalCustomFilterAfterFiltering),
@@ -1041,19 +1093,19 @@ var XLazyDataTable = function (props) {
1041
1093
  };
1042
1094
  // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" do okna (viewport-u)
1043
1095
  var isMobile = XUtils_1.XUtils.isMobile();
1044
- var scrollWidth = undefined; // vypnute horizontalne scrollovanie
1045
- var scrollHeight = undefined; // vypnute vertikalne scrollovanie
1096
+ var scrollWidthLocal = undefined; // vypnute horizontalne scrollovanie
1097
+ var scrollHeightLocal = undefined; // vypnute vertikalne scrollovanie
1046
1098
  if (props.scrollable) {
1047
1099
  if (props.scrollWidth !== "none") {
1048
- scrollWidth = props.scrollWidth;
1049
- if (scrollWidth === "viewport") {
1050
- scrollWidth = "calc(100vw - ".concat(isMobile ? 1 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
1100
+ scrollWidthLocal = props.scrollWidth;
1101
+ if (scrollWidthLocal === "viewport") {
1102
+ scrollWidthLocal = "calc(100vw - ".concat(isMobile ? 1 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
1051
1103
  // mobil - padding 0.5rem body element
1052
1104
  }
1053
1105
  }
1054
1106
  if (props.scrollHeight !== "none") {
1055
- scrollHeight = props.scrollHeight;
1056
- if (scrollHeight === "viewport") {
1107
+ scrollHeightLocal = props.scrollHeight;
1108
+ if (scrollHeightLocal === "viewport") {
1057
1109
  // vypocet je priblizny, robeny na mobil, desktop bude mat mozno iny
1058
1110
  //const headerHeight = XUtils.toPX0('12.7rem');
1059
1111
  //let footerHeight = XUtils.toPX0('3.7rem') + XUtils.toPX0('3rem'); // table footer (paging) + buttons Add row, Edit, ...
@@ -1090,13 +1142,13 @@ var XLazyDataTable = function (props) {
1090
1142
  if (props.formFooterHeight !== undefined) {
1091
1143
  headerFooterHeight += XUtils_1.XUtils.toPX0(XUtils_1.XUtils.processGridBreakpoints(props.formFooterHeight));
1092
1144
  }
1093
- scrollHeight = "calc(".concat(viewHeight, " - ").concat(headerFooterHeight, "px)");
1145
+ scrollHeightLocal = "calc(".concat(viewHeight, " - ").concat(headerFooterHeight, "px)");
1094
1146
  }
1095
1147
  }
1096
1148
  }
1097
1149
  var style = {};
1098
- if (scrollWidth !== undefined) {
1099
- style.width = scrollWidth;
1150
+ if (scrollWidthLocal !== undefined) {
1151
+ style.width = scrollWidthLocal;
1100
1152
  }
1101
1153
  if (props.shrinkWidth) {
1102
1154
  style.maxWidth = 'min-content'; // ak nic nedame (nechame auto), tak (v pripade ak nebudeme mat horizontalny scrollbar) natiahne tabulku na celu sirku stranky, co nechceme
@@ -1391,35 +1443,20 @@ var XLazyDataTable = function (props) {
1391
1443
  props.headerBodyRight,
1392
1444
  props.label && !isMobile ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
1393
1445
  react_1.default.createElement("div", { className: "flex justify-content-center" },
1394
- react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, 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, rowClassName: props.rowClassName, 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)),
1446
+ react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, rows: rowsLocal, 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, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeightLocal, style: style }, columnElemList)),
1395
1447
  react_1.default.createElement("div", { className: "flex justify-content-center" },
1396
- props.onAddRow !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
1397
- props.onEdit !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,
1398
- props.removeRow !== undefined && props.removeRow !== false && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
1448
+ (props.onAddRow !== false && (props.editForm !== undefined || props.onAddRow !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
1449
+ (props.onEdit !== false && (props.editForm !== undefined || props.onEdit !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEditRow }) : null,
1450
+ (props.removeRow !== false && (props.removeRow !== undefined)) && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
1399
1451
  exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
1400
- props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[xEntity.idField] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
1452
+ props.docTemplates && !isMobile && props.searchBrowseParams === undefined ? react_1.default.createElement(XDocTemplateButton_1.XDocTemplateButton, { key: "docTemplates", entity: props.entity, rowId: selectedRow ? selectedRow[dataKey] : undefined, docTemplates: typeof props.docTemplates === 'function' ? props.docTemplates : undefined }) : null,
1401
1453
  props.appButtonsForRow && props.searchBrowseParams === undefined ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); }, style: xAppButton.style }); }) : null,
1402
1454
  props.appButtons && props.searchBrowseParams === undefined,
1403
1455
  props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
1456
+ props.editForm != undefined ? react_1.default.createElement(XFormDialog_1.XFormDialog, { key: "formDialog", dialogState: formDialogState, form: props.editForm, onSaveOrCancel: editRowOnSaveOrCancel }) : null,
1404
1457
  exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : null),
1405
1458
  hasContentTypeHtml() ? react_1.default.createElement(editor_1.Editor, { style: { display: 'none' }, showHeader: false }) : null /* we want to import css if needed (<style type="text/css" data-primereact-style-id="editor">) */));
1406
- };
1407
- exports.XLazyDataTable = XLazyDataTable;
1408
- exports.XLazyDataTable.defaultProps = {
1409
- paginator: true,
1410
- rows: 10,
1411
- filterDisplay: "row",
1412
- autoFilter: false,
1413
- showFilterButtons: true,
1414
- fullTextSearch: true,
1415
- multilineSwitch: false,
1416
- multilineSwitchInitValue: "allLines",
1417
- multilineSwitchFewLinesCount: 2,
1418
- scrollable: true,
1419
- scrollWidth: 'viewport',
1420
- scrollHeight: 'viewport',
1421
- shrinkWidth: true
1422
- };
1459
+ });
1423
1460
  // TODO - XLazyColumn neni idealny nazov, lepsi je XColumn (ale zatial nechame XLazyColumn)
1424
1461
  var XLazyColumn = function (props) {
1425
1462
  // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
package/lib/components/XUtils.js CHANGED
@@ -105,7 +105,9 @@ var XUtils = /** @class */ (function () {
105
105
  // extra small displays (podla https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp)
106
106
  // mozno tu treba dat (window.screen.width * window.devicePixelRatio)
107
107
  // bolo 600 ($sm = 576 (primeflex)) - len ak bol mobil na vysku, 768 ma byt aj pre mobil na sirku
108
- return typeof window !== 'undefined' && window.screen.availWidth < 768; // $sm = 576 (primeflex)
108
+ //return typeof window !== 'undefined' && window.screen.availWidth < 768; // $sm = 576 (primeflex)
109
+ // blblo mi window.screen.availWidth (vracalo 1920 v mobile mode v browseri)
110
+ return XUtils.getViewWidth() < 768;
109
111
  };
110
112
  XUtils.mobileCssSuffix = function () {
111
113
  return XUtils.isMobile() ? '-mobile' : '';
@@ -170,7 +172,9 @@ var XUtils = /** @class */ (function () {
170
172
  var breakpointsToFind;
171
173
  var availWidth;
172
174
  if (typeof window !== 'undefined') {
173
- availWidth = window.screen.availWidth; // pouzivame availWidth, nie width, availWidth odratava napr. taskbar
175
+ //availWidth = window.screen.availWidth; // pouzivame availWidth, nie width, availWidth odratava napr. taskbar
176
+ // blblo mi window.screen.availWidth (vracalo 1920 v mobile mode v browseri) - mozno by tu malo byt window.outerWidth
177
+ availWidth = XUtils.getViewWidth();
174
178
  if (availWidth < 576) {
175
179
  breakpointsToFind = ['xs:'];
176
180
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@michalrakus/x-react-web-lib",
3
- "version": "1.35.0",
3
+ "version": "1.35.1",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "clean": "rimraf lib",