@arquimedes.co/eureka-forms 1.4.9-test → 1.5.0-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.
Files changed (20) hide show
  1. package/dist/App.d.ts +3 -1
  2. package/dist/App.js +5 -5
  3. package/dist/FormComponents/Form/ColumnForm/ColumnForm.js +4 -0
  4. package/dist/FormComponents/Form/Form.d.ts +2 -0
  5. package/dist/FormComponents/Section/Section.d.ts +2 -0
  6. package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js +2 -2
  7. package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.js +4 -4
  8. package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts +1 -1
  9. package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +2 -2
  10. package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +3 -3
  11. package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.d.ts +1 -1
  12. package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js +2 -2
  13. package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js +3 -3
  14. package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js +3 -3
  15. package/dist/FormComponents/Step/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js +4 -4
  16. package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts +1 -1
  17. package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js +10 -9
  18. package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.d.ts +1 -1
  19. package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js +2 -2
  20. package/package.json +1 -1
package/dist/App.d.ts CHANGED
@@ -15,6 +15,8 @@ export interface AppProps {
15
15
  postview?: boolean;
16
16
  /** If the widget is a preview (view from admin)*/
17
17
  preview?: boolean;
18
+ /** If the form can be edited (For entities) */
19
+ editable?: boolean;
18
20
  /** The data to fill the form with */
19
21
  valuesData?: Record<string, unknown>;
20
22
  /** Custom steps to display */
@@ -30,7 +32,7 @@ export interface CustomStep {
30
32
  component: ReactNode;
31
33
  updateValue: (idStep: string, values: Record<string, any>, form: Form) => void;
32
34
  }
33
- declare function App({ apiKey, domain, preview, formData, postview, isWidget, internal, valuesData, customSend, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
35
+ declare function App({ apiKey, domain, preview, formData, postview, editable, isWidget, internal, valuesData, customSend, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
34
36
  export default App;
35
37
  export declare enum SIZES {
36
38
  SMALL = "SMALL",
package/dist/App.js CHANGED
@@ -68,10 +68,10 @@ import widgetInstance from './AxiosWidget';
68
68
  function App(_a) {
69
69
  var _this = this;
70
70
  var _b, _c, _d, _e;
71
- var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSend = _a.customSend, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
72
- var _f = useState(undefined), form = _f[0], setForm = _f[1];
73
- var _g = useState({}), originalValues = _g[0], setOriginalValues = _g[1];
74
- var _h = useState(undefined), organizationInfo = _h[0], setOrganizationInfo = _h[1];
71
+ var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, _f = _a.editable, editable = _f === void 0 ? true : _f, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSend = _a.customSend, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "editable", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
72
+ var _g = useState(undefined), form = _g[0], setForm = _g[1];
73
+ var _h = useState({}), originalValues = _h[0], setOriginalValues = _h[1];
74
+ var _j = useState(undefined), organizationInfo = _j[0], setOrganizationInfo = _j[1];
75
75
  function fetchPreview(formData) {
76
76
  return __awaiter(this, void 0, void 0, function () {
77
77
  var response;
@@ -256,7 +256,7 @@ function App(_a) {
256
256
  if (handleConfirmed) {
257
257
  handleConfirmed();
258
258
  }
259
- }, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, customSend: customSend, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
259
+ }, editable: editable, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, customSend: customSend, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
260
260
  }
261
261
  }
262
262
  export default App;
@@ -201,6 +201,7 @@ var mapOriginalValues = function (originalValues, form) {
201
201
  return newValues;
202
202
  };
203
203
  var updateValue = function (idStep, values, form, customSteps) {
204
+ var _a;
204
205
  var step = form.steps[idStep];
205
206
  var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
206
207
  if (custom !== undefined) {
@@ -234,6 +235,9 @@ var updateValue = function (idStep, values, form, customSteps) {
234
235
  break;
235
236
  }
236
237
  default:
238
+ if (step.type === 'CBR_INCIDENCIAS') {
239
+ values[step.id] = (_a = values[step.id]) === null || _a === void 0 ? void 0 : _a.map(function (inmueble) { return inmueble.deleted !== false; });
240
+ }
237
241
  break;
238
242
  }
239
243
  }
@@ -24,6 +24,8 @@ export interface FormComponentProps {
24
24
  fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
25
25
  /** Function to call when the form has loaded */
26
26
  handleLoaded: () => void;
27
+ /** If the form can be edited (For entities) */
28
+ editable: boolean;
27
29
  }
28
30
  declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle' | 'handleLoaded'> & {
29
31
  containerRef: any;
@@ -7,6 +7,8 @@ export interface RecursiveData {
7
7
  form: Form;
8
8
  control: Control<FieldValues, object>;
9
9
  formStyle: FormStyle;
10
+ /** If the formsteps can be edited (For entities) */
11
+ editable: boolean;
10
12
  postview: boolean;
11
13
  domain?: string;
12
14
  errors: Record<string, any>;
@@ -37,10 +37,10 @@ function IncidentComponent(_a) {
37
37
  : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
38
38
  width: (form.size.blockSize + form.size.spacingSize) *
39
39
  (form.size.blockNum - 1),
40
- } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [step.unitLabel + ' ' + incident.num, ":"] }), void 0), _jsx("div", __assign({ className: others.postview
40
+ } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [step.unitLabel + ' ' + incident.num, ":"] }), void 0), _jsx("div", __assign({ className: !others.editable || others.postview
41
41
  ? styles.disabledDeleteBtn
42
42
  : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
43
- if (!others.postview) {
43
+ if (others.editable && !others.postview) {
44
44
  handleDelete();
45
45
  }
46
46
  } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: commentStep, handleSizeChange: function () { }, level: level + 1 }), void 0)] }), void 0) }), void 0));
@@ -39,7 +39,7 @@ import styles from './MaterialCBRIncidentsStep.module.css';
39
39
  import { nanoid } from 'nanoid';
40
40
  import RoundedButton from '../../../../../shared/RoundedButton/RoundedButton';
41
41
  function Incidents(_a) {
42
- var step = _a.step, form = _a.form, btnRef = _a.btnRef, onChange = _a.onChange, incidents = _a.incidents, formStyle = _a.formStyle, postview = _a.postview, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "btnRef", "onChange", "incidents", "formStyle", "postview", "dependencyStore", "setDependencyStore"]);
42
+ var step = _a.step, form = _a.form, btnRef = _a.btnRef, editable = _a.editable, postview = _a.postview, onChange = _a.onChange, incidents = _a.incidents, formStyle = _a.formStyle, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "btnRef", "editable", "postview", "onChange", "incidents", "formStyle", "dependencyStore", "setDependencyStore"]);
43
43
  /** Form to pass down with aditional steps */
44
44
  var _b = useState(__assign(__assign({}, form), { steps: __assign({}, form.steps) })), localForm = _b[0], setLocalForm = _b[1];
45
45
  var handleAddIncident = function () {
@@ -81,7 +81,7 @@ function Incidents(_a) {
81
81
  margin: step.description
82
82
  ? '10px 0px'
83
83
  : '0px 0px 5px 0px',
84
- } }, { children: step.description }), void 0)), incidents.map(function (incident, index) { return (_jsx(IncidentComponent, __assign({ incident: incident, formStyle: formStyle, step: step, form: localForm, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
84
+ } }, { children: step.description }), void 0)), incidents.map(function (incident, index) { return (_jsx(IncidentComponent, __assign({ incident: incident, formStyle: formStyle, step: step, form: localForm, editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
85
85
  var tempIncidents = __spreadArray([], incidents, true);
86
86
  tempIncidents[index].deleted = true;
87
87
  var n = 1;
@@ -93,8 +93,8 @@ function Incidents(_a) {
93
93
  }
94
94
  }
95
95
  onChange(tempIncidents);
96
- } }, others), index)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }, void 0), _jsx(RoundedButton, { disabled: postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
97
- if (!postview) {
96
+ } }, others), index)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }, void 0), _jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
97
+ if (editable && !postview) {
98
98
  handleAddIncident();
99
99
  }
100
100
  } }, void 0)] }), void 0)] }), void 0));
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { CheckBoxStepProps } from '../CheckBoxStep';
3
- declare function CheckBoxStep({ step, form, errors, control, postview, formStyle, widthStats, }: CheckBoxStepProps): JSX.Element;
3
+ declare function CheckBoxStep({ step, form, errors, control, editable, postview, formStyle, widthStats, }: CheckBoxStepProps): JSX.Element;
4
4
  export default CheckBoxStep;
@@ -15,7 +15,7 @@ import { calcStepWidth } from '../../StepFunctions';
15
15
  import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
16
16
  import { Controller } from 'react-hook-form';
17
17
  function CheckBoxStep(_a) {
18
- var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
18
+ var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
19
19
  return (_jsxs("div", __assign({ className: styles.container, style: {
20
20
  width: widthStats.currentBreakPoint <= step.size
21
21
  ? '100%'
@@ -27,7 +27,7 @@ function CheckBoxStep(_a) {
27
27
  : undefined,
28
28
  }, shouldUnregister: true, render: function (_a) {
29
29
  var field = _a.field;
30
- return (_jsx(RoundedCheckBox, __assign({}, field, { "data-testid": step.id, inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
30
+ return (_jsx(RoundedCheckBox, __assign({}, field, { "data-testid": step.id, inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
31
31
  } }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
32
32
  color: !!errors[step.id]
33
33
  ? formStyle.errorColor
@@ -31,7 +31,7 @@ import StepComponent from '../../Step';
31
31
  import { Controller } from 'react-hook-form';
32
32
  import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
33
33
  function ClassifierSelector(_a) {
34
- var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, onChange = _a.onChange, postview = _a.postview, inputRef = _a.inputRef, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
34
+ var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, inputRef = _a.inputRef, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "editable", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
35
35
  var _b = useState(level === 0
36
36
  ? calcFillerSize(step, form.steps, getValues(), form.size)
37
37
  : 0), fillerSize = _b[0], setFillerSize = _b[1];
@@ -54,7 +54,7 @@ function ClassifierSelector(_a) {
54
54
  ? '100%'
55
55
  : calcStepWidth(step.size, form.size),
56
56
  minHeight: step.description || step.required ? '55px' : '43px',
57
- } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
57
+ } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: !editable || postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
58
58
  onChange(event.target.value);
59
59
  sizeChange();
60
60
  }, "data-testid": step.id, inputRef: inputRef, helperText: errors[step.id]
@@ -76,7 +76,7 @@ function ClassifierSelector(_a) {
76
76
  if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
77
77
  return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep, index) {
78
78
  var subStep = form.steps[idStep];
79
- return (_createElement(StepComponent, __assign({}, others, { postview: postview, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, control: control, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
79
+ return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, control: control, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
80
80
  sizeChange();
81
81
  } })));
82
82
  }) }, void 0));
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DatePickerStepProps } from '../DatePickerStep';
3
- declare function DatePickerStep({ step, form, errors, control, postview, formStyle, widthStats, }: DatePickerStepProps): JSX.Element;
3
+ declare function DatePickerStep({ step, form, errors, control, editable, postview, formStyle, widthStats, }: DatePickerStepProps): JSX.Element;
4
4
  export default DatePickerStep;
@@ -15,7 +15,7 @@ import { Controller } from 'react-hook-form';
15
15
  import RoundedDatePicker from '../../../../shared/RoundedDatePicker/RoundedDatePicker';
16
16
  import { calcStepWidth } from '../../StepFunctions';
17
17
  function DatePickerStep(_a) {
18
- var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
18
+ var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
19
19
  return (_jsx("div", __assign({ className: styles.container, style: {
20
20
  width: widthStats.currentBreakPoint <= step.size
21
21
  ? '100%'
@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
27
27
  : undefined,
28
28
  }, shouldUnregister: true, render: function (_a) {
29
29
  var field = _a.field;
30
- return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
30
+ return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, inputRef: field.ref, cantEdit: !editable || postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
31
31
  ? errors[step.id].message
32
32
  : step.description, error: !!errors[step.id], required: step.required }), void 0));
33
33
  } }, void 0) }), void 0));
@@ -64,7 +64,7 @@ import { getUploadUrls, postFile } from '../../../../controllers/FileService';
64
64
  import FileComponent from './FileComponent/FileComponent';
65
65
  import maxSize from '../../../../constants/Files/FileMaxSize';
66
66
  function FileUploadStep(_a) {
67
- var step = _a.step, errors = _a.errors, value = _a.value, domain = _a.domain, btnRef = _a.btnRef, postview = _a.postview, onChange = _a.onChange, formStyle = _a.formStyle, clearErrors = _a.clearErrors, fetchDownloadUrl = _a.fetchDownloadUrl;
67
+ var step = _a.step, errors = _a.errors, value = _a.value, domain = _a.domain, btnRef = _a.btnRef, postview = _a.postview, onChange = _a.onChange, editable = _a.editable, formStyle = _a.formStyle, clearErrors = _a.clearErrors, fetchDownloadUrl = _a.fetchDownloadUrl;
68
68
  var _b = useState(undefined), error = _b[0], setError = _b[1];
69
69
  var _c = useState([]), fileChange = _c[0], setFileChange = _c[1];
70
70
  var inputRef = useRef();
@@ -217,8 +217,8 @@ function FileUploadStep(_a) {
217
217
  }
218
218
  inputRef.current.value = '';
219
219
  }
220
- }, multiple: true, accept: getAcceptedExtensions() }, void 0), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }, void 0), _jsx(RoundedButton, { disabled: postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
221
- if (!postview) {
220
+ }, multiple: true, accept: getAcceptedExtensions() }, void 0), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }, void 0), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
221
+ if (editable && !postview) {
222
222
  var input = inputRef.current;
223
223
  if (input !== null) {
224
224
  clearErrors(step.id);
@@ -31,7 +31,7 @@ import StepComponent from '../../Step';
31
31
  import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
32
32
  import { Controller } from 'react-hook-form';
33
33
  function Selector(_a) {
34
- var step = _a.step, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, inputRef = _a.inputRef, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors", "inputRef"]);
34
+ var step = _a.step, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, inputRef = _a.inputRef, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "editable", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors", "inputRef"]);
35
35
  var _b = useState(level === 0
36
36
  ? calcFillerSize(step, form.steps, getValues(), form.size)
37
37
  : 0), fillerSize = _b[0], setFillerSize = _b[1];
@@ -47,7 +47,7 @@ function Selector(_a) {
47
47
  ? '100%'
48
48
  : calcStepWidth(step.size, form.size),
49
49
  minHeight: step.description || step.required ? '55px' : '43px',
50
- } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
50
+ } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: !editable || postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
51
51
  onChange(event.target.value);
52
52
  sizeChange();
53
53
  }, helperText: errors[step.id]
@@ -68,7 +68,7 @@ function Selector(_a) {
68
68
  currentOptionIndex !== null) {
69
69
  return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep, index) {
70
70
  var subStep = form.steps[idSubStep];
71
- return (_createElement(StepComponent, __assign({}, others, { postview: postview, formStyle: formStyle, form: form, getValues: getValues, errors: errors, control: control, widthStats: widthStats, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
71
+ return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, formStyle: formStyle, form: form, getValues: getValues, errors: errors, control: control, widthStats: widthStats, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
72
72
  sizeChange();
73
73
  } })));
74
74
  }) }, void 0));
@@ -66,7 +66,7 @@ import React from 'react';
66
66
  function SmartSelect(_a) {
67
67
  var _this = this;
68
68
  var _b, _c, _d;
69
- var icon = _a.icon, step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, trigger = _a.trigger, children = _a.children, onChange = _a.onChange, inputRef = _a.inputRef, postview = _a.postview, formStyle = _a.formStyle, getOptions = _a.getOptions, widthStats = _a.widthStats, calcDepError = _a.calcDepError, iconComponent = _a.iconComponent, valueOverwrite = _a.valueOverwrite, dependencyStore = _a.dependencyStore, _e = _a.calcInvalidDeps, calcInvalidDeps = _e === void 0 ? function (step, depStore) {
69
+ var icon = _a.icon, step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, trigger = _a.trigger, children = _a.children, editable = _a.editable, onChange = _a.onChange, inputRef = _a.inputRef, postview = _a.postview, formStyle = _a.formStyle, getOptions = _a.getOptions, widthStats = _a.widthStats, calcDepError = _a.calcDepError, iconComponent = _a.iconComponent, valueOverwrite = _a.valueOverwrite, dependencyStore = _a.dependencyStore, _e = _a.calcInvalidDeps, calcInvalidDeps = _e === void 0 ? function (step, depStore) {
70
70
  var _a;
71
71
  var missingDeps = [];
72
72
  for (var _i = 0, _b = (_a = step.dependencies) !== null && _a !== void 0 ? _a : []; _i < _b.length; _i++) {
@@ -76,7 +76,7 @@ function SmartSelect(_a) {
76
76
  }
77
77
  }
78
78
  return missingDeps;
79
- } : _e, getOptionSelected = _a.getOptionSelected, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["icon", "step", "form", "value", "onBlur", "errors", "trigger", "children", "onChange", "inputRef", "postview", "formStyle", "getOptions", "widthStats", "calcDepError", "iconComponent", "valueOverwrite", "dependencyStore", "calcInvalidDeps", "getOptionSelected", "setDependencyStore"]);
79
+ } : _e, getOptionSelected = _a.getOptionSelected, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["icon", "step", "form", "value", "onBlur", "errors", "trigger", "children", "editable", "onChange", "inputRef", "postview", "formStyle", "getOptions", "widthStats", "calcDepError", "iconComponent", "valueOverwrite", "dependencyStore", "calcInvalidDeps", "getOptionSelected", "setDependencyStore"]);
80
80
  var _f = useState(true), first = _f[0], setFirst = _f[1];
81
81
  var _g = useState(), options = _g[0], setOptions = _g[1];
82
82
  var _h = useState(), error = _h[0], setError = _h[1];
@@ -146,7 +146,7 @@ function SmartSelect(_a) {
146
146
  if (options === null) {
147
147
  handleMissingDep();
148
148
  }
149
- } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: options === null, loading: options === undefined, options: options !== null && options !== void 0 ? options : [], "data-testid": step.id, inputRef: inputRef, cantEdit: postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: step.showIcon ? icon : undefined, iconComponent: step.showIcon ? iconComponent : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
149
+ } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: options === null, loading: options === undefined, options: options !== null && options !== void 0 ? options : [], "data-testid": step.id, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: step.showIcon ? icon : undefined, iconComponent: step.showIcon ? iconComponent : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
150
150
  var _a;
151
151
  if (dependencyStore[step.id] !== undefined) {
152
152
  setDependencyStore(__assign(__assign({}, dependencyStore), (_a = {}, _a[step.id] = value, _a)));
@@ -160,7 +160,7 @@ function SmartSelect(_a) {
160
160
  : step.description), error: error !== undefined || !!errors[step.id] }, void 0) }), void 0), children &&
161
161
  cloneElement(children, {
162
162
  value: value,
163
- stepProps: __assign({ step: step, form: form, errors: errors, trigger: trigger, postview: postview, formStyle: formStyle, widthStats: widthStats, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore }, others),
163
+ stepProps: __assign({ step: step, form: form, errors: errors, trigger: trigger, postview: postview, editable: editable, formStyle: formStyle, widthStats: widthStats, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore }, others),
164
164
  })] }, void 0));
165
165
  }
166
166
  function SmartSelectStep(props) {
@@ -3,7 +3,7 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
3
3
  import './DraftEditor.css';
4
4
  import { RawDraftContentState } from 'draft-js';
5
5
  import { TextAreaStepProps } from '../TextAreaStep';
6
- declare function TextAreaStep({ step, errors, control, postview, formStyle, originalValues, }: TextAreaStepProps): JSX.Element;
6
+ declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, originalValues, }: TextAreaStepProps): JSX.Element;
7
7
  export default TextAreaStep;
8
8
  export declare function stringToDraft(text: string): RawDraftContentState;
9
9
  export declare const getRawText: (draft?: RawDraftContentState | undefined, text?: string | undefined) => RawDraftContentState;
@@ -20,7 +20,7 @@ import { convertFromRaw, EditorState } from 'draft-js';
20
20
  import { useState } from 'react';
21
21
  import { ClickAwayListener } from '@material-ui/core';
22
22
  function TextAreaStep(_a) {
23
- var step = _a.step, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
23
+ var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
24
24
  var _b = useState(false), hovering = _b[0], setHovering = _b[1];
25
25
  var _c = useState(false), focus = _c[0], setFocus = _c[1];
26
26
  var calcStyle = function () {
@@ -58,6 +58,7 @@ function TextAreaStep(_a) {
58
58
  return EditorState.createWithContent(convertFromRaw(getRawText(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.draft, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text)));
59
59
  }
60
60
  };
61
+ var canEdit = editable && !postview;
61
62
  if (step.hasTextEditor) {
62
63
  return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
63
64
  '--eureka-outline': formStyle.outlineColor,
@@ -67,19 +68,19 @@ function TextAreaStep(_a) {
67
68
  ? formStyle.errorColor
68
69
  : formStyle.textColor,
69
70
  } }, { children: [step.label, " ", step.required ? ' *' : ''] }), void 0)), _jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () {
70
- if (!postview) {
71
+ if (canEdit) {
71
72
  setFocus(false);
72
73
  }
73
74
  } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
74
- if (!postview) {
75
+ if (canEdit) {
75
76
  setHovering(true);
76
77
  }
77
78
  }, onMouseLeave: function () {
78
- if (!postview) {
79
+ if (canEdit) {
79
80
  setHovering(false);
80
81
  }
81
82
  }, onClick: function () {
82
- if (!postview) {
83
+ if (canEdit) {
83
84
  setFocus(true);
84
85
  }
85
86
  } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
@@ -106,13 +107,13 @@ function TextAreaStep(_a) {
106
107
  ' RichEditor-hidePlaceholder';
107
108
  }
108
109
  }
109
- if (postview) {
110
+ if (!canEdit) {
110
111
  editorClassName += ' postview-editor';
111
112
  }
112
113
  return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
113
114
  setFocus(true);
114
- }, readOnly: postview, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
115
- (postview
115
+ }, readOnly: !canEdit, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
116
+ (!canEdit
116
117
  ? ' postview-editor-toolbar'
117
118
  : ''), editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
118
119
  options: [
@@ -148,7 +149,7 @@ function TextAreaStep(_a) {
148
149
  }, shouldUnregister: true, render: function (_a) {
149
150
  var _b;
150
151
  var field = _a.field;
151
- return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
152
+ return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
152
153
  ? errors[step.id].message
153
154
  : (_b = step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!errors[step.id] }), void 0));
154
155
  } }, void 0) }), void 0));
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { TextInputStepProps } from '../TextInputStep';
3
- declare function TextInputStep({ icon, step, form, postview, formStyle, widthStats, control, errors, }: TextInputStepProps): JSX.Element;
3
+ declare function TextInputStep({ icon, step, form, control, editable, postview, formStyle, widthStats, errors, }: TextInputStepProps): JSX.Element;
4
4
  export default TextInputStep;
@@ -15,7 +15,7 @@ import styles from './MaterialTextInputStep.module.css';
15
15
  import { Controller } from 'react-hook-form';
16
16
  import { calcStepWidth } from '../../StepFunctions';
17
17
  function TextInputStep(_a) {
18
- var icon = _a.icon, step = _a.step, form = _a.form, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, control = _a.control, errors = _a.errors;
18
+ var icon = _a.icon, step = _a.step, form = _a.form, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, errors = _a.errors;
19
19
  return (_jsx("div", __assign({ className: styles.container, style: {
20
20
  width: widthStats.currentBreakPoint <= step.size
21
21
  ? '100%'
@@ -35,7 +35,7 @@ function TextInputStep(_a) {
35
35
  : undefined,
36
36
  }, shouldUnregister: true, render: function (_a) {
37
37
  var field = _a.field;
38
- return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
38
+ return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
39
39
  ? errors[step.id].message
40
40
  : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id], icon: step.showIcon ? icon : undefined }), void 0));
41
41
  } }, void 0) }), void 0));
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":"1.4.9-test",
4
+ "version":"1.5.0-test",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
7
7
  "build": "react-scripts build",