@arquimedes.co/eureka-forms 1.9.134 → 2.0.1-test

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -20,21 +20,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
 import styles from './MaterialClassifierSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { Controller } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
-import RoundedSmartSelect from '../../../shared/RoundedSmartSelect/RoundedSmartSelect';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useStepDependency } from '../../StepHooks';
 function ClassifierSelector(_a) {
     var _b, _c;
-    var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, inputRef = _a.inputRef, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "editable", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
-    var _d = useState(level === 0
+    var step = _a.step, level = _a.level, value = _a.value, onBlur = _a.onBlur, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, handleSizeChange = _a.handleSizeChange;
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, preview = _d.preview;
+    var form = useContext(FormContext);
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var _e = useFormContext(), getValues = _e.getValues, errors = _e.formState.errors;
+    var _f = useState(level === 0
         ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _d[0], setFillerSize = _d[1];
+        : 0), fillerSize = _f[0], setFillerSize = _f[1];
     if (!step.idClassifier) {
         return _jsx("div", {});
     }
@@ -52,7 +58,7 @@ function ClassifierSelector(_a) {
         var classifier = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier];
         return {
             value: classifier === null || classifier === void 0 ? void 0 : classifier._id,
-            label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && others.preview
+            label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && preview
                 ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
                 : classifier === null || classifier === void 0 ? void 0 : classifier.name,
         };
@@ -64,9 +70,9 @@ function ClassifierSelector(_a) {
         }
     };
     var renderSelect = function () {
-        var _a;
+        var _a, _b, _c, _d;
         return (_jsx("div", __assign({ className: styles.container, style: {
-                width: widthStats.currentBreakPoint <= step.size
+                width: currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description ||
@@ -78,9 +84,7 @@ function ClassifierSelector(_a) {
                     sizeChange();
                 }, getOptionSelected: function (option, value) {
                     return option.value === (value === null || value === void 0 ? void 0 : value.value);
-                }, helperText: errors[step.id]
-                    ? errors[step.id].message
-                    : step.description, error: !!errors[step.id] }) }), step.id));
+                }, 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] }) }), step.id));
     };
     var mapNestedOption = function () {
         if (value) {
@@ -88,18 +92,14 @@ function ClassifierSelector(_a) {
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
                 return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
                         var subStep = form.steps[idStep];
-                        return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, control: control, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
-                                sizeChange();
-                            } })));
+                        return (_jsx(StepComponent, { step: subStep, level: level + 1, editable: editable, handleSizeChange: sizeChange }, idStep));
                     }) }));
             }
         }
     };
     if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: widthStats.currentBreakPoint <= step.size
-                    ? '100%'
-                    : 'fit-content',
+                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"))] })));
@@ -110,12 +110,19 @@ function ClassifierSelector(_a) {
 }
 export default ClassifierSelectorStep;
 function ClassifierSelectorStep(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: "", rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(ClassifierSelector, __assign({}, props, field, { inputRef: ref })));
-        } }));
+    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(ClassifierSelector, __assign({}, props, field, { inputRef: ref, onChange: onChange })));
 }

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.d.ts

@@ -5,5 +5,5 @@ export interface CollapsibleStepProps extends StepProps {
     /** The CollapsibleStep to display */
     step: Collapsible;
 }
-declare function CollapsibleStep({ step, formStyle, ...others }: CollapsibleStepProps): JSX.Element;
+declare function CollapsibleStep({ step, ...others }: CollapsibleStepProps): JSX.Element;
 export default CollapsibleStep;

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.js

@@ -21,16 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
 function CollapsibleStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle, others = __rest(_a, ["step", "formStyle"]);
+    var step = _a.step, others = __rest(_a, ["step"]);
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     if (step.steps.length === 0)
         return _jsx(_Fragment, {});
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return (_jsx(MaterialCollapsibleStep, __assign({ step: step, formStyle: formStyle }, others)));
+            return _jsx(MaterialCollapsibleStep, __assign({ step: step }, others));
         }
     }
 }

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

@@ -22,20 +22,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import styles from './MaterialCollapsibleStep.module.css';
-import { Controller } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import StepComponent from '../../Step';
 import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
 import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+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, formStyle = _a.formStyle, widthStats = _a.widthStats, form = _a.form, errors = _a.errors, clearErrors = _a.clearErrors, others = __rest(_a, ["step", "open", "setOpen", "formStyle", "widthStats", "form", "errors", "clearErrors"]);
+    var step = _a.step, open = _a.open, setOpen = _a.setOpen, level = _a.level, others = __rest(_a, ["step", "open", "setOpen", "level"]);
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
+    var errors = useFormContext().formState.errors;
     var contentRef = React.useRef(null);
     useEffect(function () {
         var _a;
         if (!open && ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.find(function (dep) { return !!errors[dep]; }))) {
-            setOpen('TRUE');
+            setOpen(true);
         }
     }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return errors[dep]; })) !== null && _c !== void 0 ? _c : []);
     return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
@@ -53,23 +58,23 @@ 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, { clearErrors: clearErrors, errors: errors, formStyle: formStyle, form: form, widthStats: widthStats, step: subStep, key: idSubStep, handleSizeChange: function () { } })));
+                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep, level: level + 1 })));
                     }) })) })), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
                 } })] }));
 }
 function CollapsibleStep(props) {
-    var _a, _b;
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: ((_b = (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : props.step.defaultValue) !== null && _b !== void 0 ? _b : props.postview)
-            ? false
-            : true, render: function (_a) {
+    var _a;
+    var postview = useAppSelector(function (state) { return state.global; }).postview;
+    var _b = useFormContext(), clearErrors = _b.clearErrors, errors = _b.formState.errors;
+    return (_jsx(Controller, { name: props.step.id, defaultValue: ((_a = props.step.defaultValue) !== null && _a !== void 0 ? _a : postview) ? false : true, render: function (_a) {
             var _b = _a.field, value = _b.value, onChange = _b.onChange;
             return (_jsx(Collapsible, __assign({}, props, { open: value, setOpen: function (open) {
                     var _a;
                     if (!open) {
-                        var deps = (_a = props.step.dependencies) === null || _a === void 0 ? void 0 : _a.filter(function (dep) { return !!props.errors[dep]; });
+                        var deps = (_a = props.step.dependencies) === null || _a === void 0 ? void 0 : _a.filter(function (dep) { return !!errors[dep]; });
                         if (deps)
-                            props.clearErrors(deps);
+                            clearErrors(deps);
                     }
                     onChange(open);
                 } })));

package/dist/FormSteps/CustomStep.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { UseFormReturn } from 'react-hook-form';
+import { StepProps } from './Step';
+import { Form } from '../@Types';
+import { GlobalState } from '../States/GlobalStateReducer';
+export interface CustomStepProps extends StepProps, UseFormReturn, GlobalState {
+    form: Form;
+    customStepProps: Record<string, any>;
+}
+export interface CustomStep {
+    componentProps?: Record<string, any>;
+    component: (props: CustomStepProps) => JSX.Element;
+    calcValue?: (step: any, value: any) => any;
+    /** Function to change custom steps nested step ids to the generated ones. */
+    calcRecursiveData?: (step: any, ids: Record<string, string>) => void;
+    calcDependencyValue?: (step: any, value: any) => any;
+}
+interface CustomStepComponentProps extends StepProps {
+    customStep: CustomStep;
+}
+declare function CustomStepComponent({ customStep, ...props }: CustomStepComponentProps): JSX.Element;
+export default CustomStepComponent;

package/dist/FormSteps/CustomStep.js

@@ -0,0 +1,37 @@
+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 { useFormContext } from 'react-hook-form';
+import FormContext from '../Contexts/FormContext';
+import { useAppSelector } from '../hooks';
+import CustomStepPropsContext from '../Contexts/CustomContext';
+import { useContext } from 'react';
+function CustomStepComponent(_a) {
+    var _b;
+    var customStep = _a.customStep, props = __rest(_a, ["customStep"]);
+    var form = useContext(FormContext);
+    var global = useAppSelector(function (state) { return state.global; });
+    var customStepProps = useContext(CustomStepPropsContext);
+    var formController = useFormContext();
+    return customStep.component(__assign(__assign(__assign(__assign(__assign({}, props), formController), { form: form, customStepProps: customStepProps }), global), ((_b = customStep.componentProps) !== null && _b !== void 0 ? _b : {})));
+}
+export default CustomStepComponent;

package/dist/FormSteps/DatePickerStep/DatePickerStep.js

@@ -12,8 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialDatePickerStep from './MaterialDatePickerStep/MaterialDatePickerStep';
+import { useAppSelector } from '../../hooks';
 function DatePickerStep(props) {
-    switch (props.formStyle.type) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             return _jsx(MaterialDatePickerStep, __assign({}, props));

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DatePickerStepProps } from '../DatePickerStep';
-declare function DatePickerStep({ step, form, errors, control, editable, postview, formStyle, widthStats, defaultValue, }: DatePickerStepProps): JSX.Element;
+declare function DatePickerStep({ step, editable, defaultValue, }: DatePickerStepProps): JSX.Element;
 export default DatePickerStep;

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

@@ -22,27 +22,39 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialDatePickerStep.module.css';
-import { Controller } from 'react-hook-form';
-import RoundedDatePicker from '../../../shared/RoundedDatePicker/RoundedDatePicker';
+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';
 function DatePickerStep(_a) {
-    var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, _b = _a.defaultValue, defaultValue = _b === void 0 ? null : _b;
+    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,
+        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: widthStats.currentBreakPoint <= step.size
+            width: currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form.size),
             minHeight: step.description || (!postview && editable && step.required)
                 ? '55px'
                 : '43px',
-        } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: defaultValue, rules: {
-                required: step.required
-                    ? 'Este campo es obligatorio'
-                    : undefined,
-            }, shouldUnregister: true, render: function (_a) {
-                var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-                return (_jsx(RoundedDatePicker, __assign({}, field, { 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: errors[step.id]
-                        ? errors[step.id].message
-                        : step.description, error: !!errors[step.id], required: step.required })));
-            } }) })));
+        } }, { 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 })) })));
 }
 export default DatePickerStep;

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

@@ -11,5 +11,5 @@ export interface EntityValuePickerStepProps extends StepProps {
     /** Default value to display */
     defaultValue?: Date | null;
 }
-declare function EntityValuePickerStep({ ...props }: EntityValuePickerStepProps): JSX.Element;
+declare function EntityValuePickerStep(props: EntityValuePickerStepProps): JSX.Element;
 export default EntityValuePickerStep;

package/dist/FormSteps/EntityValueStep/EntityValuePickerStep.js

@@ -9,23 +9,13 @@ 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 { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialEntityValuePickerStep from './MaterialEntityValuePickerStep/MaterialEntityValuePickerStep';
-function EntityValuePickerStep(_a) {
-    var props = __rest(_a, []);
-    switch (props.formStyle.type) {
+function EntityValuePickerStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             return _jsx(MaterialEntityValuePickerStep, __assign({}, props));