@arquimedes.co/eureka-forms 2.0.12-test → 2.0.13-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MapperStepProps } from '../MapperStep';
|
|
3
|
-
|
|
3
|
+
import { MapperElement } from '../../../@Types/MapperElement';
|
|
4
|
+
declare function MapperStep<Type>({ step, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
|
|
4
5
|
loading?: boolean;
|
|
6
|
+
onChange?: (elements: MapperElement<Type>[]) => void;
|
|
7
|
+
elements?: MapperElement<Type>[];
|
|
8
|
+
inputRef?: any;
|
|
5
9
|
}): JSX.Element;
|
|
6
10
|
export default MapperStep;
|
|
@@ -30,6 +30,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
30
30
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
31
31
|
};
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
+
import { createElement as _createElement } from "react";
|
|
33
34
|
import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
|
|
34
35
|
import styles from './MaterialMapperStep.module.css';
|
|
35
36
|
import { useController, useFormContext } from 'react-hook-form';
|
|
@@ -44,7 +45,7 @@ import { useStepDependency } from '../../StepHooks';
|
|
|
44
45
|
import { addMapperStep } from '../../../App/AppFunctions';
|
|
45
46
|
import { calcMapperSubSteps } from '../../../Form/FormFunctions';
|
|
46
47
|
function MapperStep(_a) {
|
|
47
|
-
var step = _a.step,
|
|
48
|
+
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"]);
|
|
48
49
|
var form = useContext(FormContext);
|
|
49
50
|
var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
|
|
50
51
|
var customSteps = useContext(CustomContext).customSteps;
|
|
@@ -63,12 +64,15 @@ function MapperStep(_a) {
|
|
|
63
64
|
},
|
|
64
65
|
shouldUnregister: true,
|
|
65
66
|
defaultValue: originalValue,
|
|
66
|
-
}),
|
|
67
|
-
var
|
|
68
|
-
var
|
|
67
|
+
}), field = _e.field, error = _e.fieldState.error;
|
|
68
|
+
var ref = inputRef !== null && inputRef !== void 0 ? inputRef : field.ref;
|
|
69
|
+
var value = elements !== null && elements !== void 0 ? elements : field.value;
|
|
70
|
+
var change = onChange !== null && onChange !== void 0 ? onChange : field.onChange;
|
|
71
|
+
var _f = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _f[0], setLocalSteps = _f[1];
|
|
72
|
+
var handleChange = useCallback(function (elements) {
|
|
69
73
|
handleStepDep(elements.map(function (element) { return element.value; }));
|
|
70
|
-
|
|
71
|
-
}, [field]);
|
|
74
|
+
change(elements);
|
|
75
|
+
}, [field, onChange]);
|
|
72
76
|
useEffect(function () {
|
|
73
77
|
if (value.length === 0 && !postview && editable && step.creatable) {
|
|
74
78
|
if (!customAdd)
|
|
@@ -84,7 +88,7 @@ function MapperStep(_a) {
|
|
|
84
88
|
setValue(key, elems);
|
|
85
89
|
}
|
|
86
90
|
var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
|
|
87
|
-
|
|
91
|
+
handleChange(newElements);
|
|
88
92
|
setLocalSteps(__assign(__assign({}, localSteps), steps));
|
|
89
93
|
dispatch(addStepsDependencies({
|
|
90
94
|
steps: steps,
|
|
@@ -95,8 +99,8 @@ function MapperStep(_a) {
|
|
|
95
99
|
var handleDeleteElement = useCallback(function (index) { return function () {
|
|
96
100
|
var tempElements = __spreadArray([], value, true);
|
|
97
101
|
tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
|
|
98
|
-
|
|
99
|
-
}; }, [value,
|
|
102
|
+
handleChange(tempElements);
|
|
103
|
+
}; }, [value, handleChange]);
|
|
100
104
|
var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
|
|
101
105
|
var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
|
|
102
106
|
var container = useMemo(function () {
|
|
@@ -110,7 +114,7 @@ function MapperStep(_a) {
|
|
|
110
114
|
}
|
|
111
115
|
}, [step]).container;
|
|
112
116
|
var mapElements = function () {
|
|
113
|
-
return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (
|
|
117
|
+
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) }))); }) })));
|
|
114
118
|
};
|
|
115
119
|
if (step.style.type === MapperStyleTypes.INLINE)
|
|
116
120
|
return _jsx(React.Fragment, { children: mapElements() });
|
|
@@ -122,8 +126,6 @@ function MapperStep(_a) {
|
|
|
122
126
|
if (editable && !postview) {
|
|
123
127
|
handleAddElement();
|
|
124
128
|
}
|
|
125
|
-
} })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(ref, !editable || postview, handleAddElement)] }))), !!error &&
|
|
126
|
-
value.filter(function (elem) { return !elem.deleted; })
|
|
127
|
-
.length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
|
|
129
|
+
} })), 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" })))] })));
|
|
128
130
|
}
|
|
129
131
|
export default MapperStep;
|
package/package.json
CHANGED