@michalrakus/x-react-web-lib 1.16.0 → 1.17.0

package/XInputTextareaBase.d.ts

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

package/XInputTextareaBase.js

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

package/gulpfile.js

@@ -55,6 +55,7 @@ function generateApi(cb) {
         "./lib/components/XInputIntervalBase",
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
+        "./lib/components/XInputTextareaBase",
         "./lib/components/XLazyDataTable",
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",

package/lib/components/XInputTextarea.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { XInput, XInputProps } from "./XInput";
 export interface XInputTextareaProps extends XInputProps<string> {
-    rows: number;
+    rows?: number;
     cols?: number | "full";
     labelOnTop?: boolean;
+    autoResize?: boolean;
 }
 export declare class XInputTextarea extends XInput<string, XInputTextareaProps> {
     static defaultProps: {
@@ -11,8 +12,8 @@ export declare class XInputTextarea extends XInput<string, XInputTextareaProps>
         labelOnTop: boolean;
     };
     constructor(props: XInputTextareaProps);
-    getValue(): string;
-    onValueChange(e: any): void;
+    getValue(): string | null;
+    onValueChange(value: string | null): void;
     getLabelStyle(): React.CSSProperties;
     render(): JSX.Element;
 }

package/lib/components/XInputTextarea.js

@@ -14,27 +14,15 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XInputTextarea = void 0;
 var react_1 = __importDefault(require("react"));
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XInput_1 = require("./XInput");
-var inputtextarea_1 = require("primereact/inputtextarea");
 var XUtils_1 = require("./XUtils");
+var XInputTextareaBase_1 = require("./XInputTextareaBase");
 var XInputTextarea = /** @class */ (function (_super) {
     __extends(XInputTextarea, _super);
     function XInputTextarea(props) {
@@ -43,12 +31,9 @@ var XInputTextarea = /** @class */ (function (_super) {
         return _this;
     }
     XInputTextarea.prototype.getValue = function () {
-        // konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        var value = this.getValueFromObject();
-        return (0, XUtilsConversions_1.stringAsUI)(value);
+        return this.getValueFromObject();
     };
-    XInputTextarea.prototype.onValueChange = function (e) {
-        var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+    XInputTextarea.prototype.onValueChange = function (value) {
         this.onValueChangeBase(value);
     };
     XInputTextarea.prototype.getLabelStyle = function () {
@@ -72,9 +57,12 @@ var XInputTextarea = /** @class */ (function (_super) {
             // aj tak sa asi vzdy bude pouzivat "full"
             cols = this.props.cols;
         }
+        // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
         return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top' },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols }, this.getClassNameTooltip()))));
+            this.props.form.state.object ?
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError() })
+                : null));
     };
     XInputTextarea.defaultProps = {
         cols: "full",

package/lib/components/XInputTextareaBase.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare const XInputTextareaBase: (props: {
+    id?: string | undefined;
+    value: string | null;
+    onChange: (value: string | null) => void;
+    rows?: number | undefined;
+    cols?: number | undefined;
+    autoResize?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    error?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    maxLength?: number | undefined;
+}) => JSX.Element;

package/lib/components/XInputTextareaBase.js

@@ -0,0 +1,92 @@
+"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.XInputTextareaBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XUtils_1 = require("./XUtils");
+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
+    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
+        if (inputChanged) {
+            var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+            props.onChange(value);
+            setInputChanged(false);
+            setInputValueState(undefined); // pre poriadok
+        }
+    };
+    var getInputValue = function () {
+        var inputValue;
+        if (inputChanged) {
+            inputValue = inputValueState;
+        }
+        else {
+            inputValue = (0, XUtilsConversions_1.stringAsUI)(props.value);
+        }
+        return inputValue;
+    };
+    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createErrorProps(props.error))));
+};
+exports.XInputTextareaBase = XInputTextareaBase;

package/lib/components/XLazyDataTable.d.ts

@@ -53,6 +53,7 @@ export interface XLazyDataTableProps {
     customFilter?: XCustomFilter;
     sortField?: string;
     fullTextSearch: boolean | string[];
+    multiLineSwitch: boolean;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
@@ -68,6 +69,7 @@ export declare const XLazyDataTable: {
         rows: number;
         filterDisplay: string;
         fullTextSearch: boolean;
+        multiLineSwitch: boolean;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;

package/lib/components/XLazyDataTable.js

@@ -117,6 +117,7 @@ var XInputDecimalBase_1 = require("./XInputDecimalBase");
 var XLocale_1 = require("./XLocale");
 var XFtsInput_1 = require("./XFtsInput");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var inputswitch_1 = require("primereact/inputswitch");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -226,13 +227,14 @@ var XLazyDataTable = function (props) {
     var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
     var _g = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _g[0], setFtsInputValue = _g[1];
-    var _h = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _h[0], setMultiSortMeta = _h[1];
-    var _j = __read((0, react_1.useState)(null), 2), selectedRow = _j[0], setSelectedRow = _j[1];
-    var _k = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _k[0], setDataLoaded = _k[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _l = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _l[0], setExportRowsDialogOpened = _l[1];
-    var _m = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _m[0], setExportRowsDialogRowCount = _m[1]; // param pre dialog
-    var _o = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _o[0], setFiltersAfterFiltering = _o[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _p = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _p[0], setFtsInputValueAfterFiltering = _p[1]; // tak isto ako filtersAfterFiltering
+    var _h = __read((0, react_1.useState)(true), 2), multiLineSwitchValue = _h[0], setMultiLineSwitchValue = _h[1];
+    var _j = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _j[0], setMultiSortMeta = _j[1];
+    var _k = __read((0, react_1.useState)(null), 2), selectedRow = _k[0], setSelectedRow = _k[1];
+    var _l = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _l[0], setDataLoaded = _l[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _m = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _m[0], setExportRowsDialogOpened = _m[1];
+    var _o = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _o[0], setExportRowsDialogRowCount = _o[1]; // param pre dialog
+    var _p = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _p[0], setFiltersAfterFiltering = _p[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _q = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _q[0], setFtsInputValueAfterFiltering = _q[1]; // tak isto ako filtersAfterFiltering
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -612,6 +614,16 @@ var XLazyDataTable = function (props) {
             // ine typy - convertValue vrati string
             // mame zapnutu konverziu fromModel, lebo z json-u nam prichadzaju objekty typu string (napr. pri datumoch)
             valueResult = (0, XUtilsConversions_1.convertValue)(xField, value, true, XUtilsConversions_1.AsUIType.Form);
+            // ak mame viacriadkovy text a zapnuty multiLineSwitch (defaultne je zapnuty aj ked nie je zobrazeny)
+            if (multiLineSwitchValue) {
+                if (xField.type === "string" && typeof valueResult === "string" && valueResult) {
+                    var lines = valueResult.split(XUtilsCommon_1.XUtilsCommon.newLine);
+                    if (lines.length >= 2) {
+                        var elemList = lines.map(function (value, index) { return react_1.default.createElement("div", { key: index }, value); });
+                        valueResult = react_1.default.createElement("div", null, elemList);
+                    }
+                }
+            }
         }
         return valueResult;
     };
@@ -872,7 +884,8 @@ var XLazyDataTable = function (props) {
         react_1.default.createElement("div", { className: "flex justify-content-center align-items-center" },
             ftsInputValue ? react_1.default.createElement(XFtsInput_1.XFtsInput, { value: ftsInputValue, onChange: function (value) { return setFtsInputValue(value); } }) : null,
             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(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter }),
+            props.multiLineSwitch ? react_1.default.createElement(inputswitch_1.InputSwitch, { checked: multiLineSwitchValue, onChange: function (e) { return setMultiLineSwitchValue(e.value); }, className: "m-1" }) : null),
         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" },
@@ -891,6 +904,7 @@ exports.XLazyDataTable.defaultProps = {
     rows: 10,
     filterDisplay: "row",
     fullTextSearch: true,
+    multiLineSwitch: false,
     scrollable: true,
     scrollWidth: 'viewport',
     scrollHeight: 'viewport',

package/lib/serverApi/XUtilsConversions.d.ts

@@ -3,7 +3,7 @@ import { XField } from "./XEntityMetadata";
 export declare function stringFromUI(stringValue: string): string | null;
 export declare function stringAsUI(value: string | null): string;
 export declare function stringAsDB(value: string | null): string;
-export declare function numberFromUI(stringValue: string): number | null;
+export declare function intFromUI(stringValue: string): number | null | undefined;
 export declare function numberAsUI(value: number | null, fractionDigits?: number): string;
 export declare function numberFromModel(value: any): number | null;
 export declare function dateFromModel(value: any): Date | null;

package/lib/serverApi/XUtilsConversions.js

@@ -27,7 +27,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromModel = exports.numberFromModel = exports.numberAsUI = exports.numberFromUI = exports.stringAsDB = exports.stringAsUI = exports.stringFromUI = void 0;
+exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromModel = exports.numberFromModel = exports.numberAsUI = exports.intFromUI = exports.stringAsDB = exports.stringAsUI = exports.stringFromUI = void 0;
 var XUtilsCommon_1 = require("./XUtilsCommon");
 var XLocale_1 = require("../components/XLocale");
 var XUtilsMetadataCommon_1 = require("./XUtilsMetadataCommon");
@@ -51,17 +51,22 @@ function stringAsDB(value) {
     return value !== null ? "'".concat(value.replaceAll("'", "''"), "'") : "NULL";
 }
 exports.stringAsDB = stringAsDB;
-function numberFromUI(stringValue) {
+function intFromUI(stringValue) {
+    // convert stringValue (e.g. 1234) into integer number
+    // if stringValue is invalid, returns undefined
     var value;
     if (stringValue === '') {
         value = null;
     }
     else {
-        value = parseInt(stringValue, 10);
+        value = parseInt(stringValue, 10); // 1234xxx vrati number 1234, preto testujeme aj value.toString() !== stringValue
+        if (isNaN(value) || value.toString() !== stringValue) {
+            value = undefined;
+        }
     }
     return value;
 }
-exports.numberFromUI = numberFromUI;
+exports.intFromUI = intFromUI;
 function numberAsUI(value, fractionDigits) {
     if (fractionDigits === undefined) {
         fractionDigits = 2; // default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primereact": "~9.6.0",
+    "primereact": "~10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"