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

package/src/FormSteps/StepFunctions.ts

@@ -0,0 +1,315 @@
+import { FormSize } from '../@Types/Form';
+import {
+    ApiSelector,
+    CheckBox,
+    ClassifierSelector,
+    EntityValuePicker,
+    FormSelector,
+    FormStep,
+} from '../@Types/FormStep';
+import {
+    ApiSelectorOptionTypes,
+    ClassifierOptionTypes,
+    EntityValueDataTypes,
+    EntityValueOptionTypes,
+    OptionTypes,
+    StepTypes,
+} from '../constants/FormStepTypes';
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+import { AYFCityStep, AYFFormStep } from '../@Types/AYFFormStep';
+import { CBRElementStep, CBRFormStep } from '../@Types/CBRFormStep';
+import AYFFormStepTypes from '../constants/AYFFormStepTypes';
+import { getRawText } from '../Utils/DraftFunctions';
+
+export type FillerSteps =
+    | FormSelector
+    | ClassifierSelector
+    | EntityValuePicker
+    | ApiSelector
+    | CheckBox;
+
+export function calcFillerSize(
+    step: FillerSteps,
+    steps: Record<string, FormStep>,
+    values: Record<string, unknown>,
+    size: FormSize
+): number {
+    const maxSize = step.maxSize ?? size.blockNum;
+    if (maxSize < size.blockNum) {
+        const tsize = recursivelyCheckOpenSize(step.id, steps, values);
+        const stepSize = maxSize - tsize;
+        return (
+            size.blockSize * stepSize + size.spacingSize * (stepSize - 1) + 20
+        );
+    } else {
+        return 0;
+    }
+}
+
+function recursivelyCheckOpenSize(
+    idStep: string,
+    steps: Record<string, FormStep>,
+    values: Record<string, any>
+): number {
+    const step = steps[idStep];
+    const value = values[idStep];
+
+    switch (step.type) {
+        case StepTypes.SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options.find(
+                    (option) => option.value === value.value
+                );
+                if (currentOption?.type === OptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        const temp = recursivelyCheckOpenSize(
+                            pStepId,
+                            steps,
+                            values
+                        );
+                        optionSize += temp;
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case StepTypes.CLASSIFIER_SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if (currentOption?.type === ClassifierOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(
+                            pStepId,
+                            steps,
+                            values
+                        );
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case StepTypes.ENTITYVALUEPICKER: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if (currentOption?.type === EntityValueOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(
+                            pStepId,
+                            steps,
+                            values
+                        );
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case StepTypes.API_SELECTOR: {
+            let size = step.size;
+            if (value) {
+                const currentOption = step.options[value];
+                if (currentOption?.type === ApiSelectorOptionTypes.NESTED) {
+                    let optionSize = 0;
+                    for (const pStepId of currentOption.steps) {
+                        optionSize += recursivelyCheckOpenSize(
+                            pStepId,
+                            steps,
+                            values
+                        );
+                    }
+                    size += optionSize;
+                }
+            }
+            return size;
+        }
+        case StepTypes.CHECKBOX: {
+            let size = step.size;
+            const stepSteps = value ? step.steps : step.uncheckedSteps;
+            let optionSize = 0;
+            for (const pStepId of stepSteps ?? []) {
+                optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+            }
+            size += optionSize;
+            return size;
+        }
+        case StepTypes.DATEPICKER:
+        case StepTypes.TEXTINPUT: {
+            return step.size;
+        }
+        default:
+            return 4;
+    }
+}
+
+export const calcStepWidth = (
+    stepSize: 1 | 2 | 3 | 4,
+    size: FormSize
+): number => {
+    return size.blockSize * stepSize + size.spacingSize * (stepSize - 1);
+};
+
+export const calcDefaultValue = (step: FormStep | CBRFormStep): any => {
+    switch (step.type) {
+        case StepTypes.CHECKBOX:
+            return step.defaultValue ?? false;
+        case StepTypes.TITLE:
+            return undefined;
+        case StepTypes.SELECTOR:
+            if (step.defaultValue)
+                return (
+                    step.options.find(
+                        (option) => option.value === step.defaultValue
+                    ) ?? ''
+                );
+            return '';
+        case StepTypes.TEXTINPUT:
+        case StepTypes.CLASSIFIER_SELECTOR:
+            return '';
+        case StepTypes.TEXTAREA:
+            if (step.hasTextEditor) return getRawText();
+            else return '';
+        case StepTypes.RATING:
+        case StepTypes.DATEPICKER:
+        case StepTypes.API_SELECTOR:
+        case StepTypes.ENTITYVALUEPICKER:
+            return null;
+        case StepTypes.MAPPER:
+        case StepTypes.FILEUPLOAD:
+        case CBRFormStepTypes.CBR_INCIDENCIAS:
+            return [];
+        case StepTypes.COLLAPSIBLE:
+            return false;
+        case StepTypes.SEPARATOR:
+        default:
+            return undefined;
+    }
+};
+
+export const iterateNestedSteps = (
+    idStep: string,
+    steps: Record<string, FormStep>,
+    iteration: (step: FormStep) => void
+): void => {
+    const step = steps[idStep];
+    iteration(step);
+    if (step.type === StepTypes.MAPPER) {
+        for (const idStep of step.rootSteps) {
+            iterateNestedSteps(idStep, step.steps, iteration);
+        }
+    } else {
+        for (const idSubStep of calcSubSteps(step.id, steps)) {
+            iterateNestedSteps(idSubStep, steps, iteration);
+        }
+    }
+};
+
+/**
+ * Utility function to calc the substeps of a step
+ * @param step step to calc the substeps
+ * @param idModifier optional modifier for the ids of the substeps and all other properties
+ * @returns list of the ids of the substeps of the step, if modifier returns modified steps
+ */
+export const calcSubSteps = (
+    idStep: string,
+    allSteps: Record<string, FormStep | CBRFormStep | AYFFormStep>,
+    idModifier?: (idSubStep: string) => string
+): string[] => {
+    const step = allSteps[idStep];
+    const subSteps: string[] = [];
+    if (!step) return [];
+    const handleSteps = (steps: string[]): void => {
+        for (let i = 0; i < steps.length; i++) {
+            const idSubStep = steps[i];
+            if (idModifier) steps[i] = idModifier(steps[i]);
+            subSteps.push(
+                idSubStep,
+                ...calcSubSteps(idSubStep, allSteps, idModifier)
+            );
+        }
+    };
+
+    switch (step.type) {
+        case StepTypes.SELECTOR: {
+            for (const option of step.options) {
+                if (option.type === OptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        }
+        case StepTypes.CLASSIFIER_SELECTOR:
+            for (const idOption of Object.keys(step.options)) {
+                const option = step.options[idOption];
+                if (option.type === ClassifierOptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        case StepTypes.RATING:
+            if (step.nestedSteps) {
+                for (const steps of step.nestedSteps) {
+                    handleSteps(steps);
+                }
+            }
+            break;
+        case StepTypes.COLLAPSIBLE: {
+            handleSteps(step.steps);
+            break;
+        }
+        case StepTypes.CHECKBOX: {
+            if (step.steps) handleSteps(step.steps);
+            if (step.uncheckedSteps) handleSteps(step.uncheckedSteps);
+            break;
+        }
+        case StepTypes.ENTITYVALUEPICKER:
+            if (idModifier) {
+                for (const path of step.path) {
+                    if (path.type === EntityValueDataTypes.STEP) {
+                        path.idStep = idModifier(path.idStep);
+                    }
+                }
+                for (const filter of step.filters) {
+                    if (filter.type === EntityValueDataTypes.STEP) {
+                        filter.idStep = idModifier(filter.idStep);
+                    }
+                }
+            }
+            for (const idOption of Object.keys(step.options ?? {})) {
+                const option = step.options[idOption];
+                if (option.type === EntityValueOptionTypes.NESTED) {
+                    handleSteps(option.steps);
+                }
+            }
+            break;
+        case CBRFormStepTypes.CBR_LOCATIVAS as any:
+            {
+                const elementStep: CBRElementStep = step as any;
+                if (elementStep.subStep) {
+                    if (idModifier)
+                        elementStep.subStep = idModifier(elementStep.subStep);
+                    subSteps.push(elementStep.subStep);
+                }
+            }
+            break;
+        case AYFFormStepTypes.AYF_ICA_CITY as any: {
+            const cityStep: AYFCityStep = step as any;
+            if (cityStep.idNitStep) {
+                if (idModifier)
+                    cityStep.idNitStep = idModifier(cityStep.idNitStep);
+                subSteps.push(cityStep.idNitStep);
+            }
+            break;
+        }
+        default:
+            break;
+    }
+    return subSteps;
+};

package/src/FormSteps/StepHooks.ts

@@ -0,0 +1,204 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { GBaseStep } from '../@Types/GenericFormSteps';
+import { useAppSelector, useAppDispatch } from '../hooks';
+import {
+    ValuesStore,
+    clearDependency,
+    setStepDependency,
+} from '../States/SiteSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from '../Utils/store';
+import { Form } from '../@Types';
+import { DependencyStore } from '../Form/Form';
+import { calcDefaultValue } from './StepFunctions';
+import { FormStep } from '../@Types/FormStep';
+import {
+    FieldError,
+    RefCallBack,
+    UseControllerProps,
+    useController,
+} from 'react-hook-form';
+import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
+
+const selectIsDependency = createSelector(
+    [
+        (state: RootState): DependencyStore => state.site.dependencies,
+        (state: RootState, step: GBaseStep): GBaseStep => step,
+    ],
+    (dependencies, step) => {
+        return dependencies[step.id] !== undefined;
+    }
+);
+
+export const selectOriginalValue = createSelector(
+    [
+        (state: RootState): ValuesStore => state.site.values,
+        (state: RootState, step: GBaseStep): GBaseStep => step,
+    ],
+    (values, step) => values.sections[step.idSection]?.[step.id]
+);
+
+export interface StepDependency {
+    originalValue: any;
+    isDependency: boolean;
+    handleStepDep: (value: any | undefined) => void;
+}
+
+export const useStepDependency = (
+    step: GBaseStep,
+    defaultValue?: any
+): StepDependency => {
+    const isDependency = useAppSelector((state) =>
+        selectIsDependency(state, step)
+    );
+    const originalValue = useAppSelector((state) =>
+        selectOriginalValue(state, step)
+    );
+
+    const dispatch = useAppDispatch();
+
+    useEffect(() => {
+        if (isDependency && !originalValue && defaultValue) {
+            dispatch(
+                setStepDependency({
+                    step,
+                    value: defaultValue,
+                })
+            );
+        }
+        return () => {
+            dispatch(clearDependency(step));
+        };
+    }, [isDependency]);
+
+    const handleStepDep = useCallback(
+        (value: any | undefined) => {
+            if (!isDependency) return;
+            dispatch(
+                setStepDependency({
+                    step,
+                    value: value ?? null,
+                })
+            );
+        },
+        [step.id, step.type, isDependency]
+    );
+
+    return {
+        handleStepDep,
+        isDependency,
+        originalValue:
+            originalValue ?? defaultValue ?? calcDefaultValue(step as FormStep),
+    };
+};
+
+export const selectDependencies = createSelector(
+    [
+        (state: RootState): DependencyStore => state.site.dependencies,
+        (state: RootState, step: GBaseStep): GBaseStep => step,
+        (state: RootState, step: GBaseStep, form: Form): Form => form,
+    ],
+    (dependencies, step, form) => {
+        const invalids: string[] = [];
+        let emptyDep = false;
+        /** Show deep error changes even if not in dependencies */
+        for (const idDep of calcDeepDependencies(step.id, form)) {
+            const dependency = dependencies[idDep];
+            if (dependency?.value === null && form.steps[idDep]) {
+                invalids.push(idDep);
+            }
+            if (dependency?.empty) emptyDep = true;
+        }
+        return { invalids, emptyDep };
+    }
+);
+
+const calcDeepDependencies = (
+    idStep: string,
+    form: Form,
+    deps: string[] = []
+): any[] => {
+    const step = form.steps[idStep];
+    if (step?.dependencies) {
+        for (const dep of step.dependencies) {
+            if (!deps.includes(dep)) {
+                deps.push(...calcDeepDependencies(dep, form, deps), dep);
+            }
+        }
+    }
+    return deps;
+};
+
+export interface UseFormStepOptions<ValueType> {
+    defaultValue: ValueType;
+    /** If true, will not trigger onChange until the user has finished typing */
+    debounce?: boolean;
+    rules?: UseControllerProps['rules'];
+    /** If the step should trigger a filler(root StepFiller) size change */
+    sizeChange?: boolean;
+}
+
+export const useFormStep = <ValueType = unknown>(
+    step: GBaseStep,
+    { rules, debounce, sizeChange, defaultValue }: UseFormStepOptions<ValueType>
+): {
+    value: ValueType;
+    ref: RefCallBack;
+    onChange: (value: ValueType) => void;
+    error: FieldError | undefined;
+    field: Omit<
+        ReturnType<typeof useController>['field'],
+        'ref' | 'value' | 'onChange'
+    >;
+} => {
+    const [timer, setTimer] = useState<ReturnType<typeof setTimeout>>();
+
+    const { isDependency, handleStepDep, originalValue } = useStepDependency(
+        step,
+        defaultValue
+    );
+
+    const {
+        field: { ref, value, onChange: fieldOnChange, ...field },
+        fieldState: { error },
+    } = useController({
+        name: step.id,
+        rules,
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    });
+
+    const handleSizeChange = useContext(SizeChangeContext);
+
+    const onChange = useCallback(
+        (value: ValueType): void => {
+            if (isDependency) {
+                if (debounce) {
+                    try {
+                        clearTimeout(timer);
+                        // eslint-disable-next-line no-empty
+                    } catch (e) {}
+                    setTimer(
+                        setTimeout(() => {
+                            handleStepDep(value);
+                            setTimer(undefined);
+                        }, 1000)
+                    );
+                } else {
+                    handleStepDep(value);
+                }
+            }
+            fieldOnChange(value);
+            if (sizeChange) handleSizeChange?.();
+        },
+        [handleStepDep, isDependency, fieldOnChange]
+    );
+
+    return {
+        ref,
+        value,
+        onChange,
+        error,
+        field,
+    };
+};

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/DraftEditor.css

@@ -0,0 +1,96 @@
+.EF-DraftContainer {
+    font: inherit;
+    font-size: 1rem;
+}
+.postview-editor {
+    cursor: default !important;
+}
+.EF-DraftContainer .DraftEditor-root {
+    height: unset;
+}
+
+.EF-DraftContainer .rdw-option-wrapper {
+    border-radius: 7px;
+    border: 1px solid var(--eureka-outline);
+    background-color: transparent;
+}
+
+.EF-DraftContainer .rdw-option-wrapper:active {
+    border: 1px solid var(--eureka-primary);
+}
+.EF-DraftContainer .rdw-option-wrapper:hover {
+    box-shadow: none;
+    border: 1px solid var(--eureka-primary);
+}
+
+.EF-DraftContainer .rdw-option-active {
+    border: 1px solid var(--eureka-primary);
+    box-shadow: none;
+}
+
+.EF-DraftContainer .rdw-editor-toolbar {
+    border-radius: 15px 15px 0 0;
+    border: none;
+    border-bottom: 1px solid var(--eureka-outline);
+    background-color: transparent;
+}
+
+.postview-editor-toolbar {
+    pointer-events: none;
+}
+
+.EF-DraftContainer .rdw-editor-main {
+    cursor: text;
+    padding-top: 12px;
+    padding-bottom: 40px;
+    margin-right: 0px;
+}
+
+.EF-DraftContainer .public-DraftStyleDefault-block {
+    margin: 0px 0;
+    max-width: 100%;
+}
+
+.EF-DraftContainer .rdw-image-imagewrapper {
+    max-width: 100%;
+    /* cursor: pointer; */
+    position: relative;
+}
+
+.EF-DraftContainer .rdw-image-alignment-editor {
+    padding-right: 10px;
+    padding-left: 5px;
+    margin-left: -5px;
+}
+.EF-DraftContainer .rdw-editing-image {
+    border: 1px solid var(--secondary);
+}
+
+.EF-DraftContainer .DraftEditor-root figure {
+    margin: 0px;
+}
+
+.EF-DraftContainer .rdw-image-alignment-option {
+    font-size: 16px !important;
+    width: 20px;
+    height: 20px;
+    margin-left: 2px;
+    border-radius: 2px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--light-grey);
+}
+
+.EF-DraftContainer .rdw-image-alignment-options-popup {
+    width: fit-content;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+}
+
+/* Hides empty placeholder */
+.EF-DraftContainer
+    .RichEditor-hidePlaceholder
+    .public-DraftEditorPlaceholder-root {
+    display: none;
+}