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

package/dist/mjs/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -0,0 +1,52 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+    width: 100%;
+    flex-direction: column;
+}
+
+.labelLabel {
+    font-size: 16px;
+    margin-left: 8px;
+    margin-bottom: 5px;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.stepDescriptionLabel {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: -4px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.filesInput {
+    display: none;
+}
+.btnContainer {
+    margin-top: 5px;
+    margin-left: 10px;
+    margin-bottom: 3px;
+    width: fit-content;
+}
+.errorMsg {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    margin-left: 14px;
+}
+
+.filesContainer {
+    padding-top: 5px;
+}

package/dist/mjs/FormSteps/MapperStep/MapperStep.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Mapper } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+import { MapperElement } from '../../@Types/MapperElement';
+interface CustomMapperElementModifiers<Type> {
+    calcName?: (element: MapperElement<Type>) => string;
+}
+export interface MapperStepProps<Type> extends StepProps {
+    /** The MapperStep to display */
+    step: Mapper;
+    customAdd?: (ref: React.RefObject<HTMLDivElement>, disabled: boolean, handleAddElement: (value?: any) => void) => JSX.Element;
+    customElementRender?: (element: MapperElement<Type>, index: number, renderElement: (renderElementButtons?: (element: MapperElement<any>) => JSX.Element) => JSX.Element) => JSX.Element;
+    customElementModifiers?: CustomMapperElementModifiers<Type>;
+    calcCustomStepProps?: (element: MapperElement<Type>, customStepProps: Record<string, any>) => Record<string, any>;
+}
+declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
+export default MapperStep;

package/dist/mjs/FormSteps/MapperStep/MapperStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
+import { useAppSelector } from '../../hooks';
+function MapperStep(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialMapperStep, { ...props });
+        }
+    }
+}
+export default MapperStep;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { MapperElementComponentProps } from '../MapperElementComponent';
+declare function ListMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
+export default ListMapperElement;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import styles from './ListMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
+function ListMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }) {
+    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 (_jsxs("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, children: [_jsx("div", { className: styles.bulletContainer, style: {
+                    height: name ? 28 : 40,
+                }, children: _jsx("div", { className: styles.bullet, style: {
+                        backgroundColor: formStyle.outlineColor,
+                        borderColor: formStyle.descriptionTextColor,
+                    } }) }), _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsxs("div", { className: styles.title, style: { color: formStyle.textColor }, children: [(name || loading) && (_jsx("label", { className: styles.titleLbl, children: loading ? 'Cargando...' : name + ':' })), step.deletable !== false && (_jsx("div", { className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+                                    if (editable && !postview) {
+                                        handleDelete?.();
+                                    }
+                                }, children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) }))] })), children] }), !name && step.deletable !== false && (_jsx("div", { className: !editable || postview
+                    ? styles.disabledDeleteBtn
+                    : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: () => {
+                    if (editable && !postview) {
+                        handleDelete?.();
+                    }
+                }, children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) }))] }));
+}
+export default ListMapperElement;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.module.css

@@ -0,0 +1,72 @@
+.container,
+.mobileContainer {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    margin-right: auto;
+    position: relative;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    max-width: 100%;
+}
+.bulletContainer {
+    display: flex;
+    margin-left: 30px;
+    margin-right: 10px;
+    align-items: center;
+}
+.bullet {
+    border-width: 2px;
+    border-style: solid;
+    margin-bottom: 2px;
+    height: 20px;
+    width: 20px;
+    border-radius: 20px;
+    margin-left: 10px;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
+}
+
+.titleLbl {
+    width: 100%;
+    height: 28px;
+    margin-right: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-bottom: 10px;
+}
+
+.title {
+    height: 28px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+.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;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    display: flex;
+    font-size: 24px;
+    margin-right: 8px;
+    margin-left: auto;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.d.ts

@@ -0,0 +1,12 @@
+import { MapperStepProps } from '../../MapperStep';
+import React from 'react';
+import { MapperElement } from '../../../../@Types/MapperElement';
+export interface MapperElementComponentProps<Type> {
+    num: number;
+    loading?: boolean;
+    element: MapperElement<Type>;
+    handleDelete: () => void;
+    children?: React.ReactNode;
+}
+declare function MapperElementComponent<Type = any>(props: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
+export default MapperElementComponent;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -0,0 +1,41 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+function MapperElementComponent(props) {
+    const { step, element, editable } = props;
+    const customContext = useContext(CustomContext);
+    const form = useContext(FormContext);
+    if (element.deleted) {
+        return _jsx("div", {});
+    }
+    const nestedCustomContext = useMemo(() => {
+        if (!props.calcCustomStepProps)
+            return customContext;
+        return {
+            ...customContext,
+            customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
+        };
+    }, [element, customContext]);
+    const mapSubSteps = () => {
+        return (_jsx(CustomContext.Provider, { value: nestedCustomContext, children: step.rootSteps.map((idSubStep) => {
+                const subStep = form.steps[element.ids[idSubStep]];
+                return (_createElement(StepComponent, { ...props, editable: editable ? step.editable ?? true : false, step: subStep, key: element.ids[idSubStep] }));
+            }) }));
+    };
+    switch (step.style?.type) {
+        case MapperStyleTypes.INLINE:
+            return _jsx(React.Fragment, { children: mapSubSteps() });
+        case MapperStyleTypes.LIST:
+            return (_jsx(ListMapperElement, { ...props, step: step, children: mapSubSteps() }));
+        case MapperStyleTypes.PILL:
+        default:
+            return (_jsx(PillMapperElement, { ...props, step: step, children: mapSubSteps() }));
+    }
+}
+export default MapperElementComponent;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { MapperElementComponentProps } from '../MapperElementComponent';
+declare function PillMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
+export default PillMapperElement;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import styles from './PillMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
+function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
+    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) => {
+        return (_jsx("div", { className: widthStats.isMobile
+                ? styles.mobileContainer
+                : styles.container, style: {
+                pageBreakInside: 'avoid',
+            }, children: _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsx("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+                                    if (editable && !postview) {
+                                        handleDelete?.();
+                                    }
+                                }, children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) }))] }), children] }) }));
+    };
+    return (_jsx("div", { className: styles.containerContainer, children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() }));
+}
+export default PillMapperElement;

package/dist/mjs/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/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../MapperStep';
+import { FieldError } from 'react-hook-form';
+import { MapperElement } from '../../../@Types/MapperElement';
+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;
+}
+declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
+export declare function CustomMapperStep<Type>(props: Omit<MapperComponentProps<Type>, 'form' | 'handleAddElement'>): JSX.Element;
+export default MapperStep;

package/dist/mjs/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
+import styles from './MaterialMapperStep.module.css';
+import { useFormContext } from 'react-hook-form';
+import { MapperStyleTypes } from '../../../constants/FormStepTypes';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+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 { calcMapperSubSteps } from '../../../Form/FormFunctions';
+function MapperComponent({ form, step, error, loading, inputRef, editable, customAdd, elements, onChange, handleAddElement, ...others }) {
+    const handleDeleteElement = useCallback((index) => () => {
+        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 = () => {
+        return (_jsx(FormContext.Provider, { value: form, children: elements.map((element, index) => (_createElement(MapperElementComponent, { ...others, key: element.id, num: index, element: element, step: step, editable: editable, loading: loading, handleDelete: handleDeleteElement(index) }))) }));
+    };
+    if (step.style.type === MapperStyleTypes.INLINE)
+        return _jsx(React.Fragment, { children: mapElements() });
+    return (_jsxs("div", { className: container, style: { color: formStyle.textColor }, "data-testid": step.id, children: [step.label && _jsx("div", { className: styles.titleLbl, children: step.label }), step.description && (_jsx("p", { className: styles.descriptionPar, style: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                }, children: step.description })), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    elements.filter((elem) => !elem.deleted).length < step.max) && (_jsxs("div", { className: styles.btnContainer, children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel +
+                            (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
+                            if (editable && !postview) {
+                                handleAddElement();
+                            }
+                        } })), customAdd?.(inputRef, !editable || postview, handleAddElement)] })), !!error &&
+                elements.filter((elem) => !elem.deleted).length === 0 && (_jsx("div", { className: styles.errorMsg, style: { color: formStyle.errorColor }, children: "Este campo es obligatorio" }))] }));
+}
+function MapperStep(props) {
+    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(step, {
+        defaultValue: [],
+        rules: {
+            validate: (array) => !step.required ||
+                (step.required &&
+                    array.filter((elem) => !elem.deleted).length > 0),
+        },
+    });
+    const [localSteps, setLocalSteps] = useState(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) => {
+        const { element, steps, mappers } = addMapperStep(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 (_jsx(MapperComponent, { ...props, error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value }));
+}
+export function CustomMapperStep(props) {
+    const { step, elements, onChange } = props;
+    const form = useContext(FormContext);
+    const { customSteps } = useContext(CustomContext);
+    const dispatch = useAppDispatch();
+    const { setValue } = useFormContext();
+    const [localSteps, setLocalSteps] = useState(calcMapperSubSteps(step, elements, customSteps));
+    const handleAddElement = useCallback((elementValue) => {
+        const { element, steps, mappers } = addMapperStep(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 (_jsx(MapperComponent, { ...props, form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement }));
+}
+export default MapperStep;

package/dist/mjs/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/dist/mjs/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RatingStepProps } from '../RatingStep';
+declare function RatingStep({ step, editable }: RatingStepProps): JSX.Element;
+export default RatingStep;

package/dist/mjs/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './MaterialRatingStep.module.css';
+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 }) {
+    const { ref, value, onChange, error } = useFormStep(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 = () => {
+        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 (_jsx(React.Fragment, { children: currentOption.map((idSubStep) => {
+                        const subStep = form.steps[idSubStep];
+                        return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
+                    }) }));
+            }
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: styles.container, style: {
+                    paddingBottom: step.description || step.required ? 0 : 15,
+                }, children: [_jsx("div", { className: styles.labelLabel, children: step.label + (step.required ? ' *' : '') }), _jsx("div", { className: styles.ratingContainer, children: _jsx(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 }) }), (step.description || step.required) && (_jsx("div", { className: styles.stepDescriptionLabel, style: {
+                            color: !!error && value === null
+                                ? formStyle.errorColor ?? '#cc2936'
+                                : formStyle.descriptionTextColor ??
+                                    '#989898',
+                        }, children: !!error && value === null
+                            ? error?.message
+                            : step.description }))] }), renderNestedOption()] }));
+}
+export default RatingStep;

package/dist/mjs/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/dist/mjs/FormSteps/RatingStep/RatingStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Rating } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface RatingStepProps extends StepProps {
+    /** The RatingStep to display */
+    step: Rating;
+}
+declare function RatingStep(props: RatingStepProps): JSX.Element;
+export default RatingStep;