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

package/src/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.module.css

@@ -1,62 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    width: 900px;
-    max-width: 100%;
-    margin-top: 5px;
-    margin-bottom: 10px;
-}
-
-.collapsibleLabel {
-    margin-left: 10px;
-    font-size: 20px;
-    font-weight: 600;
-    cursor: default;
-    text-align: start;
-    cursor: pointer;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    -o-user-select: none;
-    user-select: none; /* Non-prefixed version, currently */
-}
-
-.content {
-    width: 100%;
-    overflow: hidden;
-    transition: height ease 0.9s;
-}
-
-.contentContainer {
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-.expand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 2px;
-}
-.expandIcon {
-    height: 24px;
-    width: 24px;
-    font-size: 24px;
-    cursor: pointer;
-}
-
-.separator {
-    height: 1px;
-    width: calc(100% - 20px);
-    margin-left: 10px;
-    margin-bottom: 10px;
-    border-radius: 20px;
-}

package/src/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.tsx

@@ -1,129 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import styles from './MaterialCollapsibleStep.module.css';
-import { CollapsibleStepProps } from '../CollapsibleStep';
-import { Controller, useFormContext } from 'react-hook-form';
-import StepComponent from '../../Step';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
-import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
-import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector } from '../../../hooks';
-function Collapsible({
-    step,
-    open,
-    setOpen,
-    ...others
-}: CollapsibleStepProps & {
-    open: boolean | 'TRUE';
-    setOpen: (open: boolean) => void;
-}): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const {
-        formState: { errors },
-    } = useFormContext();
-    const contentRef = React.useRef<HTMLDivElement>(null);
-
-    useEffect(
-        () => {
-            if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
-                setOpen(true);
-            }
-        },
-        step.dependencies?.map((dep) => errors[dep]) ?? []
-    );
-    return (
-        <React.Fragment>
-            <div
-                className={styles.container}
-                style={{
-                    color: formStyle.textColor,
-                    borderColor: formStyle.primaryColor,
-                }}
-            >
-                <div
-                    className={styles.collapsibleLabel}
-                    onClick={(): void => {
-                        setOpen(!open);
-                    }}
-                >
-                    {step.label}
-                </div>
-                <div
-                    className={styles.expand}
-                    onClick={(): void => {
-                        setOpen(!open);
-                    }}
-                >
-                    <div className={styles.expandIcon}>
-                        {open ? (
-                            <ExpandLessRoundedIcon fontSize="inherit" />
-                        ) : (
-                            <ExpandMoreRoundedIcon fontSize="inherit" />
-                        )}
-                    </div>
-                </div>
-            </div>
-            <div
-                className={styles.content}
-                style={{
-                    height:
-                        open === 'TRUE'
-                            ? 'auto'
-                            : open
-                              ? contentRef.current?.offsetHeight ?? 'auto'
-                              : 0,
-                }}
-            >
-                <div className={styles.contentContainer} ref={contentRef}>
-                    {step.steps.map((idSubStep: string) => {
-                        const subStep = form.steps[idSubStep];
-                        return (
-                            <StepComponent
-                                {...others}
-                                step={subStep}
-                                key={idSubStep}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-            <div
-                className={styles.separator}
-                style={{
-                    backgroundColor: formStyle.primaryColor,
-                }}
-            ></div>
-        </React.Fragment>
-    );
-}
-
-function CollapsibleStep(props: CollapsibleStepProps): JSX.Element {
-    const { postview } = useAppSelector((state) => state.global);
-    const {
-        clearErrors,
-        formState: { errors },
-    } = useFormContext();
-
-    return (
-        <Controller
-            name={props.step.id}
-            defaultValue={props.step.defaultValue ?? postview ? false : true}
-            render={({ field: { value, onChange } }): JSX.Element => (
-                <Collapsible
-                    {...props}
-                    open={value}
-                    setOpen={(open: boolean): void => {
-                        if (!open) {
-                            const deps = props.step.dependencies?.filter(
-                                (dep) => !!errors[dep]
-                            );
-                            if (deps) clearErrors(deps);
-                        }
-                        onChange(open);
-                    }}
-                />
-            )}
-        />
-    );
-}
-export default CollapsibleStep;

package/src/FormSteps/CustomStep.tsx

@@ -1,57 +0,0 @@
-import { StepProps } from './Step';
-import FormContext from '../Contexts/FormContext';
-import { useAppSelector } from '../hooks';
-import { Form } from '../@Types';
-import { GlobalState } from '../States/GlobalSlice';
-import CustomStepPropsContext from '../Contexts/CustomContext';
-import { useContext } from 'react';
-import { WidthStats } from '../Form/Form';
-import { StepDependency, useStepDependency } from './StepHooks';
-import { SiteState } from '../States/SiteSlice';
-
-export interface CustomStepProps
-    extends StepProps,
-        GlobalState,
-        StepDependency {
-    form: Form;
-    dependencyStore: SiteState['dependencies'];
-    customStepProps: Record<string, any>;
-    widthStats: WidthStats;
-}
-
-export interface CustomStep {
-    componentProps?: Record<string, any>;
-    component: (props: CustomStepProps) => JSX.Element;
-    calcValue?: (step: any, value: any) => any;
-    /** Function to change custom steps nested step ids to the generated ones. */
-    calcRecursiveData?: (step: any, ids: Record<string, string>) => void;
-    calcDependencyValue?: (step: any, value: any) => any;
-}
-
-interface CustomStepComponentProps extends StepProps {
-    customStep: CustomStep;
-}
-
-function CustomStepComponent({
-    customStep,
-    ...props
-}: CustomStepComponentProps): JSX.Element {
-    const form = useContext(FormContext);
-    const global = useAppSelector((state) => state.global);
-    const { customStepProps } = useContext(CustomStepPropsContext);
-    const dependencyStore = useAppSelector((state) => state.site.dependencies);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const dependencyInfo = useStepDependency(props.step, undefined);
-    return customStep.component({
-        ...global,
-        ...dependencyInfo,
-        ...props,
-        dependencyStore,
-        widthStats,
-        form,
-        customStepProps,
-        ...(customStep.componentProps ?? {}),
-    });
-}
-
-export default CustomStepComponent;

package/src/FormSteps/DatePickerStep/DatePickerStep.tsx

@@ -1,22 +0,0 @@
-import { DatePicker } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialDatePickerStep from './MaterialDatePickerStep/MaterialDatePickerStep';
-import { StepProps } from '../Step';
-import { useAppSelector } from '../../hooks';
-export interface DatePickerStepProps extends StepProps {
-    /** The DatePickerStep to display */
-    step: DatePicker;
-    /** Default value to display */
-    defaultValue?: Date | null;
-}
-function DatePickerStep(props: DatePickerStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialDatePickerStep {...props} />;
-        }
-    }
-}
-export default DatePickerStep;

package/src/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.tsx

@@ -1,51 +0,0 @@
-import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
-import { DatePickerStepProps } from '../DatePickerStep';
-import { useAppSelector } from '../../../hooks';
-import { useFormStep } from '../../StepHooks';
-import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-function DatePickerStep({
-    step,
-    editable,
-    defaultValue,
-}: DatePickerStepProps): JSX.Element {
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-
-    const { ref, value, onChange, error, field } = useFormStep<
-        Date | null | undefined
-    >(step, {
-        defaultValue,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-    });
-
-    return (
-        <MaterialInputContainer step={step} editable={editable}>
-            <RoundedDatePicker
-                {...field}
-                value={value}
-                onChange={onChange}
-                pickTime={step.pickTime}
-                clearable={!step.required}
-                clearLabel="Borrar"
-                inputRef={ref}
-                cantEdit={!editable || postview}
-                secondaryColor={formStyle.secondaryColor}
-                contrastColor={formStyle.secondaryContrastColor}
-                accentColor={formStyle.textColor}
-                focusColor={formStyle.primaryColor}
-                outlineColor={formStyle.outlineColor}
-                textColor={formStyle.textColor}
-                errorColor={formStyle.errorColor}
-                helperTextColor={formStyle.descriptionTextColor}
-                fontWeight={400}
-                label={step.label}
-                helperText={error?.message ?? step.description}
-                error={!!error}
-                required={step.required}
-            />
-        </MaterialInputContainer>
-    );
-}
-
-export default DatePickerStep;

package/src/FormSteps/EntityValueStep/EntityValuePickerStep.tsx

@@ -1,28 +0,0 @@
-import { useAppSelector } from '../../hooks';
-import { EntityValuePicker } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import { StepProps } from '../Step';
-import MaterialEntityValuePickerStep from './MaterialEntityValuePickerStep/MaterialEntityValuePickerStep';
-
-export interface StepOptions {
-    id: string | number;
-    label: string;
-}
-
-export interface EntityValuePickerStepProps extends StepProps {
-    /** The EntityValuePickerStep to display */
-    step: EntityValuePicker;
-    /** Default value to display */
-    defaultValue?: Date | null;
-}
-function EntityValuePickerStep(props: EntityValuePickerStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialEntityValuePickerStep {...props} />;
-        }
-    }
-}
-export default EntityValuePickerStep;

package/src/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.tsx

@@ -1,132 +0,0 @@
-import React, { useContext } from 'react';
-import FormStepTypes, {
-    EntityValueDataTypes,
-    EntityValueOptionTypes,
-} from '../../../constants/FormStepTypes';
-import StepComponent from '../../Step';
-import {
-    EntityValuePickerStepProps,
-    StepOptions,
-} from '../EntityValuePickerStep';
-import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
-import widgetInstance from '../../../Utils/AxiosWidget';
-import InputIcon from '../../../Shared/InputIcon/InputIcon';
-import FormContext from '../../../Contexts/FormContext';
-import { EntityValuePicker } from '../../../@Types/FormStep';
-import { DependencyStore } from '../../../Form/Form';
-import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
-
-function EntityValuePickerStep({
-    step,
-    editable,
-}: EntityValuePickerStepProps): JSX.Element {
-    const form = useContext(FormContext);
-
-    return (
-        <StepFillerContainer step={step}>
-            <SmartSelect
-                editable={editable}
-                step={step}
-                icon={step.icon ? <InputIcon icon={step.icon} /> : undefined}
-                getOptions={getEntityValueOptions}
-                getOptionSelected={(option, value): boolean =>
-                    option._id === value._id
-                }
-                calcDepError={(steps): string | undefined => {
-                    for (const step of steps) {
-                        if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
-                            return 'Selecciona un ' + step.label;
-                        }
-                    }
-                    return undefined;
-                }}
-                getValueString={(value): string => value?._id}
-                renderNestedSteps={(value): JSX.Element => {
-                    if (!value) return <></>;
-                    const currentOption = step.options[value._id];
-                    if (currentOption?.type === EntityValueOptionTypes.NESTED) {
-                        return (
-                            <React.Fragment>
-                                {currentOption.steps.map((idStep: string) => {
-                                    const subStep = form.steps[idStep];
-                                    return (
-                                        <StepComponent
-                                            editable={editable}
-                                            step={subStep}
-                                            key={idStep}
-                                        />
-                                    );
-                                })}
-                            </React.Fragment>
-                        );
-                    } else return <></>;
-                }}
-            />
-        </StepFillerContainer>
-    );
-}
-
-export default EntityValuePickerStep;
-
-const getEntityValueOptions = async (
-    idOrganization: string | undefined,
-    step: EntityValuePicker,
-    dependencyStore: DependencyStore
-): Promise<StepOptions[] | null> => {
-    if (!idOrganization) return null;
-    let urlPath = '';
-    for (const path of step.path) {
-        let idEntityValue = 'null';
-        switch (path.type) {
-            case EntityValueDataTypes.STEP: {
-                const currentValue = dependencyStore[path.idStep]?.value;
-                if (!currentValue) return null;
-                if (typeof currentValue === 'string')
-                    idEntityValue = currentValue;
-                else idEntityValue = currentValue._id ?? currentValue.id;
-                break;
-            }
-            case EntityValueDataTypes.VALUE:
-            default:
-                idEntityValue = path.idEntityValue ?? 'null';
-                break;
-        }
-        urlPath +=
-            '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
-    }
-
-    const params = new URLSearchParams({});
-    for (const filter of step.filters) {
-        switch (filter.type) {
-            case EntityValueDataTypes.STEP: {
-                const currentValue = dependencyStore[filter.idStep]?.value;
-                if (currentValue) {
-                    if (typeof currentValue === 'string')
-                        params.set(filter.idProperty, currentValue);
-                    else
-                        params.set(
-                            filter.idProperty,
-                            currentValue._id ?? currentValue.id
-                        );
-                } else if (filter.required) {
-                    return null;
-                }
-                break;
-            }
-            case EntityValueDataTypes.VALUE:
-            default:
-                params.set(filter.idProperty, filter.value);
-                break;
-        }
-    }
-
-    const url = `${idOrganization}/entities/${
-        step.idEntity
-    }${urlPath}?${params.toString()}`;
-
-    const response = await widgetInstance.get(url);
-    return response.data.filter(
-        (option: any) =>
-            step.options[option._id]?.type !== EntityValueOptionTypes.HIDE
-    );
-};

package/src/FormSteps/FileUploadStep/FileUploadStep.tsx

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

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -1,53 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 4px;
-}
-
-.documentIcon {
-    font-size: 26px;
-    width: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 30px;
-}
-
-.label,
-.downloadableLbl {
-    font-size: 1rem;
-    margin-left: 2px;
-    cursor: default;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: calc(100% - 80px);
-}
-.downloadableLbl {
-    cursor: pointer;
-}
-.downloadableLbl:hover {
-    text-decoration: underline;
-}
-.deletBtn {
-    font-size: 26px;
-    height: 26px;
-    margin-left: 5px;
-    color: '#787878';
-    cursor: pointer;
-}
-.loaderContainer {
-    position: relative;
-    height: 26px;
-    width: 26px;
-}
-
-.iconContainer {
-    height: 30px;
-    width: 30px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}