@arquimedes.co/eureka-forms 1.9.19-test → 1.9.20-test

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -1,3 +1,40 @@
+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++) {
+            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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
@@ -5,249 +42,258 @@ import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
 import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
-const useDatePickerStyles = (props) => makeStyles(() => ({
-    root: {
-        borderRadius: props.borderRadius,
-        backgroundColor: props.backgroundColor,
-        cursor: props.cantEdit ? 'default' : 'pointer',
-        height: props.height,
-        '& input, textarea': {
+var useDatePickerStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
             cursor: props.cantEdit ? 'default' : 'pointer',
-            padding: props.padding,
-            fontWeight: props.fontWeight,
-            color: props.textColor,
-            fontSize: props.fontSize,
-            '&::placeholder': {
+            height: props.height,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'pointer',
+                padding: props.padding,
+                fontWeight: props.fontWeight,
+                color: props.textColor,
                 fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.innerBackgroundColor,
+                borderRadius: props.borderRadius,
             },
-            backgroundColor: props.innerBackgroundColor,
-            borderRadius: props.borderRadius,
-        },
-        '& .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-            '& span': {
-                fontSize: '0.75rem',
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+                '& span': {
+                    fontSize: '0.75rem',
+                },
             },
-        },
-        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-        },
-        '&.Mui-focused .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.focusColor,
-            borderWidth: 2,
-        },
-        '&:hover .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.cantEdit
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& .EF-MuiInputAdornment-root': {
-            width: 5,
-            '& button': {
-                marginLeft: -25,
-                fontSize: 18,
-                padding: 16,
+            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
             },
-        },
-        '&.Erk-MuiOutlinedInput-adornedEnd': {
-            paddingRight: 11,
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-disabled': {
-            cursor: 'default',
-        },
-    },
-}));
-const useDatePickerLabelStyles = (props) => makeStyles(() => ({
-    root: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        maxWidth: 'calc(100% - 50px)',
-        marginTop: props.height != '40px' ? '-4px' : '0px',
-        textOverflow: 'ellipsis',
-        fontSize: props.fontSize,
-        '&.Mui-focused': {
-            color: props.focusColor,
-        },
-        '&.EF-MuiInputLabel-shrink': {
-            marginTop: '0px',
-            maxWidth: 'calc(100% - 5px)',
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-const useDatePickerHelperTextStyles = (props) => makeStyles(() => ({
-    root: {
-        color: props.helperTextColor,
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-const useDatePickerDialogStyles = (props) => makeStyles(() => ({
-    datePicker: {
-        '& .EF-MuiPickersModal-dialogRoot': {
-            color: props.textColor,
-            '& .EF-MuiDialogActions-root': {
-                '& .EF-MuiButton-root:hover': {
-                    backgroundColor: props.hoverColor,
-                },
-                '& .EF-MuiButton-label': {
-                    color: props.focusColor,
-                },
-                '& .EF-MuiTouchRipple-root': {
-                    color: props.focusColor,
+            '&.Mui-focused .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.focusColor,
+                borderWidth: 2,
+            },
+            '&:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& .EF-MuiInputAdornment-root': {
+                width: 5,
+                '& button': {
+                    marginLeft: -25,
+                    fontSize: 18,
+                    padding: 16,
                 },
             },
+            '&.Erk-MuiOutlinedInput-adornedEnd': {
+                paddingRight: 11,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-disabled': {
+                cursor: 'default',
+            },
         },
-        //Days labels
-        '& .EF-MuiPickersDay-day': {
-            color: props.textColor,
-        },
-        // Selected day label
-        '& .EF-MuiPickersDay-daySelected': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        //Title
-        '& .EF-MuiPickersDatePickerRoot-toolbar': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        //Title
-        '& .EF-MuiPickersToolbar-toolbar': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickerDTTabs-tabs': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
-            color: props.focusColor,
-        },
-        '& .EF-MuiTabs-indicator': {
-            backgroundColor: props.contrastColor,
-        },
-        '& .EF-MuiPickersClockNumber-clockNumber': {
-            color: props.accentColor,
-        },
-        '& .EF-MuiPickersClockNumber-clockNumberSelected': {
-            color: props.backgroundColor,
-        },
-        '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersClockPointer-noPoint': {
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersClockPointer-thumb': {
-            borderColor: props.focusColor,
-        },
-        '& .EF-MuiPickersDay-dayDisabled': {
-            color: 'rgba(0, 0, 0, 0.38)',
-            pointerEvents: 'all',
-        },
-        '& .EF-MuiPickersDay-current': {
-            color: props.backgroundColor,
-            backgroundColor: props.secondaryColor,
+    }); });
+};
+var useDatePickerLabelStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            maxWidth: 'calc(100% - 50px)',
+            marginTop: props.height != '40px' ? '-4px' : '0px',
+            textOverflow: 'ellipsis',
+            fontSize: props.fontSize,
+            '&.Mui-focused': {
+                color: props.focusColor,
+            },
+            '&.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
         },
-        '& .EF-MuiPickersDay-hidden': {
-            opacity: 0.4,
-            pointerEvents: 'none',
+    }); });
+};
+var useDatePickerHelperTextStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            color: props.helperTextColor,
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
         },
-        '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
-            opacity: 0.8,
-            pointerEvents: 'none',
+    }); });
+};
+var useDatePickerDialogStyles = function (props) {
+    return makeStyles(function () { return ({
+        datePicker: {
+            '& .EF-MuiPickersModal-dialogRoot': {
+                color: props.textColor,
+                '& .EF-MuiDialogActions-root': {
+                    '& .EF-MuiButton-root:hover': {
+                        backgroundColor: props.hoverColor,
+                    },
+                    '& .EF-MuiButton-label': {
+                        color: props.focusColor,
+                    },
+                    '& .EF-MuiTouchRipple-root': {
+                        color: props.focusColor,
+                    },
+                },
+            },
+            //Days labels
+            '& .EF-MuiPickersDay-day': {
+                color: props.textColor,
+            },
+            // Selected day label
+            '& .EF-MuiPickersDay-daySelected': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            //Title
+            '& .EF-MuiPickersDatePickerRoot-toolbar': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            //Title
+            '& .EF-MuiPickersToolbar-toolbar': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickerDTTabs-tabs': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
+                color: props.focusColor,
+            },
+            '& .EF-MuiTabs-indicator': {
+                backgroundColor: props.contrastColor,
+            },
+            '& .EF-MuiPickersClockNumber-clockNumber': {
+                color: props.accentColor,
+            },
+            '& .EF-MuiPickersClockNumber-clockNumberSelected': {
+                color: props.backgroundColor,
+            },
+            '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-noPoint': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-thumb': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiPickersDay-dayDisabled': {
+                color: 'rgba(0, 0, 0, 0.38)',
+                pointerEvents: 'all',
+            },
+            '& .EF-MuiPickersDay-current': {
+                color: props.backgroundColor,
+                backgroundColor: props.secondaryColor,
+            },
+            '& .EF-MuiPickersDay-hidden': {
+                opacity: 0.4,
+                pointerEvents: 'none',
+            },
+            '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
+                opacity: 0.8,
+                pointerEvents: 'none',
+            },
         },
-    },
-}));
-function CustomDatePicker({ focusColor = '#3d5a7f', secondaryColor = '#98c1d9', outlineColor = '#0000003b', backgroundColor = 'white', innerBackgroundColor, textColor = '#293241', contrastColor = '#ee6c4d', accentColor = '#293241', errorColor = '#cc2936', borderRadius = 10, padding = '6px 0px 6px 12px', fontSize = '1rem', shrunkenFontSize = '1rem', helperTextColor = '#989898', fontWeight = '300', height = '31px', cantEdit = false, pickTime = false, onChange, required, ...others }) {
-    const classes = useDatePickerStyles({
-        padding,
-        cantEdit,
-        textColor,
-        focusColor,
+    }); });
+};
+function CustomDatePicker(_a) {
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
+    var classes = useDatePickerStyles({
+        padding: padding,
+        cantEdit: cantEdit,
+        textColor: textColor,
+        focusColor: focusColor,
         hoverColor: focusColor + '0a',
-        outlineColor,
-        errorColor,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
+        outlineColor: outlineColor,
+        errorColor: errorColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        fontSize: fontSize,
+        shrunkenFontSize: shrunkenFontSize,
+        fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
+        height: height,
     })();
-    const labelClasses = useDatePickerLabelStyles({
-        padding,
-        cantEdit,
-        textColor,
-        focusColor,
+    var labelClasses = useDatePickerLabelStyles({
+        padding: padding,
+        cantEdit: cantEdit,
+        textColor: textColor,
+        focusColor: focusColor,
         hoverColor: focusColor + '0a',
-        errorColor,
-        outlineColor,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
+        errorColor: errorColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        fontSize: fontSize,
+        shrunkenFontSize: shrunkenFontSize,
+        fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
+        height: height,
     })();
-    const { datePicker } = useDatePickerDialogStyles({
-        padding,
-        cantEdit,
-        textColor,
-        secondaryColor,
-        accentColor,
-        contrastColor,
-        focusColor,
+    var datePicker = useDatePickerDialogStyles({
+        padding: padding,
+        cantEdit: cantEdit,
+        textColor: textColor,
+        secondaryColor: secondaryColor,
+        accentColor: accentColor,
+        contrastColor: contrastColor,
+        focusColor: focusColor,
         hoverColor: focusColor + '0a',
-        errorColor,
-        outlineColor,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
-    })();
-    const helperTextStyles = useDatePickerHelperTextStyles({
-        padding,
-        textColor,
-        focusColor,
-        errorColor,
-        outlineColor,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
+        errorColor: errorColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        fontSize: fontSize,
+        shrunkenFontSize: shrunkenFontSize,
+        fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
+        height: height,
+    })().datePicker;
+    var helperTextStyles = useDatePickerHelperTextStyles({
+        padding: padding,
+        textColor: textColor,
+        focusColor: focusColor,
+        errorColor: errorColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        fontSize: fontSize,
+        shrunkenFontSize: shrunkenFontSize,
+        fontWeight: fontWeight,
+        helperTextColor: helperTextColor,
+        height: height,
     })();
     if (pickTime) {
-        return (_jsx(DateTimePicker, { ...others, inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
             } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
             , InputProps: {
-                required,
-                classes,
+                required: required,
+                classes: classes,
                 disabled: cantEdit,
                 endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
                         color: '#757575',
@@ -255,24 +301,24 @@ function CustomDatePicker({ focusColor = '#3d5a7f', secondaryColor = '#98c1d9',
                     } })),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
-            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
                 if (!day) {
                     return dayComponent;
                 }
-                return (_jsx("div", { onClick: () => {
+                return (_jsx("div", __assign({ onClick: function () {
                         onChange(day);
-                    }, children: cloneElement(dayComponent) }));
-            }, variant: "dialog" }));
+                    } }, { children: cloneElement(dayComponent) })));
+            }, variant: "dialog" })));
     }
     else {
-        return (_jsx(DatePicker, { ...others, inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
             } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
             , InputProps: {
-                required,
-                classes,
+                required: required,
+                classes: classes,
                 disabled: cantEdit,
                 endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
                         color: '#757575',
@@ -280,22 +326,27 @@ function CustomDatePicker({ focusColor = '#3d5a7f', secondaryColor = '#98c1d9',
                     } })),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
-            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
                 if (!day) {
                     return dayComponent;
                 }
-                return (_jsx("div", { onClick: () => {
+                return (_jsx("div", __assign({ onClick: function () {
                         onChange(day);
-                    }, children: cloneElement(dayComponent) }));
-            }, variant: "dialog" }));
+                    } }, { children: cloneElement(dayComponent) })));
+            }, variant: "dialog" })));
     }
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-class RoundedDatePicker extends React.Component {
-    render() {
-        return _jsx(CustomDatePicker, { ...this.props });
+var RoundedDatePicker = /** @class */ (function (_super) {
+    __extends(RoundedDatePicker, _super);
+    function RoundedDatePicker() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-}
+    RoundedDatePicker.prototype.render = function () {
+        return _jsx(CustomDatePicker, __assign({}, this.props));
+    };
+    return RoundedDatePicker;
+}(React.Component));
 export default RoundedDatePicker;