@arquimedes.co/eureka-forms 1.9.89-test → 1.9.91-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/@Types/CBRFormStep.d.ts +1 -1
- package/dist/@Types/FormStep.d.ts +7 -4
- package/dist/App.js +8 -16
- package/dist/FormComponents/Form/ColumnForm/ColumnForm.js +4 -0
- package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +51 -23
- package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +1 -1
- package/dist/FormComponents/Step/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js +1 -1
- package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.js +0 -1
- package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.js +9 -4
- package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js +1 -1
- package/dist/FormComponents/Step/StepFunctions.d.ts +2 -2
- package/dist/FormComponents/Step/StepFunctions.js +15 -2
- package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.d.ts +1 -1
- package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.js +29 -5
- package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css +1 -2
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ export interface CBRProjectStep extends GSmartSelect {
|
|
|
8
8
|
type: Types.CBR_PROYECTO | Types.CBR_MACRO_PROYECTO;
|
|
9
9
|
steps: string[];
|
|
10
10
|
/** Only has maxSize if level === 0 */
|
|
11
|
-
maxSize
|
|
11
|
+
maxSize?: number;
|
|
12
12
|
}
|
|
13
13
|
export interface CBRDocTypeStep extends Omit<GSmartSelect, 'showIcon'> {
|
|
14
14
|
type: Types.CBR_TIPO_DOC;
|
|
@@ -5,10 +5,13 @@ export interface Title extends GSteps.GBaseStep {
|
|
|
5
5
|
type: Types.TITLE;
|
|
6
6
|
title: string;
|
|
7
7
|
description: string | null;
|
|
8
|
+
size?: 1 | 2 | 3 | 4;
|
|
8
9
|
}
|
|
9
10
|
export interface CheckBox extends GSteps.GCheckBox {
|
|
10
11
|
type: Types.CHECKBOX;
|
|
11
|
-
steps
|
|
12
|
+
steps?: string[];
|
|
13
|
+
uncheckedSteps?: string[];
|
|
14
|
+
maxSize?: number;
|
|
12
15
|
}
|
|
13
16
|
export interface Rating extends GSteps.GBaseStep {
|
|
14
17
|
type: Types.RATING;
|
|
@@ -50,7 +53,7 @@ export interface FormSelector extends GSteps.GBaseStep {
|
|
|
50
53
|
searchable: boolean;
|
|
51
54
|
options: FormSelectorOption[];
|
|
52
55
|
size: 1 | 2 | 3 | 4;
|
|
53
|
-
maxSize
|
|
56
|
+
maxSize?: number;
|
|
54
57
|
}
|
|
55
58
|
export type FormSelectorOption = DefaultFormSelectorOption | NestedStepOption | AddSectionOption;
|
|
56
59
|
interface DefaultFormSelectorOption {
|
|
@@ -79,7 +82,7 @@ export interface ClassifierSelector extends GSteps.GBaseStep {
|
|
|
79
82
|
options: Record<string, FormClassifierSelectorOption>;
|
|
80
83
|
required: boolean;
|
|
81
84
|
size: 1 | 2 | 3 | 4;
|
|
82
|
-
maxSize
|
|
85
|
+
maxSize?: number;
|
|
83
86
|
}
|
|
84
87
|
export type FormClassifierSelectorOption = NestedStepClassifierOption | HideValueOption;
|
|
85
88
|
interface NestedStepClassifierOption {
|
|
@@ -107,7 +110,7 @@ export interface EntityValuePicker extends GSteps.GSmartSelect {
|
|
|
107
110
|
idEntityValue?: string;
|
|
108
111
|
}[];
|
|
109
112
|
options: Record<string, FormEntityValuePickerOption>;
|
|
110
|
-
maxSize
|
|
113
|
+
maxSize?: number;
|
|
111
114
|
}
|
|
112
115
|
export type FormEntityValuePickerOption = NestedEntityValuePickerOption | HideFormEntityValuePickerOption;
|
|
113
116
|
interface NestedEntityValuePickerOption {
|
package/dist/App.js
CHANGED
|
@@ -361,22 +361,14 @@ var migrateForm = function (form, classifiers) {
|
|
|
361
361
|
return newForm;
|
|
362
362
|
};
|
|
363
363
|
function getStaticWidth(step) {
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
case SIZES.SMALL:
|
|
373
|
-
return 1;
|
|
374
|
-
default:
|
|
375
|
-
return 1;
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
else {
|
|
379
|
-
return 4;
|
|
364
|
+
switch (step.size) {
|
|
365
|
+
case SIZES.SMALL:
|
|
366
|
+
return 1;
|
|
367
|
+
case SIZES.MEDIUM:
|
|
368
|
+
return 2;
|
|
369
|
+
case SIZES.LARGE:
|
|
370
|
+
default:
|
|
371
|
+
return 4;
|
|
380
372
|
}
|
|
381
373
|
}
|
|
382
374
|
var mapOriginalValues = function (originalValues, form) {
|
|
@@ -237,6 +237,10 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
|
|
|
237
237
|
}
|
|
238
238
|
else {
|
|
239
239
|
switch (step === null || step === void 0 ? void 0 : step.type) {
|
|
240
|
+
case Types.TITLE: {
|
|
241
|
+
deleteIds.push(idStep);
|
|
242
|
+
return null;
|
|
243
|
+
}
|
|
240
244
|
case Types.TEXTAREA: {
|
|
241
245
|
if (step.hasTextEditor) {
|
|
242
246
|
var currentContent = value.getCurrentContent();
|
|
@@ -23,33 +23,61 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import { createElement as _createElement } from "react";
|
|
24
24
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
import styles from './MaterialCheckBoxStep.module.css';
|
|
26
|
-
import { calcStepWidth } from '../../StepFunctions';
|
|
26
|
+
import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
|
|
27
27
|
import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
|
|
28
28
|
import { Controller } from 'react-hook-form';
|
|
29
|
-
import React from 'react';
|
|
29
|
+
import React, { useState } from 'react';
|
|
30
30
|
import StepComponent from '../../Step';
|
|
31
31
|
function CheckBox(_a) {
|
|
32
|
-
var step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["step", "form", "value", "onBlur", "errors", "onChange", "inputRef", "editable", "postview", "formStyle", "widthStats"]);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
step.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
32
|
+
var step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, getValues = _a.getValues, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["step", "form", "value", "onBlur", "errors", "level", "onChange", "inputRef", "editable", "postview", "getValues", "formStyle", "widthStats"]);
|
|
33
|
+
var handleSizeChange = others.handleSizeChange;
|
|
34
|
+
var _b = useState(level === 0
|
|
35
|
+
? calcFillerSize(step, form.steps, getValues(), form.size)
|
|
36
|
+
: 0), fillerSize = _b[0], setFillerSize = _b[1];
|
|
37
|
+
var sizeChange = function () {
|
|
38
|
+
handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
|
|
39
|
+
if (level === 0) {
|
|
40
|
+
setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
var renderCheckbox = function () {
|
|
44
|
+
return (_jsxs("div", __assign({ className: styles.container, style: {
|
|
45
|
+
width: widthStats.currentBreakPoint <= step.size
|
|
46
|
+
? '100%'
|
|
47
|
+
: calcStepWidth(step.size, form.size),
|
|
48
|
+
minHeight: step.description ||
|
|
49
|
+
(!postview && editable && step.required)
|
|
50
|
+
? '55px'
|
|
51
|
+
: '43px',
|
|
52
|
+
} }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }))), _jsx(RoundedCheckBox, { onChange: onChange, onBlur: onBlur, "data-testid": step.id, inputRef: inputRef, padding: "0px", size: "1.6rem", error: !!errors[step.id], cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })] })), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
|
|
53
|
+
color: !!errors[step.id]
|
|
54
|
+
? formStyle.errorColor
|
|
55
|
+
: formStyle.descriptionTextColor,
|
|
56
|
+
} }, { children: !!errors[step.id]
|
|
57
|
+
? 'Este campo es obligatorio'
|
|
58
|
+
: step.description })))] }), step.id));
|
|
59
|
+
};
|
|
60
|
+
var renderNested = function () {
|
|
61
|
+
var steps = value ? step.steps : step.uncheckedSteps;
|
|
62
|
+
return (_jsx(React.Fragment, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (idStep) {
|
|
63
|
+
var subStep = form.steps[idStep];
|
|
64
|
+
return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
|
|
65
|
+
sizeChange();
|
|
66
|
+
} })));
|
|
67
|
+
}) }));
|
|
68
|
+
};
|
|
69
|
+
if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
|
|
70
|
+
return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
|
|
71
|
+
width: widthStats.currentBreakPoint <= step.size
|
|
72
|
+
? '100%'
|
|
73
|
+
: 'fit-content',
|
|
74
|
+
} }, { children: [renderCheckbox(), renderNested(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
|
|
75
|
+
width: fillerSize,
|
|
76
|
+
} }, "SEPARATOR"))] })));
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
return (_jsxs(React.Fragment, { children: [renderCheckbox(), renderNested(), level === 0 && _jsx("div", { className: styles.separator })] }));
|
|
80
|
+
}
|
|
53
81
|
}
|
|
54
82
|
function CheckBoxStep(props) {
|
|
55
83
|
var _a;
|
|
@@ -95,7 +95,7 @@ function ClassifierSelector(_a) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
|
-
if (level === 0 && step.maxSize < form.size.blockNum) {
|
|
98
|
+
if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
|
|
99
99
|
return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
|
|
100
100
|
width: widthStats.currentBreakPoint <= step.size
|
|
101
101
|
? '100%'
|
|
@@ -176,7 +176,7 @@ function EntityValuePicker(_a) {
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
};
|
|
179
|
-
if (level === 0 && step.maxSize < form.size.blockNum) {
|
|
179
|
+
if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
|
|
180
180
|
return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
|
|
181
181
|
width: widthStats.currentBreakPoint <= step.size
|
|
182
182
|
? '100%'
|
|
@@ -33,7 +33,6 @@ function MapperElementComponent(props) {
|
|
|
33
33
|
switch ((_c = step.style) === null || _c === void 0 ? void 0 : _c.type) {
|
|
34
34
|
case MapperStyleTypes.INLINE:
|
|
35
35
|
return _jsx(React.Fragment, { children: mapSubSteps() });
|
|
36
|
-
case undefined:
|
|
37
36
|
case MapperStyleTypes.LIST:
|
|
38
37
|
return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
|
|
39
38
|
case MapperStyleTypes.PILL:
|
|
@@ -229,13 +229,18 @@ function calcRecursiveData(element, newSteps, deps, customSteps, originalValues)
|
|
|
229
229
|
break;
|
|
230
230
|
}
|
|
231
231
|
case StepTypes.CHECKBOX: {
|
|
232
|
-
if (step.steps)
|
|
232
|
+
if (step.steps)
|
|
233
233
|
for (var i = 0; i < step.steps.length; i++) {
|
|
234
234
|
var idStep_5 = step.steps[i];
|
|
235
235
|
var newId = element.ids[idStep_5];
|
|
236
236
|
step.steps[i] = newId;
|
|
237
237
|
}
|
|
238
|
-
|
|
238
|
+
if (step.uncheckedSteps)
|
|
239
|
+
for (var i = 0; i < step.uncheckedSteps.length; i++) {
|
|
240
|
+
var idStep_6 = step.uncheckedSteps[i];
|
|
241
|
+
var newId = element.ids[idStep_6];
|
|
242
|
+
step.uncheckedSteps[i] = newId;
|
|
243
|
+
}
|
|
239
244
|
break;
|
|
240
245
|
}
|
|
241
246
|
case StepTypes.ENTITYVALUEPICKER:
|
|
@@ -254,8 +259,8 @@ function calcRecursiveData(element, newSteps, deps, customSteps, originalValues)
|
|
|
254
259
|
var option = step.options[idOption];
|
|
255
260
|
if (option.type === EntityValueOptionTypes.NESTED) {
|
|
256
261
|
for (var i = 0; i < option.steps.length; i++) {
|
|
257
|
-
var
|
|
258
|
-
var newId = element.ids[
|
|
262
|
+
var idStep_7 = option.steps[i];
|
|
263
|
+
var newId = element.ids[idStep_7];
|
|
259
264
|
option.steps[i] = newId;
|
|
260
265
|
}
|
|
261
266
|
}
|
|
@@ -78,7 +78,7 @@ function Selector(_a) {
|
|
|
78
78
|
}) }));
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
if (level === 0 && step.maxSize < form.size.blockNum) {
|
|
81
|
+
if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
|
|
82
82
|
return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
|
|
83
83
|
width: widthStats.currentBreakPoint <= step.size
|
|
84
84
|
? '100%'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FormSize } from '../../@Types/Form';
|
|
2
|
-
import { ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../../@Types/FormStep';
|
|
3
|
-
export declare function calcFillerSize(step: FormSelector | ClassifierSelector | EntityValuePicker, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
|
|
2
|
+
import { CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../../@Types/FormStep';
|
|
3
|
+
export declare function calcFillerSize(step: FormSelector | ClassifierSelector | EntityValuePicker | CheckBox, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
|
|
4
4
|
export declare function recursivelyCheckOpenSize(idStep: string, steps: Record<string, FormStep>, values: Record<string, any>): number;
|
|
5
5
|
export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import Types, { ClassifierOptionTypes, EntityValueOptionTypes, OptionTypes, } from '../../constants/FormStepTypes';
|
|
2
2
|
export function calcFillerSize(step, steps, values, size) {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _a;
|
|
4
|
+
var maxSize = (_a = step.maxSize) !== null && _a !== void 0 ? _a : size.blockNum;
|
|
5
|
+
if (maxSize < size.blockNum) {
|
|
6
|
+
var stepSize = maxSize - recursivelyCheckOpenSize(step.id, steps, values);
|
|
5
7
|
return (size.blockSize * stepSize + size.spacingSize * (stepSize - 1) + 20);
|
|
6
8
|
}
|
|
7
9
|
else {
|
|
@@ -56,6 +58,17 @@ export function recursivelyCheckOpenSize(idStep, steps, values) {
|
|
|
56
58
|
}
|
|
57
59
|
return size;
|
|
58
60
|
}
|
|
61
|
+
if (step.type === Types.CHECKBOX) {
|
|
62
|
+
var size = step.size;
|
|
63
|
+
var stepSteps = value ? step.steps : step.uncheckedSteps;
|
|
64
|
+
var optionSize = 0;
|
|
65
|
+
for (var _f = 0, _g = stepSteps !== null && stepSteps !== void 0 ? stepSteps : []; _f < _g.length; _f++) {
|
|
66
|
+
var pStepId = _g[_f];
|
|
67
|
+
optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
|
|
68
|
+
}
|
|
69
|
+
size += optionSize;
|
|
70
|
+
return size;
|
|
71
|
+
}
|
|
59
72
|
else {
|
|
60
73
|
return 4;
|
|
61
74
|
}
|
|
@@ -10,11 +10,35 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { Controller } from 'react-hook-form';
|
|
14
|
+
import { calcStepWidth } from '../../StepFunctions';
|
|
13
15
|
import styles from './MaterialTitleStep.module.css';
|
|
14
|
-
function
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
function Title(_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var step = _a.step, form = _a.form, _c = _a.value, title = _c.title, description = _c.description, formStyle = _a.formStyle, widthStats = _a.widthStats;
|
|
19
|
+
var size = (_b = step.size) !== null && _b !== void 0 ? _b : form.size.blockNum;
|
|
20
|
+
return (_jsxs("div", __assign({ className: styles.container, style: {
|
|
21
|
+
color: formStyle.textColor,
|
|
22
|
+
width: widthStats.currentBreakPoint <= size
|
|
23
|
+
? '100%'
|
|
24
|
+
: calcStepWidth(size, form.size),
|
|
25
|
+
} }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
|
|
26
|
+
textAlign: widthStats.isMobile &&
|
|
27
|
+
widthStats.currentBreakPoint <= size
|
|
28
|
+
? 'center'
|
|
29
|
+
: 'start',
|
|
30
|
+
} }, { children: title }))), description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
|
|
31
|
+
margin: title ? '10px 0px' : '0px 0px 5px 0px',
|
|
32
|
+
} }, { children: description })))] })));
|
|
33
|
+
}
|
|
34
|
+
function TitleStep(props) {
|
|
35
|
+
var _a;
|
|
36
|
+
return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : {
|
|
37
|
+
title: props.step.title,
|
|
38
|
+
description: props.step.description,
|
|
39
|
+
}, render: function (_a) {
|
|
40
|
+
var field = _a.field;
|
|
41
|
+
return _jsx(Title, __assign({}, props, field));
|
|
42
|
+
} }));
|
|
19
43
|
}
|
|
20
44
|
export default TitleStep;
|
package/package.json
CHANGED