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

package/src/Form/FormFunctions.ts

@@ -0,0 +1,263 @@
+import { RawDraftContentState, convertFromRaw, convertToRaw } from 'draft-js';
+import { FormStep, Mapper } from '../@Types/FormStep';
+import StepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
+import { DependencyStore, StepDependency } from './Form';
+import { CustomStep } from '../FormSteps/CustomStep';
+import { CBRFormStep } from '../@Types/CBRFormStep';
+import { MapperElement } from '../@Types/MapperElement';
+import { ValuesStore } from '../States/SiteSlice';
+import { calcRecursiveData } from '../App/AppFunctions';
+
+/**
+ * Function that cals the value of a step to output on submit
+ */
+export const calcValue = (
+    idStep: string,
+    steps: Record<string, FormStep>,
+    values: Record<string, any>,
+    customSteps: Record<string, CustomStep> | undefined,
+    deleteIds: string[],
+    value = values[idStep]
+): any => {
+    const step = steps[idStep];
+    if (!step) return value;
+    const custom = customSteps?.[step?.type];
+    if (custom !== undefined) {
+        return custom.calcValue?.(step, value) ?? value;
+    } else {
+        switch (step.type) {
+            case StepTypes.TEXTAREA: {
+                if (step.hasTextEditor) {
+                    const currentContent = value.getCurrentContent();
+                    return {
+                        value: currentContent.getPlainText(),
+                        draft: convertToRaw(currentContent),
+                    };
+                } else {
+                    return {
+                        value,
+                        draft: stringToDraft(value),
+                    };
+                }
+            }
+            case StepTypes.FILEUPLOAD: {
+                return value.map((val: any) => ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }));
+            }
+            case StepTypes.SELECTOR:
+            case StepTypes.CLASSIFIER_SELECTOR: {
+                return value.value;
+            }
+            case StepTypes.MAPPER: {
+                const elements: MapperElement<any>[] = value?.filter(
+                    (element: any) => element.deleted !== true
+                );
+
+                const mappedValues: Record<string, any>[] = [];
+                for (const element of elements) {
+                    const newValue: Record<string, any> = {
+                        id: element.id,
+                    };
+                    for (const key of Object.keys(element.originalValues)) {
+                        newValue[key] = element.originalValues[key];
+                    }
+                    if (element.value) newValue.value = element.value;
+                    for (const idStep of Object.keys(step.steps)) {
+                        const mappedId = element.ids[idStep];
+                        if (values[mappedId] !== undefined) {
+                            newValue[idStep] = calcValue(
+                                idStep,
+                                step.steps,
+                                values,
+                                customSteps,
+                                deleteIds,
+                                values[mappedId]
+                            );
+                            deleteIds.push(mappedId);
+                        }
+                    }
+                    mappedValues.push(newValue);
+                }
+                return mappedValues;
+            }
+            case StepTypes.TITLE: {
+                return value ?? undefined;
+            }
+            case StepTypes.COLLAPSIBLE:
+                deleteIds.push(idStep);
+                return;
+            default:
+                if ((step?.type as any) === 'CBR_INCIDENCIAS') {
+                    return value?.filter(
+                        (incidencia: any) => incidencia.deleted !== true
+                    );
+                }
+                return value;
+        }
+    }
+};
+
+function stringToDraft(text: string): any {
+    const draftStructure = {
+        blocks: [] as any[],
+        entityMap: {},
+    };
+    text.split('\n').forEach((element, index) => {
+        draftStructure.blocks.push({
+            key: String(index),
+            text: element,
+            type: 'unstyled',
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+        });
+    });
+    return draftStructure as RawDraftContentState;
+}
+
+export function calcDependencies(
+    steps: Record<string, FormStep | CBRFormStep>,
+    customSteps: Record<string, CustomStep> = {},
+    allSteps: Record<string, FormStep | CBRFormStep> = steps,
+    dependencies: DependencyStore = {},
+    values: ValuesStore = {
+        global: {},
+        sections: {},
+    },
+    addDependents = true
+): DependencyStore {
+    for (const step of Object.values(steps)) {
+        if (step.dependencies) {
+            for (const idDep of step.dependencies) {
+                if (
+                    dependencies[idDep] === undefined &&
+                    (addDependents || allSteps[idDep])
+                )
+                    dependencies[idDep] = calcStepDependency(
+                        idDep,
+                        allSteps,
+                        values,
+                        customSteps
+                    );
+                if (addDependents) dependencies[idDep].dependents.push(step);
+            }
+        }
+        if (step.type === StepTypes.ENTITYVALUEPICKER) {
+            for (const dep of [...step.path, ...step.filters]) {
+                if (dep.type !== EntityValueDataTypes.STEP) continue;
+                if (step.dependencies?.includes(dep.idStep)) continue;
+                if (
+                    dependencies[dep.idStep] === undefined &&
+                    (addDependents || allSteps[dep.idStep])
+                ) {
+                    dependencies[dep.idStep] = calcStepDependency(
+                        dep.idStep,
+                        allSteps,
+                        values,
+                        customSteps
+                    );
+                }
+                if (addDependents)
+                    dependencies[dep.idStep].dependents.push(step);
+            }
+        }
+        if (step.type === StepTypes.MAPPER) {
+            const subSteps = calcMapperSubSteps(
+                step,
+                values.sections[step.idSection]?.[step.id],
+                customSteps
+            );
+            const hasSubSteps = Object.keys(subSteps).length > 0;
+            calcDependencies(
+                hasSubSteps ? subSteps : step.steps,
+                customSteps,
+                { ...allSteps, ...subSteps },
+                dependencies,
+                values,
+                hasSubSteps
+            );
+        }
+    }
+    return dependencies;
+}
+
+export const calcMapperSubSteps = (
+    step: Mapper,
+    elements: MapperElement<any>[] = [],
+    customSteps: Record<string, CustomStep>
+): Record<string, FormStep> => {
+    const newSteps: Record<string, FormStep> = {};
+    for (const element of elements) {
+        const elemSteps: Record<string, FormStep> = {};
+        for (const idSubStep of Object.keys(step.steps)) {
+            const baseStep = JSON.parse(
+                JSON.stringify(step.steps[idSubStep] ?? '{}')
+            );
+            const newIdStep = element.ids[idSubStep];
+            baseStep.id = newIdStep;
+            elemSteps[newIdStep] = baseStep;
+            newSteps[newIdStep] = baseStep;
+        }
+        calcRecursiveData(element, elemSteps, customSteps);
+    }
+    return newSteps;
+};
+
+function calcStepDependency(
+    idStep: string,
+    steps: Record<string, FormStep | CBRFormStep>,
+    values: ValuesStore,
+    customSteps: Record<string, CustomStep>
+): StepDependency {
+    const depStep = steps[idStep];
+    if (!depStep) {
+        console.error('Missing Step Dependency:', idStep);
+        const originalValue = values.global[idStep];
+        return {
+            type: originalValue ? 'ORIGINAL' : ('MISSING' as any),
+            value: originalValue ?? null,
+            dependents: [],
+        };
+    }
+    const originalValue = values.sections[depStep.idSection]?.[depStep.id];
+    return {
+        type: depStep.type,
+        value: calcStepDependencyValue(depStep, originalValue, customSteps),
+        dependents: [],
+    };
+}
+
+function calcStepDependencyValue(
+    depStep: FormStep | CBRFormStep,
+    originalValue: any,
+    customSteps: Record<string, CustomStep>
+): StepDependency['value'] {
+    const custom = customSteps[depStep?.type];
+    if (custom?.calcDependencyValue) {
+        return custom.calcDependencyValue(depStep, originalValue);
+    }
+    switch (depStep.type) {
+        case StepTypes.TEXTAREA: {
+            if (depStep.hasTextEditor) {
+                return originalValue
+                    ? convertFromRaw(originalValue).getPlainText()
+                    : null;
+            } else {
+                return originalValue ?? null;
+            }
+        }
+        case StepTypes.MAPPER: {
+            //TODO: Esto aun no se usa
+            return (
+                originalValue?.map(
+                    (mapperValue: any) => mapperValue.value ?? mapperValue
+                ) ?? null
+            );
+        }
+        default:
+            return originalValue ?? null;
+    }
+}

package/src/Form/FormHooks.ts

@@ -0,0 +1,68 @@
+import { createSelector } from 'reselect';
+import { RootState } from '../Utils/store';
+import { useCallback, useLayoutEffect } from 'react';
+import { updateWidthStats } from '../States/WidthStatsSlice';
+import { useAppDispatch } from '../hooks';
+import { WidthStats } from './Form';
+import { Form } from '../@Types';
+
+export const selectCurrentValues = createSelector(
+    [
+        (state: RootState): string | null => state.site.idCurrentSection,
+        (state: RootState): Record<string, Record<string, any>> =>
+            state.site.values.sections,
+    ],
+    (idCurrent, values) => values[idCurrent ?? ''] ?? {}
+);
+
+export function useWidthStats(
+    containerRef: React.RefObject<HTMLDivElement>,
+    form: Form,
+    postview: boolean,
+    internal: boolean
+): void {
+    const calcWidthStats = useCallback(
+        (currentWidth: number): WidthStats => {
+            let currentBreakPoint = form.size.blockNum;
+            const padding = postview || internal || !form.isStandAlone ? 0 : 40;
+            while (
+                currentWidth <
+                (form.size.blockSize + form.size.spacingSize) *
+                    currentBreakPoint +
+                    padding
+            ) {
+                currentBreakPoint--;
+            }
+            return {
+                isResponsive:
+                    currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum +
+                        padding,
+                isMobile:
+                    currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+                currentBreakPoint,
+            };
+        },
+        [form, postview, internal]
+    );
+    const dispatch = useAppDispatch();
+
+    /** Calcs the currentBreakPoint and if is mobile */
+    useLayoutEffect(() => {
+        const handleResize = (): void => {
+            const currentWidth = containerRef?.current?.offsetWidth;
+            if (currentWidth !== undefined) {
+                const current = calcWidthStats(currentWidth);
+                dispatch(updateWidthStats(current));
+            }
+        };
+        /** On load add a resize listener to calc the currentBreakpoint */
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return (): void => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+}

package/src/Form/FormTypes/ColumnForm/ColumnForm.module.css

@@ -0,0 +1,19 @@
+.container {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+}
+.curtain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+.submitBtnContainer {
+    margin-top: 10px;
+    width: 200px;
+    max-width: calc(100% - 40px);
+}

package/src/Form/FormTypes/ColumnForm/ColumnForm.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useContext, useState } from 'react';
+import { FormComponentProps } from '../../Form';
+import styles from './ColumnForm.module.css';
+import React from 'react';
+import Terms from '../../Terms/Terms';
+import { useFormContext } from 'react-hook-form';
+import { useAppSelector } from '../../../hooks';
+import Section from '../../Section/Section';
+import CustomContext from '../../../Contexts/CustomContext';
+import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
+
+function ColumnForm({
+    onSubmit,
+    customSubmitBtns,
+}: FormComponentProps): JSX.Element {
+    const [loading, setLoading] = useState(false);
+    const { postview, editable, formStyle } = useAppSelector(
+        (state) => state.global
+    );
+    const { trigger, getValues, handleSubmit } = useFormContext();
+    const { sendLabel } = useContext(CustomContext);
+    const previous = useAppSelector((state) => state.site.previousSections);
+    const next = useAppSelector((state) => state.site.nextSections);
+
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    const handleErrors = handleSubmit(
+        () => {},
+        (errors) => {
+            console.error('Errors:', errors);
+        }
+    );
+
+    const submit = useCallback(async (): Promise<Record<
+        string,
+        any
+    > | void> => {
+        setLoading(true);
+        const valid = await trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            handleErrors();
+            return setLoading(false);
+        }
+        const values = await onSubmit(getValues());
+        setLoading(false);
+        return values;
+    }, []);
+
+    return (
+        <div
+            className={styles.container}
+            style={{ color: formStyle.textColor }}
+        >
+            {loading && <div className={styles.curtain}></div>}
+            {previous.map((idSection) => (
+                <Section key={idSection} idSection={idSection} />
+            ))}
+            {next.map((idSection) => (
+                <Section key={idSection} idSection={idSection} />
+            ))}
+            {/* MAP term & cond */}
+            <Terms />
+            {!postview && editable && (
+                <React.Fragment>
+                    {!customSubmitBtns && (
+                        <div className={styles.submitBtnContainer}>
+                            <CustomBtn
+                                onClick={submit}
+                                width="calc(100% - 70px)"
+                                label={sendLabel ?? 'Enviar'}
+                                backgroundColor={formStyle.primaryColor}
+                                color={formStyle.primaryContrastColor}
+                                loading={loading}
+                                data-testid="form__submit"
+                            ></CustomBtn>
+                        </div>
+                    )}
+                    {customSubmitBtns?.(submit, loading)}
+                </React.Fragment>
+            )}
+        </div>
+    );
+}
+
+export default ColumnForm;

package/src/Form/FormTypes/StepperForm/StepperForm.module.css

@@ -0,0 +1,26 @@
+.container {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+}
+.curtain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+.btnsContainer {
+    margin-top: 10px;
+    max-width: calc(100% - 40px);
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox; /* TWEENER - IE 10 */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px 20px;
+}

package/src/Form/FormTypes/StepperForm/StepperForm.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useContext, useState } from 'react';
+import { FormComponentProps } from '../../Form';
+import styles from './StepperForm.module.css';
+import Terms from '../../Terms/Terms';
+import { useFormContext } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import Section from '../../Section/Section';
+import CustomContext from '../../../Contexts/CustomContext';
+import * as SiteReducer from '../../../States/SiteSlice';
+import { getAppState } from '../../../Utils/store';
+import { IdFormContext } from '../../../App/App';
+import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
+
+function StepperForm({
+    onSubmit,
+    scrollToTop,
+}: FormComponentProps): JSX.Element {
+    const [loading, setLoading] = useState<undefined | 'BACK' | 'NEXT'>(
+        undefined
+    );
+    const { postview, editable, formStyle } = useAppSelector(
+        (state) => state.global
+    );
+    const { trigger, getValues, handleSubmit } = useFormContext();
+    const { sendLabel } = useContext(CustomContext);
+
+    const dispatch = useAppDispatch();
+    const previous = useAppSelector((state) => state.site.previousSections);
+    const idCurrent = useAppSelector((state) => state.site.idCurrentSection);
+    const idForm = useContext(IdFormContext);
+    const next = useAppSelector((state) => state.site.nextSections);
+
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    const handleErrors = handleSubmit(
+        () => {},
+        (errors) => {
+            console.error('Errors:', errors);
+        }
+    );
+
+    const handlePrevious = useCallback(async (): Promise<void> => {
+        dispatch(SiteReducer.handlePrevious(getValues()));
+        scrollToTop?.();
+    }, []);
+
+    const handleNext = useCallback(async (): Promise<Record<
+        string,
+        any
+    > | void> => {
+        setLoading('NEXT');
+        const valid = await trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            handleErrors();
+            return setLoading(undefined);
+        }
+        if (next.length > 0) {
+            dispatch(SiteReducer.handleNext(getValues()));
+            scrollToTop?.();
+            return setLoading(undefined);
+        }
+        const state = await dispatch(getAppState({ idForm })).unwrap();
+        /** put all the values of the previous sections into a single object */
+        let values = state.site.previousSections.reduce(
+            (v, idSection) => ({
+                ...v,
+                ...state.site.values.sections[idSection],
+            }),
+            {}
+        );
+        /** Add the current section's values */
+        values = { ...values, ...getValues() };
+        const response = await onSubmit(values);
+        setLoading(undefined);
+        return response;
+    }, [next]);
+
+    if (!idCurrent) return <></>;
+
+    return (
+        <div
+            className={styles.container}
+            style={{ color: formStyle.textColor }}
+        >
+            {loading && <div className={styles.curtain}></div>}
+            <Section key={idCurrent} idSection={idCurrent} />
+            {next.length === 0 && <Terms />}
+            <div className={styles.btnsContainer}>
+                {previous.length > 0 && (
+                    <CustomBtn
+                        label="Volver"
+                        data-testid="form__back"
+                        onClick={handlePrevious}
+                        backgroundColor={formStyle.primaryColor}
+                        color={formStyle.primaryContrastColor}
+                        disabled={!!loading}
+                        loading={loading === 'BACK'}
+                    />
+                )}
+                {(next.length > 0 || (!postview && editable)) && (
+                    <CustomBtn
+                        label={
+                            next.length > 0
+                                ? 'Siguiente'
+                                : sendLabel ?? 'Enviar'
+                        }
+                        data-testid="form__submit"
+                        onClick={handleNext}
+                        backgroundColor={formStyle.primaryColor}
+                        color={formStyle.primaryContrastColor}
+                        disabled={!!loading}
+                        loading={loading === 'NEXT'}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default StepperForm;

package/src/Form/Section/MaterialSection/MaterialSection.module.css

@@ -0,0 +1,8 @@
+.container {
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}

package/src/Form/Section/MaterialSection/MaterialSection.tsx

@@ -0,0 +1,44 @@
+import StepComponent from '../../../FormSteps/Step';
+import { SectionComponentProps } from '../Section';
+import styles from './MaterialSection.module.css';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useContext } from 'react';
+import CustomContext from '../../../Contexts/CustomContext';
+import FormContext from '../../../Contexts/FormContext';
+
+function MaterialSection({ idSection }: SectionComponentProps): JSX.Element {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { editable } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const { sendLabel } = useContext(CustomContext);
+    const section = form.sections[idSection];
+    if (!section) return <></>;
+    return (
+        <div
+            className={styles.container}
+            style={{
+                width:
+                    (form.size.blockSize + form.size.spacingSize) *
+                    form.size.blockNum,
+                justifyContent:
+                    sendLabel !== undefined &&
+                    currentBreakPoint < form.size.blockNum
+                        ? 'center'
+                        : 'normal',
+            }}
+        >
+            {section.steps?.map((idStep: string) => {
+                const step = form.steps[idStep];
+                return (
+                    <StepComponent
+                        editable={editable}
+                        step={step}
+                        key={idStep}
+                    />
+                );
+            })}
+        </div>
+    );
+}
+
+export default MaterialSection;

package/src/Form/Section/Section.tsx

@@ -0,0 +1,25 @@
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialSection from './MaterialSection/MaterialSection';
+import SectionContext from '../../Contexts/SectionContext';
+import { useAppSelector } from '../../hooks';
+
+export interface SectionComponentProps {
+    idSection: string;
+}
+function SectionComponent(props: SectionComponentProps): JSX.Element {
+    const formStyle = useAppSelector((state) => state.global.formStyle);
+    const renderSectionType = (): JSX.Element => {
+        switch (formStyle.type) {
+            case FormStyleTypes.MATERIAL:
+            default: {
+                return <MaterialSection {...props} />;
+            }
+        }
+    };
+    return (
+        <SectionContext.Provider value={props.idSection}>
+            {renderSectionType()}
+        </SectionContext.Provider>
+    );
+}
+export default SectionComponent;