@arquimedes.co/eureka-forms 2.0.18 → 2.0.19-test

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -32,7 +32,7 @@ import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
 function Collapsible(_a) {
     var _b, _c, _d, _e;
-    var step = _a.step, open = _a.open, setOpen = _a.setOpen, level = _a.level, others = __rest(_a, ["step", "open", "setOpen", "level"]);
+    var step = _a.step, open = _a.open, setOpen = _a.setOpen, others = __rest(_a, ["step", "open", "setOpen"]);
     var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     var form = useContext(FormContext);
     var errors = useFormContext().formState.errors;
@@ -58,7 +58,7 @@ function Collapsible(_a) {
                             : 0,
                 } }, { children: _jsx("div", __assign({ className: styles.contentContainer, ref: contentRef }, { children: step.steps.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep, level: level + 1 })));
+                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep })));
                     }) })) })), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
                 } })] }));

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -9,52 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     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 styles from './MaterialDatePickerStep.module.css';
-import { useController } from 'react-hook-form';
 import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
-import { calcStepWidth } from '../../StepFunctions';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import FormContext from '../../../Contexts/FormContext';
-import { useCallback, useContext } from 'react';
-import { useStepDependency } from '../../StepHooks';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 function DatePickerStep(_a) {
     var _b;
     var step = _a.step, editable = _a.editable, defaultValue = _a.defaultValue;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
     var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var form = useContext(FormContext);
-    var _d = useStepDependency(step, defaultValue), handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
-    var _e = useController({
-        name: step.id,
+    var _d = useFormStep(step, {
+        defaultValue: defaultValue,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }), _f = _e.field, ref = _f.ref, field = __rest(_f, ["ref"]), error = _e.fieldState.error;
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx("div", __assign({ className: styles.container, style: {
-            width: currentBreakPoint <= step.size
-                ? '100%'
-                : calcStepWidth(step.size, form.size),
-            minHeight: step.description || (!postview && editable && step.required)
-                ? '55px'
-                : '43px',
-        } }, { children: _jsx(RoundedDatePicker, __assign({}, field, { onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required })) })));
+    }), ref = _d.ref, value = _d.value, onChange = _d.onChange, error = _d.error, field = _d.field;
+    return (_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedDatePicker, __assign({}, field, { value: value, onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required })) })));
 }
 export default DatePickerStep;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { EntityValuePickerStepProps } from '../EntityValuePickerStep';
+declare function EntityValuePickerStep({ step, editable, }: EntityValuePickerStepProps): JSX.Element;
 export default EntityValuePickerStep;
-declare function EntityValuePickerStep(props: EntityValuePickerStepProps): JSX.Element;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -45,46 +45,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-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, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useContext, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
-import styles from './MaterialEntityValuePickerStep.module.css';
 import StepComponent from '../../Step';
-import { useController, useFormContext } from 'react-hook-form';
-import { calcFillerSize } from '../../StepFunctions';
-import { SmartSelect } from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
 import widgetInstance from '../../../Utils/AxiosWidget';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function EntityValuePickerComponent(_a) {
-    var step = _a.step, error = _a.error, level = _a.level, value = _a.value, editable = _a.editable, inputRef = _a.inputRef, onBlur = _a.onBlur, onChange = _a.onChange, handleSizeChange = _a.handleSizeChange;
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+function EntityValuePickerStep(_a) {
+    var step = _a.step, editable = _a.editable;
     var form = useContext(FormContext);
-    var getValues = useFormContext().getValues;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _b = useState(level === 0
-        ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _b[0], setFillerSize = _b[1];
-    var sizeChange = function () {
-        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-        if (level === 0) {
-            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        }
-    };
-    var renderSelect = function () {
-        return (_jsx(SmartSelect, { onBlur: onBlur, error: error, onChange: onChange, level: level, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+    return (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
                 return option._id === value._id;
             }, calcDepError: function (steps) {
                 for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
@@ -94,48 +67,21 @@ function EntityValuePickerComponent(_a) {
                     }
                 }
                 return undefined;
-            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; } }));
-    };
-    var mapNestedOption = function () {
-        if (value) {
-            var currentOption = step.options[value._id];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
-                return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
-                        var subStep = form.steps[idStep];
-                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idStep));
-                    }) }));
-            }
-        }
-    };
-    if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
-        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
-            } }, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
-                        width: fillerSize,
-                    } }, "SEPARATOR"))] })));
-    }
-    else {
-        return (_jsxs(React.Fragment, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize && (_jsx("div", { className: styles.separator }))] }));
-    }
+            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                var currentOption = step.options[value._id];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
+                    return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
+                            var subStep = form.steps[idStep];
+                            return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                        }) }));
+                }
+                else
+                    return _jsx(_Fragment, {});
+            } }) })));
 }
 export default EntityValuePickerStep;
-function EntityValuePickerStep(props) {
-    var step = props.step, defaultValue = props.defaultValue;
-    var _a = useStepDependency(step, defaultValue), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }), _c = _b.field, ref = _c.ref, field = __rest(_c, ["ref"]), error = _b.fieldState.error;
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(EntityValuePickerComponent, __assign({}, props, field, { error: error, inputRef: ref, onChange: onChange })));
-}
 var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
     var urlPath, _i, _a, path, idEntityValue, currentValue, params, _b, _c, filter, currentValue, url, response;
     var _d, _e, _f, _g, _h;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.d.ts

@@ -14,5 +14,5 @@ export interface UploadedFileObject {
     downloadUrl?: string;
 }
 export declare function isUploadedFileObject(file: UploadedFileObject | FileObject): file is UploadedFileObject;
-declare function UploadStepComponent(props: FileUploadStepProps): JSX.Element;
-export default UploadStepComponent;
+declare function FileUploadStep({ step, editable }: FileUploadStepProps): JSX.Element;
+export default FileUploadStep;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -45,17 +45,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-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;
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -67,26 +56,34 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialFileUploadStep.module.css';
-import { useController, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
 import { getUploadUrls, postFile } from '../../../Services/FileService';
 import FileComponent from './FileComponent/FileComponent';
 import maxSize from '../../../constants/Files/FileMaxSize';
 import { useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 export function isUploadedFileObject(file) {
     return file.state === undefined && file.S3Key !== undefined;
 }
 function FileUploadStep(_a) {
-    var step = _a.step, value = _a.value, btnRef = _a.btnRef, onChange = _a.onChange, editable = _a.editable, fieldError = _a.fieldError;
+    var step = _a.step, editable = _a.editable;
+    var _b = useFormStep(step, {
+        rules: {
+            validate: function (array) {
+                return ((step.required && array.length > 0) || !step.required) &&
+                    array.find(function (file) { return !file.S3Key; }) === undefined;
+            },
+        },
+    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, fieldError = _b.error;
     var fetchDownloadUrl = useContext(CustomContext).fetchDownloadUrl;
-    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, idOrganization = _b.idOrganization, postview = _b.postview;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, idOrganization = _c.idOrganization, postview = _c.postview;
     var clearErrors = useFormContext().clearErrors;
-    var _c = useState(undefined), error = _c[0], setError = _c[1];
-    var _d = useState([]), fileChange = _d[0], setFileChange = _d[1];
+    var _d = useState(undefined), error = _d[0], setError = _d[1];
+    var _e = useState([]), fileChange = _e[0], setFileChange = _e[1];
     var inputRef = useRef();
     useEffect(function () {
         var filesToFetchLink = [];
@@ -210,7 +207,7 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable == false || postview
+    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable === false || postview
             ? {}
             : {
                 minHeight: '100px',
@@ -240,7 +237,7 @@ function FileUploadStep(_a) {
                         }
                         inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 var input = inputRef.current;
                                 if (input !== null) {
@@ -265,25 +262,4 @@ function FileUploadStep(_a) {
                         }
                     }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) })), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }))] })));
 }
-function UploadStepComponent(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        rules: {
-            validate: function (array) {
-                return ((props.step.required && array.length > 0) ||
-                    !props.step.required) &&
-                    array.find(function (file) { return !file.S3Key; }) === undefined;
-            },
-        },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }), _c = _b.field, ref = _c.ref, field = __rest(_c, ["ref"]), error = _b.fieldState.error;
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(FileUploadStep, __assign({}, props, field, { btnRef: ref, fieldError: error, onChange: onChange })));
-}
-export default UploadStepComponent;
+export default FileUploadStep;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -20,7 +20,7 @@ import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
 function MapperElementComponent(props) {
     var _a;
-    var level = props.level, step = props.step, element = props.element, editable = props.editable;
+    var step = props.step, element = props.element, editable = props.editable;
     var customContext = useContext(CustomContext);
     var form = useContext(FormContext);
     if (element.deleted) {
@@ -35,7 +35,7 @@ function MapperElementComponent(props) {
         return (_jsx(CustomContext.Provider, __assign({ value: nestedCustomContext }, { children: step.rootSteps.map(function (idSubStep) {
                 var _a;
                 var subStep = form.steps[element.ids[idSubStep]];
-                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep], level: level + 1 })));
+                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep] })));
             }) })));
     };
     switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -56,10 +56,10 @@ function MapperStep(_a) {
         name: step.id,
         rules: {
             validate: function (array) {
-                return (step.required &&
-                    array.filter(function (elem) { return !elem.deleted; })
-                        .length > 0) ||
-                    !step.required;
+                return !step.required ||
+                    (step.required &&
+                        array.filter(function (elem) { return !elem.deleted; })
+                            .length > 0);
             },
         },
         shouldUnregister: true,
@@ -122,7 +122,11 @@ function MapperStep(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    value.filter(function (elem) { return !elem.deleted; })
+                        .length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel +
+                            (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { RatingStepProps } from '../RatingStep';
-declare function RatingStep(props: RatingStepProps): JSX.Element;
+declare function RatingStep({ step, editable }: RatingStepProps): JSX.Element;
 export default RatingStep;

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -9,34 +9,26 @@ var __assign = (this && this.__assign) || function () {
     };
     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, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialRatingStep.module.css';
-import { useController, useFormContext } from 'react-hook-form';
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import Rating from '../../../Shared/Rating/Rating';
 import { RatingTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function MaterialRatingStep(_a) {
-    var _b, _c, _d, _e, _f;
-    var step = _a.step, value = _a.value, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable;
+import { useFormStep } from '../../StepHooks';
+function RatingStep(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, editable = _a.editable;
+    var _f = useFormStep(step, {
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error;
     var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var errors = useFormContext().formState.errors;
     var renderNestedOption = function () {
         var currentOption;
         if (value !== undefined && value !== null && step.nestedSteps) {
@@ -49,39 +41,19 @@ function MaterialRatingStep(_a) {
             if (currentOption && currentOption.length > 0) {
                 return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1 }, idSubStep));
+                        return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
                     }) }));
             }
         }
     };
     return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
                     paddingBottom: step.description || step.required ? 0 : 15,
-                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: inputRef }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
-                            color: !!errors[step.id] && value === null
+                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: ref }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
+                            color: !!error && value === null
                                 ? (_d = formStyle.errorColor) !== null && _d !== void 0 ? _d : '#cc2936'
                                 : (_e = formStyle.descriptionTextColor) !== null && _e !== void 0 ? _e : '#989898',
-                        } }, { children: !!errors[step.id] && value === null
-                            ? (_f = errors[step.id]) === null || _f === void 0 ? void 0 : _f.message
+                        } }, { children: !!error && value === null
+                            ? error === null || error === void 0 ? void 0 : error.message
                             : step.description })))] })), renderNestedOption()] }));
 }
-function RatingStep(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        shouldUnregister: true,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        defaultValue: originalValue,
-    }).field, ref = _b.ref, field = __rest(_b, ["ref"]);
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(MaterialRatingStep, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-            handleStepDep(value);
-            onChange(value);
-        } })));
-}
 export default RatingStep;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SelectorStepProps } from '../SelectorStep';
-declare function SelectorStep(props: SelectorStepProps): JSX.Element;
-export default SelectorStep;
+declare function SelectorStepContainer(props: SelectorStepProps): JSX.Element;
+export default SelectorStepContainer;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -9,59 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     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, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { OptionTypes } from '../../../constants/FormStepTypes';
-import styles from './MaterialSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
-import { useController, useFormContext } from 'react-hook-form';
 import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function Selector(_a) {
-    var step = _a.step, value = _a.value, level = _a.level, onBlur = _a.onBlur, editable = _a.editable, onChange = _a.onChange, handleSizeChange = _a.handleSizeChange, inputRef = _a.inputRef;
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function SelectorStep(_a) {
+    var _b, _c, _d;
+    var step = _a.step, editable = _a.editable;
+    var _e = useFormStep(step, {
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
     var form = useContext(FormContext);
-    var _b = useAppSelector(function (state) { return state.global; }), postview = _b.postview, formStyle = _b.formStyle;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _c = useFormContext(), getValues = _c.getValues, errors = _c.formState.errors;
-    var _d = useState(level === 0
-        ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _d[0], setFillerSize = _d[1];
-    var sizeChange = function () {
-        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-        if (level === 0) {
-            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        }
-    };
-    var renderSelect = function () {
-        var _a, _b, _c, _d;
-        return (_jsx("div", __assign({ className: styles.container, style: {
-                width: currentBreakPoint <= step.size
-                    ? '100%'
-                    : calcStepWidth(step.size, form.size),
-                minHeight: step.description ||
-                    (!postview && editable && step.required)
-                    ? '55px'
-                    : '43px',
-            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: step.options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
-                    onChange(value);
-                }, getOptionSelected: function (option, value) {
-                    return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
-                }, helperText: (_d = (_c = (_b = errors[step.id]) === null || _b === void 0 ? void 0 : _b.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!errors[step.id] }) })));
-    };
+    var _f = useAppSelector(function (state) { return state.global; }), postview = _f.postview, formStyle = _f.formStyle;
     var mapNestedOption = function () {
         var currentOptionIndex = null;
         var currentOption = null;
@@ -76,39 +44,15 @@ function Selector(_a) {
             currentOptionIndex !== null) {
             return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep) {
                     var subStep = form.steps[idSubStep];
-                    return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idSubStep));
+                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
                 }) }));
         }
     };
-    if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
-        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
-            } }, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
-                        width: fillerSize,
-                    } }))] })));
-    }
-    else {
-        return (_jsxs(React.Fragment, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize && (_jsx("div", { className: styles.separator }))] }));
-    }
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { value: value, inputRef: ref, handleUpdate: onChange, disabled: false, loading: false, options: step.options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_b = formStyle.stepBackgroundColor) !== null && _b !== void 0 ? _b : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: function (option, value) {
+                        return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_d = (_c = error === null || error === void 0 ? void 0 : error.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!error })) })), value && mapNestedOption()] }));
 }
-function SelectorStep(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }).field, ref = _b.ref, field = __rest(_b, ["ref"]);
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(Selector, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-            handleStepDep(value);
-            onChange(value);
-        } })));
+function SelectorStepContainer(props) {
+    return (_jsx(StepFillerContainer, __assign({ step: props.step }, { children: _jsx(SelectorStep, __assign({}, props)) })));
 }
-export default SelectorStep;
+export default SelectorStepContainer;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css

@@ -7,19 +7,3 @@
     padding-top: 5px;
     margin-bottom: 0px;
 }
-.separator {
-    flex-basis: 100%;
-    height: 0;
-}
-
-.firstLvlContainer {
-    max-width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.smallSeparator {
-    height: 0;
-    max-width: 100%;
-    flex-basis: 0;
-}