@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.tsx

@@ -1,142 +0,0 @@
-import {
-    FileObject,
-    UploadedFileObject,
-    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 { FormStyle } from '../../../../@Types/Form';
-import { useState } from 'react';
-
-interface FileComponentProps {
-    file: FileObject | UploadedFileObject;
-    formStyle: FormStyle;
-    error: boolean;
-    handleRemove: () => void;
-    /** Function to call on postview to fetch the download url of a file */
-    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
-}
-
-function FileUploadComponent({
-    file,
-    formStyle,
-    error,
-    handleRemove,
-    fetchDownloadUrl,
-}: FileComponentProps): JSX.Element {
-    const [downloading, setDownloading] = useState(false);
-    if (!file) {
-        return <div></div>;
-    }
-
-    const downloadFile = async (): Promise<void> => {
-        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);
-            }
-        }
-    };
-
-    const calcIcon = (): JSX.Element => {
-        if (downloading) {
-            return (
-                <div className={styles.loaderContainer}>
-                    <Loader size={26} color={formStyle.primaryColor} />
-                </div>
-            );
-        } else if ((file as FileObject).state !== undefined) {
-            switch ((file as FileObject).state) {
-                case 'STARTING':
-                case 'UPLOADING':
-                    return (
-                        <div className={styles.loaderContainer}>
-                            <Loader size={26} color={formStyle.primaryColor} />
-                        </div>
-                    );
-                case 'DONE':
-                    return (
-                        <div
-                            className={styles.documentIcon}
-                            style={{ color: formStyle.primaryColor }}
-                        >
-                            <DescriptionRoundedIcon />
-                        </div>
-                    );
-                case 'ERROR':
-                    return (
-                        <div
-                            className={styles.documentIcon}
-                            style={{ color: formStyle.errorColor }}
-                        >
-                            <ErrorRoundedIcon />
-                        </div>
-                    );
-                default:
-                    return <div></div>;
-            }
-        } else {
-            return (
-                <div
-                    className={styles.documentIcon}
-                    style={{ color: formStyle.primaryColor }}
-                >
-                    <DescriptionRoundedIcon />
-                </div>
-            );
-        }
-    };
-    return (
-        <div className={styles.container}>
-            <div className={styles.iconContainer}>{calcIcon()}</div>
-            <div
-                className={
-                    (fetchDownloadUrl && file.S3Key) ||
-                    (file as UploadedFileObject).downloadUrl
-                        ? styles.downloadableLbl
-                        : styles.label
-                }
-                style={{
-                    color: error ? formStyle.errorColor : formStyle.textColor,
-                }}
-                onClick={(): void => {
-                    if (isUploadedFileObject(file) && file.downloadUrl) {
-                        const a = document.createElement('a');
-                        a.href = file.downloadUrl;
-                        a.setAttribute('download', file.fileName);
-                        a.click();
-                    } else if (fetchDownloadUrl !== undefined && file.S3Key) {
-                        downloadFile();
-                    }
-                }}
-            >
-                {(file as FileObject).file?.name ?? file.fileName}
-            </div>
-            <div
-                className={styles.deletBtn}
-                onClick={(): void => {
-                    handleRemove();
-                }}
-            >
-                {(file as FileObject).state !== undefined && (
-                    <ClearRoundedIcon fontSize="inherit" />
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default FileUploadComponent;

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -1,52 +0,0 @@
-.container {
-    width: fit-content;
-    max-width: calc(100% - 20px);
-    display: flex;
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 5px;
-    margin-bottom: 0px;
-    width: 100%;
-    flex-direction: column;
-}
-
-.labelLabel {
-    font-size: 16px;
-    margin-left: 8px;
-    margin-bottom: 5px;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.stepDescriptionLabel {
-    font-size: 0.75rem;
-    margin-left: 14px;
-    margin-top: -4px;
-    font-weight: 400;
-    line-height: 1.66;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.filesInput {
-    display: none;
-}
-.btnContainer {
-    margin-top: 5px;
-    margin-left: 10px;
-    margin-bottom: 3px;
-    width: fit-content;
-}
-.errorMsg {
-    font-size: 0.75rem;
-    margin-top: 5px;
-    margin-left: 14px;
-}
-
-.filesContainer {
-    padding-top: 5px;
-}

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.tsx

@@ -1,294 +0,0 @@
-import styles from './MaterialFileUploadStep.module.css';
-import { useFormContext } from 'react-hook-form';
-import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
-import { useContext, useEffect, useRef, useState } from 'react';
-import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
-import { getUploadUrls, postFile } from '../../../Services/FileService';
-import FileComponent from './FileComponent/FileComponent';
-import { FileUploadStepProps } from '../FileUploadStep';
-import maxSize from '../../../constants/Files/FileMaxSize';
-import { useAppSelector } from '../../../hooks';
-import CustomContext from '../../../Contexts/CustomContext';
-import { useFormStep } from '../../StepHooks';
-export interface FileObject {
-    state: 'STARTING' | 'UPLOADING' | 'DONE' | 'CANCEL' | 'ERROR';
-    file: File;
-    postInfo: any;
-    fileName?: string;
-    S3Key?: string;
-    error?: boolean;
-}
-export interface UploadedFileObject {
-    fileName: string;
-    S3Key: string;
-    downloadUrl?: string;
-}
-
-export function isUploadedFileObject(
-    file: UploadedFileObject | FileObject
-): file is UploadedFileObject {
-    return (file as FileObject).state === undefined && file.S3Key !== undefined;
-}
-
-function FileUploadStep({ step, editable }: FileUploadStepProps): JSX.Element {
-    const {
-        ref,
-        value,
-        onChange,
-        error: fieldError,
-    } = useFormStep<(FileObject | UploadedFileObject)[]>(step, {
-        defaultValue: [],
-        rules: {
-            validate: (array): boolean =>
-                ((step.required && array.length > 0) || !step.required) &&
-                array.find((file: any) => !file.S3Key) === undefined,
-        },
-    });
-
-    const { fetchDownloadUrl } = useContext(CustomContext);
-    const { formStyle, idOrganization, postview } = useAppSelector(
-        (state) => state.global
-    );
-
-    const { clearErrors } = useFormContext();
-
-    const [error, setError] = useState<string | undefined>(undefined);
-    const [fileChange, setFileChange] = useState<FileObject[]>([]);
-    const inputRef = useRef<any>();
-    useEffect(() => {
-        const filesToFetchLink = [];
-        const filesChanged = [];
-        for (const file of fileChange) {
-            if ((file as FileObject).state === 'STARTING') {
-                filesToFetchLink.push(file);
-            }
-            if ((file as FileObject).state === 'UPLOADING') {
-                uploadFile(file);
-                filesChanged.push(file);
-            }
-            if (
-                (file as FileObject).state === 'DONE' ||
-                (file as FileObject).state === 'ERROR'
-            ) {
-                filesChanged.push(file);
-            }
-            if ((file as FileObject).state === 'CANCEL') {
-                const newValue = [...value];
-                for (let i = 0; i < value.length; i++) {
-                    if ((value[i] as FileObject).file === file.file) {
-                        newValue.splice(i, 1);
-                        break;
-                    }
-                }
-                onChange(newValue);
-            }
-        }
-        if (filesChanged.length > 0) {
-            const newValue = [...value];
-            for (const file of filesChanged) {
-                for (let i = 0; i < value.length; i++) {
-                    if ((value[i] as FileObject).file === file.file) {
-                        newValue[i] = file;
-                    }
-                }
-            }
-            onChange(newValue);
-        }
-        if (filesToFetchLink.length > 0) {
-            getLinks(filesToFetchLink as FileObject[]);
-            onChange([...value, ...filesToFetchLink]);
-        }
-    }, [fileChange]);
-
-    async function getLinks(pFiles: FileObject[]): Promise<void> {
-        try {
-            const fileLinks = await getUploadUrls(
-                pFiles.map((file) => file.file),
-                idOrganization
-            );
-            const errorsExt: string[] = [];
-            setFileChange(
-                pFiles.map((file, index) => {
-                    if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
-                        errorsExt.push(file.file.name.split('.').pop() ?? '');
-                        return { ...file, state: 'ERROR' };
-                    } else {
-                        return {
-                            ...file,
-                            state: 'UPLOADING',
-                            postInfo: fileLinks[index],
-                        };
-                    }
-                })
-            );
-            if (errorsExt.length === 1) {
-                setError('La extención .' + errorsExt[0] + ' no es válida');
-            } else if (errorsExt.length > 1) {
-                setError(
-                    'Las extenciónes .' +
-                        errorsExt.join(',.') +
-                        ' no son válidas'
-                );
-            }
-        } catch (error) {
-            console.error(error);
-        }
-    }
-
-    async function uploadFile(pFile: FileObject): Promise<void> {
-        try {
-            const resp = await Promise.all([
-                postFile(pFile.file, pFile.postInfo),
-                new Promise((resolve) => setTimeout(resolve, 1000)),
-            ]);
-            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
-        } catch (error) {
-            console.error(error);
-        }
-    }
-
-    const calcErrorMsg = (): string => {
-        if (fieldError) {
-            const errNum = value.filter(
-                (val) => (val as FileObject).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 (
-        <div
-            className={
-                styles.container + (error || !!fieldError ? ' EF-error' : '')
-            }
-            style={
-                editable === false || postview
-                    ? {}
-                    : {
-                          minHeight: '100px',
-                      }
-            }
-            data-testid={step.id}
-        >
-            <div className={styles.labelLabel}>{step.label}</div>
-            {step.description && (
-                <div
-                    className={styles.stepDescriptionLabel}
-                    style={{ color: formStyle.descriptionTextColor }}
-                >
-                    {step.description}
-                </div>
-            )}
-            <input
-                type="file"
-                ref={inputRef}
-                className={styles.filesInput}
-                onChange={(e): void => {
-                    const files = e.target.files;
-                    if (files) {
-                        const filesArray = Array.from(files);
-                        const maxFiles = filesArray.filter(
-                            (file) => file.size > maxSize
-                        );
-                        if (maxFiles.length > 0) {
-                            setError('El tamaño máximo de carga es de 30Mb.');
-                        } else {
-                            setFileChange(
-                                filesArray
-                                    .filter(
-                                        (file) =>
-                                            value.find(
-                                                (val) =>
-                                                    (val as FileObject).file ===
-                                                    file
-                                            ) === undefined
-                                    )
-                                    .map(
-                                        (file) =>
-                                            ({
-                                                state: 'STARTING',
-                                                file,
-                                                postInfo: null,
-                                            }) as FileObject
-                                    )
-                            );
-                        }
-                        inputRef.current.value = '';
-                    }
-                }}
-                multiple
-                accept={getAcceptedExtensions()}
-            />
-            <div className={styles.btnContainer}>
-                <input ref={ref} className={'hidden-input'} />
-                <RoundedButton
-                    disabled={!editable || postview}
-                    text={'Examinar' + (step.required ? ' *' : '')}
-                    color={formStyle.primaryContrastColor}
-                    backgroundColor={formStyle.primaryColor}
-                    fontSize={'1rem'}
-                    padding={'5px 15px 5px 15px'}
-                    onClick={(): void => {
-                        if (editable && !postview) {
-                            const input = inputRef.current;
-                            if (input !== null) {
-                                clearErrors(step.id);
-                                setError(undefined);
-                                input.click();
-                            }
-                        }
-                    }}
-                />
-            </div>
-            <div className={styles.filesContainer}>
-                {value.map((file, index) => (
-                    <FileComponent
-                        formStyle={formStyle}
-                        key={index}
-                        file={file}
-                        error={
-                            (!!fieldError &&
-                                (file as FileObject).state !== 'DONE') ||
-                            (file as FileObject).state === 'ERROR'
-                        }
-                        handleRemove={(): void => {
-                            if (
-                                value.filter(
-                                    (val) =>
-                                        (val as FileObject).state === 'ERROR'
-                                ).length === 1
-                            ) {
-                                clearErrors(step.id);
-                                setError(undefined);
-                            }
-                            if ((file as FileObject).state !== undefined) {
-                                setFileChange([
-                                    {
-                                        ...(file as FileObject),
-                                        state: 'CANCEL',
-                                    },
-                                ]);
-                            }
-                        }}
-                        fetchDownloadUrl={fetchDownloadUrl}
-                    />
-                ))}
-            </div>
-            <div
-                className={styles.errorMsg}
-                style={{ color: formStyle.errorColor }}
-            >
-                {error ?? calcErrorMsg()}
-            </div>
-        </div>
-    );
-}
-
-export default FileUploadStep;

package/src/FormSteps/MapperStep/MapperStep.tsx

@@ -1,40 +0,0 @@
-import { Mapper } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
-import { StepProps } from '../Step';
-import { useAppSelector } from '../../hooks';
-import { MapperElement } from '../../@Types/MapperElement';
-interface CustomMapperElementModifiers<Type> {
-    calcName?: (element: MapperElement<Type>) => string;
-}
-export interface MapperStepProps<Type> extends StepProps {
-    /** The MapperStep to display */
-    step: Mapper;
-    customAdd?: (
-        ref: React.RefObject<HTMLDivElement>,
-        disabled: boolean,
-        handleAddElement: (value?: any) => void
-    ) => JSX.Element;
-    customElementRender?: (
-        element: MapperElement<Type>,
-        index: number,
-        renderElement: (
-            renderElementButtons?: (element: MapperElement<any>) => JSX.Element
-        ) => JSX.Element
-    ) => JSX.Element;
-    customElementModifiers?: CustomMapperElementModifiers<Type>;
-    calcCustomStepProps?: (
-        element: MapperElement<Type>,
-        customStepProps: Record<string, any>
-    ) => Record<string, any>;
-}
-function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialMapperStep {...props} />;
-        }
-    }
-}
-export default MapperStep;

package/src/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.module.css

@@ -1,72 +0,0 @@
-.container,
-.mobileContainer {
-    display: flex;
-    flex-direction: row;
-    width: fit-content;
-    margin-right: auto;
-    position: relative;
-    padding-top: 10px;
-    padding-bottom: 5px;
-    max-width: 100%;
-}
-.bulletContainer {
-    display: flex;
-    margin-left: 30px;
-    margin-right: 10px;
-    align-items: center;
-}
-.bullet {
-    border-width: 2px;
-    border-style: solid;
-    margin-bottom: 2px;
-    height: 20px;
-    width: 20px;
-    border-radius: 20px;
-    margin-left: 10px;
-    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
-}
-
-.titleLbl {
-    width: 100%;
-    height: 28px;
-    margin-right: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-    margin-bottom: 10px;
-}
-
-.title {
-    height: 28px;
-    margin-bottom: 5px;
-    margin-left: 10px;
-    font-size: 20px;
-    font-weight: 600;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-}
-
-.contentContainer {
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-
-.deleteBtn,
-.disabledDeleteBtn {
-    display: flex;
-    font-size: 24px;
-    margin-right: 8px;
-    margin-left: auto;
-}
-
-.deleteBtn {
-    cursor: pointer;
-}