@michalrakus/x-react-web-lib 1.31.0 → 1.31.1

package/lib/components/XFormBase.d.ts

@@ -4,6 +4,7 @@ import { OperationType } from "./XUtils";
 import { XFieldOnChange, XFormComponent } from "./XFormComponent";
 import { XTableFieldOnChange, XFormDataTable2, XRowTechData } from "./XFormDataTable2";
 import { XErrorMap, XErrors } from "./XErrors";
+import { XEntity } from "../serverApi/XEntityMetadata";
 export type XOnSaveOrCancelProp = (object: XObject | null, objectChange: OperationType) => void;
 export interface XFormProps {
     id?: number;
@@ -17,6 +18,7 @@ export declare function Form(entity: string): <T extends new (...args: any[]) =>
 } & T;
 export declare abstract class XFormBase extends Component<XFormProps> {
     entity?: string;
+    xEntity: XEntity | undefined;
     fields: Set<string>;
     state: {
         object: XObject | null;
@@ -34,7 +36,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     getEntity(): string;
     getXObject(): XObject;
     getObject(): any;
-    isAddRow(): any;
+    isAddRow(): boolean;
     isInDialog(): boolean;
     onFieldChange(field: string, value: any, error?: string | undefined, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;

package/lib/components/XFormBase.js

@@ -93,6 +93,7 @@ exports.XFormBase = exports.Form = void 0;
 var react_1 = require("react");
 var XUtils_1 = require("./XUtils");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 // class decorator ktory nastavuje property entity (dalo by sa to nastavovat v konstruktore ale decorator je menej ukecany)
 // ma sa pouzivat len na triedach odvodenych od XFormBase - obmedzenie som vsak nevedel nakodit
 // property sa nastavi az po zbehnuti konstruktora
@@ -156,6 +157,7 @@ var XFormBase = /** @class */ (function (_super) {
                         if (this.entity === undefined) {
                             throw "XFormBase: Property entity is not defined - use decorator @Form.";
                         }
+                        this.xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.entity);
                         if (!(this.props.id !== undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, XUtils_1.XUtils.fetchById(this.entity, Array.from(this.fields), this.props.id)];
                     case 1:
@@ -221,7 +223,14 @@ var XFormBase = /** @class */ (function (_super) {
         return this.getXObject();
     };
     XFormBase.prototype.isAddRow = function () {
-        return this.props.id === undefined;
+        // povodny kod
+        //return this.props.id === undefined;
+        // aby sme mohli zmenit insert na update (napr. ak po kontrole id fieldov zistime ze zaznam existuje), tak zistujeme id-cko z this.state.object
+        var isAddRow = false; // default
+        if (this.state.object && this.xEntity) {
+            isAddRow = this.state.object[this.xEntity.idField] === undefined;
+        }
+        return isAddRow;
     };
     // helper method
     XFormBase.prototype.isInDialog = function () {

package/lib/components/XInputTextarea.d.ts

@@ -12,9 +12,11 @@ export declare class XInputTextarea extends XInput<string, XInputTextareaProps>
         cols: string;
         labelOnTop: boolean;
     };
+    xInputTextareaBaseRef: any;
     constructor(props: XInputTextareaProps);
     getValue(): string | null;
     onValueChange(value: string | null): void;
     getLabelStyle(): React.CSSProperties;
+    autoResize(): void;
     render(): React.JSX.Element;
 }

package/lib/components/XInputTextarea.js

@@ -28,6 +28,7 @@ var XInputTextarea = /** @class */ (function (_super) {
     __extends(XInputTextarea, _super);
     function XInputTextarea(props) {
         var _this = _super.call(this, props) || this;
+        _this.xInputTextareaBaseRef = react_1.default.createRef();
         _this.onValueChange = _this.onValueChange.bind(_this);
         return _this;
     }
@@ -41,6 +42,12 @@ var XInputTextarea = /** @class */ (function (_super) {
         var _a;
         return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
     };
+    // api method - can be called through "ref" from parent if needed to adjust the height of the input textarea according to the (changed) content
+    XInputTextarea.prototype.autoResize = function () {
+        if (this.xInputTextareaBaseRef.current) {
+            this.xInputTextareaBaseRef.current.autoResize();
+        }
+    };
     XInputTextarea.prototype.render = function () {
         var _a, _b;
         var fieldStyle = this.props.fieldStyle;
@@ -86,7 +93,7 @@ var XInputTextarea = /** @class */ (function (_super) {
             react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
             labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
             this.props.form.state.object ?
-                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { ref: this.xInputTextareaBaseRef, id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })
                 : null));
     };
     XInputTextarea.defaultProps = {

package/lib/components/XInputTextareaBase.d.ts

@@ -1,15 +1,28 @@
-import React from "react";
-export declare const XInputTextareaBase: (props: {
-    id?: string | undefined;
+import React, { Component } from "react";
+export interface XInputTextareaBaseProps {
+    id?: string;
     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;
-    tooltip?: string | undefined;
-    placeholder?: string | undefined;
-}) => React.JSX.Element;
+    rows?: number;
+    cols?: number;
+    autoResize?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    style?: React.CSSProperties;
+    maxLength?: number;
+    tooltip?: string;
+    placeholder?: string;
+}
+export declare class XInputTextareaBase extends Component<XInputTextareaBaseProps> {
+    inputTextareaRef: any;
+    state: {
+        inputChanged: boolean;
+        inputValueState: string | undefined;
+    };
+    constructor(props: XInputTextareaBaseProps);
+    onChange(e: any): void;
+    onBlur(e: React.FocusEvent<HTMLTextAreaElement>): void;
+    getInputValue(): string;
+    autoResize(): void;
+    render(): React.JSX.Element;
+}

package/lib/components/XInputTextareaBase.js

@@ -1,4 +1,19 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        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++) {
@@ -33,59 +48,59 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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
-    // 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) {
-        setInputChanged(true);
-        setInputValueState(e.target.value);
+var XInputTextareaBase = /** @class */ (function (_super) {
+    __extends(XInputTextareaBase, _super);
+    function XInputTextareaBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.inputTextareaRef = react_1.default.createRef();
+        _this.state = {
+            inputChanged: false,
+            inputValueState: undefined
+        };
+        _this.onChange = _this.onChange.bind(_this);
+        _this.onBlur = _this.onBlur.bind(_this);
+        return _this;
+    }
+    XInputTextareaBase.prototype.onChange = function (e) {
+        this.setState({ inputChanged: true, inputValueState: e.target.value });
     };
-    var onBlur = function (e) {
+    XInputTextareaBase.prototype.onBlur = function (e) {
         // optimalizacia - onChange volame len ak inputChanged === true
-        if (inputChanged) {
+        if (this.state.inputChanged) {
             var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
-            props.onChange(value);
-            setInputChanged(false);
-            setInputValueState(undefined); // pre poriadok
+            this.props.onChange(value);
+            // pre poriadok nastavujeme inputValueState na undefined
+            this.setState({ inputChanged: false, inputValueState: undefined });
         }
     };
-    var getInputValue = function () {
+    XInputTextareaBase.prototype.getInputValue = function () {
         var inputValue;
-        if (inputChanged) {
-            inputValue = inputValueState;
+        if (this.state.inputChanged) {
+            inputValue = this.state.inputValueState;
         }
         else {
-            inputValue = (0, XUtilsConversions_1.stringAsUI)(props.value);
+            inputValue = (0, XUtilsConversions_1.stringAsUI)(this.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.createTooltipOrErrorProps(props.error, props.tooltip), { placeholder: props.placeholder })));
-};
+    // call this method to autoresize textarea after setting the content of XInputTextareaBase via onChange of some other attribute (e.g. onChangeClient)
+    // must be called as callback (param) of the method XFormBase.setStateXForm
+    XInputTextareaBase.prototype.autoResize = function () {
+        // code from ChatGPT
+        if (this.inputTextareaRef.current) {
+            this.inputTextareaRef.current.style.height = 'auto'; // Reset height
+            this.inputTextareaRef.current.style.height = "".concat(this.inputTextareaRef.current.scrollHeight, "px"); // Set height based on scrollHeight
+        }
+    };
+    XInputTextareaBase.prototype.render = function () {
+        return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ ref: this.inputTextareaRef, id: this.props.id, value: this.getInputValue(), onChange: this.onChange, onBlur: this.onBlur, readOnly: this.props.readOnly, maxLength: this.props.maxLength, style: this.props.style, rows: this.props.rows, cols: this.props.cols, autoResize: this.props.autoResize }, XUtils_1.XUtils.createTooltipOrErrorProps(this.props.error, this.props.tooltip), { placeholder: this.props.placeholder })));
+    };
+    return XInputTextareaBase;
+}(react_1.Component));
 exports.XInputTextareaBase = XInputTextareaBase;

package/lib/serverApi/XUtilsConversions.d.ts

@@ -16,6 +16,7 @@ export declare function dateFromModel(value: any): Date | null;
 export declare function dateFromUI(valueString: string, dateScale?: XDateScale): Date | null | undefined;
 export declare function dateAsUI(value: Date | null, dateScale?: XDateScale): string;
 export declare function dateAsYYYY_MM_DD(date: Date): string;
+export declare function dateAsDB(date: Date | null): string;
 export declare function datetimeAsUI(value: Date | null): string;
 export declare function timeFromModel(value: any): Date | null;
 export declare function dateFormatUI(dateScale?: XDateScale): string;

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.convertValueBase = exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsYYYY_MM_DD = exports.dateAsUI = exports.dateFromUI = exports.dateFromModel = exports.XDateScale = exports.numberFromString = exports.numberFromModel = exports.numberAsUI = exports.intFromUI = exports.stringAsDB = exports.stringAsUI = exports.stringFromUI = void 0;
+exports.convertValueBase = exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsDB = exports.dateAsYYYY_MM_DD = exports.dateAsUI = exports.dateFromUI = exports.dateFromModel = exports.XDateScale = exports.numberFromString = 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");
@@ -228,6 +228,10 @@ function dateAsYYYY_MM_DD(date) {
     return "".concat(date.getFullYear(), "-").concat(monthStr, "-").concat(dayStr);
 }
 exports.dateAsYYYY_MM_DD = dateAsYYYY_MM_DD;
+function dateAsDB(date) {
+    return date !== null ? "'".concat(dateAsYYYY_MM_DD(date), "'::DATE") : "NULL::DATE";
+}
+exports.dateAsDB = dateAsDB;
 function datetimeAsUI(value) {
     if (value !== null) {
         return (0, XUtilsCommon_1.dateFormat)(value, datetimeFormatUI());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.31.0",
+  "version": "1.31.1",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -40,8 +40,8 @@
   "peerDependencies": {
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primereact": "~10.4.0",
-    "quill": "^1.3.7",
+    "primereact": "~10.8.2",
+    "quill": "^2.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"