@arquimedes.co/eureka-forms 0.2.28 → 0.2.31-test

package/dist/App.d.ts

@@ -19,6 +19,8 @@ export interface AppProps {
     valuesData?: Record<string, unknown>;
     /** Custom steps to display */
     customSteps?: Record<string, CustomStep>;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
 }
 export interface CustomStep {
     component: ReactNode;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../Form';
-declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, originalValues, }: FormComponentProps): JSX.Element;
+declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, originalValues, ...others }: FormComponentProps): JSX.Element;
 export default ColumnForm;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -45,6 +45,17 @@ 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 { useEffect, useState } from 'react';
 import SectionComponent from '../../Section/Section';
@@ -59,7 +70,7 @@ import axios from 'axios';
 import axiosInstance from '../../../AxiosAPI';
 function ColumnForm(_a) {
     var _this = this;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, originalValues = _a.originalValues;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "originalValues"]);
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
     var _c = useForm({
         defaultValues: mapOriginal(originalValues, form),
@@ -83,10 +94,11 @@ function ColumnForm(_a) {
             switch (_c.label) {
                 case 0:
                     if (!(apiKey || internal)) return [3 /*break*/, 8];
-                    return [4 /*yield*/, trigger()];
+                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
                 case 1:
                     valid = _c.sent();
                     values = getValues();
+                    console.log(values);
                     if (!!valid) return [3 /*break*/, 2];
                     console.log('ERRORS:', errors);
                     setTempError(true);
@@ -101,8 +113,8 @@ function ColumnForm(_a) {
                         idStep = _a[_i];
                         updateValue(idStep, values, form, customSteps);
                     }
+                    console.log('UPDATED:', values);
                     url = "https://" + domain + ".forms." + process.env.REACT_APP_DOMAIN + "/api/ticket?apiKey=" + (internal ? form.apiKey : apiKey) + "&domain=" + domain;
-                    console.log(values);
                     payload = {
                         formValues: { steps: values },
                     };
@@ -133,7 +145,7 @@ function ColumnForm(_a) {
     return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }, void 0), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
                     reload();
                     setShowConfirmation(undefined);
-                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, { form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, index)); }), form.terms &&
+                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, others), index)); }), form.terms &&
                 !internal &&
                 form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "login__submit", className: styles.submitBtn, onClick: function () {
                         onSubmit();
@@ -201,6 +213,14 @@ var updateValue = function (idStep, values, form, customSteps) {
             }
             break;
         }
+        case Types.FILEUPLOAD: {
+            var value = values[step.id];
+            values[step.id] = value.map(function (val) { return ({
+                fileName: val.fileName,
+                S3Key: val.S3Key,
+            }); });
+            break;
+        }
         default:
             var custom = customSteps[idStep];
             if (custom !== undefined) {

package/dist/FormComponents/Form/Form.d.ts

@@ -17,6 +17,8 @@ export interface FormComponentProps {
     formStyle: FormStyle;
     domain?: string;
     apiKey: string | undefined;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
 }
 declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle'> & {
     containerRef: any;

package/dist/FormComponents/Section/Section.d.ts

@@ -15,6 +15,8 @@ export interface RecursiveData {
     getValues: UseFormGetValues<FieldValues>;
     originalValues: Record<string, any>;
     customSteps: Record<string, CustomStep>;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
 }
 export interface SectionComponentProps extends RecursiveData {
     section: Section;

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -31,7 +31,7 @@ import StepComponent from '../../Step';
 import { Controller } from 'react-hook-form';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 function ClassifierSelector(_a) {
-    var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
+    var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, 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", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
     var _b = useState(level === 0 ? calcFillerSize(step, form.steps, getValues(), form) : 0), fillerSize = _b[0], setFillerSize = _b[1];
     if (!step.idClassifier) {
         return _jsx("div", {}, void 0);
@@ -56,7 +56,7 @@ function ClassifierSelector(_a) {
             } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
-                }, helperText: errors[step.id]
+                }, inputRef: inputRef, helperText: errors[step.id]
                     ? errors[step.id].message
                     : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '' }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
                         .filter(function (classifier) {
@@ -100,6 +100,6 @@ function ClassifierSelectorStep(props) {
                 : undefined,
         }, shouldUnregister: true, render: function (_a) {
             var field = _a.field;
-            return (_jsx(ClassifierSelector, __assign({}, props, { value: field.value, onChange: field.onChange, onBlur: field.onBlur }), void 0));
+            return (_jsx(ClassifierSelector, __assign({}, props, { inputRef: field.ref, value: field.value, onChange: field.onChange, onBlur: field.onBlur }), void 0));
         } }, void 0));
 }

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { showIcon: step.showIcon, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { FileObj } from '../MaterialFileUploadStep';
+import { FileObject, UploadedFileObject } from '../MaterialFileUploadStep';
 import { FormStyle } from '../../../../../@Types/Form';
 interface FileComponentProps {
-    fileInfo: FileObj;
-    handleUploaded: Function;
-    handleRemoveUploaded: Function;
+    file: FileObject | UploadedFileObject;
     formStyle: FormStyle;
+    error: boolean;
+    handleRemove: Function;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
 }
-declare function FileUploadComponent({ fileInfo, formStyle, handleUploaded, handleRemoveUploaded, }: FileComponentProps): JSX.Element;
+declare function FileUploadComponent({ file, formStyle, error, handleRemove, fetchDownloadUrl, }: FileComponentProps): JSX.Element;
 export default FileUploadComponent;

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.js

@@ -46,65 +46,78 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { postFile } from '../../../../../controllers/FileService';
 import styles from './FileComponent.module.css';
 import ClearRoundedIcon from '@material-ui/icons/ClearRounded';
 import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 import Loader from '../../../../../shared/Loader/Loader';
-var timeout = function (ms) {
-    return new Promise(function (resolve) { return setTimeout(resolve, ms); });
-};
+import { useState } from 'react';
 function FileUploadComponent(_a) {
     var _this = this;
-    var fileInfo = _a.fileInfo, formStyle = _a.formStyle, handleUploaded = _a.handleUploaded, handleRemoveUploaded = _a.handleRemoveUploaded;
-    var _b = useState(undefined), file = _b[0], setFile = _b[1];
-    var uploadFile = function (file) { return __awaiter(_this, void 0, void 0, function () {
-        var resp, error_1;
+    var _b;
+    var file = _a.file, formStyle = _a.formStyle, error = _a.error, handleRemove = _a.handleRemove, fetchDownloadUrl = _a.fetchDownloadUrl;
+    var _c = useState(false), downloading = _c[0], setDownloading = _c[1];
+    if (!file) {
+        return _jsx("div", {}, void 0);
+    }
+    var downloadFile = function () { return __awaiter(_this, void 0, void 0, function () {
+        var fileUrl, a, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    setFile(__assign(__assign({}, file), { loading: 'UPLOADING' }));
-                    return [4 /*yield*/, Promise.all([
-                            postFile(file.file, file.postInfo),
-                            timeout(1000),
-                        ])];
+                    if (!(fetchDownloadUrl && file.S3Key && file.fileName)) return [3 /*break*/, 4];
+                    _a.label = 1;
                 case 1:
-                    resp = _a.sent();
-                    setFile(__assign(__assign({}, file), { loading: 'DONE', postInfo: resp[0] }));
-                    handleUploaded(resp[0]);
-                    return [3 /*break*/, 3];
+                    _a.trys.push([1, 3, , 4]);
+                    setDownloading(true);
+                    return [4 /*yield*/, fetchDownloadUrl(file.S3Key, file.fileName)];
                 case 2:
+                    fileUrl = _a.sent();
+                    a = document.createElement('a');
+                    a.href = fileUrl;
+                    a.setAttribute('download', file.fileName);
+                    a.click();
+                    setDownloading(false);
+                    return [3 /*break*/, 4];
+                case 3:
                     error_1 = _a.sent();
                     console.error(error_1);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
-    useEffect(function () {
-        if (fileInfo.loading === 'TRY_UPLOADING' && !file) {
-            uploadFile(fileInfo);
-        }
-    }, [fileInfo]);
     var calcIcon = function () {
-        switch (file ? file.loading : fileInfo.loading) {
-            case 'STARTING':
-            case 'TRY_UPLOADING':
-                return _jsx("div", { className: styles.waitingForUpload }, void 0);
-            case 'UPLOADING':
-                return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }, void 0) }), void 0));
-            case 'DONE':
-                return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}, void 0) }), void 0));
-            default:
-                return _jsx("div", {}, void 0);
+        if (downloading) {
+            return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }, void 0) }), void 0));
+        }
+        else if (file.state !== undefined) {
+            switch (file.state) {
+                case 'STARTING':
+                case 'UPLOADING':
+                    return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }, void 0) }), void 0));
+                case 'DONE':
+                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}, void 0) }), void 0));
+                case 'ERROR':
+                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.errorColor } }, { children: _jsx(ErrorRoundedIcon, {}, void 0) }), void 0));
+                default:
+                    return _jsx("div", {}, void 0);
+            }
+        }
+        else {
+            return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}, void 0) }), void 0));
         }
     };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.iconContainer }, { children: calcIcon() }), void 0), _jsx("div", __assign({ className: styles.label }, { children: file ? file.file.name : fileInfo.file.name }), void 0), _jsx("div", __assign({ className: styles.deletBtn, onClick: function () {
-                    if (file && file.loading === 'DONE') {
-                        handleRemoveUploaded(fileInfo.postInfo);
+    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.iconContainer }, { children: calcIcon() }), void 0), _jsx("div", __assign({ className: fetchDownloadUrl && file.S3Key
+                    ? styles.downloadableLbl
+                    : styles.label, style: {
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }, onClick: function () {
+                    if (fetchDownloadUrl !== undefined && file.S3Key) {
+                        downloadFile();
                     }
-                } }, { children: file && file.loading === 'DONE' && (_jsx(ClearRoundedIcon, { fontSize: "inherit" }, void 0)) }), void 0)] }), void 0));
+                } }, { children: (_b = file.file.name) !== null && _b !== void 0 ? _b : file.fileName }), void 0), _jsx("div", __assign({ className: styles.deletBtn, onClick: function () {
+                    handleRemove();
+                } }, { children: file.state !== undefined && (_jsx(ClearRoundedIcon, { fontSize: "inherit" }, void 0)) }), void 0)] }), void 0));
 }
 export default FileUploadComponent;

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -14,14 +14,21 @@
     height: 30px;
 }
 
-.label {
+.label,
+.downloadableLbl {
     font-size: 1rem;
     margin-left: 2px;
     cursor: default;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: calc(100% - 70px);
+    max-width: calc(100% - 80px);
+}
+.downloadableLbl {
+    cursor: pointer;
+}
+.downloadableLbl:hover {
+    text-decoration: underline;
 }
 .deletBtn {
     font-size: 26px;
@@ -46,6 +53,7 @@
 .iconContainer {
     height: 30px;
     width: 30px;
+    margin-left: 10px;
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 import { FileUploadStepProps } from '../FileUploadStep';
-export interface FileObj {
-    loading: 'STARTING' | 'TRY_UPLOADING' | 'UPLOADING' | 'DONE';
+export interface FileObject {
+    state: 'STARTING' | 'UPLOADING' | 'DONE' | 'CANCEL' | 'ERROR';
     file: File;
-    postInfo?: any;
+    postInfo: any;
+    fileName?: string;
+    S3Key?: string;
+    error?: boolean;
 }
-export interface UploadedFileObj {
-    lblFile: string;
-    name: string;
+export interface UploadedFileObject {
+    fileName: string;
+    S3Key: string;
 }
 declare function UploadStepComponent(props: FileUploadStepProps): JSX.Element;
 export default UploadStepComponent;

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -60,106 +60,197 @@ import { Controller } from 'react-hook-form';
 import RoundedButton from '../../../../shared/RoundedButton/RoundedButton';
 import { useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../../constants/Files/FileExtensions';
-import maxFileSize from '../../../../constants/Files/FileMaxSize';
-import { getUploadUrls } from '../../../../controllers/FileService';
+import { getUploadUrls, postFile } from '../../../../controllers/FileService';
 import FileComponent from './FileComponent/FileComponent';
+import maxSize from '../../../../constants/Files/FileMaxSize';
 function FileUploadStep(_a) {
-    var _b;
-    var step = _a.step, errors = _a.errors, postview = _a.postview, onChange = _a.onChange, formStyle = _a.formStyle, domain = _a.domain, clearErrors = _a.clearErrors, originalValues = _a.originalValues;
-    var _c = useState(((_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : []).map(function (file) {
-        var _a;
-        return ((_a = {
-            file: new File([], file.lblFile),
-            loading: 'DONE',
-        }) !== null && _a !== void 0 ? _a : []);
-    })), files = _c[0], setFiles = _c[1];
-    var _d = useState(undefined), fileUploaded = _d[0], setFileUploaded = _d[1];
-    var _e = useState([]), uploadedFiles = _e[0], setUploadedFiles = _e[1];
+    var step = _a.step, errors = _a.errors, value = _a.value, domain = _a.domain, btnRef = _a.btnRef, postview = _a.postview, onChange = _a.onChange, formStyle = _a.formStyle, clearErrors = _a.clearErrors, fetchDownloadUrl = _a.fetchDownloadUrl;
+    var _b = useState(undefined), error = _b[0], setError = _b[1];
+    var _c = useState([]), fileChange = _c[0], setFileChange = _c[1];
     var inputRef = useRef();
     useEffect(function () {
-        if (fileUploaded) {
-            var tempArray = __spreadArray(__spreadArray([], uploadedFiles, true), [fileUploaded], false);
-            onChange(tempArray);
-            clearErrors(step.id);
-            setUploadedFiles(tempArray);
+        var filesToFetchLink = [];
+        var filesChanged = [];
+        for (var _i = 0, fileChange_1 = fileChange; _i < fileChange_1.length; _i++) {
+            var file = fileChange_1[_i];
+            if (file.state === 'STARTING') {
+                filesToFetchLink.push(file);
+            }
+            if (file.state === 'UPLOADING') {
+                uploadFile(file);
+                filesChanged.push(file);
+            }
+            if (file.state === 'DONE' ||
+                file.state === 'ERROR') {
+                filesChanged.push(file);
+            }
+            if (file.state === 'CANCEL') {
+                var newValue = __spreadArray([], value, true);
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue.splice(i, 1);
+                        break;
+                    }
+                }
+                onChange(newValue);
+            }
+        }
+        if (filesChanged.length > 0) {
+            var newValue = __spreadArray([], value, true);
+            for (var _a = 0, filesChanged_1 = filesChanged; _a < filesChanged_1.length; _a++) {
+                var file = filesChanged_1[_a];
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue[i] = file;
+                    }
+                }
+            }
+            onChange(newValue);
+        }
+        if (filesToFetchLink.length > 0) {
+            getLinks(filesToFetchLink);
+            onChange(__spreadArray(__spreadArray([], value, true), filesToFetchLink, true));
         }
-    }, [fileUploaded]);
-    function getUploadUrlsAsync(pFiles) {
+    }, [fileChange]);
+    function getLinks(pFiles) {
         return __awaiter(this, void 0, void 0, function () {
-            var largeFile, currentFiles, fileLinks_1, error_1;
+            var fileLinks_1, errorsExt_1, error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        largeFile = pFiles.find(function (file) { return file.size > maxFileSize; });
-                        if (!largeFile) return [3 /*break*/, 1];
-                        console.error('FILE IS TOO LARGE', largeFile);
-                        return [3 /*break*/, 5];
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, getUploadUrls(pFiles.map(function (file) { return file.file; }), domain)];
                     case 1:
-                        currentFiles = __spreadArray([], files, true);
-                        setFiles(__spreadArray(__spreadArray([], files, true), pFiles.map(function (file) {
-                            return ({
-                                loading: 'STARTING',
-                                file: file,
-                                postInfo: null,
-                            });
-                        }), true));
-                        _a.label = 2;
-                    case 2:
-                        _a.trys.push([2, 4, , 5]);
-                        return [4 /*yield*/, getUploadUrls(pFiles, domain)];
-                    case 3:
                         fileLinks_1 = _a.sent();
-                        setFiles(__spreadArray(__spreadArray([], currentFiles, true), pFiles.map(function (file, index) {
-                            return ({
-                                postInfo: fileLinks_1[index],
-                                loading: 'TRY_UPLOADING',
-                                file: file,
-                            });
-                        }), true));
-                        return [3 /*break*/, 5];
-                    case 4:
+                        errorsExt_1 = [];
+                        setFileChange(pFiles.map(function (file, index) {
+                            var _a;
+                            if (fileLinks_1[index] === 'ERROR:INVALIDEXTENSION') {
+                                errorsExt_1.push((_a = file.file.name.split('.').pop()) !== null && _a !== void 0 ? _a : '');
+                                return __assign(__assign({}, file), { state: 'ERROR' });
+                            }
+                            else {
+                                return __assign(__assign({}, file), { state: 'UPLOADING', postInfo: fileLinks_1[index] });
+                            }
+                        }));
+                        if (errorsExt_1.length === 1) {
+                            setError('La extención .' + errorsExt_1[0] + ' no es válida');
+                        }
+                        else if (errorsExt_1.length > 1) {
+                            setError('Las extenciónes .' +
+                                errorsExt_1.join(',.') +
+                                ' no son válidas');
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
                         error_1 = _a.sent();
-                        console.error('ERROR');
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
+                        console.error(error_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function uploadFile(pFile) {
+        return __awaiter(this, void 0, void 0, function () {
+            var resp, error_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, Promise.all([
+                                postFile(pFile.file, pFile.postInfo),
+                                new Promise(function (resolve) { return setTimeout(resolve, 1000); }),
+                            ])];
+                    case 1:
+                        resp = _a.sent();
+                        setFileChange([__assign(__assign(__assign({}, pFile), { state: 'DONE' }), resp[0])]);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_2 = _a.sent();
+                        console.error(error_2);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
                 }
             });
         });
     }
+    var calcErrorMsg = function () {
+        if (!!errors[step.id]) {
+            var errNum = value.filter(function (val) { return val.state === 'ERROR'; }).length;
+            if (errNum === 1) {
+                return 'Este archivo no es válido';
+            }
+            else if (errNum > 1) {
+                return 'Estos archivos no son válidos';
+            }
+            else {
+                return 'Este campo es obligatorio';
+            }
+        }
+        return '';
+    };
     return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);
-                        getUploadUrlsAsync(filesArray);
+                        var maxFiles = filesArray.filter(function (file) { return file.size > maxSize; });
+                        if (maxFiles.length > 0) {
+                            setError('El tamaño máximo de carga es de 30Mb.');
+                        }
+                        else {
+                            setFileChange(filesArray
+                                .filter(function (file) {
+                                return value.find(function (val) {
+                                    return val.file ===
+                                        file;
+                                }) === undefined;
+                            })
+                                .map(function (file) {
+                                return ({
+                                    state: 'STARTING',
+                                    file: file,
+                                    postInfo: null,
+                                });
+                            }));
+                        }
+                        inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }, void 0), _jsx("div", __assign({ className: styles.btnContainer }, { children: _jsx(RoundedButton, { disabled: postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
-                        if (!postview) {
-                            var input = inputRef.current;
-                            if (input !== null) {
-                                clearErrors(step.id);
-                                input.click();
+                }, multiple: true, accept: getAcceptedExtensions() }, void 0), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }, void 0), _jsx(RoundedButton, { disabled: postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                            if (!postview) {
+                                var input = inputRef.current;
+                                if (input !== null) {
+                                    clearErrors(step.id);
+                                    setError(undefined);
+                                    input.click();
+                                }
                             }
+                        } }, void 0)] }), void 0), _jsx("div", __assign({ className: styles.filesContainer }, { children: value.map(function (file, index) { return (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!errors[step.id] &&
+                        file.state !== 'DONE') ||
+                        file.state === 'ERROR', handleRemove: function () {
+                        if (value.filter(function (val) {
+                            return val.state === 'ERROR';
+                        }).length === 1) {
+                            clearErrors(step.id);
+                            setError(undefined);
                         }
-                    } }, void 0) }), void 0), !!errors[step.id] && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" }), void 0)), _jsx("div", __assign({ className: styles.filesContainer }, { children: files.map(function (file, index) { return (_jsx(FileComponent, { formStyle: formStyle, fileInfo: file, handleRemoveUploaded: function (fileToDelete) {
-                        var tempArray = uploadedFiles.filter(function (file) { return file.name !== fileToDelete.name; });
-                        var tempFiles = files.filter(function (file) {
-                            return file.postInfo.name !== fileToDelete.name;
-                        });
-                        setFiles(tempFiles);
-                        onChange(tempArray);
-                        setUploadedFiles(tempArray);
-                    }, handleUploaded: function (info) {
-                        setFileUploaded(info);
-                    } }, index)); }) }), void 0)] }), void 0));
+                        if (file.state !== undefined) {
+                            setFileChange([
+                                __assign(__assign({}, file), { state: 'CANCEL' }),
+                            ]);
+                        }
+                    }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) }), void 0), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }), void 0)] }), void 0));
 }
 function UploadStepComponent(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: props.step.required
-            ? {
-                validate: function (array) { return array.length > 0; },
-            }
-            : {}, shouldUnregister: true, render: function (_a) {
+    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: {
+            validate: function (array) {
+                return ((props.step.required && array.length > 0) ||
+                    !props.step.required) &&
+                    array.find(function (file) { return !file.S3Key; }) === undefined;
+            },
+        }, shouldUnregister: true, render: function (_a) {
             var field = _a.field;
-            return (_jsx(FileUploadStep, __assign({}, props, { onChange: field.onChange }), void 0));
+            return (_jsx(FileUploadStep, __assign({}, props, { btnRef: field.ref, onChange: field.onChange, value: field.value }), void 0));
         } }, void 0));
 }
 export default UploadStepComponent;

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -32,14 +32,22 @@
 .btnContainer {
     margin-top: 5px;
     margin-left: 10px;
+    margin-bottom: 3px;
     width: fit-content;
 }
 .errorMsg {
     font-size: 0.75rem;
-    margin-top: 7px;
+    margin-top: 5px;
     margin-left: 14px;
 }
 
 .filesContainer {
     padding-top: 5px;
 }
+
+.hiddenInput {
+    height: 0;
+    width: 0;
+    padding: 0;
+    border-width: 0;
+}

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -31,7 +31,7 @@ import StepComponent from '../../Step';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import { Controller } from 'react-hook-form';
 function Selector(_a) {
-    var step = _a.step, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors"]);
+    var step = _a.step, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, inputRef = _a.inputRef, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors", "inputRef"]);
     var _b = useState(level === 0 ? calcFillerSize(step, form.steps, getValues(), form) : 0), fillerSize = _b[0], setFillerSize = _b[1];
     var sizeChange = function () {
         handleSizeChange();
@@ -46,7 +46,7 @@ function Selector(_a) {
                     : calcStepWidth(step.size, form),
                 maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
+            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
                 }, helperText: errors[step.id]
@@ -93,7 +93,7 @@ function SelectorStep(props) {
                 : undefined,
         }, shouldUnregister: true, render: function (_a) {
             var field = _a.field;
-            return (_jsx(Selector, __assign({}, props, { value: field.value, onChange: field.onChange, onBlur: field.onBlur }), void 0));
+            return (_jsx(Selector, __assign({}, props, { inputRef: field.ref, value: field.value, onChange: field.onChange, onBlur: field.onBlur }), void 0));
         } }, void 0));
 }
 export default SelectorStep;

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

@@ -76,7 +76,7 @@ function TextAreaStep(_a) {
                                     : {}, shouldUnregister: true, render: function (_a) {
                                     var _b;
                                     var field = _a.field;
-                                    return (_jsx(Editor, { onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: styles.editor, wrapperClassName: styles.wrapper, editorStyle: { lineHeight: '85%' }, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                                    return (_jsx(Editor, { editorRef: field.ref, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: styles.editor, wrapperClassName: styles.wrapper, editorStyle: { lineHeight: '85%' }, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
                                             options: ['inline', 'list', 'history'],
                                             inline: {
                                                 options: [
@@ -103,7 +103,7 @@ function TextAreaStep(_a) {
                         : undefined,
                 }, shouldUnregister: true, render: function (_a) {
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                    return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : step.description, error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -35,7 +35,7 @@ function TextInputStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id] }), void 0));
             } }, void 0) }), void 0));

package/dist/constants/Files/FileExtensions.js

@@ -61,5 +61,8 @@ var extensions = [
     'wpd',
     'csv',
     'tex',
+    'msg',
+    'zip',
+    'rar',
 ];
 export default extensions;

package/dist/controllers/FileService.d.ts

@@ -1,5 +1,5 @@
-export declare function getUploadUrls(files: Array<File>, domain?: string): Promise<Array<Record<string, any>>>;
+export declare function getUploadUrls(files: Array<File>, domain?: string): Promise<(Record<string, any> | string)[]>;
 export declare function postFile(file: File, postInfo: Record<string, any>): Promise<{
-    lblFile: string;
-    name: string;
+    fileName: string;
+    S3Key: string;
 }>;

package/dist/controllers/FileService.js

@@ -85,8 +85,8 @@ export function postFile(file, postInfo) {
                 case 1:
                     _a.sent();
                     return [2 /*return*/, {
-                            lblFile: file.name,
-                            name: postInfo.name,
+                            fileName: file.name,
+                            S3Key: postInfo.S3Key,
                         }];
             }
         });

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -82,6 +82,9 @@ var useOutlinedInputStyles = function (props) {
             '&$focused $notchedOutline': {
                 borderColor: props.focusColor,
             },
+            '& .EF-MuiSelect-icon.Mui-disabled': {
+                color: props.outlineColor,
+            },
             borderRadius: 10,
             color: props.color,
         },

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "0.2.28",
+    "version": "0.2.31-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -74,5 +74,6 @@
     "main": "./dist/index.lib.js",
     "files": [
         "/dist"
-    ]
+    ],
+    "proxy": "https://arquimedes.forms.eureka-test.click"
 }