@arquimedes.co/eureka-forms 2.0.11-test → 2.0.12-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.
@@ -77,6 +77,7 @@ function Incidents(_a) {
77
77
  dispatch(addStepsDependencies({
78
78
  steps: newSteps,
79
79
  customSteps: customSteps,
80
+ allSteps: newSteps,
80
81
  }));
81
82
  };
82
83
  var addRecursiveElementStep = function (idStep, step, idParent, steps, idProjectDep) {
@@ -1,11 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { MapperStepProps } from '../MapperStep';
3
- import { MapperElement } from '../../../@Types/MapperElement';
4
- export declare function ElementsComponent<Type = any>({ step, inputRef, editable, elements, customAdd, loading, onChange, ...others }: MapperStepProps<Type> & {
3
+ declare function MapperStep<Type>({ step, level, editable, customAdd, loading, }: MapperStepProps<Type> & {
5
4
  loading?: boolean;
6
- onChange: (elements: MapperElement<Type>[]) => void;
7
- elements: MapperElement<Type>[];
8
- inputRef: any;
9
5
  }): JSX.Element;
10
- declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
11
6
  export default MapperStep;
@@ -30,10 +30,9 @@ 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";
34
33
  import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
35
34
  import styles from './MaterialMapperStep.module.css';
36
- import { Controller, useFormContext } from 'react-hook-form';
35
+ import { useController, useFormContext } from 'react-hook-form';
37
36
  import { MapperStyleTypes } from '../../../constants/FormStepTypes';
38
37
  import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
39
38
  import MapperElementComponent from './Element/MapperElementComponent';
@@ -44,46 +43,62 @@ import CustomContext from '../../../Contexts/CustomContext';
44
43
  import { useStepDependency } from '../../StepHooks';
45
44
  import { addMapperStep } from '../../../App/AppFunctions';
46
45
  import { calcMapperSubSteps } from '../../../Form/FormFunctions';
47
- export function ElementsComponent(_a) {
48
- var step = _a.step, inputRef = _a.inputRef, editable = _a.editable, elements = _a.elements, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, onChange = _a.onChange, others = __rest(_a, ["step", "inputRef", "editable", "elements", "customAdd", "loading", "onChange"]);
46
+ function MapperStep(_a) {
47
+ var step = _a.step, level = _a.level, editable = _a.editable, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b;
49
48
  var form = useContext(FormContext);
50
49
  var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
51
50
  var customSteps = useContext(CustomContext).customSteps;
52
51
  var dispatch = useAppDispatch();
53
- var _d = useFormContext(), setValue = _d.setValue, errors = _d.formState.errors;
54
- var handleStepDep = useStepDependency(step).handleStepDep;
55
- /** Mapper Steps to pass down */
56
- var _e = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _e[0], setLocalSteps = _e[1];
52
+ var _d = useStepDependency(step), handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
53
+ var setValue = useFormContext().setValue;
54
+ var _e = useController({
55
+ name: step.id,
56
+ rules: {
57
+ validate: function (array) {
58
+ return (step.required &&
59
+ array.filter(function (elem) { return !elem.deleted; })
60
+ .length > 0) ||
61
+ !step.required;
62
+ },
63
+ },
64
+ shouldUnregister: true,
65
+ defaultValue: originalValue,
66
+ }), _f = _e.field, ref = _f.ref, value = _f.value, field = __rest(_f, ["ref", "value"]), error = _e.fieldState.error;
67
+ var _g = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _g[0], setLocalSteps = _g[1];
68
+ var onChange = useCallback(function (elements) {
69
+ handleStepDep(elements.map(function (element) { return element.value; }));
70
+ field.onChange(elements);
71
+ }, [field]);
57
72
  useEffect(function () {
58
- if (elements.length === 0 && !postview && editable && step.creatable) {
73
+ if (value.length === 0 && !postview && editable && step.creatable) {
59
74
  if (!customAdd)
60
75
  handleAddElement();
61
76
  }
62
77
  }, []);
63
- var handleAddElement = useCallback(function (value) {
78
+ var handleAddElement = useCallback(function (elementValue) {
64
79
  var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
65
- if (value)
66
- element.value = value;
80
+ if (elementValue)
81
+ element.value = elementValue;
67
82
  for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
68
83
  var _c = _b[_i], key = _c[0], elems = _c[1];
69
84
  setValue(key, elems);
70
85
  }
71
- var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
72
- if (customAdd)
73
- handleStepDep(newElements.map(function (element) { return element.value; }));
86
+ var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
74
87
  onChange(newElements);
75
88
  setLocalSteps(__assign(__assign({}, localSteps), steps));
76
- dispatch(addStepsDependencies({ steps: steps, customSteps: customSteps }));
77
- }, [step, customSteps, elements]);
89
+ dispatch(addStepsDependencies({
90
+ steps: steps,
91
+ customSteps: customSteps,
92
+ allSteps: __assign(__assign({}, form.steps), steps),
93
+ }));
94
+ }, [step, customSteps, value]);
78
95
  var handleDeleteElement = useCallback(function (index) { return function () {
79
- var tempElements = __spreadArray([], elements, true);
96
+ var tempElements = __spreadArray([], value, true);
80
97
  tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
81
- if (customAdd)
82
- handleStepDep(tempElements.map(function (element) { return element.value; }));
83
98
  onChange(tempElements);
84
- }; }, [elements, onChange]);
99
+ }; }, [value, onChange]);
85
100
  var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
86
- var value = useMemo(function () { return JSON.stringify(elements); }, [elements]);
101
+ var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
87
102
  var container = useMemo(function () {
88
103
  var _a;
89
104
  switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
@@ -95,7 +110,7 @@ export function ElementsComponent(_a) {
95
110
  }
96
111
  }, [step]).container;
97
112
  var mapElements = function () {
98
- 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) }))); }) })));
113
+ return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_jsx(MapperElementComponent, { num: index, level: level, loading: loading, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }, element.id)); }) })));
99
114
  };
100
115
  if (step.style.type === MapperStyleTypes.INLINE)
101
116
  return _jsx(React.Fragment, { children: mapElements() });
@@ -103,24 +118,12 @@ export function ElementsComponent(_a) {
103
118
  margin: step.description
104
119
  ? '10px 0px'
105
120
  : '0px 0px 5px 0px',
106
- } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: value }), step.creatable !== false && (_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 () {
121
+ } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false && (_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 () {
107
122
  if (editable && !postview) {
108
123
  handleAddElement();
109
124
  }
110
- } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!errors[step.id] &&
111
- elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
112
- }
113
- function MapperStep(props) {
114
- var originalValue = useStepDependency(props.step).originalValue;
115
- return (_jsx(Controller, { name: props.step.id, defaultValue: originalValue, rules: {
116
- validate: function (array) {
117
- return (props.step.required &&
118
- array.filter(function (elem) { return !elem.deleted; }).length > 0) ||
119
- !props.step.required;
120
- },
121
- }, shouldUnregister: true, render: function (_a) {
122
- var _b = _a.field, ref = _b.ref, value = _b.value, field = __rest(_b, ["ref", "value"]);
123
- return (_jsx(ElementsComponent, __assign({}, props, field, { elements: value, inputRef: ref })));
124
- } }));
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" })))] })));
125
128
  }
126
129
  export default MapperStep;
@@ -32,10 +32,11 @@ export declare const SiteSlice: import("@reduxjs/toolkit").Slice<SiteState, {
32
32
  };
33
33
  type: string;
34
34
  }) => void;
35
- addStepsDependencies: (state: import("immer/dist/internal").WritableDraft<SiteState>, { payload: { steps, customSteps }, }: {
35
+ addStepsDependencies: (state: import("immer/dist/internal").WritableDraft<SiteState>, { payload: { steps, customSteps, allSteps }, }: {
36
36
  payload: {
37
37
  steps: Record<string, FormStep | CBRFormStep>;
38
38
  customSteps: Record<string, CustomStep>;
39
+ allSteps: Record<string, FormStep | CBRFormStep>;
39
40
  };
40
41
  type: string;
41
42
  }) => void;
@@ -55,6 +56,7 @@ export declare const focusStep: import("@reduxjs/toolkit").ActionCreatorWithOpti
55
56
  }, "site/setStepDependency">, addStepsDependencies: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
56
57
  steps: Record<string, FormStep | CBRFormStep>;
57
58
  customSteps: Record<string, CustomStep>;
59
+ allSteps: Record<string, FormStep | CBRFormStep>;
58
60
  }, "site/addStepsDependencies">, setEmptyDependency: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
59
61
  step: GBaseStep;
60
62
  empty: StepDependency['empty'];
@@ -49,8 +49,8 @@ export var SiteSlice = createSlice({
49
49
  }
50
50
  },
51
51
  addStepsDependencies: function (state, _a) {
52
- var _b = _a.payload, steps = _b.steps, customSteps = _b.customSteps;
53
- calcDependencies(steps, customSteps, steps, state.dependencies);
52
+ var _b = _a.payload, steps = _b.steps, customSteps = _b.customSteps, allSteps = _b.allSteps;
53
+ calcDependencies(steps, customSteps, allSteps, state.dependencies);
54
54
  },
55
55
  handlePrevious: function (state, _a) {
56
56
  var payload = _a.payload;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arquimedes.co/eureka-forms",
3
3
  "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
4
- "version":"2.0.11-test",
4
+ "version":"2.0.12-test",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
7
7
  "build": "react-scripts build",