@arquimedes.co/eureka-forms 1.4.0-test → 1.4.4-test

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -0,0 +1,172 @@
+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 Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { Popper } from '@material-ui/core';
+import RoundedSelect from '../RoundedSelect/RoundedSelect';
+var filter = createFilterOptions();
+var useTextfieldStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                fontWeight: props.fontWeight,
+                color: props.color,
+                fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.innerBackgroundColor,
+                borderRadius: props.borderRadius,
+                height: props.height,
+                marginTop: '0px !important',
+                padding: '0px 38px 0px 12px !important',
+            },
+            '& .EF-MuiInputBase-root': {
+                padding: '0px !important',
+                pointerEvents: 'all',
+            },
+            '& label': {
+                marginTop: '-4px',
+                fontSize: props.fontSize,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                },
+                height: props.height,
+                '& .EF-MuiAutocomplete-input': {
+                    height: props.height,
+                    marginTop: -10,
+                },
+                '& .EF-MuiAutocomplete-input::placeholder': {
+                    color: 'var(--greyFont)',
+                    opacity: 1,
+                },
+            },
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor + ' !important',
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+            },
+            '& .EF-MuiFormLabel-root.Mui-disabled': {
+                color: '#0000008a',
+            },
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: '#0000003b',
+            },
+            '.EF-MuiAutocomplete-popupIndicator': {
+                padding: 0,
+            },
+            '& .EF-MuiAutocomplete-popupIndicatorOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+        },
+    }); });
+};
+export default function RoundedSmartSelect(_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.outlineColor, outlineColor = _g === void 0 ? '#b8b8b8' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.cantEdit, cantEdit = _j === void 0 ? false : _j, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.height, height = _l === void 0 ? '31px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, required = _a.required, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _o = _a.readOnly, readOnly = _o === void 0 ? false : _o, _p = _a.borderRadius, borderRadius = _p === void 0 ? 10 : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '400' : _q, icon = _a.icon, iconComponent = _a.iconComponent, _r = _a.searchable, searchable = _r === void 0 ? false : _r, _s = _a.containerMargin, containerMargin = _s === void 0 ? '0px' : _s, _t = _a.showIcon, showIcon = _t === void 0 ? true : _t, inputRef = _a.inputRef, disabled = _a.disabled, onBlur = _a.onBlur, name = _a.name;
+    var props = {
+        color: color,
+        height: height,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        cantEdit: cantEdit,
+        showIcon: showIcon && icon !== undefined,
+    };
+    var textFieldClasses = useTextfieldStyles(props)();
+    if (searchable) {
+        return (_jsx(Autocomplete, { size: "small", fullWidth: true, openOnFocus: true, disabled: cantEdit || disabled, popupIcon: showIcon && icon ? icon : undefined, onOpen: function () {
+                //Show loading icon if loading
+            }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: function (option) {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                else if (option.inputValue) {
+                    return option.inputValue;
+                }
+                else {
+                    // Regular option
+                    return option.label;
+                }
+            }, getOptionSelected: getOptionSelected, PopperComponent: function (_a) {
+                var style = _a.style, props = __rest(_a, ["style"]);
+                return (_jsx(Popper, __assign({}, props, { style: __assign(__assign({}, style), { zIndex: 1305 }) }), void 0));
+            }, value: value ? value : null, onChange: function (event, newValue) {
+                handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
+            }, filterOptions: function (options, params) {
+                if (value) {
+                    return options;
+                }
+                else {
+                    return filter(options, params);
+                }
+            }, renderOption: function (option) { return option.label; }, renderInput: function (params) { return (_jsx(TextField, __assign({ classes: textFieldClasses }, params, { inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: error, helperText: helperText }), void 0)); }, style: { pointerEvents: 'none' }, noOptionsText: "No hay opciones" }, void 0));
+    }
+    else {
+        return (_jsx(RoundedSelect, { onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: handleUpdate, onOpen: function () {
+                //Show loading icon if loading
+            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, void 0));
+    }
+}

package/dist/shared/RoundedTextField/RoundedTextField.d.ts

@@ -31,6 +31,8 @@ interface StyleProps {
     cantEdit?: boolean;
     /** The color of the helper text when not error */
     helperTextColor?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
 }
 interface RoundedTextFieldProps extends StyleProps {
 }

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -95,6 +95,9 @@ var useTextfieldStyles = function (props) {
             '& .Mui-error': {
                 color: props.errorColor,
             },
+            '& .EF-MuiOutlinedInput-adornedEnd': {
+                paddingRight: '7px',
+            },
             '& .EF-MuiFormHelperText-root': {
                 color: props.helperTextColor,
             },
@@ -102,7 +105,7 @@ var useTextfieldStyles = function (props) {
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _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.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.shrunkenFontSize, shrunkenFontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "errorColor", "fontWeight", "multiline", "cantEdit"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _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.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.shrunkenFontSize, shrunkenFontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, inputProps = _a.inputProps, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "inputProps", "value", "icon"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
@@ -120,9 +123,11 @@ function CustomTextfield(_a) {
         multiline: multiline,
         cantEdit: cantEdit,
     })();
-    return (_jsx(TextField, __assign({ classes: classes }, others, { multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
+    return (_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
             readOnly: readOnly,
             disabled: cantEdit,
+            inputProps: inputProps,
+            endAdornment: icon,
         } }), void 0));
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.4.0-test",
+    "version":"1.4.4-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -21,6 +21,7 @@
         "axios": "^0.21.x",
         "date-fns": "^2.23.x",
         "draft-js": "^0.11.x",
+        "nanoid": "^3.3.3",
         "react-draft-wysiwyg": "^1.14.x",
         "react-hook-form": "^7.6.4",
         "react-router-dom": "^5.2.0",