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

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

@@ -1,47 +1,31 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from '@material-ui/core';
-import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
-import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
 import styles from './MaterialEntityValueDialog.module.css';
-import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
+import ErkButton from '../../../../Shared/ErkButton/ErkButton';
 import { useAppSelector } from '../../../../hooks';
 import { EditorState, convertFromRaw } from 'draft-js';
 import { useContext, useMemo } from 'react';
 import { mapDraftEntities } from '../../../../Utils/DraftFunctions';
 import { Editor } from 'react-draft-wysiwyg';
 import FormContext from '../../../../Contexts/FormContext';
-function MaterialEntityValueDialog(_a) {
-    var type = _a.type, entity = _a.entity, message = _a.message, entityValue = _a.entityValue, handleClose = _a.handleClose;
-    var formStyle = useAppSelector(function (state) { return state.global.formStyle; });
-    var form = useContext(FormContext);
-    var dependencies = useAppSelector(function (state) { return state.site.dependencies; });
-    var editorState = useMemo(function () {
-        return EditorState.createWithContent(convertFromRaw(mapDraftEntities({ form: form, dependencies: dependencies, entity: entity, entityValue: entityValue }, message)));
-    }, [message, dependencies]);
-    return (_jsx(Dialog, __assign({ PaperProps: {
+import { Dialog } from '@mui/material';
+import CloseIcon from '../../../../Icons/CloseIcon';
+import InfoIcon from '../../../../Icons/InfoIcon';
+import WarningIcon from '../../../../Icons/WarningIcon';
+function MaterialEntityValueDialog({ type, entity, message, entityValue, handleClose, }) {
+    const formStyle = useAppSelector((state) => state.global.formStyle);
+    const form = useContext(FormContext);
+    const dependencies = useAppSelector((state) => state.site.dependencies);
+    const editorState = useMemo(() => {
+        return EditorState.createWithContent(convertFromRaw(mapDraftEntities({ form, dependencies, entity, entityValue }, message)));
+    }, [form, message, dependencies, entity, entityValue]);
+    return (_jsx(Dialog, { PaperProps: {
             style: {
                 borderRadius: '20px',
                 maxWidth: '100vw',
                 boxSizing: 'content-box',
             },
-        }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () { return handleClose(); } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) })), _jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.contentContainer }, { children: [_jsx("div", __assign({ className: styles.warningContainer, style: {
-                                        color: type === 'INFO'
-                                            ? formStyle.primaryColor
-                                            : formStyle.errorColor,
-                                    } }, { children: type === 'INFO' ? (_jsx(InfoRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } })) : (_jsx(WarningRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } })) })), _jsx("div", __assign({ className: styles.messageContainer }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) }))] })), _jsx("div", __assign({ className: styles.btnContainer }, { children: _jsx(RoundedButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: type === 'INFO'
-                                    ? formStyle.primaryColor
-                                    : formStyle.errorColor, fontSize: '1.2rem', height: undefined, padding: '16px 20px', onClick: function () { return handleClose(); } }) }))] }))] })) })));
+        }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => handleClose(), children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.contentContainer, children: [_jsx("div", { className: styles.warningContainer, style: {
+                                        color: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor,
+                                    }, children: type === 'INFO' ? (_jsx(InfoIcon, { style: { fontSize: '160px' } })) : (_jsx(WarningIcon, { style: { fontSize: '160px' } })) }), _jsx("div", { className: styles.messageContainer, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) })] }), _jsx("div", { className: styles.btnContainer, children: _jsx(ErkButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor, fontSize: '1.2rem', height: undefined, padding: '16px 20px', onClick: () => handleClose() }) })] })] }) }));
 }
 export default MaterialEntityValueDialog;

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

@@ -1,62 +1,6 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useMemo, useState } from 'react';
-import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
+import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
 import widgetInstance from '../../../Utils/AxiosWidget';
@@ -64,61 +8,50 @@ import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { evaluateCondition } from '../../StepFunctions';
-import { recursivelyCalcConditionSteps, selectDependencies, } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
 import { useAppSelector } from '../../../hooks';
 import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
-function EntityValuePickerStep(_a) {
-    var _b, _c;
-    var step = _a.step, editable = _a.editable;
-    var form = useContext(FormContext);
-    var _d = useState(), dialogs = _d[0], setDialogs = _d[1];
-    var dialogsIdStepDeps = useMemo(function () {
-        var ids = [];
+function EntityValuePickerStep({ step, editable }) {
+    const form = useContext(FormContext);
+    const [dialogs, setDialogs] = useState();
+    const dialogsIdStepDeps = useMemo(() => {
+        const ids = [];
         if (!step.dialogs)
             return ids;
-        for (var _i = 0, _a = step.dialogs; _i < _a.length; _i++) {
-            var dialog = _a[_i];
-            ids.push.apply(ids, recursivelyCalcConditionSteps(dialog.condition));
+        for (const dialog of step.dialogs) {
+            ids.push(...recursivelyCalcConditionSteps(dialog.condition));
         }
         return ids;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var dialogDeps = useAppSelector(function (state) {
-        return selectDependencies(state, dialogsIdStepDeps);
-    });
-    var handleCloseDialog = useCallback(function () {
-        setDialogs(function (dialogs) {
-            return dialogs && (dialogs === null || dialogs === void 0 ? void 0 : dialogs.pending.length) > 0
-                ? {
-                    current: dialogs.pending[0],
-                    pending: dialogs.pending.slice(1),
-                    value: dialogs.value,
-                }
-                : undefined;
-        });
+    const dialogDeps = useAppSelector((state) => selectDependencies(state, dialogsIdStepDeps));
+    const handleCloseDialog = useCallback(() => {
+        setDialogs((dialogs) => dialogs && dialogs?.pending.length > 0
+            ? {
+                current: dialogs.pending[0],
+                pending: dialogs.pending.slice(1),
+                value: dialogs.value,
+            }
+            : undefined);
     }, []);
-    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && ((_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity]) && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: (_c = form.entities) === null || _c === void 0 ? void 0 : _c[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
-                        return option._id === value._id;
-                    }, calcDepError: function (steps) {
-                        for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
-                            var step_1 = steps_1[_i];
-                            if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
-                                return 'Selecciona un ' + step_1.label;
+    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { editable: editable, step: step, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
+                        for (const step of steps) {
+                            if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
+                                return 'Selecciona un ' + step.label;
                             }
                         }
                         return undefined;
-                    }, changeListener: function (value) {
-                        var _a, _b;
+                    }, changeListener: (value) => {
                         if (!value)
                             return;
-                        var dialogsToDisplay = [];
-                        for (var _i = 0, _c = (_a = step.dialogs) !== null && _a !== void 0 ? _a : []; _i < _c.length; _i++) {
-                            var dialog = _c[_i];
+                        const dialogsToDisplay = [];
+                        for (const dialog of step.dialogs ?? []) {
                             if (!dialog.condition) {
                                 dialogsToDisplay.push(dialog);
                                 continue;
                             }
                             if (evaluateCondition(dialog.condition, dialogDeps, {
-                                entity: (_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity],
+                                entity: form.entities?.[step.idEntity],
                                 entityValue: value,
                             })) {
                                 dialogsToDisplay.push(dialog);
@@ -126,112 +59,93 @@ function EntityValuePickerStep(_a) {
                         }
                         if (dialogsToDisplay.length > 0) {
                             setDialogs({
-                                value: value,
+                                value,
                                 current: dialogsToDisplay[0],
                                 pending: dialogsToDisplay.slice(1),
                             });
                         }
-                    }, filterOptions: function (options, dependencies) {
-                        var filteredOptions = [];
-                        for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
-                            var value = options_1[_i];
-                            var option = step.options[value._id];
-                            if ((option === null || option === void 0 ? void 0 : option.type) === EntityValueOptionTypes.HIDE)
+                    }, filterOptions: (options, dependencies) => {
+                        const filteredOptions = [];
+                        for (const value of options) {
+                            const option = step.options[value._id];
+                            if (option?.type === EntityValueOptionTypes.HIDE)
                                 continue;
-                            if (!option ||
-                                !option.condition ||
-                                evaluateCondition(option.condition, dependencies))
+                            if (!option?.condition || evaluateCondition(option.condition, dependencies))
                                 filteredOptions.push(value);
                         }
                         return filteredOptions;
-                    }, getOptionsConditionsIdSteps: function () {
-                        var _a;
-                        var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
-                        for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
-                            var option = _b[_i];
-                            if (option.type !== EntityValueOptionTypes.HIDE &&
-                                option.condition) {
-                                dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                    }, getOptionsConditionsIdSteps: () => {
+                        const dependencies = [...(step.dependencies ?? [])];
+                        for (const option of Object.values(step.options)) {
+                            if (option.type !== EntityValueOptionTypes.HIDE && option.condition) {
+                                dependencies.push(...recursivelyCalcConditionSteps(option.condition));
                             }
                         }
                         return dependencies;
-                    }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                    }, getValueString: (value) => value?._id, renderNestedSteps: (value) => {
                         if (!value)
                             return _jsx(_Fragment, {});
-                        var currentOption = step.options[value._id];
-                        if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) ===
-                            EntityValueOptionTypes.NESTED) {
-                            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
-                                    var subStep = form.steps[idStep];
-                                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                        const currentOption = step.options[value._id];
+                        if (currentOption?.type === EntityValueOptionTypes.NESTED) {
+                            return (_jsx(React.Fragment, { children: currentOption.steps.map((idStep) => {
+                                    const subStep = form.steps[idStep];
+                                    return _jsx(StepComponent, { editable: editable, step: subStep }, idStep);
                                 }) }));
                         }
                         else
                             return _jsx(_Fragment, {});
-                    } }) }))] }));
+                    } }) })] }));
 }
 export default EntityValuePickerStep;
-var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
-    var urlPath, _i, _a, path, idEntityValue, currentValue, params, _b, _c, filter, currentValue, url, response;
-    var _d, _e, _f, _g, _h;
-    return __generator(this, function (_j) {
-        switch (_j.label) {
-            case 0:
-                if (!idOrganization)
-                    return [2 /*return*/, null];
-                urlPath = '';
-                for (_i = 0, _a = step.path; _i < _a.length; _i++) {
-                    path = _a[_i];
-                    idEntityValue = 'null';
-                    switch (path.type) {
-                        case EntityValueDataTypes.STEP: {
-                            currentValue = (_d = dependencyStore[path.idStep]) === null || _d === void 0 ? void 0 : _d.value;
-                            if (!currentValue)
-                                return [2 /*return*/, null];
-                            if (typeof currentValue === 'string')
-                                idEntityValue = currentValue;
-                            else
-                                idEntityValue = (_e = currentValue._id) !== null && _e !== void 0 ? _e : currentValue.id;
-                            break;
-                        }
-                        case EntityValueDataTypes.VALUE:
-                        default:
-                            idEntityValue = (_f = path.idEntityValue) !== null && _f !== void 0 ? _f : 'null';
-                            break;
-                    }
-                    urlPath +=
-                        '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+const getEntityValueOptions = async (idOrganization, step, dependencyStore) => {
+    if (!idOrganization)
+        return null;
+    let urlPath = '';
+    for (const path of step.path) {
+        let idEntityValue = 'null';
+        switch (path.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[path.idStep]?.value;
+                if (!currentValue)
+                    return null;
+                if (typeof currentValue === 'string')
+                    idEntityValue = currentValue;
+                else
+                    idEntityValue = currentValue._id ?? currentValue.id;
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                idEntityValue = path.idEntityValue ?? 'null';
+                break;
+        }
+        urlPath += '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+    }
+    const params = new URLSearchParams({});
+    for (const filter of step.filters) {
+        switch (filter.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.idProperty, currentValue);
+                    else
+                        params.set(filter.idProperty, currentValue._id ?? currentValue.id);
                 }
-                params = new URLSearchParams({});
-                for (_b = 0, _c = step.filters; _b < _c.length; _b++) {
-                    filter = _c[_b];
-                    switch (filter.type) {
-                        case EntityValueDataTypes.STEP: {
-                            currentValue = (_g = dependencyStore[filter.idStep]) === null || _g === void 0 ? void 0 : _g.value;
-                            if (currentValue) {
-                                if (typeof currentValue === 'string')
-                                    params.set(filter.idProperty, currentValue);
-                                else
-                                    params.set(filter.idProperty, (_h = currentValue._id) !== null && _h !== void 0 ? _h : currentValue.id);
-                            }
-                            else if (filter.required) {
-                                return [2 /*return*/, null];
-                            }
-                            break;
-                        }
-                        case EntityValueDataTypes.VALUE:
-                        default:
-                            params.set(filter.idProperty, filter.value);
-                            break;
-                    }
+                else if (filter.required) {
+                    return null;
                 }
-                url = "".concat(idOrganization, "/entities/").concat(step.idEntity).concat(urlPath, "?").concat(params.toString());
-                return [4 /*yield*/, widgetInstance.get(url, {
-                        timeout: 120000,
-                    })];
-            case 1:
-                response = _j.sent();
-                return [2 /*return*/, response.data.filter(function (option) { var _a; return ((_a = step.options[option._id]) === null || _a === void 0 ? void 0 : _a.type) !== EntityValueOptionTypes.HIDE; })];
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                params.set(filter.idProperty, filter.value);
+                break;
         }
+    }
+    const url = `${idOrganization}/entities/${step.idEntity}${urlPath}?${params.toString()}`;
+    const response = await widgetInstance.get(url, {
+        timeout: 120000,
     });
-}); };
+    return response.data.filter((option) => step.options[option._id]?.type !== EntityValueOptionTypes.HIDE);
+};

package/dist/FormSteps/FileUploadStep/FileUploadStep.js

@@ -1,24 +1,13 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialFileUploadStep from './MaterialFileUploadStep/MaterialFileUploadStep';
 function FileUploadStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialFileUploadStep, __assign({}, props));
+            return _jsx(MaterialFileUploadStep, { ...props });
         }
     }
 }

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

@@ -1,131 +1,69 @@
-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 };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isUploadedFileObject, } from '../MaterialFileUploadStep';
 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';
 import { useState } from 'react';
-function FileUploadComponent(_a) {
-    var _this = this;
-    var _b, _c;
-    var file = _a.file, formStyle = _a.formStyle, error = _a.error, editable = _a.editable, handleRemove = _a.handleRemove, fetchDownloadUrl = _a.fetchDownloadUrl;
-    var _d = useState(false), downloading = _d[0], setDownloading = _d[1];
+import FileIcon from '../../../../Icons/FileIcon';
+import ErrorIcon from '../../../../Icons/ErrorIcon';
+import CloseIcon from '../../../../Icons/CloseIcon';
+import { isUploadedFileObject } from '../FileFunctions';
+function FileUploadComponent({ file, formStyle, error, editable, handleRemove, fetchDownloadUrl, }) {
+    const [downloading, setDownloading] = useState(false);
     if (!file) {
         return _jsx("div", {});
     }
-    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:
-                    if (!(fetchDownloadUrl && file.S3Key && file.fileName)) return [3 /*break*/, 4];
-                    _a.label = 1;
-                case 1:
-                    _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*/, 4];
-                case 4: return [2 /*return*/];
+    const downloadFile = async () => {
+        if (fetchDownloadUrl && file.S3Key && file.fileName) {
+            try {
+                setDownloading(true);
+                const fileUrl = await fetchDownloadUrl(file.S3Key, file.fileName);
+                const a = document.createElement('a');
+                a.href = fileUrl;
+                a.setAttribute('download', file.fileName);
+                a.click();
+                setDownloading(false);
+            }
+            catch (error) {
+                console.error(error);
             }
-        });
-    }); };
-    var calcIcon = function () {
+        }
+    };
+    const calcIcon = () => {
         if (downloading) {
-            return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) })));
+            return (_jsx("div", { className: styles.loaderContainer, children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) }));
         }
         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 }) })));
+                    return (_jsx("div", { className: styles.loaderContainer, children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) }));
                 case 'DONE':
-                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}) })));
+                    return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.primaryColor }, children: _jsx(FileIcon, {}) }));
                 case 'ERROR':
-                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.errorColor } }, { children: _jsx(ErrorRoundedIcon, {}) })));
+                    return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.errorColor }, children: _jsx(ErrorIcon, {}) }));
                 default:
                     return _jsx("div", {});
             }
         }
         else {
-            return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}) })));
+            return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.primaryColor }, children: _jsx(FileIcon, {}) }));
         }
     };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.iconContainer }, { children: calcIcon() })), _jsx("div", __assign({ className: (fetchDownloadUrl && file.S3Key) ||
-                    file.downloadUrl
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.iconContainer, children: calcIcon() }), _jsx("div", { className: (fetchDownloadUrl && file.S3Key) || file.downloadUrl
                     ? styles.downloadableLbl
                     : styles.label, style: {
                     color: error ? formStyle.errorColor : formStyle.textColor,
-                }, onClick: function () {
+                }, onClick: () => {
                     if (isUploadedFileObject(file) && file.downloadUrl) {
-                        var a = document.createElement('a');
+                        const a = document.createElement('a');
                         a.href = file.downloadUrl;
                         a.setAttribute('download', file.fileName);
                         a.click();
                     }
                     else if (fetchDownloadUrl !== undefined && file.S3Key) {
-                        downloadFile();
+                        void downloadFile();
                     }
-                } }, { children: (_c = (_b = file.file) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : file.fileName })), editable && (_jsx("div", __assign({ className: styles.deletBtn, onClick: function () {
+                }, children: file.file?.name ?? file.fileName }), editable && (_jsx("div", { className: styles.deletBtn, onClick: () => {
                     handleRemove();
-                } }, { children: _jsx(ClearRoundedIcon, { fontSize: "inherit" }) })))] })));
+                }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }))] }));
 }
 export default FileUploadComponent;

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

@@ -0,0 +1,3 @@
+export function isUploadedFileObject(file) {
+    return file.state === undefined && file.S3Key !== undefined;
+}