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

package/src/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.tsx

@@ -1,108 +0,0 @@
-import React, { useContext } from 'react';
-import { MapperStepProps } from '../../../MapperStep';
-import styles from './ListMapperElement.module.css';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import { MapperElementComponentProps } from '../MapperElementComponent';
-import FormContext from '../../../../../Contexts/FormContext';
-import { useAppSelector } from '../../../../../hooks';
-
-function ListMapperElement<Type = any>({
-    step,
-    num,
-    loading,
-    element,
-    children,
-    editable,
-    handleDelete,
-    customElementModifiers,
-}: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element {
-    const { size } = useContext(FormContext);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const { calcName } = customElementModifiers ?? {};
-    const name = calcName
-        ? calcName(element)
-        : step.unitLabel
-          ? step.unitLabel + ' ' + (num + 1)
-          : '';
-    return (
-        <div
-            className={
-                widthStats.isMobile ? styles.mobileContainer : styles.container
-            }
-        >
-            <div
-                className={styles.bulletContainer}
-                style={{
-                    height: name ? 28 : 40,
-                }}
-            >
-                <div
-                    className={styles.bullet}
-                    style={{
-                        backgroundColor: formStyle.outlineColor,
-                        borderColor: formStyle.descriptionTextColor,
-                    }}
-                ></div>
-            </div>
-            <div
-                className={styles.contentContainer}
-                style={{
-                    width:
-                        (size.blockSize + size.spacingSize) *
-                        (step.style?.size ?? size.blockNum - 1),
-                }}
-            >
-                {name && (
-                    <div
-                        className={styles.title}
-                        style={{ color: formStyle.textColor }}
-                    >
-                        {(name || loading) && (
-                            <label className={styles.titleLbl}>
-                                {loading ? 'Cargando...' : name + ':'}
-                            </label>
-                        )}
-                        {step.deletable !== false && (
-                            <div
-                                className={
-                                    !editable || postview
-                                        ? styles.disabledDeleteBtn
-                                        : styles.deleteBtn
-                                }
-                                style={{ color: formStyle.textColor }}
-                                onClick={(): void => {
-                                    if (editable && !postview) {
-                                        handleDelete?.();
-                                    }
-                                }}
-                            >
-                                <DeleteRoundedIcon fontSize="inherit" />
-                            </div>
-                        )}
-                    </div>
-                )}
-                {children}
-            </div>
-            {!name && step.deletable !== false && (
-                <div
-                    className={
-                        !editable || postview
-                            ? styles.disabledDeleteBtn
-                            : styles.deleteBtn
-                    }
-                    style={{ color: formStyle.textColor, marginTop: 7 }}
-                    onClick={(): void => {
-                        if (editable && !postview) {
-                            handleDelete?.();
-                        }
-                    }}
-                >
-                    <DeleteRoundedIcon fontSize="inherit" />
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default ListMapperElement;

package/src/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.tsx

@@ -1,76 +0,0 @@
-import { MapperStepProps } from '../../MapperStep';
-import StepComponent from '../../../Step';
-import { MapperStyleTypes } from '../../../../constants/FormStepTypes';
-import ListMapperElement from './ListMapperElement/ListMapperElement';
-import PillMapperElement from './PillMapperElement/PillMapperElement';
-import React, { useContext, useMemo } from 'react';
-import FormContext from '../../../../Contexts/FormContext';
-import CustomContext from '../../../../Contexts/CustomContext';
-import { MapperElement } from '../../../../@Types/MapperElement';
-export interface MapperElementComponentProps<Type> {
-    num: number;
-    loading?: boolean;
-    element: MapperElement<Type>;
-    handleDelete: () => void;
-    children?: React.ReactNode;
-}
-
-function MapperElementComponent<Type = any>(
-    props: MapperStepProps<Type> & MapperElementComponentProps<Type>
-): JSX.Element {
-    const { step, element, editable } = props;
-    const customContext = useContext(CustomContext);
-    const form = useContext(FormContext);
-    if (element.deleted) {
-        return <div></div>;
-    }
-
-    const nestedCustomContext = useMemo(() => {
-        if (!props.calcCustomStepProps) return customContext;
-        return {
-            ...customContext,
-            customStepProps: props.calcCustomStepProps(
-                element,
-                customContext.customStepProps
-            ),
-        };
-    }, [element, customContext]);
-
-    const mapSubSteps = (): JSX.Element => {
-        return (
-            <CustomContext.Provider value={nestedCustomContext}>
-                {step.rootSteps.map((idSubStep: string) => {
-                    const subStep = form.steps[element.ids[idSubStep]];
-                    return (
-                        <StepComponent
-                            {...props}
-                            editable={editable ? step.editable ?? true : false}
-                            step={subStep}
-                            key={element.ids[idSubStep]}
-                        />
-                    );
-                })}
-            </CustomContext.Provider>
-        );
-    };
-
-    switch (step.style?.type) {
-        case MapperStyleTypes.INLINE:
-            return <React.Fragment>{mapSubSteps()}</React.Fragment>;
-        case MapperStyleTypes.LIST:
-            return (
-                <ListMapperElement {...props} step={step}>
-                    {mapSubSteps()}
-                </ListMapperElement>
-            );
-        case MapperStyleTypes.PILL:
-        default:
-            return (
-                <PillMapperElement {...props} step={step}>
-                    {mapSubSteps()}
-                </PillMapperElement>
-            );
-    }
-}
-
-export default MapperElementComponent;

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

@@ -1,71 +0,0 @@
-.containerContainer {
-    margin-top: 10px;
-}
-
-.container,
-.mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
-    width: fit-content;
-    border-radius: 20px;
-    margin-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-}
-
-.container {
-    max-width: calc(100% - 112px);
-    padding-right: 55px;
-    padding-left: 55px;
-}
-
-.mobileContainer {
-    max-width: calc(100% - 42px);
-    padding-right: 20px;
-    padding-left: 20px;
-}
-
-.titleLbl {
-    width: 100%;
-    font-size: 20px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-    margin-left: 10px;
-    margin-bottom: 10px;
-}
-
-.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;
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
-
-.btnsContainer {
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-}
-
-.deleteBtn,
-.disabledDeleteBtn {
-    font-size: 24px;
-}
-
-.deleteBtn {
-    cursor: pointer;
-    height: 24px;
-}

package/src/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.tsx

@@ -1,95 +0,0 @@
-import React, { useContext } from 'react';
-import { MapperStepProps } from '../../../MapperStep';
-import styles from './PillMapperElement.module.css';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import { MapperElementComponentProps } from '../MapperElementComponent';
-import FormContext from '../../../../../Contexts/FormContext';
-import { useAppSelector } from '../../../../../hooks';
-import { MapperElement } from '../../../../../@Types/MapperElement';
-
-function PillMapperElement<Type = any>({
-    step,
-    num,
-    loading,
-    element,
-    children,
-    editable,
-    handleDelete,
-    customElementModifiers,
-    customElementRender,
-}: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element {
-    const deletable = step.deletable ?? true;
-    const { size } = useContext(FormContext);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const { calcName } = customElementModifiers ?? {};
-    const name = calcName
-        ? calcName(element)
-        : step.unitLabel
-          ? step.unitLabel + ' ' + (num + 1)
-          : '';
-    const renderElement = (
-        renderElementButtons?: (element: MapperElement<any>) => JSX.Element
-    ): JSX.Element => {
-        return (
-            <div
-                className={
-                    widthStats.isMobile
-                        ? styles.mobileContainer
-                        : styles.container
-                }
-                style={{
-                    pageBreakInside: 'avoid',
-                }}
-            >
-                <div
-                    className={styles.contentContainer}
-                    style={{
-                        width:
-                            (size.blockSize + size.spacingSize) *
-                            (step.style?.size ?? size.blockNum - 1),
-                    }}
-                >
-                    {name && (
-                        <div
-                            className={styles.titleLbl}
-                            style={{ color: formStyle.textColor }}
-                        >
-                            {loading ? 'Cargando...' : name + ':'}
-                        </div>
-                    )}
-                    <div className={styles.btnsContainer}>
-                        {renderElementButtons?.(element)}
-                        {(deletable || !element.isOriginal) && (
-                            <div
-                                className={
-                                    !editable || postview
-                                        ? styles.disabledDeleteBtn
-                                        : styles.deleteBtn
-                                }
-                                style={{ color: formStyle.textColor }}
-                                onClick={(): void => {
-                                    if (editable && !postview) {
-                                        handleDelete?.();
-                                    }
-                                }}
-                            >
-                                <DeleteRoundedIcon fontSize="inherit" />
-                            </div>
-                        )}
-                    </div>
-                    {children}
-                </div>
-            </div>
-        );
-    };
-    return (
-        <div className={styles.containerContainer}>
-            {customElementRender
-                ? customElementRender(element, num, renderElement)
-                : renderElement()}
-        </div>
-    );
-}
-
-export default PillMapperElement;

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

@@ -1,41 +0,0 @@
-.pillContainer {
-    display: flex;
-    flex-direction: column;
-    width: calc(100% - 20px);
-    max-width: calc(100% - 20px);
-    padding: 5px 10px;
-}
-
-.listContainer {
-    display: flex;
-    flex-direction: column;
-    padding: 5px 0px;
-}
-
-.titleLbl {
-    font-size: 24px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-}
-
-.descriptionPar {
-    font-size: 16px;
-    white-space: pre-wrap;
-    cursor: default;
-}
-
-.btnContainer {
-    margin-top: 15px;
-    margin-left: 15px;
-    margin-bottom: 3px;
-    width: fit-content;
-}
-
-.errorMsg {
-    font-size: 0.75rem;
-    margin-top: 5px;
-    margin-left: 15px;
-}

package/src/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.tsx

@@ -1,296 +0,0 @@
-import React, {
-    useState,
-    useEffect,
-    useContext,
-    useMemo,
-    useCallback,
-} from 'react';
-import { MapperStepProps } from '../MapperStep';
-import styles from './MaterialMapperStep.module.css';
-import { FieldError, useFormContext } from 'react-hook-form';
-import { MapperStyleTypes } from '../../../constants/FormStepTypes';
-import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
-import { FormStep } from '../../../@Types/FormStep';
-import MapperElementComponent from './Element/MapperElementComponent';
-import { addStepsDependencies } from '../../../States/SiteSlice';
-import FormContext from '../../../Contexts/FormContext';
-import { useAppDispatch, useAppSelector } from '../../../hooks';
-import CustomContext from '../../../Contexts/CustomContext';
-import { useFormStep } from '../../StepHooks';
-import { addMapperStep } from '../../../App/AppFunctions';
-import { MapperElement } from '../../../@Types/MapperElement';
-import { calcMapperSubSteps } from '../../../Form/FormFunctions';
-import { Form } from '../../../@Types';
-
-export interface MapperComponentProps<Type> extends MapperStepProps<Type> {
-    form: Form;
-    loading?: boolean;
-    error: FieldError | undefined;
-    onChange: (elements: MapperElement<Type>[]) => void;
-    handleAddElement: (elementValue?: Type) => void;
-    elements: MapperElement<Type>[];
-    inputRef: any;
-}
-
-function MapperComponent<Type>({
-    form,
-    step,
-    error,
-    loading,
-    inputRef,
-    editable,
-    customAdd,
-    elements,
-    onChange,
-    handleAddElement,
-    ...others
-}: MapperComponentProps<Type>): JSX.Element {
-    const handleDeleteElement = useCallback(
-        (index: number) => () => {
-            const tempElements = [...elements];
-            tempElements[index] = {
-                ...tempElements[index],
-                deleted: true,
-            };
-            onChange(tempElements);
-        },
-        [elements, onChange]
-    );
-
-    const inputValue = useMemo(() => JSON.stringify(elements), [elements]);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const { container } = useMemo(() => {
-        switch (step.style?.type) {
-            case MapperStyleTypes.LIST:
-                return { container: styles.listContainer };
-            case MapperStyleTypes.PILL:
-            default:
-                return { container: styles.pillContainer };
-        }
-    }, [step]);
-
-    const mapElements = (): JSX.Element => {
-        return (
-            <FormContext.Provider value={form}>
-                {elements.map((element, index) => (
-                    <MapperElementComponent
-                        {...others}
-                        key={element.id}
-                        num={index}
-                        element={element}
-                        step={step}
-                        editable={editable}
-                        loading={loading}
-                        handleDelete={handleDeleteElement(index)}
-                    />
-                ))}
-            </FormContext.Provider>
-        );
-    };
-
-    if (step.style.type === MapperStyleTypes.INLINE)
-        return <React.Fragment>{mapElements()}</React.Fragment>;
-
-    return (
-        <div
-            className={container}
-            style={{ color: formStyle.textColor }}
-            data-testid={step.id}
-        >
-            {step.label && <div className={styles.titleLbl}>{step.label}</div>}
-            {step.description && (
-                <p
-                    className={styles.descriptionPar}
-                    style={{
-                        margin: step.description
-                            ? '10px 0px'
-                            : '0px 0px 5px 0px',
-                    }}
-                >
-                    {step.description}
-                </p>
-            )}
-            {mapElements()}
-            <input
-                id={step.id}
-                ref={inputRef}
-                className={'hidden-input'}
-                readOnly
-                value={inputValue}
-            />
-            {step.creatable !== false &&
-                (!step.max ||
-                    elements.filter(
-                        (elem: MapperElement<Type>) => !elem.deleted
-                    ).length < step.max) && (
-                    <div className={styles.btnContainer}>
-                        {!customAdd && (
-                            <RoundedButton
-                                disabled={!editable || postview}
-                                text={
-                                    step.addBtnLabel +
-                                    (step.required ? ' *' : '')
-                                }
-                                color={formStyle.primaryContrastColor}
-                                backgroundColor={formStyle.primaryColor}
-                                fontSize={'1rem'}
-                                padding={'5px 15px 5px 15px'}
-                                onClick={(): void => {
-                                    if (editable && !postview) {
-                                        handleAddElement();
-                                    }
-                                }}
-                            />
-                        )}
-                        {customAdd?.(
-                            inputRef as any,
-                            !editable || postview,
-                            handleAddElement
-                        )}
-                    </div>
-                )}
-            {!!error &&
-                elements.filter((elem) => !elem.deleted).length === 0 && (
-                    <div
-                        className={styles.errorMsg}
-                        style={{ color: formStyle.errorColor }}
-                    >
-                        Este campo es obligatorio
-                    </div>
-                )}
-        </div>
-    );
-}
-
-function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element {
-    const { step, editable, customAdd } = props;
-
-    const form = useContext(FormContext);
-    const { postview } = useAppSelector((state) => state.global);
-    const { customSteps } = useContext(CustomContext);
-    const dispatch = useAppDispatch();
-    const { setValue } = useFormContext();
-
-    const { ref, value, onChange, error } = useFormStep<MapperElement<Type>[]>(
-        step,
-        {
-            defaultValue: [],
-            rules: {
-                validate: (array): boolean =>
-                    !step.required ||
-                    (step.required &&
-                        array.filter(
-                            (elem: MapperElement<Type>) => !elem.deleted
-                        ).length > 0),
-            },
-        }
-    );
-
-    const [localSteps, setLocalSteps] = useState<Record<string, FormStep>>(
-        calcMapperSubSteps(step, value, customSteps)
-    );
-
-    //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
-    useEffect(() => {
-        if (value.length === 0 && !postview && editable && step.creatable) {
-            if (!customAdd) handleAddElement();
-        }
-    }, []);
-
-    const handleAddElement = useCallback(
-        (elementValue?: any): void => {
-            const { element, steps, mappers } = addMapperStep<Type>(
-                step,
-                customSteps
-            );
-            if (elementValue) element.value = elementValue;
-            for (const [key, elems] of Object.entries(mappers)) {
-                setValue(key, elems);
-            }
-            const newElements = [...value, element];
-            onChange(newElements);
-            setLocalSteps((oldLocalSteps) => ({ ...oldLocalSteps, ...steps }));
-            dispatch(
-                addStepsDependencies({
-                    steps,
-                    customSteps,
-                    allSteps: { ...form.steps, ...steps },
-                })
-            );
-        },
-        [step, form, customSteps, value, onChange]
-    );
-
-    const subForm = useMemo(
-        () => ({ ...form, steps: { ...form.steps, ...localSteps } }),
-        [localSteps]
-    );
-
-    return (
-        <MapperComponent
-            {...props}
-            error={error}
-            inputRef={ref}
-            onChange={onChange}
-            handleAddElement={handleAddElement}
-            form={subForm}
-            elements={value}
-        />
-    );
-}
-
-export function CustomMapperStep<Type>(
-    props: Omit<MapperComponentProps<Type>, 'form' | 'handleAddElement'>
-): JSX.Element {
-    const { step, elements, onChange } = props;
-
-    const form = useContext(FormContext);
-    const { customSteps } = useContext(CustomContext);
-    const dispatch = useAppDispatch();
-    const { setValue } = useFormContext();
-
-    const [localSteps, setLocalSteps] = useState<Record<string, FormStep>>(
-        calcMapperSubSteps(step, elements, customSteps)
-    );
-
-    const handleAddElement = useCallback(
-        (elementValue?: any): void => {
-            const { element, steps, mappers } = addMapperStep<Type>(
-                step,
-                customSteps
-            );
-            if (elementValue) element.value = elementValue;
-            for (const [key, elems] of Object.entries(mappers)) {
-                setValue(key, elems);
-            }
-            const newElements = [...elements, element];
-            onChange(newElements);
-            setLocalSteps((oldLocalSteps) => ({ ...oldLocalSteps, ...steps }));
-            dispatch(
-                addStepsDependencies({
-                    steps,
-                    customSteps,
-                    allSteps: { ...form.steps, ...steps },
-                })
-            );
-        },
-        [step, form, customSteps, elements, onChange]
-    );
-
-    const subForm = useMemo(
-        () => ({ ...form, steps: { ...form.steps, ...localSteps } }),
-        [localSteps]
-    );
-
-    return (
-        <MapperComponent
-            {...props}
-            form={subForm}
-            elements={elements}
-            onChange={onChange}
-            handleAddElement={handleAddElement}
-        />
-    );
-}
-
-export default MapperStep;