@michalrakus/x-react-web-lib 1.32.3 → 1.32.4

package/lib/components/XButton.d.ts

@@ -6,4 +6,5 @@ export declare const XButton: (props: {
     icon?: IconType<ButtonProps>;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
+    style?: React.CSSProperties | undefined;
 }) => React.JSX.Element;

package/lib/components/XButton.js

@@ -8,6 +8,6 @@ var react_1 = __importDefault(require("react"));
 var button_1 = require("primereact/button");
 var XButton = function (props) {
     // zatial iba pridany class x-button, aby sme vedeli nastavit margin "m-1" (0.25rem)
-    return (react_1.default.createElement(button_1.Button, { label: props.label, icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: "m-1" }));
+    return (react_1.default.createElement(button_1.Button, { label: props.label, icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: "m-1", style: props.style }));
 };
 exports.XButton = XButton;

package/lib/components/XFormBase.d.ts

@@ -31,6 +31,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
         assoc: string;
         sortField: string;
     }>;
+    tabViewUsed: boolean;
     constructor(props: XFormProps);
     componentDidMount(): Promise<void>;
     getEntity(): string;
@@ -38,6 +39,8 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     getObject(): any;
     isAddRow(): boolean;
     isInDialog(): boolean;
+    isTabViewUsed(): boolean;
+    setTabViewUsed(tabViewUsed: boolean): void;
     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

@@ -141,6 +141,7 @@ var XFormBase = /** @class */ (function (_super) {
         _this.xFormDataTableList = [];
         _this.assocToValidateList = [];
         _this.assocToSortList = [];
+        _this.tabViewUsed = false; // default
         _this.onClickSave = _this.onClickSave.bind(_this);
         _this.onClickCancel = _this.onClickCancel.bind(_this);
         return _this;
@@ -236,6 +237,13 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.isInDialog = function () {
         return this.props.onSaveOrCancel !== undefined;
     };
+    // helper method
+    XFormBase.prototype.isTabViewUsed = function () {
+        return this.tabViewUsed;
+    };
+    XFormBase.prototype.setTabViewUsed = function (tabViewUsed) {
+        this.tabViewUsed = tabViewUsed;
+    };
     XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
         // field moze byt aj na asociovanom objekte (field length > 1, napr.: <assocX>.<fieldY>)
         // v takom pripade sa do errorMap zapise ako key cely field <assocX>.<fieldY>

package/lib/components/XFormDataTable2.js

@@ -559,7 +559,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             if (this.props.scrollWidth !== "none") {
                 scrollWidth = this.props.scrollWidth;
                 if (scrollWidth === "viewport") {
-                    scrollWidth = "calc(100vw - ".concat(XUtils_1.XUtils.isMobile() ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                    var marginsWidth = XUtils_1.XUtils.isMobile() ? 1.2 : 2.2; // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                    // mobil - padding 0.5rem body element, ale este bola tabulka moc siroka, tak sme dali 1.2
+                    if (this.props.form.isTabViewUsed()) {
+                        marginsWidth += 1; // TabPanel has padding 0.5rem (in css file) -> 1rem both margins
+                    }
+                    scrollWidth = "calc(100vw - ".concat(marginsWidth, "rem)");
                 }
             }
             if (this.props.scrollHeight !== "none") {

package/lib/components/XInputTextarea.d.ts

@@ -10,9 +10,9 @@ export interface XInputTextareaProps extends XInputProps<string> {
 export declare class XInputTextarea extends XInput<string, XInputTextareaProps> {
     static defaultProps: {
         cols: string;
-        labelOnTop: boolean;
     };
     xInputTextareaBaseRef: any;
+    labelOnTop: boolean;
     constructor(props: XInputTextareaProps);
     getValue(): string | null;
     onValueChange(value: string | null): void;

package/lib/components/XInputTextarea.js

@@ -29,6 +29,12 @@ var XInputTextarea = /** @class */ (function (_super) {
     function XInputTextarea(props) {
         var _this = _super.call(this, props) || this;
         _this.xInputTextareaBaseRef = react_1.default.createRef();
+        if (props.labelOnTop !== undefined) {
+            _this.labelOnTop = props.labelOnTop;
+        }
+        else {
+            _this.labelOnTop = XUtils_1.XUtils.isMobile();
+        }
         _this.onValueChange = _this.onValueChange.bind(_this);
         return _this;
     }
@@ -40,7 +46,7 @@ var XInputTextarea = /** @class */ (function (_super) {
     };
     XInputTextarea.prototype.getLabelStyle = function () {
         var _a;
-        return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
+        return this.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 () {
@@ -59,7 +65,7 @@ var XInputTextarea = /** @class */ (function (_super) {
             // pridame width:100%
             //fieldStyle = {width: '100%'};
             var widthValue = void 0;
-            if (this.props.labelOnTop) {
+            if (this.labelOnTop) {
                 widthValue = '100%';
             }
             else {
@@ -89,16 +95,15 @@ var XInputTextarea = /** @class */ (function (_super) {
             labelElemId = "".concat(this.props.field, "_label_id");
         }
         // 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', style: fieldStyle },
-            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
+        return (react_1.default.createElement("div", { className: !this.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top', style: fieldStyle },
+            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.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, { 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 = {
-        cols: "full",
-        labelOnTop: false
+        cols: "full"
     };
     return XInputTextarea;
 }(XInput_1.XInput));

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

@@ -14,6 +14,7 @@ export interface XAppButtonForRow {
     icon?: IconType<ButtonProps>;
     label: string;
     onClick: (selectedRow: any) => void;
+    style?: React.CSSProperties;
 }
 export interface XOptionalCustomFilter {
     label: string;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -903,7 +903,8 @@ var XLazyDataTable = function (props) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = "calc(100vw - ".concat(isMobile ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                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
+                // mobil - padding 0.5rem body element
             }
         }
         if (props.scrollHeight !== "none") {
@@ -1229,7 +1230,7 @@ var XLazyDataTable = function (props) {
             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,
             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,
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
-            props.appButtonsForRow ? 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); } }); }) : null,
+            props.appButtonsForRow ? 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,
             props.appButtons,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
             exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.32.3",
+  "version": "1.32.4",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",