@arquimedes.co/eureka-forms 2.0.21 → 2.0.23-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.
- package/dist/Form/FormFunctions.d.ts +1 -1
- package/dist/Form/FormFunctions.js +16 -11
- package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.js +0 -1
- package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.d.ts +1 -1
- package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts +8 -5
- package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js +76 -26
- package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js +1 -1
- package/package.json +1 -1
|
@@ -5,5 +5,5 @@ import { CBRFormStep } from '../@Types/CBRFormStep';
|
|
|
5
5
|
import { MapperElement } from '../@Types/MapperElement';
|
|
6
6
|
import { ValuesStore } from '../States/SiteSlice';
|
|
7
7
|
export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep> | undefined, deleteIds: string[], value?: any) => any;
|
|
8
|
-
export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore, values?: ValuesStore): DependencyStore;
|
|
8
|
+
export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore, values?: ValuesStore, addDependents?: boolean): DependencyStore;
|
|
9
9
|
export declare const calcMapperSubSteps: (step: Mapper, elements: MapperElement<any>[] | undefined, customSteps: Record<string, CustomStep>) => Record<string, FormStep>;
|
|
@@ -115,7 +115,7 @@ function stringToDraft(text) {
|
|
|
115
115
|
});
|
|
116
116
|
return draftStructure;
|
|
117
117
|
}
|
|
118
|
-
export function calcDependencies(steps, customSteps, allSteps, dependencies, values) {
|
|
118
|
+
export function calcDependencies(steps, customSteps, allSteps, dependencies, values, addDependents) {
|
|
119
119
|
var _a, _b;
|
|
120
120
|
if (customSteps === void 0) { customSteps = {}; }
|
|
121
121
|
if (allSteps === void 0) { allSteps = steps; }
|
|
@@ -124,34 +124,39 @@ export function calcDependencies(steps, customSteps, allSteps, dependencies, val
|
|
|
124
124
|
global: {},
|
|
125
125
|
sections: {},
|
|
126
126
|
}; }
|
|
127
|
+
if (addDependents === void 0) { addDependents = true; }
|
|
127
128
|
for (var _i = 0, _c = Object.values(steps); _i < _c.length; _i++) {
|
|
128
129
|
var step = _c[_i];
|
|
129
130
|
var originalValue = (_a = values.sections[step.idSection]) === null || _a === void 0 ? void 0 : _a[step.id];
|
|
130
131
|
if (step.dependencies) {
|
|
131
132
|
for (var _d = 0, _e = step.dependencies; _d < _e.length; _d++) {
|
|
132
133
|
var idDep = _e[_d];
|
|
133
|
-
if (dependencies[idDep] === undefined
|
|
134
|
+
if (dependencies[idDep] === undefined &&
|
|
135
|
+
(addDependents || allSteps[idDep]))
|
|
134
136
|
dependencies[idDep] = calcStepDependency(idDep, allSteps, values, customSteps);
|
|
135
|
-
|
|
137
|
+
if (addDependents)
|
|
138
|
+
dependencies[idDep].dependents.push(step);
|
|
136
139
|
}
|
|
137
140
|
}
|
|
138
141
|
if (step.type === StepTypes.ENTITYVALUEPICKER) {
|
|
139
142
|
for (var _f = 0, _g = __spreadArray(__spreadArray([], step.path, true), step.filters, true); _f < _g.length; _f++) {
|
|
140
|
-
var
|
|
141
|
-
if (
|
|
143
|
+
var dep = _g[_f];
|
|
144
|
+
if (dep.type !== EntityValueDataTypes.STEP)
|
|
142
145
|
continue;
|
|
143
|
-
if ((_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.includes(
|
|
146
|
+
if ((_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.includes(dep.idStep))
|
|
144
147
|
continue;
|
|
145
|
-
if (dependencies[
|
|
146
|
-
|
|
148
|
+
if (dependencies[dep.idStep] === undefined &&
|
|
149
|
+
(addDependents || allSteps[dep.idStep])) {
|
|
150
|
+
dependencies[dep.idStep] = calcStepDependency(dep.idStep, allSteps, values, customSteps);
|
|
147
151
|
}
|
|
148
|
-
|
|
152
|
+
if (addDependents)
|
|
153
|
+
dependencies[dep.idStep].dependents.push(step);
|
|
149
154
|
}
|
|
150
155
|
}
|
|
151
156
|
if (step.type === StepTypes.MAPPER) {
|
|
152
157
|
var subSteps = calcMapperSubSteps(step, originalValue, customSteps);
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
var hasSubSteps = Object.keys(subSteps).length > 0;
|
|
159
|
+
calcDependencies(hasSubSteps ? subSteps : step.steps, customSteps, __assign(__assign({}, allSteps), subSteps), dependencies, values, hasSubSteps);
|
|
155
160
|
}
|
|
156
161
|
}
|
|
157
162
|
return dependencies;
|
|
@@ -44,7 +44,6 @@ import CustomContext from '../../../../Contexts/CustomContext';
|
|
|
44
44
|
import { useFormStep } from '../../../StepHooks';
|
|
45
45
|
function CBRIncidentsStep(_a) {
|
|
46
46
|
var step = _a.step, editable = _a.editable, others = __rest(_a, ["step", "editable"]);
|
|
47
|
-
console.log(step.required);
|
|
48
47
|
var _b = useFormStep(step, {
|
|
49
48
|
rules: {
|
|
50
49
|
validate: function (array) {
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { MapperElement } from '../../../../@Types/MapperElement';
|
|
4
4
|
export interface MapperElementComponentProps<Type> {
|
|
5
5
|
num: number;
|
|
6
|
-
loading
|
|
6
|
+
loading?: boolean;
|
|
7
7
|
element: MapperElement<Type>;
|
|
8
8
|
handleDelete: () => void;
|
|
9
9
|
children?: React.ReactNode;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MapperStepProps } from '../MapperStep';
|
|
3
|
+
import { FieldError } from 'react-hook-form';
|
|
3
4
|
import { MapperElement } from '../../../@Types/MapperElement';
|
|
4
|
-
declare function MapperStep<Type>({ step, editable, customAdd,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
declare function MapperStep<Type>({ step, editable, customAdd, ...others }: MapperStepProps<Type>): JSX.Element;
|
|
6
|
+
export declare function CustomMapperStep<Type>({ step, error, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
|
|
7
|
+
loading: boolean;
|
|
8
|
+
error: FieldError | undefined;
|
|
9
|
+
onChange: (elements: MapperElement<Type>[]) => void;
|
|
10
|
+
elements: MapperElement<Type>[];
|
|
11
|
+
inputRef: any;
|
|
9
12
|
}): JSX.Element;
|
|
10
13
|
export default MapperStep;
|
|
@@ -33,7 +33,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
33
33
|
import { createElement as _createElement } from "react";
|
|
34
34
|
import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
|
|
35
35
|
import styles from './MaterialMapperStep.module.css';
|
|
36
|
-
import {
|
|
36
|
+
import { useFormContext } from 'react-hook-form';
|
|
37
37
|
import { MapperStyleTypes } from '../../../constants/FormStepTypes';
|
|
38
38
|
import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
|
|
39
39
|
import MapperElementComponent from './Element/MapperElementComponent';
|
|
@@ -41,38 +41,27 @@ import { addStepsDependencies } from '../../../States/SiteSlice';
|
|
|
41
41
|
import FormContext from '../../../Contexts/FormContext';
|
|
42
42
|
import { useAppDispatch, useAppSelector } from '../../../hooks';
|
|
43
43
|
import CustomContext from '../../../Contexts/CustomContext';
|
|
44
|
-
import {
|
|
44
|
+
import { useFormStep } from '../../StepHooks';
|
|
45
45
|
import { addMapperStep } from '../../../App/AppFunctions';
|
|
46
46
|
import { calcMapperSubSteps } from '../../../Form/FormFunctions';
|
|
47
47
|
function MapperStep(_a) {
|
|
48
|
-
var step = _a.step, editable = _a.editable, customAdd = _a.customAdd,
|
|
48
|
+
var step = _a.step, editable = _a.editable, customAdd = _a.customAdd, others = __rest(_a, ["step", "editable", "customAdd"]);
|
|
49
49
|
var form = useContext(FormContext);
|
|
50
|
-
var
|
|
50
|
+
var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
|
|
51
51
|
var customSteps = useContext(CustomContext).customSteps;
|
|
52
52
|
var dispatch = useAppDispatch();
|
|
53
|
-
var _d = useStepDependency(step), handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
|
|
54
53
|
var setValue = useFormContext().setValue;
|
|
55
|
-
var
|
|
56
|
-
name: step.id,
|
|
54
|
+
var _c = useFormStep(step, {
|
|
57
55
|
rules: {
|
|
58
56
|
validate: function (array) {
|
|
59
57
|
return !step.required ||
|
|
60
58
|
(step.required &&
|
|
61
|
-
array.filter(function (elem) { return !elem.deleted; })
|
|
62
|
-
.length > 0);
|
|
59
|
+
array.filter(function (elem) { return !elem.deleted; }).length > 0);
|
|
63
60
|
},
|
|
64
61
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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) {
|
|
73
|
-
handleStepDep(elements.map(function (element) { return element.value; }));
|
|
74
|
-
change(elements);
|
|
75
|
-
}, [field, onChange]);
|
|
62
|
+
}), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error;
|
|
63
|
+
var _d = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
|
|
64
|
+
//Por alguna razón si se saca del componente no se ejecuta.
|
|
76
65
|
useEffect(function () {
|
|
77
66
|
if (value.length === 0 && !postview && editable && step.creatable) {
|
|
78
67
|
if (!customAdd)
|
|
@@ -88,19 +77,19 @@ function MapperStep(_a) {
|
|
|
88
77
|
setValue(key, elems);
|
|
89
78
|
}
|
|
90
79
|
var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
|
|
91
|
-
|
|
92
|
-
setLocalSteps(__assign(__assign({},
|
|
80
|
+
onChange(newElements);
|
|
81
|
+
setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
|
|
93
82
|
dispatch(addStepsDependencies({
|
|
94
83
|
steps: steps,
|
|
95
84
|
customSteps: customSteps,
|
|
96
85
|
allSteps: __assign(__assign({}, form.steps), steps),
|
|
97
86
|
}));
|
|
98
|
-
}, [step, customSteps, value]);
|
|
87
|
+
}, [step, form, customSteps, value, onChange]);
|
|
99
88
|
var handleDeleteElement = useCallback(function (index) { return function () {
|
|
100
89
|
var tempElements = __spreadArray([], value, true);
|
|
101
90
|
tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
|
|
102
|
-
|
|
103
|
-
}; }, [value,
|
|
91
|
+
onChange(tempElements);
|
|
92
|
+
}; }, [value, onChange]);
|
|
104
93
|
var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
|
|
105
94
|
var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
|
|
106
95
|
var container = useMemo(function () {
|
|
@@ -114,7 +103,7 @@ function MapperStep(_a) {
|
|
|
114
103
|
}
|
|
115
104
|
}, [step]).container;
|
|
116
105
|
var mapElements = function () {
|
|
117
|
-
return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index,
|
|
106
|
+
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) }))); }) })));
|
|
118
107
|
};
|
|
119
108
|
if (step.style.type === MapperStyleTypes.INLINE)
|
|
120
109
|
return _jsx(React.Fragment, { children: mapElements() });
|
|
@@ -132,4 +121,65 @@ function MapperStep(_a) {
|
|
|
132
121
|
}
|
|
133
122
|
} })), 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" })))] })));
|
|
134
123
|
}
|
|
124
|
+
export function CustomMapperStep(_a) {
|
|
125
|
+
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"]);
|
|
126
|
+
var form = useContext(FormContext);
|
|
127
|
+
var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
|
|
128
|
+
var customSteps = useContext(CustomContext).customSteps;
|
|
129
|
+
var dispatch = useAppDispatch();
|
|
130
|
+
var setValue = useFormContext().setValue;
|
|
131
|
+
var _d = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
|
|
132
|
+
var handleAddElement = useCallback(function (elementValue) {
|
|
133
|
+
var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
|
|
134
|
+
if (elementValue)
|
|
135
|
+
element.value = elementValue;
|
|
136
|
+
for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
|
|
137
|
+
var _c = _b[_i], key = _c[0], elems = _c[1];
|
|
138
|
+
setValue(key, elems);
|
|
139
|
+
}
|
|
140
|
+
var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
|
|
141
|
+
onChange(newElements);
|
|
142
|
+
setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
|
|
143
|
+
dispatch(addStepsDependencies({
|
|
144
|
+
steps: steps,
|
|
145
|
+
customSteps: customSteps,
|
|
146
|
+
allSteps: __assign(__assign({}, form.steps), steps),
|
|
147
|
+
}));
|
|
148
|
+
}, [step, form, customSteps, elements, onChange]);
|
|
149
|
+
var handleDeleteElement = useCallback(function (index) { return function () {
|
|
150
|
+
var tempElements = __spreadArray([], elements, true);
|
|
151
|
+
tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
|
|
152
|
+
onChange(tempElements);
|
|
153
|
+
}; }, [elements, onChange]);
|
|
154
|
+
var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
|
|
155
|
+
var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
|
|
156
|
+
var container = useMemo(function () {
|
|
157
|
+
var _a;
|
|
158
|
+
switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
|
|
159
|
+
case MapperStyleTypes.LIST:
|
|
160
|
+
return { container: styles.listContainer };
|
|
161
|
+
case MapperStyleTypes.PILL:
|
|
162
|
+
default:
|
|
163
|
+
return { container: styles.pillContainer };
|
|
164
|
+
}
|
|
165
|
+
}, [step]).container;
|
|
166
|
+
var mapElements = function () {
|
|
167
|
+
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) }))); }) })));
|
|
168
|
+
};
|
|
169
|
+
if (step.style.type === MapperStyleTypes.INLINE)
|
|
170
|
+
return _jsx(React.Fragment, { children: mapElements() });
|
|
171
|
+
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: {
|
|
172
|
+
margin: step.description
|
|
173
|
+
? '10px 0px'
|
|
174
|
+
: '0px 0px 5px 0px',
|
|
175
|
+
} }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
|
|
176
|
+
(!step.max ||
|
|
177
|
+
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 +
|
|
178
|
+
(step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
|
|
179
|
+
if (editable && !postview) {
|
|
180
|
+
handleAddElement();
|
|
181
|
+
}
|
|
182
|
+
} })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
|
|
183
|
+
elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
|
|
184
|
+
}
|
|
135
185
|
export default MapperStep;
|
|
@@ -128,7 +128,7 @@ function TextAreaStep(_a) {
|
|
|
128
128
|
}
|
|
129
129
|
}, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
|
|
130
130
|
setFocus(true);
|
|
131
|
-
}, 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: {
|
|
131
|
+
}, 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: {
|
|
132
132
|
options: ['inline', 'list', 'history'],
|
|
133
133
|
inline: {
|
|
134
134
|
options: [
|
package/package.json
CHANGED