@arquimedes.co/eureka-forms 2.0.99 → 3.0.0-refactor

package/dist/Form/FormFunctions.test.js

@@ -0,0 +1,454 @@
+/* eslint-disable @typescript-eslint/require-await */
+import { ContentState, EditorState } from 'draft-js';
+import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
+import { calcDependencies, calcValue } from './FormFunctions';
+import { stringToDraft } from '../Utils/DraftFunctions';
+import { describe, expect, test } from 'vitest';
+describe('FormFunctions', function () {
+    describe('calcValue', function () {
+        test('Empty', async () => {
+            const value = calcValue('idStep', {}, {}, {}, [], undefined);
+            expect(value).toBeUndefined();
+        });
+        test('Custom Step', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: 'CUSTOM',
+                },
+            }, {}, {
+                CUSTOM: {
+                    calcValue: () => 'custom',
+                },
+            }, [], undefined);
+            expect(value).toBe('custom');
+            const value2 = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: 'CUSTOM',
+                },
+            }, {}, {
+                CUSTOM: {},
+            }, [], undefined);
+            expect(value2).toBeUndefined();
+        });
+        test('Base Step', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    size: 1,
+                },
+            }, {}, {}, [], 'Value');
+            expect(value).toBe('Value');
+        });
+        test('Textarea without editor', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    hasTextEditor: false,
+                },
+            }, {}, {}, [], 'Value');
+            expect(value.value).toBe('Value');
+            expect(value.draft.blocks[0].text).toBe('Value');
+        });
+        test('Textarea with editor', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    hasTextEditor: true,
+                },
+            }, {}, {}, [], EditorState.createWithContent(ContentState.createFromText('Value')));
+            expect(value.value).toBe('Value');
+            expect(value.draft.blocks[0].text).toBe('Value');
+        });
+        test('FileUpload', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.FILEUPLOAD,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                },
+            }, {}, {}, [], [
+                {
+                    S3Key: 'S3Key',
+                    fileName: 'fileName',
+                    extra: 'extra',
+                },
+            ]);
+            expect(value[0].S3Key).toBe('S3Key');
+            expect(value[0].extra).toBeUndefined();
+        });
+        test('ClassifierSelector', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.CLASSIFIER_SELECTOR,
+                },
+            }, {}, {}, [], {
+                value: 'value',
+                label: 'Label',
+            });
+            expect(value).toBe('value');
+        });
+        test('Selector', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.SELECTOR,
+                },
+            }, {}, {}, [], {
+                value: 'value',
+                label: 'Label',
+            });
+            expect(value).toBe('value');
+        });
+        test('TimePicker', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TIMEPICKER,
+                },
+            }, {}, {}, [], {
+                days: 0,
+                hours: 0,
+                minutes: 0,
+                working: true,
+            });
+            expect(value.days).toBe(0);
+            expect(value.hours).toBe(0);
+            expect(value.minutes).toBe(0);
+            expect(value.working).toBe(true);
+        });
+        test('Title', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TITLE,
+                },
+            }, {}, {}, deleteIds, null);
+            expect(value).toBeUndefined();
+        });
+        test('Collapsible', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.COLLAPSIBLE,
+                },
+            }, {}, {}, deleteIds, null);
+            expect(deleteIds[0]).toBe('idStep');
+            expect(value).toBeUndefined();
+        });
+        test('Mapper with deleted', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.MAPPER,
+                },
+            }, {}, {}, [], { elements: [{ deleted: true }], page: 0 });
+            expect(value.length).toBe(0);
+        });
+        test('Mapper', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.MAPPER,
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            type: FormStepTypes.TEXTINPUT,
+                        },
+                    },
+                },
+            }, {
+                mappedIdSubStep: 'subValue',
+            }, {}, deleteIds, {
+                elements: [
+                    {
+                        id: 'idElement',
+                        ids: {
+                            idSubStep: 'mappedIdSubStep',
+                        },
+                        originalValues: {
+                            original: 'Original',
+                        },
+                        value: 'value',
+                    },
+                ],
+                page: 0,
+            });
+            expect(value[0].id).toBe('idElement');
+            expect(value[0].original).toBe('Original');
+            expect(value[0].value).toBe('value');
+            expect(value[0].idSubStep).toBe('subValue');
+        });
+    });
+    describe('calcDependencies', function () {
+        test('Empty', async () => {
+            const dependencyStore = calcDependencies({}, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(0);
+        });
+        test('Basic Dependency', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps);
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTINPUT);
+        });
+        test('Basic Dependency with originalValue', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    idSection: 'FIRST',
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTINPUT);
+        });
+        test('Basic TextArea Dependency with originalValue with editor', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    idSection: 'FIRST',
+                    hasTextEditor: true,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: stringToDraft('Original'),
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTAREA);
+        });
+        test('Basic TextArea Dependency with originalValue without editor', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    idSection: 'FIRST',
+                    hasTextEditor: false,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTAREA);
+        });
+        test('Basic Dependency with missing originalValue', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idOriginal'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {},
+                global: { idOriginal: 'Original' },
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idOriginal.value).toBe('Original');
+            expect(dependencyStore.idOriginal.dependents.length).toBe(1);
+            expect(dependencyStore.idOriginal.type).toBe('ORIGINAL');
+        });
+        test('Missing Dependency', async () => {
+            const dependencyStore = calcDependencies({
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idMissingStep'],
+                },
+            }, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idMissingStep.value).toBeNull();
+            expect(dependencyStore.idMissingStep.dependents.length).toBe(1);
+            expect(dependencyStore.idMissingStep.type).toBe('MISSING');
+        });
+        test('Basic Dependency without dependents', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, { global: {}, sections: {} }, false);
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+        });
+        test('Double Basic Dependency', async () => {
+            const dependencyStore = calcDependencies({
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+                idStep3: {
+                    id: 'idStep3',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            }, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(2);
+        });
+        test('EntityValue Dependencies', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.ENTITYVALUEPICKER,
+                    path: [
+                        {
+                            type: EntityValueDataTypes.STEP,
+                            idStep: 'idStep',
+                        },
+                        {
+                            type: EntityValueDataTypes.VALUE,
+                        },
+                    ],
+                    filters: [
+                        {
+                            type: EntityValueDataTypes.STEP,
+                            idStep: 'idMissingStep',
+                        },
+                    ],
+                    dependencies: ['idMissingStep'],
+                    options: {},
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps);
+            expect(Object.keys(dependencyStore).length).toBe(2);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+        });
+        test('Mapper Dependencies', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    idSection: 'FIRST',
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.MAPPER,
+                    idSection: 'FIRST',
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            type: FormStepTypes.TEXTINPUT,
+                            idSection: 'FIRST',
+                            dependencies: ['idStep'],
+                        },
+                    },
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep2: {
+                            elements: [
+                                {
+                                    id: 'idElement',
+                                    ids: {
+                                        idSubStep: 'mappedIdSubStep',
+                                    },
+                                },
+                            ],
+                            page: 0,
+                        },
+                        mappedIdSubStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+        });
+    });
+});

package/dist/Form/FormHooks.js

@@ -2,41 +2,34 @@ import { useCallback, useLayoutEffect } from 'react';
 import { updateWidthStats } from '../States/WidthStatsSlice';
 import { useAppDispatch } from '../hooks';
 export function useWidthStats(containerRef, form, postview, internal) {
-    var calcWidthStats = useCallback(function (currentWidth) {
-        var currentBreakPoint = form.size.blockNum;
-        var padding = postview || internal || !form.isStandAlone ? 0 : 40;
-        while (currentWidth <
-            (form.size.blockSize + form.size.spacingSize) *
-                currentBreakPoint +
-                padding) {
+    const calcWidthStats = useCallback((currentWidth) => {
+        let currentBreakPoint = form.size.blockNum;
+        const padding = postview || internal || !form.isStandAlone ? 0 : 40;
+        while (currentWidth < (form.size.blockSize + form.size.spacingSize) * currentBreakPoint + padding) {
             currentBreakPoint--;
         }
         return {
-            isResponsive: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) *
-                    form.size.blockNum +
-                    padding,
-            isMobile: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) * 2 + padding,
-            currentBreakPoint: currentBreakPoint,
+            isResponsive: currentWidth < (form.size.blockSize + form.size.spacingSize) * form.size.blockNum + padding,
+            isMobile: currentWidth < (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+            currentBreakPoint,
         };
     }, [form, postview, internal]);
-    var dispatch = useAppDispatch();
+    const dispatch = useAppDispatch();
     /** Calcs the currentBreakPoint and if is mobile */
-    useLayoutEffect(function () {
-        var handleResize = function () {
-            var _a;
-            var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            const currentWidth = containerRef?.current?.offsetWidth;
             if (currentWidth !== undefined) {
-                var current = calcWidthStats(currentWidth);
+                const current = calcWidthStats(currentWidth);
                 dispatch(updateWidthStats(current));
             }
         };
         /** On load add a resize listener to calc the currentBreakpoint */
         window.addEventListener('resize', handleResize);
         handleResize();
-        return function () {
+        return () => {
             window.removeEventListener('resize', handleResize);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -1,61 +1,3 @@
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        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 { useCallback, useContext, useEffect, useState } from 'react';
 import styles from './ColumnForm.module.css';
@@ -66,60 +8,47 @@ import { useAppDispatch, useAppSelector } from '../../../hooks';
 import Section from '../../Section/Section';
 import CustomContext from '../../../Contexts/CustomContext';
 import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
-import FormContext from '../../../Contexts/FormContext';
+import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import { addPagedValues } from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
-import { IdFormContext } from '../../../App/App';
-function ColumnForm(_a) {
-    var _this = this;
-    var onSubmit = _a.onSubmit, customSubmitBtns = _a.customSubmitBtns, props = __rest(_a, ["onSubmit", "customSubmitBtns"]);
-    var _b = useState(false), loading = _b[0], setLoading = _b[1];
-    var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
-    var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
-    var sendLabel = useContext(CustomContext).sendLabel;
-    var form = useContext(FormContext);
-    var dispatch = useAppDispatch();
-    var idForm = useContext(IdFormContext);
-    var previous = useAppSelector(function (state) { return state.site.previousSections; });
-    var next = useAppSelector(function (state) { return state.site.nextSections; });
-    var idCurrent = useAppSelector(function (state) { return state.site.idCurrentSection; });
-    useEffect(function () {
+function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
+    const [loading, setLoading] = useState(false);
+    const { postview, editable, formStyle } = useAppSelector((state) => state.global);
+    const { trigger, getValues, handleSubmit } = useFormContext();
+    const { sendLabel } = useContext(CustomContext);
+    const form = useContext(FormContext);
+    const dispatch = useAppDispatch();
+    const idForm = useContext(IdFormContext);
+    const previous = useAppSelector((state) => state.site.previousSections);
+    const next = useAppSelector((state) => state.site.nextSections);
+    const idCurrent = useAppSelector((state) => state.site.idCurrentSection);
+    useEffect(() => {
         if (props.setSubmit)
             props.setSubmit(submit);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.setSubmit]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
-    var handleErrors = handleSubmit(function () { }, function (errors) {
+    const handleErrors = handleSubmit(() => { }, (errors) => {
         console.error('Errors:', errors);
     });
-    var submit = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var valid, values, state;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setLoading(true);
-                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
-                case 1:
-                    valid = _a.sent();
-                    /** Imprimir errores si no es valido */
-                    if (!valid) {
-                        handleErrors();
-                        return [2 /*return*/, setLoading(false)];
-                    }
-                    values = getValues();
-                    if (!idCurrent) return [3 /*break*/, 3];
-                    return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];
-                case 2:
-                    state = _a.sent();
-                    addPagedValues(form.steps, values, state.site.values.sections[idCurrent]);
-                    _a.label = 3;
-                case 3: return [4 /*yield*/, onSubmit(values)];
-                case 4:
-                    values = _a.sent();
-                    setLoading(false);
-                    return [2 /*return*/, values];
-            }
-        });
-    }); }, [form]);
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), previous.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), next.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsx(CustomBtn, { onClick: submit, width: "calc(100% - 70px)", label: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) }))), customSubmitBtns === null || customSubmitBtns === void 0 ? void 0 : customSubmitBtns(submit, loading)] }))] })));
+    const submit = useCallback(async () => {
+        setLoading(true);
+        const valid = await trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            void handleErrors();
+            return setLoading(false);
+        }
+        let values = getValues();
+        if (idCurrent) {
+            const state = await dispatch(getAppState({ idForm })).unwrap();
+            addPagedValues(form.steps, values, state.site.values.sections[idCurrent]);
+        }
+        values = await onSubmit(values);
+        setLoading(false);
+        return values;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [form]);
+    return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading)] }))] }));
 }
 export default ColumnForm;