@arquimedes.co/eureka-forms 2.0.22 → 2.0.23-test

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { MapperElement } from '../../../../@Types/MapperElement';
 export interface MapperElementComponentProps<Type> {
     num: number;
-    loading: boolean;
+    loading?: boolean;
     element: MapperElement<Type>;
     handleDelete: () => void;
     children?: React.ReactNode;

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

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../MapperStep';
+import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';
-declare function MapperStep<Type>({ step, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
-    loading?: boolean;
-    onChange?: (elements: MapperElement<Type>[]) => void;
-    elements?: MapperElement<Type>[];
-    inputRef?: any;
+declare function MapperStep<Type>({ step, editable, customAdd, ...others }: MapperStepProps<Type>): JSX.Element;
+export declare function CustomMapperStep<Type>({ step, error, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
+    loading: boolean;
+    error: FieldError | undefined;
+    onChange: (elements: MapperElement<Type>[]) => void;
+    elements: MapperElement<Type>[];
+    inputRef: any;
 }): JSX.Element;
 export default MapperStep;

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

@@ -33,7 +33,7 @@ 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 { useController, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { MapperStyleTypes } from '../../../constants/FormStepTypes';
 import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
 import MapperElementComponent from './Element/MapperElementComponent';
@@ -41,38 +41,27 @@ import { addStepsDependencies } from '../../../States/SiteSlice';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 import { addMapperStep } from '../../../App/AppFunctions';
 import { calcMapperSubSteps } from '../../../Form/FormFunctions';
 function MapperStep(_a) {
-    var step = _a.step, editable = _a.editable, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, elements = _a.elements, inputRef = _a.inputRef, onChange = _a.onChange, others = __rest(_a, ["step", "editable", "customAdd", "loading", "elements", "inputRef", "onChange"]);
+    var step = _a.step, editable = _a.editable, customAdd = _a.customAdd, others = __rest(_a, ["step", "editable", "customAdd"]);
     var form = useContext(FormContext);
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
-    var _d = useStepDependency(step), handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
     var setValue = useFormContext().setValue;
-    var _e = useController({
-        name: step.id,
+    var _c = useFormStep(step, {
         rules: {
             validate: function (array) {
                 return !step.required ||
                     (step.required &&
-                        array.filter(function (elem) { return !elem.deleted; })
-                            .length > 0);
+                        array.filter(function (elem) { return !elem.deleted; }).length > 0);
             },
         },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }), field = _e.field, error = _e.fieldState.error;
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : field.ref;
-    var value = elements !== null && elements !== void 0 ? elements : field.value;
-    var change = onChange !== null && onChange !== void 0 ? onChange : field.onChange;
-    var _f = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _f[0], setLocalSteps = _f[1];
-    var handleChange = useCallback(function (elements) {
-        handleStepDep(elements.map(function (element) { return element.value; }));
-        change(elements);
-    }, [field, onChange]);
+    }), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error;
+    var _d = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
+    //Por alguna razón si se saca del componente no se ejecuta.
     useEffect(function () {
         if (value.length === 0 && !postview && editable && step.creatable) {
             if (!customAdd)
@@ -88,19 +77,19 @@ function MapperStep(_a) {
             setValue(key, elems);
         }
         var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
-        handleChange(newElements);
-        setLocalSteps(__assign(__assign({}, localSteps), steps));
+        onChange(newElements);
+        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
         dispatch(addStepsDependencies({
             steps: steps,
             customSteps: customSteps,
             allSteps: __assign(__assign({}, form.steps), steps),
         }));
-    }, [step, customSteps, value]);
+    }, [step, form, customSteps, value, onChange]);
     var handleDeleteElement = useCallback(function (index) { return function () {
         var tempElements = __spreadArray([], value, true);
         tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        handleChange(tempElements);
-    }; }, [value, handleChange]);
+        onChange(tempElements);
+    }; }, [value, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
     var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
     var container = useMemo(function () {
@@ -114,7 +103,7 @@ function MapperStep(_a) {
         }
     }, [step]).container;
     var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
+        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
     };
     if (step.style.type === MapperStyleTypes.INLINE)
         return _jsx(React.Fragment, { children: mapElements() });
@@ -132,4 +121,65 @@ function MapperStep(_a) {
                             }
                         } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(ref, !editable || postview, handleAddElement)] }))), !!error && value.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
 }
+export function CustomMapperStep(_a) {
+    var step = _a.step, error = _a.error, editable = _a.editable, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, elements = _a.elements, inputRef = _a.inputRef, onChange = _a.onChange, others = __rest(_a, ["step", "error", "editable", "customAdd", "loading", "elements", "inputRef", "onChange"]);
+    var form = useContext(FormContext);
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var customSteps = useContext(CustomContext).customSteps;
+    var dispatch = useAppDispatch();
+    var setValue = useFormContext().setValue;
+    var _d = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
+    var handleAddElement = useCallback(function (elementValue) {
+        var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
+        if (elementValue)
+            element.value = elementValue;
+        for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
+            var _c = _b[_i], key = _c[0], elems = _c[1];
+            setValue(key, elems);
+        }
+        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        onChange(newElements);
+        setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
+        dispatch(addStepsDependencies({
+            steps: steps,
+            customSteps: customSteps,
+            allSteps: __assign(__assign({}, form.steps), steps),
+        }));
+    }, [step, form, customSteps, elements, onChange]);
+    var handleDeleteElement = useCallback(function (index) { return function () {
+        var tempElements = __spreadArray([], elements, true);
+        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+        onChange(tempElements);
+    }; }, [elements, onChange]);
+    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
+    var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
+    var container = useMemo(function () {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case MapperStyleTypes.LIST:
+                return { container: styles.listContainer };
+            case MapperStyleTypes.PILL:
+            default:
+                return { container: styles.pillContainer };
+        }
+    }, [step]).container;
+    var mapElements = function () {
+        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
+    };
+    if (step.style.type === MapperStyleTypes.INLINE)
+        return _jsx(React.Fragment, { children: mapElements() });
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ 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(function (elem) { return !elem.deleted; }).length < step.max) && (_jsxs("div", __assign({ 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: function () {
+                            if (editable && !postview) {
+                                handleAddElement();
+                            }
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
+                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+}
 export default MapperStep;

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -128,7 +128,7 @@ function TextAreaStep(_a) {
                         }
                     }, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
                             setFocus(true);
-                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
                             options: ['inline', 'list', 'history'],
                             inline: {
                                 options: [

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.22",
+    "version":"2.0.23-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",