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

package/src/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.module.css

@@ -0,0 +1,30 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+    padding-bottom: 15px;
+}
+.labelLabel {
+    font-size: 16px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+.ratingContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stepDescriptionLabel {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    min-height: 20px;
+}

package/src/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.tsx

@@ -0,0 +1,98 @@
+import styles from './MaterialRatingStep.module.css';
+import { RatingStepProps } from '../RatingStep';
+import React, { useContext } from 'react';
+import Rating from '../../../Shared/Rating/Rating';
+import { RatingTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import { calcDefaultValue } from '../../StepFunctions';
+
+function RatingStep({ step, editable }: RatingStepProps): JSX.Element {
+    const { ref, value, onChange, error } = useFormStep<
+        undefined | null | number
+    >(step, {
+        defaultValue: calcDefaultValue(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+
+    const renderNestedOption = (): JSX.Element | void => {
+        let currentOption;
+        if (value !== undefined && value !== null && step.nestedSteps) {
+            if (step.ratingType === RatingTypes.LIKE) {
+                currentOption = step.nestedSteps[value];
+            } else {
+                currentOption = step.nestedSteps[value - 1];
+            }
+            if (currentOption && currentOption.length > 0) {
+                return (
+                    <React.Fragment>
+                        {currentOption.map((idSubStep: string) => {
+                            const subStep = form.steps[idSubStep];
+                            return (
+                                <StepComponent
+                                    editable={editable}
+                                    step={subStep}
+                                    key={idSubStep}
+                                />
+                            );
+                        })}
+                    </React.Fragment>
+                );
+            }
+        }
+    };
+    return (
+        <React.Fragment>
+            <div
+                className={styles.container}
+                style={{
+                    paddingBottom: step.description || step.required ? 0 : 15,
+                }}
+            >
+                <div className={styles.labelLabel}>
+                    {step.label + (step.required ? ' *' : '')}
+                </div>
+                <div className={styles.ratingContainer}>
+                    <Rating
+                        name={step.id}
+                        type={step.ratingType}
+                        isMobile={widthStats.isMobile}
+                        focusColor={formStyle.primaryColor ?? '#3d5a7f'}
+                        unSelectedColor={formStyle.outlineColor ?? '#b8b8b8'}
+                        disabled={!editable || postview}
+                        value={value}
+                        onChange={onChange}
+                        inputRef={ref}
+                    />
+                </div>
+                {(step.description || step.required) && (
+                    <div
+                        className={styles.stepDescriptionLabel}
+                        style={{
+                            color:
+                                !!error && value === null
+                                    ? formStyle.errorColor ?? '#cc2936'
+                                    : formStyle.descriptionTextColor ??
+                                      '#989898',
+                        }}
+                    >
+                        {!!error && value === null
+                            ? error?.message
+                            : step.description}
+                    </div>
+                )}
+            </div>
+            {renderNestedOption()}
+        </React.Fragment>
+    );
+}
+
+export default RatingStep;

package/src/FormSteps/RatingStep/RatingStep.tsx

@@ -0,0 +1,20 @@
+import { Rating } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialRatingStep from './MaterialRatingStep/MaterialRatingStep';
+import { StepProps } from '../Step';
+import { useAppSelector } from '../../hooks';
+export interface RatingStepProps extends StepProps {
+    /** The RatingStep to display */
+    step: Rating;
+}
+function RatingStep(props: RatingStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialRatingStep {...props} />;
+        }
+    }
+}
+export default RatingStep;

package/src/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+}

package/src/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.tsx

@@ -0,0 +1,105 @@
+import { FormSelectorOption } from '../../../@Types/FormStep';
+import React, { useContext } from 'react';
+import { OptionTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import { SelectorStepProps } from '../SelectorStep';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
+
+function SelectorStep({ step, editable }: SelectorStepProps): JSX.Element {
+    const { ref, value, onChange, error, field } = useFormStep<{
+        label: string;
+        value: string;
+    }>(step, {
+        defaultValue: calcDefaultValue(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    });
+
+    const form = useContext(FormContext);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+
+    const mapNestedOption = (): void | JSX.Element => {
+        let currentOptionIndex: number | null = null;
+        let currentOption: FormSelectorOption | null = null;
+        for (let i = 0; i < step.options.length; i++) {
+            const option = step.options[i];
+            if (option?.value === value?.value) {
+                currentOptionIndex = i;
+                currentOption = option;
+            }
+        }
+        if (
+            currentOption?.type === OptionTypes.NESTED &&
+            currentOptionIndex !== null
+        ) {
+            return (
+                <React.Fragment>
+                    {currentOption.steps.map((idSubStep: string) => {
+                        const subStep = form.steps[idSubStep];
+                        return (
+                            <StepComponent
+                                editable={editable}
+                                step={subStep}
+                                key={idSubStep}
+                            />
+                        );
+                    })}
+                </React.Fragment>
+            );
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <MaterialInputContainer step={step} editable={editable}>
+                <RoundedSmartSelect
+                    {...field}
+                    value={value}
+                    inputRef={ref}
+                    handleUpdate={onChange}
+                    disabled={false}
+                    loading={false}
+                    options={step.options}
+                    cantEdit={!editable || postview}
+                    fullWidth
+                    backgroundColor={formStyle.stepBackgroundColor ?? 'white'}
+                    label={step.label}
+                    required={step.required}
+                    height={'31px'}
+                    searchable={step.searchable}
+                    icon={undefined}
+                    helperTextColor={formStyle.descriptionTextColor}
+                    focusColor={formStyle.primaryColor}
+                    outlineColor={formStyle.outlineColor}
+                    errorColor={formStyle.errorColor}
+                    color={formStyle.textColor}
+                    containerMargin="0px"
+                    getOptionSelected={(option, value): boolean => {
+                        return option?.value === value?.value;
+                    }}
+                    helperText={error?.message?.toString() ?? step.description}
+                    error={!!error}
+                />
+            </MaterialInputContainer>
+            {value && mapNestedOption()}
+        </React.Fragment>
+    );
+}
+
+function SelectorStepContainer(props: SelectorStepProps): JSX.Element {
+    return (
+        <StepFillerContainer step={props.step}>
+            <SelectorStep {...props} />
+        </StepFillerContainer>
+    );
+}
+
+export default SelectorStepContainer;

package/src/FormSteps/SelectorStep/SelectorStep.tsx

@@ -0,0 +1,20 @@
+import { useAppSelector } from '../../hooks';
+import { FormSelector } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialSelectorStep from './MaterialSelectorStep/MaterialSelectorStep';
+
+export interface SelectorStepProps extends StepProps {
+    /** The SelectorStep to display */
+    step: FormSelector;
+}
+function SelectorStep(props: SelectorStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialSelectorStep {...props} />;
+        }
+    }
+}
+export default SelectorStep;

package/src/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.module.css

@@ -0,0 +1,7 @@
+.container {
+    height: 2px;
+    width: calc(100% - 20px);
+    margin-bottom: 5px;
+    margin-left: 10px;
+    border-radius: 20px;
+}

package/src/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.tsx

@@ -0,0 +1,20 @@
+import { useAppSelector } from '../../../hooks';
+import { SeparatorStepProps } from '../SeparatorStep';
+import styles from './MaterialSeparatorStep.module.css';
+
+function SeparatorStep({ step }: SeparatorStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    return (
+        <div
+            className={styles.container}
+            style={{
+                backgroundColor: step.transparent
+                    ? 'transparent'
+                    : formStyle.primaryColor,
+            }}
+        ></div>
+    );
+}
+
+export default SeparatorStep;

package/src/FormSteps/SeparatorStep/SeparatorStep.tsx

@@ -0,0 +1,21 @@
+import { useAppSelector } from '../../hooks';
+import { Separator } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialSeparatorStep from './MaterialSeparatorStep/MaterialSeparatorStep';
+
+export interface SeparatorStepProps extends StepProps {
+    /** The TitleStep to display */
+    step: Separator;
+}
+function SeparatorStep(props: SeparatorStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialSeparatorStep {...props} />;
+        }
+    }
+}
+export default SeparatorStep;

package/src/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.tsx

@@ -0,0 +1,216 @@
+import { useFormContext } from 'react-hook-form';
+import { SmartSelectStepProps } from '../SmartSelectStep';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React from 'react';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
+import { selectDependencies, useFormStep } from '../../StepHooks';
+import { GSmartSelect } from '../../../@Types/GenericFormSteps';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+
+function SmartSelectStep<StepType extends GSmartSelect>({
+    icon,
+    step,
+    editable,
+    getOptions,
+    calcDepError,
+    defaultValue,
+    valueOverwrite,
+    getValueString,
+    changeListener,
+    getValueWarning,
+    getOptionSelected,
+    renderNestedSteps,
+}: SmartSelectStepProps<StepType>): JSX.Element {
+    const {
+        ref,
+        value,
+        error,
+        field,
+        onChange: handleChange,
+    } = useFormStep<string>(step, {
+        sizeChange: true,
+        defaultValue: defaultValue ?? null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+
+    const onChange = useCallback(
+        (value): void =>
+            handleChange(valueOverwrite ? valueOverwrite(value) : value),
+        [handleChange, valueOverwrite]
+    );
+
+    const { postview, formStyle, idOrganization } = useAppSelector(
+        (state) => state.global
+    );
+    const form = useContext(FormContext);
+    const [options, setOptions] = useState<any[] | null | undefined>();
+    const [loading, setLoading] = useState(false);
+    const [firstTime, setFirstTime] = useState(true);
+    const [touched, setTouched] = useState(false);
+    const dispatch = useAppDispatch();
+    const dependencyStore = useAppSelector((state) => state.site.dependencies);
+    const { emptyDep, invalids } = useAppSelector((state) =>
+        selectDependencies(state, step, form)
+    );
+    const { getValues, setFocus } = useFormContext();
+    const isEmpty = useAppSelector(
+        (state) => state.site.dependencies[step.id]?.empty
+    );
+
+    const disabled = emptyDep;
+
+    useEffect(
+        () => {
+            if (!postview && editable) {
+                calcOptions(firstTime);
+                if (firstTime) setFirstTime(false);
+            } else if (value && !step.searchable) {
+                setOptions([value]);
+            }
+        },
+        step.dependencies?.map((dep) => dependencyStore[dep]?.value) ?? []
+    );
+
+    const calcOptions = async (firstTime?: boolean): Promise<void> => {
+        if (!firstTime) setOptions(undefined);
+        if (value && !firstTime) setLoading(true);
+        try {
+            const resp = await getOptions?.(
+                idOrganization,
+                step,
+                dependencyStore
+            );
+            if (value) {
+                /** If the value is still valid select it */
+                if (resp && getValueString(value) !== undefined) {
+                    const newValue = resp.find(
+                        (option) =>
+                            getValueString(option) === getValueString(value)
+                    );
+                    if (!firstTime) onChange(newValue ?? null);
+                } else if (!firstTime) onChange(null);
+            }
+            setOptions(resp);
+            const empty = resp === null ? undefined : resp.length === 0;
+            /** Tell the dependency store this input is empty or not */
+            if (empty !== !!isEmpty) {
+                dispatch(
+                    setEmptyDependency({
+                        step,
+                        empty,
+                    })
+                );
+            }
+        } catch (error) {
+            console.error(error);
+            setOptions(null);
+        }
+        setLoading(false);
+    };
+
+    const warning = useMemo(
+        (): string | null | undefined => getValueWarning?.(value),
+        [value]
+    );
+
+    const onFocus = useCallback((): void => {
+        if (disabled || !editable || postview) return;
+        if (options === null) {
+            if (!value) {
+                if (invalids.length > 0) {
+                    const depStep = form.steps[invalids[0]];
+                    if (
+                        form.type === 'STEPPER' &&
+                        step.idSection !== depStep.idSection
+                    ) {
+                        dispatch(
+                            focusStep({
+                                step: form.steps[invalids[0]],
+                                values: getValues(),
+                            })
+                        );
+                    } else {
+                        setFocus(invalids[0]);
+                    }
+                } else if (value === undefined) {
+                    setLoading(true);
+                }
+            }
+        }
+        if (options === undefined) {
+            setLoading(true);
+        }
+        if (!touched) setTouched(true);
+    }, [options, disabled, postview, editable, invalids, touched]);
+
+    const errorMsg = useMemo((): string | undefined => {
+        if (postview || loading) return undefined;
+        if (invalids.length > 0 && touched) {
+            return calcDepError?.(invalids.map((idDep) => form.steps[idDep]));
+        } else if (value && options) {
+            const currentOption = options.find((option) =>
+                getOptionSelected(option, value)
+            );
+            if (!currentOption) {
+                return 'Este campo es obligatorio';
+            }
+        } else if (options === null && invalids.length === 0) {
+            return 'Error al cargar las opciones';
+        }
+        return undefined;
+    }, [invalids, touched, value, options]);
+
+    return (
+        <React.Fragment>
+            <MaterialInputContainer
+                step={step}
+                onClick={onFocus}
+                editable={editable}
+            >
+                <RoundedSmartSelect
+                    {...field}
+                    inputRef={ref}
+                    value={value}
+                    handleUpdate={onChange}
+                    onFocus={onFocus}
+                    disabled={options === null || disabled}
+                    hidden={disabled}
+                    loading={loading}
+                    options={options ?? undefined}
+                    cantEdit={!editable || postview}
+                    fullWidth
+                    backgroundColor={formStyle.stepBackgroundColor ?? 'white'}
+                    label={step.label}
+                    required={step.required}
+                    height={'31px'}
+                    changeListener={changeListener}
+                    searchable={step.searchable}
+                    icon={step.showIcon ? icon : undefined}
+                    helperTextColor={formStyle.descriptionTextColor}
+                    focusColor={formStyle.primaryColor}
+                    outlineColor={formStyle.outlineColor}
+                    errorColor={formStyle.errorColor}
+                    color={formStyle.textColor}
+                    containerMargin="0px"
+                    getOptionSelected={getOptionSelected}
+                    getValueString={getValueString}
+                    helperText={
+                        errorMsg ??
+                        warning ??
+                        error?.message?.toString() ??
+                        step.description ??
+                        undefined
+                    }
+                    error={!!errorMsg || !!warning || !!error}
+                />
+            </MaterialInputContainer>
+            {renderNestedSteps?.(value)}
+        </React.Fragment>
+    );
+}
+export default SmartSelectStep;

package/src/FormSteps/SmartSelectStep/SmartSelectStep.tsx

@@ -0,0 +1,48 @@
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialSmartSelectStep from './MaterialSmartSelectStep/MaterialSmartSelectStep';
+import { StepProps } from '../Step';
+import { GSmartSelect } from '../../@Types/GenericFormSteps';
+import { FormStep } from '../../@Types/FormStep';
+import { DependencyStore } from '../../Form/Form';
+import { useAppSelector } from '../../hooks';
+export interface SmartSelectStepProps<
+    StepType extends GSmartSelect = GSmartSelect,
+> extends Omit<StepProps, 'step'> {
+    /** The SmartSelectStep to display */
+    step: StepType;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** Function to call to get the options of the selector, return null if dependency is not met */
+    getOptions: (
+        idOrganization: string | undefined,
+        step: StepType,
+        dependencyStore: DependencyStore
+    ) => Promise<any[] | null>;
+    /** Function to determine the currently selected option */
+    getOptionSelected: (option: any, value: any) => boolean;
+    /** Function to determine the current value in string format */
+    getValueString: (value: any | undefined) => string;
+    /** Function to if currently selected option has warning */
+    getValueWarning?: (value: any | undefined) => string | null;
+    /** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */
+    calcDepError?: (steps: FormStep[]) => string | undefined;
+    /** Function that overwrites the value before setting it */
+    valueOverwrite?: (value: any | null) => any;
+    /** Function called on each value change */
+    changeListener?: (value: any) => void;
+    /** default Value to select */
+    defaultValue?: any;
+    /** function called to render nested elements when selected */
+    renderNestedSteps?: (value: any) => JSX.Element;
+}
+function SmartSelectStep(props: SmartSelectStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialSmartSelectStep {...props} />;
+        }
+    }
+}
+export default SmartSelectStep;