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

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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,71 @@
+.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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,41 @@
+.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

@@ -0,0 +1,296 @@
+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;