@arquimedes.co/eureka-forms 1.7.9 → 1.8.0-test

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -24,20 +24,26 @@ function TextAreaStep(_a) {
     var _b = useState(false), hovering = _b[0], setHovering = _b[1];
     var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
+        var backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {
             return {
                 border: '2px solid ' + formStyle.primaryColor,
                 marginTop: -1,
                 marginLeft: -1,
                 marginBottom: 0,
+                backgroundColor: backgroundColor,
             };
         }
         else if (hovering) {
-            return { border: '1px solid ' + formStyle.primaryColor };
+            return {
+                border: '1px solid ' + formStyle.primaryColor,
+                backgroundColor: backgroundColor,
+            };
         }
         else {
             return {
                 border: '1px solid ' + formStyle.outlineColor,
+                backgroundColor: backgroundColor,
             };
         }
     };

package/dist/shared/RoundedSelect/RoundedSelect.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SelectProps } from '@material-ui/core/Select';
-interface ColorProps {
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
+interface StyleProps {
     /** The color of the outline when selected and hovered on */
     focusColor?: string;
     /** The color of the outline when it is not selected */
     outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
     /** The color of the error to display */
     errorColor?: string;
     /** If the style should change on hover */
@@ -15,10 +15,20 @@ interface ColorProps {
     height?: string;
     /** The color of the text in the form */
     color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The color of the inner input */
+    innerBackgroundColor?: string;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
     /** If custom iconComponent exists */
     showIcon?: boolean;
 }
-interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
+interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
     /** children to display in the options */
     children?: any;
     /** Currently selected value */
@@ -42,6 +52,8 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     containerMargin?: string;
     /** The icon to display */
     iconComponent?: any;
+    /** The color of the inner input */
+    innerBackgroundColor?: string;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -61,8 +61,14 @@ var useOutlinedInputStyles = function (props) {
         root: {
             cursor: props.cantEdit ? 'default' : 'default',
             height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.innerBackgroundColor,
+            fontSize: props.fontSize,
             '& $notchedOutline': {
                 borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
             },
             '&:hover $notchedOutline': {
                 borderColor: props.cantEdit
@@ -88,7 +94,6 @@ var useOutlinedInputStyles = function (props) {
             '& .EF-MuiSelect-iconOpen': {
                 transform: props.showIcon ? 'none' : 'rotate(180deg)',
             },
-            borderRadius: 10,
             color: props.color,
         },
         focused: {},
@@ -130,43 +135,33 @@ var useHelperTextStyles = function (props) {
     }); });
 };
 function CustomSelect(_a) {
-    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.outlineColor, outlineColor = _e === void 0 ? '#0000003b' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.cantEdit, cantEdit = _g === void 0 ? false : _g, _h = _a.showIcon, showIcon = _h === void 0 ? true : _h, _j = _a.containerMargin, containerMargin = _j === void 0 ? '8px' : _j, _k = _a.height, height = _k === void 0 ? '40px' : _k, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
-    var classes = useStyles();
-    var outlinedInputClasses = useOutlinedInputStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
-        errorColor: errorColor,
-        focusColor: focusColor,
-        cantEdit: cantEdit,
-        height: height,
+    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '1rem' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, innerBackgroundColor = _a.innerBackgroundColor, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.showIcon, showIcon = _m === void 0 ? true : _m, _o = _a.containerMargin, containerMargin = _o === void 0 ? '8px' : _o, _p = _a.height, height = _p === void 0 ? '40px' : _p, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "fontSize", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
+    var props = {
         color: color,
-        showIcon: showIcon && iconComponent !== undefined,
-    })();
-    var labelClasses = useLabelInputStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
-        errorColor: errorColor,
-        focusColor: focusColor,
-        cantEdit: cantEdit,
         height: height,
-        color: color,
-    })();
-    var helperTextClasses = useHelperTextStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
         errorColor: errorColor,
         focusColor: focusColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
         cantEdit: cantEdit,
-        height: height,
-        color: color,
-    })();
+        showIcon: showIcon && iconComponent !== undefined,
+    };
+    var classes = useStyles();
+    var outlinedInputClasses = useOutlinedInputStyles(props)();
+    var labelClasses = useLabelInputStyles(props)();
+    var helperTextClasses = useHelperTextStyles(props)();
     return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
+            }, fullWidth: true, required: required, error: error }, { children: [label && _jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
                 ? { IconComponent: iconComponent }
-                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label + (required ? ' *' : ''), classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
+                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -173,6 +173,6 @@ export default function RoundedSmartSelect(_a) {
     else {
         return (_jsxs(RoundedSelect, __assign({ 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 }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0));
+            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, innerBackgroundColor: innerBackgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0));
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.7.9",
+    "version":"1.8.0-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",