@arquimedes.co/eureka-forms 2.0.36-test → 2.0.37-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/Condition.d.ts +60 -0
- package/dist/@Types/Condition.js +1 -0
- package/dist/@Types/FormStep.d.ts +25 -10
- package/dist/@Types/GenericFormSteps.d.ts +2 -0
- package/dist/Form/FormFunctions.js +11 -11
- package/dist/Form/FormHooks.d.ts +0 -6
- package/dist/Form/FormHooks.js +0 -7
- package/dist/FormSteps/ApiSelectorStep/ApiSelectorStep.d.ts +1 -1
- package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js +35 -0
- package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +36 -7
- package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js +1 -3
- package/dist/FormSteps/EntityValueStep/EntityValuePickerStep.d.ts +1 -1
- package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js +35 -0
- package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js +0 -1
- package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js +0 -1
- package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js +35 -4
- package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.d.ts +1 -1
- package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js +33 -21
- package/dist/FormSteps/SmartSelectStep/SmartSelectStep.d.ts +4 -0
- package/dist/FormSteps/Step.js +5 -2
- package/dist/FormSteps/StepFunctions.d.ts +3 -0
- package/dist/FormSteps/StepFunctions.js +157 -1
- package/dist/FormSteps/StepHooks.d.ts +12 -1
- package/dist/FormSteps/StepHooks.js +106 -3
- package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js +1 -0
- package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js +0 -1
- package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css +7 -3
- package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js +0 -1
- package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js +0 -1
- package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js +0 -1
- package/dist/constants/ConditionTypes.d.ts +22 -0
- package/dist/constants/ConditionTypes.js +25 -0
- package/dist/constants/FormStepTypes.d.ts +3 -0
- package/dist/constants/FormStepTypes.js +3 -0
- package/package.json +2 -2
|
@@ -53,34 +53,41 @@ import React from 'react';
|
|
|
53
53
|
import FormContext from '../../../Contexts/FormContext';
|
|
54
54
|
import { useAppDispatch, useAppSelector } from '../../../hooks';
|
|
55
55
|
import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
|
|
56
|
-
import { selectDependencies, useFormStep } from '../../StepHooks';
|
|
56
|
+
import { selectDependencies, selectStepDependencies, useFormStep, } from '../../StepHooks';
|
|
57
57
|
import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
|
|
58
58
|
function SmartSelectStep(_a) {
|
|
59
59
|
var _this = this;
|
|
60
60
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
61
|
-
var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, renderNestedSteps = _a.renderNestedSteps;
|
|
62
|
-
var
|
|
61
|
+
var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, filterOptions = _a.filterOptions, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, _j = _a.getOptionsConditionsIdSteps, getOptionsConditionsIdSteps = _j === void 0 ? function () { return []; } : _j, renderNestedSteps = _a.renderNestedSteps;
|
|
62
|
+
var _k = useFormStep(step, {
|
|
63
63
|
sizeChange: true,
|
|
64
64
|
defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null,
|
|
65
65
|
rules: {
|
|
66
66
|
required: step.required ? 'Este campo es obligatorio' : undefined,
|
|
67
67
|
},
|
|
68
|
-
}), ref =
|
|
68
|
+
}), ref = _k.ref, value = _k.value, error = _k.error, field = _k.field, handleChange = _k.onChange;
|
|
69
69
|
var onChange = useCallback(function (value) {
|
|
70
70
|
return handleChange(valueOverwrite ? valueOverwrite(value) : value);
|
|
71
71
|
}, [handleChange, valueOverwrite]);
|
|
72
|
-
var
|
|
72
|
+
var _l = useAppSelector(function (state) { return state.global; }), postview = _l.postview, formStyle = _l.formStyle, idOrganization = _l.idOrganization;
|
|
73
73
|
var form = useContext(FormContext);
|
|
74
|
-
var
|
|
75
|
-
var
|
|
76
|
-
var
|
|
77
|
-
var
|
|
74
|
+
var _m = useState(), options = _m[0], setOptions = _m[1];
|
|
75
|
+
var _o = useState(false), loading = _o[0], setLoading = _o[1];
|
|
76
|
+
var _p = useState(true), firstTime = _p[0], setFirstTime = _p[1];
|
|
77
|
+
var _q = useState(false), touched = _q[0], setTouched = _q[1];
|
|
78
78
|
var dispatch = useAppDispatch();
|
|
79
|
-
var
|
|
80
|
-
var
|
|
81
|
-
return selectDependencies(state, step
|
|
82
|
-
})
|
|
83
|
-
var
|
|
79
|
+
var idDependencies = useMemo(function () { return getOptionsConditionsIdSteps(step); }, []);
|
|
80
|
+
var dependencies = useAppSelector(function (state) {
|
|
81
|
+
return selectDependencies(state, step.dependencies);
|
|
82
|
+
});
|
|
83
|
+
var deps = useAppSelector(function (state) {
|
|
84
|
+
return selectDependencies(state, idDependencies);
|
|
85
|
+
});
|
|
86
|
+
var conditionDependencies = useMemo(function () { return deps; }, idDependencies.map(function (id) { return deps[id]; }));
|
|
87
|
+
var _r = useAppSelector(function (state) {
|
|
88
|
+
return selectStepDependencies(state, step, form);
|
|
89
|
+
}), emptyDep = _r.emptyDep, invalids = _r.invalids;
|
|
90
|
+
var _s = useFormContext(), getValues = _s.getValues, setFocus = _s.setFocus;
|
|
84
91
|
var isEmpty = useAppSelector(function (state) { var _a; return (_a = state.site.dependencies[step.id]) === null || _a === void 0 ? void 0 : _a.empty; });
|
|
85
92
|
var disabled = emptyDep;
|
|
86
93
|
useEffect(function () {
|
|
@@ -92,7 +99,7 @@ function SmartSelectStep(_a) {
|
|
|
92
99
|
else if (value && !step.searchable) {
|
|
93
100
|
setOptions([value]);
|
|
94
101
|
}
|
|
95
|
-
}, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { var _a; return (_a =
|
|
102
|
+
}, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { var _a; return (_a = dependencies[dep]) === null || _a === void 0 ? void 0 : _a.value; })) !== null && _c !== void 0 ? _c : []);
|
|
96
103
|
var calcOptions = function (firstTime) { return __awaiter(_this, void 0, void 0, function () {
|
|
97
104
|
var resp, newValue, empty, error_1;
|
|
98
105
|
return __generator(this, function (_a) {
|
|
@@ -105,7 +112,7 @@ function SmartSelectStep(_a) {
|
|
|
105
112
|
_a.label = 1;
|
|
106
113
|
case 1:
|
|
107
114
|
_a.trys.push([1, 3, , 4]);
|
|
108
|
-
return [4 /*yield*/, (getOptions === null || getOptions === void 0 ? void 0 : getOptions(idOrganization, step,
|
|
115
|
+
return [4 /*yield*/, (getOptions === null || getOptions === void 0 ? void 0 : getOptions(idOrganization, step, dependencies))];
|
|
109
116
|
case 2:
|
|
110
117
|
resp = _a.sent();
|
|
111
118
|
if (value) {
|
|
@@ -171,25 +178,30 @@ function SmartSelectStep(_a) {
|
|
|
171
178
|
if (!touched)
|
|
172
179
|
setTouched(true);
|
|
173
180
|
}, [options, disabled, postview, editable, invalids, touched]);
|
|
181
|
+
var filteredOptions = useMemo(function () {
|
|
182
|
+
if (!options || !filterOptions)
|
|
183
|
+
return options;
|
|
184
|
+
return filterOptions(options, conditionDependencies);
|
|
185
|
+
}, [options, conditionDependencies]);
|
|
174
186
|
var errorMsg = useMemo(function () {
|
|
175
187
|
if (postview || loading)
|
|
176
188
|
return undefined;
|
|
177
189
|
if (invalids.length > 0 && touched) {
|
|
178
190
|
return calcDepError === null || calcDepError === void 0 ? void 0 : calcDepError(invalids.map(function (idDep) { return form.steps[idDep]; }));
|
|
179
191
|
}
|
|
180
|
-
else if (value &&
|
|
181
|
-
var currentOption =
|
|
192
|
+
else if (value && filteredOptions) {
|
|
193
|
+
var currentOption = filteredOptions.find(function (option) {
|
|
182
194
|
return getOptionSelected(option, value);
|
|
183
195
|
});
|
|
184
196
|
if (!currentOption) {
|
|
185
197
|
return 'Este campo es obligatorio';
|
|
186
198
|
}
|
|
187
199
|
}
|
|
188
|
-
else if (
|
|
200
|
+
else if (filteredOptions === null && invalids.length === 0) {
|
|
189
201
|
return 'Error al cargar las opciones';
|
|
190
202
|
}
|
|
191
203
|
return undefined;
|
|
192
|
-
}, [invalids, touched, value,
|
|
193
|
-
return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, onClick: onFocus, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled:
|
|
204
|
+
}, [invalids, touched, value, filteredOptions]);
|
|
205
|
+
return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, onClick: onFocus, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: filteredOptions === null || disabled, hidden: disabled, loading: loading, options: filteredOptions !== null && filteredOptions !== void 0 ? filteredOptions : undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: (_h = (_g = (_e = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _e !== void 0 ? _e : (_f = error === null || error === void 0 ? void 0 : error.message) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : step.description) !== null && _h !== void 0 ? _h : undefined, error: !!errorMsg || !!warning || !!error })) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
|
|
194
206
|
}
|
|
195
207
|
export default SmartSelectStep;
|
|
@@ -10,12 +10,16 @@ export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSele
|
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
11
|
/** Function to call to get the options of the selector, return null if dependency is not met */
|
|
12
12
|
getOptions: (idOrganization: string | undefined, step: StepType, dependencyStore: DependencyStore) => Promise<any[] | null>;
|
|
13
|
+
/** Function to call to filter the options of the selector */
|
|
14
|
+
filterOptions?: (options: any[], dependencyStore: DependencyStore) => any[];
|
|
13
15
|
/** Function to determine the currently selected option */
|
|
14
16
|
getOptionSelected: (option: any, value: any) => boolean;
|
|
15
17
|
/** Function to determine the current value in string format */
|
|
16
18
|
getValueString: (value: any | undefined) => string;
|
|
17
19
|
/** Function to if currently selected option has warning */
|
|
18
20
|
getValueWarning?: (value: any | undefined) => string | null;
|
|
21
|
+
/** Function called to get the idSteps of the step's conditions for better refreshing */
|
|
22
|
+
getOptionsConditionsIdSteps?: (step: StepType) => string[];
|
|
19
23
|
/** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */
|
|
20
24
|
calcDepError?: (steps: FormStep[]) => string | undefined;
|
|
21
25
|
/** Function that overwrites the value before setting it */
|
package/dist/FormSteps/Step.js
CHANGED
|
@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
24
|
import Types from '../constants/FormStepTypes';
|
|
25
25
|
import SelectorStep from './SelectorStep/SelectorStep';
|
|
26
26
|
import SeparatorStep from './SeparatorStep/SeparatorStep';
|
|
@@ -42,7 +42,7 @@ import CustomStep from './CustomStep';
|
|
|
42
42
|
import { useAppSelector } from '../hooks';
|
|
43
43
|
import { useContext } from 'react';
|
|
44
44
|
import CustomContext from '../Contexts/CustomContext';
|
|
45
|
-
import { selectOriginalValue } from './StepHooks';
|
|
45
|
+
import { selectOriginalValue, useCondition } from './StepHooks';
|
|
46
46
|
function StepComponent(_a) {
|
|
47
47
|
var _b;
|
|
48
48
|
var step = _a.step, props = __rest(_a, ["step"]);
|
|
@@ -55,6 +55,9 @@ function StepComponent(_a) {
|
|
|
55
55
|
var originalValue = useAppSelector(function (state) {
|
|
56
56
|
return selectOriginalValue(state, step);
|
|
57
57
|
});
|
|
58
|
+
var showStep = useCondition(step.condition);
|
|
59
|
+
if (!showStep)
|
|
60
|
+
return _jsx(_Fragment, {});
|
|
58
61
|
var customStep = customSteps[step.type];
|
|
59
62
|
var editable = props.editable ? (_b = step.editable) !== null && _b !== void 0 ? _b : true : false;
|
|
60
63
|
if ((postview || !editable) &&
|
|
@@ -2,6 +2,8 @@ import { FormSize } from '../@Types/Form';
|
|
|
2
2
|
import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../@Types/FormStep';
|
|
3
3
|
import { AYFFormStep } from '../@Types/AYFFormStep';
|
|
4
4
|
import { CBRFormStep } from '../@Types/CBRFormStep';
|
|
5
|
+
import { Condition } from '../@Types/Condition';
|
|
6
|
+
import { DependencyStore } from '../Form/Form';
|
|
5
7
|
export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
|
|
6
8
|
export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
|
|
7
9
|
export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
|
|
@@ -14,3 +16,4 @@ export declare const iterateNestedSteps: (idStep: string, steps: Record<string,
|
|
|
14
16
|
* @returns list of the ids of the substeps of the step, if modifier returns modified steps
|
|
15
17
|
*/
|
|
16
18
|
export declare const calcSubSteps: (idStep: string, allSteps: Record<string, FormStep | CBRFormStep | AYFFormStep>, idModifier?: ((idSubStep: string) => string) | undefined) => string[];
|
|
19
|
+
export declare const evaluateCondition: (condition: Condition, dependencies: DependencyStore) => boolean;
|
|
@@ -7,10 +7,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
7
7
|
}
|
|
8
8
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
9
|
};
|
|
10
|
-
import { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
|
|
10
|
+
import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
|
|
11
11
|
import CBRFormStepTypes from '../constants/CBRFormStepTypes';
|
|
12
12
|
import AYFFormStepTypes from '../constants/AYFFormStepTypes';
|
|
13
13
|
import { getRawText } from '../Utils/DraftFunctions';
|
|
14
|
+
import ConditionTypes, { ExpressionTypes, OperatorTypes, } from '../constants/ConditionTypes';
|
|
14
15
|
export function calcFillerSize(step, steps, values, size) {
|
|
15
16
|
var _a;
|
|
16
17
|
var maxSize = (_a = step.maxSize) !== null && _a !== void 0 ? _a : size.blockNum;
|
|
@@ -266,3 +267,158 @@ export var calcSubSteps = function (idStep, allSteps, idModifier) {
|
|
|
266
267
|
}
|
|
267
268
|
return subSteps;
|
|
268
269
|
};
|
|
270
|
+
export var evaluateCondition = function (condition, dependencies) {
|
|
271
|
+
switch (condition.type) {
|
|
272
|
+
case ConditionTypes.EXPRESSION: {
|
|
273
|
+
if (condition.expression === ExpressionTypes.OR) {
|
|
274
|
+
for (var _i = 0, _a = condition.conditions; _i < _a.length; _i++) {
|
|
275
|
+
var subCondition = _a[_i];
|
|
276
|
+
if (evaluateCondition(subCondition, dependencies))
|
|
277
|
+
return true;
|
|
278
|
+
}
|
|
279
|
+
return false;
|
|
280
|
+
}
|
|
281
|
+
else {
|
|
282
|
+
for (var _b = 0, _c = condition.conditions; _b < _c.length; _b++) {
|
|
283
|
+
var subCondition = _c[_b];
|
|
284
|
+
if (!evaluateCondition(subCondition, dependencies))
|
|
285
|
+
return false;
|
|
286
|
+
}
|
|
287
|
+
return condition.conditions.length > 0;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
case ConditionTypes.FORM_STEP: {
|
|
291
|
+
if (isFormStepExistance(condition)) {
|
|
292
|
+
var boolFactor = condition.operator === OperatorTypes.EXISTS;
|
|
293
|
+
var value_1 = dependencies[condition.idStep].value;
|
|
294
|
+
if (value_1)
|
|
295
|
+
return boolFactor;
|
|
296
|
+
return !boolFactor;
|
|
297
|
+
}
|
|
298
|
+
var value = dependencies[condition.idStep].value;
|
|
299
|
+
switch (condition.stepType) {
|
|
300
|
+
// case FormStepTypes.AGENTPICKER:
|
|
301
|
+
// return await evaluateAgentCondition(
|
|
302
|
+
// condition,
|
|
303
|
+
// value as string[]
|
|
304
|
+
// );
|
|
305
|
+
case FormStepTypes.CHECKBOX: {
|
|
306
|
+
var boolFactor = condition.operator === OperatorTypes.EQUAL;
|
|
307
|
+
return value === condition.value ? boolFactor : !boolFactor;
|
|
308
|
+
}
|
|
309
|
+
case FormStepTypes.DATEPICKER: {
|
|
310
|
+
if (!(value instanceof Date) || isNaN(value.getTime())) {
|
|
311
|
+
return condition.operator === OperatorTypes.NOTEQUAL;
|
|
312
|
+
}
|
|
313
|
+
var propertyDate = new Date(condition.value);
|
|
314
|
+
switch (condition.operator) {
|
|
315
|
+
case OperatorTypes.EQUAL:
|
|
316
|
+
return value.getTime() === propertyDate.getTime();
|
|
317
|
+
case OperatorTypes.NOTEQUAL:
|
|
318
|
+
return value.getTime() !== propertyDate.getTime();
|
|
319
|
+
case OperatorTypes.LESS:
|
|
320
|
+
return value.getTime() < propertyDate.getTime();
|
|
321
|
+
case OperatorTypes.MORE:
|
|
322
|
+
return value.getTime() > propertyDate.getTime();
|
|
323
|
+
default:
|
|
324
|
+
return false;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
case FormStepTypes.SELECTOR: {
|
|
328
|
+
if (condition.operator === OperatorTypes.EQUAL) {
|
|
329
|
+
return condition.value === value;
|
|
330
|
+
}
|
|
331
|
+
else {
|
|
332
|
+
return !(condition.value === value);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
case FormStepTypes.TEXTINPUT: {
|
|
336
|
+
if (condition.operator === OperatorTypes.INCLUDES) {
|
|
337
|
+
return value
|
|
338
|
+
.toLowerCase()
|
|
339
|
+
.includes(condition.value.toLowerCase());
|
|
340
|
+
}
|
|
341
|
+
else if (condition.operator === OperatorTypes.NOTINCLUDES) {
|
|
342
|
+
return !value
|
|
343
|
+
.toLowerCase()
|
|
344
|
+
.includes(condition.value.toLowerCase());
|
|
345
|
+
}
|
|
346
|
+
else if (condition.operator === OperatorTypes.EQUAL) {
|
|
347
|
+
return condition.value === value;
|
|
348
|
+
}
|
|
349
|
+
else if (condition.operator === OperatorTypes.NOTEQUAL) {
|
|
350
|
+
return !(condition.value === value);
|
|
351
|
+
}
|
|
352
|
+
else {
|
|
353
|
+
return false;
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
case FormStepTypes.TEXTAREA: {
|
|
357
|
+
var words = condition.values;
|
|
358
|
+
var regx = "\\b(".concat(words[0].toLowerCase());
|
|
359
|
+
for (var i = 1; i < words.length; i++) {
|
|
360
|
+
regx += "|".concat(words[i].toLowerCase());
|
|
361
|
+
}
|
|
362
|
+
regx += ')\\b';
|
|
363
|
+
if (condition.operator === OperatorTypes.INCLUDES) {
|
|
364
|
+
return new RegExp(regx).test(value.toLowerCase());
|
|
365
|
+
}
|
|
366
|
+
else {
|
|
367
|
+
return !new RegExp(regx).test(value.toLowerCase());
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
case FormStepTypes.RATING: {
|
|
371
|
+
if (!value || isNaN(value)) {
|
|
372
|
+
return condition.operator === OperatorTypes.NOTEQUAL;
|
|
373
|
+
}
|
|
374
|
+
switch (condition.operator) {
|
|
375
|
+
case OperatorTypes.EQUAL:
|
|
376
|
+
case OperatorTypes.NOTEQUAL: {
|
|
377
|
+
var boolFactor = condition.operator === OperatorTypes.EQUAL;
|
|
378
|
+
if (value === condition.value)
|
|
379
|
+
return boolFactor;
|
|
380
|
+
return !boolFactor;
|
|
381
|
+
}
|
|
382
|
+
case OperatorTypes.LESS:
|
|
383
|
+
return value < condition.value;
|
|
384
|
+
case OperatorTypes.MORE:
|
|
385
|
+
return value > condition.value;
|
|
386
|
+
default:
|
|
387
|
+
return false;
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
case FormStepTypes.CLASSIFIER_SELECTOR: {
|
|
391
|
+
var boolFactor = condition.operator === OperatorTypes.EQUAL;
|
|
392
|
+
if (value === condition.idValue) {
|
|
393
|
+
//Si op es EQUALS (boolfactor true) evaluará a true
|
|
394
|
+
//Si op es NOTEQUALS (boolfactor false) evaluará a false
|
|
395
|
+
return boolFactor;
|
|
396
|
+
}
|
|
397
|
+
//Si op es EQUALS (boolfactor true) evaluará a false.
|
|
398
|
+
//Si op es NOTEQUALS (boolfactor false) evaluará a true
|
|
399
|
+
return !boolFactor;
|
|
400
|
+
}
|
|
401
|
+
case FormStepTypes.ENTITYVALUEPICKER: {
|
|
402
|
+
var boolFactor = condition.operator === OperatorTypes.EQUAL;
|
|
403
|
+
for (var _d = 0, _e = condition.values; _d < _e.length; _d++) {
|
|
404
|
+
var idEntityValue = _e[_d];
|
|
405
|
+
if (value._id === idEntityValue) {
|
|
406
|
+
return boolFactor;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
return !boolFactor;
|
|
410
|
+
}
|
|
411
|
+
default:
|
|
412
|
+
break;
|
|
413
|
+
}
|
|
414
|
+
break;
|
|
415
|
+
}
|
|
416
|
+
default:
|
|
417
|
+
return false;
|
|
418
|
+
}
|
|
419
|
+
return false;
|
|
420
|
+
};
|
|
421
|
+
function isFormStepExistance(condition) {
|
|
422
|
+
return (condition.operator === OperatorTypes.EXISTS ||
|
|
423
|
+
condition.operator === OperatorTypes.NOTEXISTS);
|
|
424
|
+
}
|
|
@@ -3,7 +3,10 @@ import { ValuesStore } from '../States/SiteSlice';
|
|
|
3
3
|
import { RootState } from '../Utils/store';
|
|
4
4
|
import { Form } from '../@Types';
|
|
5
5
|
import { DependencyStore } from '../Form/Form';
|
|
6
|
+
import { FormStep } from '../@Types/FormStep';
|
|
6
7
|
import { FieldError, RefCallBack, UseControllerProps, useController } from 'react-hook-form';
|
|
8
|
+
import { Condition } from '../@Types/Condition';
|
|
9
|
+
import { CBRFormStep } from '../@Types/CBRFormStep';
|
|
7
10
|
export declare const selectOriginalValue: ((state: RootState, step: GBaseStep) => any) & import("reselect").OutputSelectorFields<(args_0: ValuesStore, args_1: GBaseStep) => any, {
|
|
8
11
|
clearCache: () => void;
|
|
9
12
|
}> & {
|
|
@@ -15,7 +18,7 @@ export interface StepDependency {
|
|
|
15
18
|
handleStepDep: (value: any | undefined) => void;
|
|
16
19
|
}
|
|
17
20
|
export declare const useStepDependency: (step: GBaseStep, defaultValue?: any) => StepDependency;
|
|
18
|
-
export declare const
|
|
21
|
+
export declare const selectStepDependencies: ((state: RootState, step: GBaseStep, form: Form) => {
|
|
19
22
|
invalids: string[];
|
|
20
23
|
emptyDep: boolean;
|
|
21
24
|
}) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: GBaseStep, args_2: Form) => {
|
|
@@ -41,3 +44,11 @@ export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules
|
|
|
41
44
|
error: FieldError | undefined;
|
|
42
45
|
field: Omit<ReturnType<typeof useController>['field'], 'ref' | 'value' | 'onChange'>;
|
|
43
46
|
};
|
|
47
|
+
export declare const selectDependencies: ((state: RootState, idDeps: string[] | undefined) => DependencyStore) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: string[]) => DependencyStore, {
|
|
48
|
+
clearCache: () => void;
|
|
49
|
+
}> & {
|
|
50
|
+
clearCache: () => void;
|
|
51
|
+
};
|
|
52
|
+
export declare const useCondition: (condition?: Condition) => boolean;
|
|
53
|
+
export declare const calcStepDeps: (step: FormStep | CBRFormStep) => string[];
|
|
54
|
+
export declare const recursivelyCalcConditionSteps: (condition: Condition | undefined) => string[];
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
13
|
var t = {};
|
|
3
14
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -18,13 +29,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
18
29
|
}
|
|
19
30
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
31
|
};
|
|
21
|
-
import { useCallback, useContext, useEffect, useState } from 'react';
|
|
32
|
+
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
22
33
|
import { useAppSelector, useAppDispatch } from '../hooks';
|
|
23
34
|
import { clearDependency, setStepDependency, } from '../States/SiteSlice';
|
|
24
35
|
import { createSelector } from '@reduxjs/toolkit';
|
|
25
|
-
import { calcDefaultValue } from './StepFunctions';
|
|
36
|
+
import { calcDefaultValue, evaluateCondition } from './StepFunctions';
|
|
26
37
|
import { useController, } from 'react-hook-form';
|
|
27
38
|
import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
|
|
39
|
+
import ConditionTypes from '../constants/ConditionTypes';
|
|
40
|
+
import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, } from '../constants/FormStepTypes';
|
|
28
41
|
var selectIsDependency = createSelector([
|
|
29
42
|
function (state) { return state.site.dependencies; },
|
|
30
43
|
function (state, step) { return step; },
|
|
@@ -69,7 +82,7 @@ export var useStepDependency = function (step, defaultValue) {
|
|
|
69
82
|
originalValue: (_a = originalValue !== null && originalValue !== void 0 ? originalValue : defaultValue) !== null && _a !== void 0 ? _a : calcDefaultValue(step),
|
|
70
83
|
};
|
|
71
84
|
};
|
|
72
|
-
export var
|
|
85
|
+
export var selectStepDependencies = createSelector([
|
|
73
86
|
function (state) { return state.site.dependencies; },
|
|
74
87
|
function (state, step) { return step; },
|
|
75
88
|
function (state, step, form) { return form; },
|
|
@@ -141,3 +154,93 @@ export var useFormStep = function (step, _a) {
|
|
|
141
154
|
field: field,
|
|
142
155
|
};
|
|
143
156
|
};
|
|
157
|
+
var EMPTY_ARRAY = [];
|
|
158
|
+
export var selectDependencies = createSelector([
|
|
159
|
+
function (state) { return state.site.dependencies; },
|
|
160
|
+
function (state, idDeps) {
|
|
161
|
+
return idDeps !== null && idDeps !== void 0 ? idDeps : EMPTY_ARRAY;
|
|
162
|
+
},
|
|
163
|
+
], function (dependencies, idDeps) {
|
|
164
|
+
return idDeps.reduce(function (acc, idDep) {
|
|
165
|
+
var _a;
|
|
166
|
+
return (__assign(__assign({}, acc), (_a = {}, _a[idDep] = dependencies[idDep], _a)));
|
|
167
|
+
}, {});
|
|
168
|
+
});
|
|
169
|
+
export var useCondition = function (condition) {
|
|
170
|
+
var ids = useMemo(function () { return recursivelyCalcConditionSteps(condition); }, []);
|
|
171
|
+
var dependencies = useAppSelector(function (state) {
|
|
172
|
+
return selectDependencies(state, ids);
|
|
173
|
+
});
|
|
174
|
+
return useMemo(function () {
|
|
175
|
+
return !condition || evaluateCondition(condition, dependencies);
|
|
176
|
+
}, ids.map(function (id) { return dependencies[id].value; }));
|
|
177
|
+
};
|
|
178
|
+
export var calcStepDeps = function (step) {
|
|
179
|
+
var _a;
|
|
180
|
+
var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
|
|
181
|
+
if (step.condition) {
|
|
182
|
+
dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(step.condition));
|
|
183
|
+
}
|
|
184
|
+
switch (step.type) {
|
|
185
|
+
case FormStepTypes.CLASSIFIER_SELECTOR:
|
|
186
|
+
{
|
|
187
|
+
for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
|
|
188
|
+
var option = _b[_i];
|
|
189
|
+
if (option.type !== ClassifierOptionTypes.HIDE &&
|
|
190
|
+
option.condition) {
|
|
191
|
+
dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
break;
|
|
196
|
+
case FormStepTypes.ENTITYVALUEPICKER:
|
|
197
|
+
{
|
|
198
|
+
for (var _c = 0, _d = Object.values(step.options); _c < _d.length; _c++) {
|
|
199
|
+
var option = _d[_c];
|
|
200
|
+
if (option.type !== EntityValueOptionTypes.HIDE &&
|
|
201
|
+
option.condition) {
|
|
202
|
+
dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
break;
|
|
207
|
+
case FormStepTypes.API_SELECTOR:
|
|
208
|
+
{
|
|
209
|
+
for (var _e = 0, _f = Object.values(step.options); _e < _f.length; _e++) {
|
|
210
|
+
var option = _f[_e];
|
|
211
|
+
if (option.type !== ApiSelectorOptionTypes.HIDE &&
|
|
212
|
+
option.condition) {
|
|
213
|
+
dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
break;
|
|
218
|
+
case FormStepTypes.SELECTOR:
|
|
219
|
+
{
|
|
220
|
+
for (var _g = 0, _h = Object.values(step.options); _g < _h.length; _g++) {
|
|
221
|
+
var option = _h[_g];
|
|
222
|
+
if (option.condition) {
|
|
223
|
+
dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
break;
|
|
228
|
+
default:
|
|
229
|
+
break;
|
|
230
|
+
}
|
|
231
|
+
return dependencies;
|
|
232
|
+
};
|
|
233
|
+
export var recursivelyCalcConditionSteps = function (condition) {
|
|
234
|
+
if (!condition)
|
|
235
|
+
return [];
|
|
236
|
+
switch (condition.type) {
|
|
237
|
+
case ConditionTypes.EXPRESSION: {
|
|
238
|
+
return condition.conditions
|
|
239
|
+
.map(function (condition) { return recursivelyCalcConditionSteps(condition); })
|
|
240
|
+
.flat();
|
|
241
|
+
}
|
|
242
|
+
case ConditionTypes.FORM_STEP: {
|
|
243
|
+
return [condition.idStep];
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
};
|
|
@@ -104,6 +104,7 @@ function TextAreaStep(_a) {
|
|
|
104
104
|
}
|
|
105
105
|
return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
|
|
106
106
|
breakInside: 'avoid',
|
|
107
|
+
pageBreakAfter: 'auto',
|
|
107
108
|
'--eureka-outline': formStyle.outlineColor,
|
|
108
109
|
'--eureka-primary': formStyle.primaryColor,
|
|
109
110
|
} }, { children: [step.label && (_jsxs("div", __assign({ className: styles.textEditorLabel, style: {
|
|
@@ -31,7 +31,6 @@ function TextAreaStep(_a) {
|
|
|
31
31
|
paddingBottom: step.required || step.description || !!error
|
|
32
32
|
? '0px'
|
|
33
33
|
: '5px',
|
|
34
|
-
breakAfter: 'auto',
|
|
35
34
|
} }, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, "data-testid": step.id, maxLength: maxLength, label: step.label, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description) !== null && _c !== void 0 ? _c : (step.required ? ' ' : null), error: !!error })) })), _jsxs("div", __assign({ className: styles.print }, { children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.printLbl, style: {
|
|
36
35
|
color: formStyle.descriptionTextColor,
|
|
37
36
|
} }, { children: step.label })), _jsx("div", __assign({ className: styles.printLine, style: {
|
|
@@ -72,12 +72,13 @@
|
|
|
72
72
|
position: absolute;
|
|
73
73
|
top: 9px;
|
|
74
74
|
left: 14px;
|
|
75
|
+
font-size: 1rem;
|
|
75
76
|
}
|
|
76
77
|
.printLine {
|
|
77
78
|
top: 0px;
|
|
78
79
|
padding: 0px 5px;
|
|
79
80
|
left: 9px;
|
|
80
|
-
height:
|
|
81
|
+
height: 2px;
|
|
81
82
|
font-size: 0.75rem;
|
|
82
83
|
position: absolute;
|
|
83
84
|
overflow: hidden;
|
|
@@ -87,7 +88,8 @@
|
|
|
87
88
|
border-radius: 10px;
|
|
88
89
|
border: 1px solid black;
|
|
89
90
|
padding: 5px 11px;
|
|
90
|
-
width:
|
|
91
|
+
width: 100%;
|
|
92
|
+
max-width: 100%;
|
|
91
93
|
font-size: 1rem;
|
|
92
94
|
min-height: 76px;
|
|
93
95
|
line-height: 1.2rem;
|
|
@@ -101,7 +103,9 @@
|
|
|
101
103
|
|
|
102
104
|
@media print {
|
|
103
105
|
.print {
|
|
104
|
-
display:
|
|
106
|
+
display: flex;
|
|
107
|
+
width: 100%;
|
|
108
|
+
max-width: 100%;
|
|
105
109
|
}
|
|
106
110
|
.erkTextArea {
|
|
107
111
|
display: none !important;
|
|
@@ -47,7 +47,6 @@ function TextInputStep(_a) {
|
|
|
47
47
|
(!postview && editable && (step.required || validation))
|
|
48
48
|
? '55px'
|
|
49
49
|
: '43px',
|
|
50
|
-
breakInside: 'avoid',
|
|
51
50
|
} }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, maxLength: maxLength, "data-testid": step.id, label: step.label, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error, icon: step.showIcon ? icon : undefined })) })));
|
|
52
51
|
}
|
|
53
52
|
export default TextInputStep;
|
|
@@ -33,7 +33,6 @@ function TitleStep(_a) {
|
|
|
33
33
|
width: widthStats.currentBreakPoint <= size
|
|
34
34
|
? '100%'
|
|
35
35
|
: calcStepWidth(size, form.size),
|
|
36
|
-
breakInside: 'avoid',
|
|
37
36
|
} }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
|
|
38
37
|
textAlign: widthStats.isMobile &&
|
|
39
38
|
widthStats.currentBreakPoint <= size
|
|
@@ -21,7 +21,6 @@ function MaterialInputContainer(_a) {
|
|
|
21
21
|
var currentBreakPoint = useAppSelector(selectBreakPoint);
|
|
22
22
|
var postview = useAppSelector(function (state) { return state.global.postview; });
|
|
23
23
|
return (_jsx("div", __assign({ className: styles.container, style: {
|
|
24
|
-
breakInside: 'avoid',
|
|
25
24
|
width: currentBreakPoint <= step.size
|
|
26
25
|
? '100%'
|
|
27
26
|
: calcStepWidth(step.size, form.size),
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare enum ConditionTypes {
|
|
2
|
+
EXPRESSION = "EXPRESSION",
|
|
3
|
+
FORM_STEP = "FORM_STEP"
|
|
4
|
+
}
|
|
5
|
+
export default ConditionTypes;
|
|
6
|
+
export declare enum ExpressionTypes {
|
|
7
|
+
'OR' = "OR",
|
|
8
|
+
'AND' = "AND"
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Operators available to all conditions
|
|
12
|
+
*/
|
|
13
|
+
export declare enum OperatorTypes {
|
|
14
|
+
EQUAL = "EQUAL",
|
|
15
|
+
NOTEQUAL = "NOTEQUAL",
|
|
16
|
+
INCLUDES = "INCLUDES",
|
|
17
|
+
NOTINCLUDES = "NOTINCLUDES",
|
|
18
|
+
LESS = "LESS",
|
|
19
|
+
MORE = "MORE",
|
|
20
|
+
EXISTS = "EXISTS",
|
|
21
|
+
NOTEXISTS = "NOTEXISTS"
|
|
22
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export var ConditionTypes;
|
|
2
|
+
(function (ConditionTypes) {
|
|
3
|
+
ConditionTypes["EXPRESSION"] = "EXPRESSION";
|
|
4
|
+
ConditionTypes["FORM_STEP"] = "FORM_STEP";
|
|
5
|
+
})(ConditionTypes || (ConditionTypes = {}));
|
|
6
|
+
export default ConditionTypes;
|
|
7
|
+
export var ExpressionTypes;
|
|
8
|
+
(function (ExpressionTypes) {
|
|
9
|
+
ExpressionTypes["OR"] = "OR";
|
|
10
|
+
ExpressionTypes["AND"] = "AND";
|
|
11
|
+
})(ExpressionTypes || (ExpressionTypes = {}));
|
|
12
|
+
/**
|
|
13
|
+
* Operators available to all conditions
|
|
14
|
+
*/
|
|
15
|
+
export var OperatorTypes;
|
|
16
|
+
(function (OperatorTypes) {
|
|
17
|
+
OperatorTypes["EQUAL"] = "EQUAL";
|
|
18
|
+
OperatorTypes["NOTEQUAL"] = "NOTEQUAL";
|
|
19
|
+
OperatorTypes["INCLUDES"] = "INCLUDES";
|
|
20
|
+
OperatorTypes["NOTINCLUDES"] = "NOTINCLUDES";
|
|
21
|
+
OperatorTypes["LESS"] = "LESS";
|
|
22
|
+
OperatorTypes["MORE"] = "MORE";
|
|
23
|
+
OperatorTypes["EXISTS"] = "EXISTS";
|
|
24
|
+
OperatorTypes["NOTEXISTS"] = "NOTEXISTS";
|
|
25
|
+
})(OperatorTypes || (OperatorTypes = {}));
|