@michalrakus/x-react-web-lib 1.19.0 → 1.21.0

package/lib/components/XEditorBase.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XEditorBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtils_1 = require("./XUtils");
+var editor_1 = require("primereact/editor");
+// koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
+// pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
+var XEditorBase = function (props) {
+    // true, ak uzivatel typuje hodnotu
+    // false, ak bol zavolany onBlur
+    var _a = __read((0, react_1.useState)(false), 2), editorValueChanged = _a[0], setEditorValueChanged = _a[1];
+    // pouzivane, len ak editorValueChanged === true, je tu zapisana zmenena hodnota v editore
+    var _b = __read((0, react_1.useState)(null), 2), editorValue = _b[0], setEditorValue = _b[1];
+    var onTextChange = function (e) {
+        setEditorValueChanged(true);
+        setEditorValue(e.htmlValue);
+    };
+    var onBlur = function (e) {
+        // optimalizacia - onChange volame len ak editorValueChanged === true
+        if (editorValueChanged) {
+            // TODO - bude vzdy onBlur volany az potom co bude setnuta editorValue? lebo ak nie tak treba hodnotu vytiahnut z "e"
+            //const htmlValue: string | null = e.target.??;
+            props.onChange(editorValue);
+            setEditorValueChanged(false);
+            setEditorValue(null); // pre poriadok
+        }
+    };
+    var getValue = function () {
+        var htmlValue;
+        if (editorValueChanged) {
+            htmlValue = editorValue;
+        }
+        else {
+            htmlValue = props.value;
+        }
+        return htmlValue !== null ? htmlValue : undefined; // value v Editor nechce null, chce undefined
+    };
+    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, style: props.style }, XUtils_1.XUtils.createErrorProps(props.error))));
+};
+exports.XEditorBase = XEditorBase;

package/lib/components/XFormBase.d.ts

@@ -62,6 +62,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     static saveErrorsIntoXRowTechData(row: any, xErrors: XErrors): void;
     formReadOnly(object: XObject, field: string): boolean;
     createNewObject(): XObject;
+    createNewObjectAsync(): Promise<XObject>;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): Promise<XErrors>;
     preSave(object: XObject): void;

package/lib/components/XFormBase.js

@@ -180,17 +180,23 @@ var XFormBase = /** @class */ (function (_super) {
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
-                        return [3 /*break*/, 3];
+                        return [3 /*break*/, 5];
                     case 2:
                         // add new row
                         object = this.createNewObject();
+                        if (!(Object.keys(object).length === 0)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.createNewObjectAsync()];
+                    case 3:
+                        object = _d.sent();
+                        _d.label = 4;
+                    case 4:
                         // pridame pripadne "init values", ktore pridu cez prop object (pouziva sa napr. pri insertovani cez XAutoComplete na predplnenie hodnoty)
                         if (this.props.initValues !== undefined) {
-                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.object will override values from object (if key is the same)
+                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.initValues will override values from object (if key is the same)
                         }
                         operationType = XUtils_1.OperationType.Insert;
-                        _d.label = 3;
-                    case 3:
+                        _d.label = 5;
+                    case 5:
                         this.preInitForm(object, operationType);
                         //console.log("volany XFormBase.componentDidMount() - ideme setnut object");
                         this.setState({ object: object } /*, () => console.log("volany XFormBase.componentDidMount() - callback setState")*/);
@@ -618,6 +624,15 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.createNewObject = function () {
         return {};
     };
+    // this method can be overriden in subclass if needed (to set some default values for insert)
+    // if createNewObject() returns empty object {}, then createNewObjectAsync() is called
+    XFormBase.prototype.createNewObjectAsync = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, {}];
+            });
+        });
+    };
     // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
     XFormBase.prototype.preInitForm = function (object, operationType) {
     };

package/lib/components/XFormComponent.d.ts

@@ -11,6 +11,7 @@ export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
     tooltip?: string;
+    placeholder?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;

package/lib/components/XInputText.js

@@ -63,7 +63,7 @@ var XInputText = /** @class */ (function (_super) {
         var label = this.getLabel();
         return (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,
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur, placeholder: this.props.placeholder }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XInputTextareaBase.js

@@ -58,18 +58,17 @@ var inputtextarea_1 = require("primereact/inputtextarea");
 // koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
 // pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
 var XInputTextareaBase = function (props) {
-    // true, ak uzivatel typuje hodnotu ale hodnota sa este neda skonvertovat na korektny interval (este nevieme vytvorit IPostgresInterval)
-    // false, ak uz mame v inpute korektnu hodnotu - vtedy zavolame props.onChange a posleme mu IPostgresInterval
+    // true, ak uzivatel typuje hodnotu
+    // false, ak bol zavolany onBlur
     var _a = __read((0, react_1.useState)(false), 2), inputChanged = _a[0], setInputChanged = _a[1];
     // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
     var _b = __read((0, react_1.useState)(undefined), 2), inputValueState = _b[0], setInputValueState = _b[1];
     var onChange = function (e) {
-        // conversion to IPostgresInterval will be done in onBlur
         setInputChanged(true);
         setInputValueState(e.target.value);
     };
     var onBlur = function (e) {
-        // optimalizacia - testujeme len ak inputChanged === true
+        // optimalizacia - onChange volame len ak inputChanged === true
         if (inputChanged) {
             var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
             props.onChange(value);

package/lib/components/{XExportRowsDialog.d.ts → XLazyDataTable/XExportRowsDialog.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExportType, LazyDataTableQueryParam } from "../serverApi/ExportImportParam";
+import { ExportType, LazyDataTableQueryParam } from "../../serverApi/ExportImportParam";
 export interface XExportParams {
     path: string;
     queryParam: LazyDataTableQueryParam | any;

package/lib/components/{XExportRowsDialog.js → XLazyDataTable/XExportRowsDialog.js}

@@ -76,16 +76,16 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XExportRowsDialog = void 0;
-var ExportImportParam_1 = require("../serverApi/ExportImportParam");
+var ExportImportParam_1 = require("../../serverApi/ExportImportParam");
 var react_1 = __importStar(require("react"));
 var dialog_1 = require("primereact/dialog");
 var inputtext_1 = require("primereact/inputtext");
 var dropdown_1 = require("primereact/dropdown");
 var checkbox_1 = require("primereact/checkbox");
-var XButton_1 = require("./XButton");
-var XUtils_1 = require("./XUtils");
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
-var XLocale_1 = require("./XLocale");
+var XButton_1 = require("../XButton");
+var XUtils_1 = require("../XUtils");
+var XUtilsConversions_1 = require("../../serverApi/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];

package/lib/components/XLazyDataTable/XHtmlRenderer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { XMultilineRenderType } from "./XLazyDataTable";
+export declare const XHtmlRenderer: (props: {
+    htmlValue: string | null;
+    renderType: XMultilineRenderType;
+    fewLinesCount: number;
+}) => JSX.Element;

package/lib/components/XLazyDataTable/XHtmlRenderer.js

@@ -0,0 +1,78 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XHtmlRenderer = void 0;
+var react_1 = __importStar(require("react"));
+var button_1 = require("primereact/button");
+var XHtmlRenderer = function (props) {
+    var _a;
+    // used only for props.renderType === "fewLines"
+    var _b = __read((0, react_1.useState)(false), 2), showAllLines = _b[0], setShowAllLines = _b[1];
+    var className;
+    var htmlValue = (_a = props.htmlValue) !== null && _a !== void 0 ? _a : "";
+    var buttonExpandCollapse = null;
+    if (props.renderType === "singleLine") {
+        className = "x-html-content-single-line";
+    }
+    else {
+        // "fewLines" or "allLines"
+        className = "x-html-content";
+        if (props.renderType === "fewLines" && htmlValue) {
+            var parser = new DOMParser();
+            var xmlDoc = parser.parseFromString(htmlValue, "text/html");
+            var pElemList = xmlDoc.getElementsByTagName("p");
+            if (pElemList.length > props.fewLinesCount) {
+                if (!showAllLines) {
+                    htmlValue = "";
+                    for (var i = 0; i < props.fewLinesCount; i++) {
+                        htmlValue += pElemList[i].outerHTML; // naspet do <p>line 1</p>
+                    }
+                }
+                // pridame button na koniec posledneho riadku
+                buttonExpandCollapse = react_1.default.createElement(button_1.Button, { icon: showAllLines ? "pi pi-angle-double-left" : "pi pi-angle-double-right", onClick: function () { return setShowAllLines(!showAllLines); }, className: "x-button-multiline-expand-collapse", style: { marginLeft: '0rem' } });
+            }
+        }
+    }
+    return (react_1.default.createElement("div", { className: "p-editor-content ql-snow" },
+        react_1.default.createElement("div", { className: "ql-editor " + className, dangerouslySetInnerHTML: { __html: htmlValue } }),
+        buttonExpandCollapse));
+};
+exports.XHtmlRenderer = XHtmlRenderer;

package/lib/components/{XLazyDataTable.d.ts → XLazyDataTable/XLazyDataTable.d.ts}

@@ -1,19 +1,24 @@
 import React, { ReactChild } from 'react';
 import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSortMeta } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
-import { XViewStatusOrBoolean } from "./XUtils";
-import { XSearchBrowseParams } from "./XSearchBrowseParams";
-import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
-import { XOnSaveOrCancelProp } from "./XFormBase";
+import { XViewStatusOrBoolean } from "../XUtils";
+import { XSearchBrowseParams } from "../XSearchBrowseParams";
+import { XAggregateType, XCustomFilter } from "../../serverApi/FindParam";
+import { XOnSaveOrCancelProp } from "../XFormBase";
 import { IconType } from "primereact/utils";
 import { ButtonProps } from "primereact/button";
 export type XBetweenFilterProp = "row" | "column" | undefined;
+export type XMultilineRenderType = "singleLine" | "fewLines" | "allLines";
 export interface XAppButtonForRow {
     key?: string;
     icon?: IconType<ButtonProps>;
     label: string;
     onClick: (selectedRow: any) => void;
 }
+export interface XOptionalCustomFilter {
+    label: string;
+    filter: XCustomFilter;
+}
 export interface XEditModeHandlers {
     onStart: () => void;
     onSave: () => void;
@@ -51,14 +56,18 @@ export interface XLazyDataTableProps {
     appButtons?: any;
     filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
+    optionalCustomFilters?: XOptionalCustomFilter[];
     sortField?: string | DataTableSortMeta[];
     fullTextSearch: boolean | string[];
     fields?: string[];
-    multiLineSwitch: boolean;
+    multilineSwitch: boolean;
+    multilineSwitchInitValue: XMultilineRenderType;
+    multilineSwitchFewLinesCount: number;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     rowClassName?: (data: any) => object | string | undefined;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+    exportFieldsToDuplicateValues?: string[];
     editMode?: boolean;
     editModeHandlers?: XEditModeHandlers;
     displayed?: boolean;
@@ -71,7 +80,9 @@ export declare const XLazyDataTable: {
         rows: number;
         filterDisplay: string;
         fullTextSearch: boolean;
-        multiLineSwitch: boolean;
+        multilineSwitch: boolean;
+        multilineSwitchInitValue: string;
+        multilineSwitchFewLinesCount: number;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
@@ -86,6 +97,7 @@ export type XFilterElementParams = {
     options: ColumnFilterElementTemplateOptions;
 };
 export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
+export type XContentType = "multiline" | "html" | undefined;
 export interface XLazyColumnProps {
     field: string;
     header?: any;
@@ -96,11 +108,15 @@ export interface XLazyColumnProps {
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
+    contentType?: XContentType;
     aggregateType?: XAggregateType;
     columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
+export type XLazyColumnType = {
+    props: XLazyColumnProps;
+};
 export declare const XLazyColumn: {
     (props: XLazyColumnProps): null;
     defaultProps: {