@evoke-platform/ui-components 1.10.0-testing.16 → 1.10.0-testing.18
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/published/components/custom/FormV2/FormRenderer.js +4 -4
- package/dist/published/components/custom/FormV2/FormRendererContainer.js +16 -39
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js +0 -21
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js +0 -15
- package/dist/published/components/custom/FormV2/components/Header.d.ts +1 -1
- package/dist/published/components/custom/FormV2/components/Header.js +4 -6
- package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrors.js +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ const FormRendererInternal = (props) => {
|
|
|
32
32
|
const [isInitializing, setIsInitializing] = useState(true);
|
|
33
33
|
const [parameters, setParameters] = useState();
|
|
34
34
|
const objectStore = useObject(objectId);
|
|
35
|
-
const
|
|
35
|
+
const validationContainerRef = useRef(null);
|
|
36
36
|
const updateFetchedOptions = (newData) => {
|
|
37
37
|
setFetchedOptions((prev) => ({
|
|
38
38
|
...prev,
|
|
@@ -139,8 +139,8 @@ const FormRendererInternal = (props) => {
|
|
|
139
139
|
if (onSubmitErrorOverride) {
|
|
140
140
|
onSubmitErrorOverride(errors);
|
|
141
141
|
}
|
|
142
|
-
else if (
|
|
143
|
-
|
|
142
|
+
else if (validationContainerRef.current) {
|
|
143
|
+
validationContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
146
|
async function unregisterHiddenFieldsAndSubmit() {
|
|
@@ -157,7 +157,7 @@ const FormRendererInternal = (props) => {
|
|
|
157
157
|
shouldShowValidationErrors: isSubmitted,
|
|
158
158
|
isDeleteForm: form.id === '',
|
|
159
159
|
action,
|
|
160
|
-
|
|
160
|
+
validationContainerRef: validationContainerRef,
|
|
161
161
|
autosaveEnabled: !!form.autosaveActionId,
|
|
162
162
|
};
|
|
163
163
|
const footerProps = {
|
|
@@ -123,49 +123,26 @@ function FormRendererContainer(props) {
|
|
|
123
123
|
onError(error);
|
|
124
124
|
});
|
|
125
125
|
}
|
|
126
|
-
else if (action) {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
},
|
|
126
|
+
else if (action?.type === 'delete' && instance) {
|
|
127
|
+
setForm({
|
|
128
|
+
id: '',
|
|
129
|
+
name: '',
|
|
130
|
+
entries: [
|
|
131
|
+
{
|
|
132
|
+
type: 'content',
|
|
133
|
+
html: `<p>You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
|
|
135
134
|
},
|
|
135
|
+
],
|
|
136
|
+
objectId: objectId,
|
|
137
|
+
actionId: '_delete',
|
|
138
|
+
display: {
|
|
139
|
+
submitLabel: 'Delete',
|
|
136
140
|
},
|
|
137
|
-
})
|
|
138
|
-
.then((matchingForms) => {
|
|
139
|
-
if (matchingForms.length === 1) {
|
|
140
|
-
const form = matchingForms[0];
|
|
141
|
-
setForm(form);
|
|
142
|
-
// use this default form if no delete form is found
|
|
143
|
-
}
|
|
144
|
-
else if (action.type === 'delete' && instance) {
|
|
145
|
-
setForm({
|
|
146
|
-
id: '',
|
|
147
|
-
name: '',
|
|
148
|
-
entries: [
|
|
149
|
-
{
|
|
150
|
-
type: 'content',
|
|
151
|
-
html: `<p>You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
|
|
152
|
-
},
|
|
153
|
-
],
|
|
154
|
-
objectId: objectId,
|
|
155
|
-
actionId: '_delete',
|
|
156
|
-
display: {
|
|
157
|
-
submitLabel: 'Delete',
|
|
158
|
-
},
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
else if (instance || action.type === 'create') {
|
|
162
|
-
setError('Default action form could not be found');
|
|
163
|
-
}
|
|
164
|
-
})
|
|
165
|
-
.catch((error) => {
|
|
166
|
-
onError(error);
|
|
167
141
|
});
|
|
168
142
|
}
|
|
143
|
+
else {
|
|
144
|
+
setError('Action form could not be found');
|
|
145
|
+
}
|
|
169
146
|
}, [action, objectId, instance]);
|
|
170
147
|
useEffect(() => {
|
|
171
148
|
if (form?.id === 'documentForm') {
|
|
@@ -76,27 +76,6 @@ const RepeatableField = (props) => {
|
|
|
76
76
|
console.error(error);
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
else if (action) {
|
|
80
|
-
apiServices
|
|
81
|
-
.get(getPrefixedUrl('/forms'), {
|
|
82
|
-
params: {
|
|
83
|
-
filter: {
|
|
84
|
-
where: {
|
|
85
|
-
actionId: action.id,
|
|
86
|
-
objectId: fieldDefinition.objectId,
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
})
|
|
91
|
-
.then((matchingForms) => {
|
|
92
|
-
if (matchingForms.length === 1) {
|
|
93
|
-
setForm(matchingForms[0]);
|
|
94
|
-
}
|
|
95
|
-
})
|
|
96
|
-
.catch((error) => {
|
|
97
|
-
console.error(error);
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
79
|
}
|
|
101
80
|
const fetchRelatedInstances = useCallback(async (refetch = false) => {
|
|
102
81
|
let relatedObject;
|
|
@@ -171,21 +171,6 @@ const ObjectPropertyInput = (props) => {
|
|
|
171
171
|
if (formId || action?.defaultFormId) {
|
|
172
172
|
evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
|
|
173
173
|
}
|
|
174
|
-
else if (action) {
|
|
175
|
-
const matchingForms = await apiServices.get(getPrefixedUrl('/forms'), {
|
|
176
|
-
params: {
|
|
177
|
-
filter: {
|
|
178
|
-
where: {
|
|
179
|
-
actionId: action.id,
|
|
180
|
-
objectId: fieldDefinition.objectId,
|
|
181
|
-
},
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
});
|
|
185
|
-
if (matchingForms.length === 1) {
|
|
186
|
-
evokeForm = matchingForms[0];
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
174
|
if (evokeForm) {
|
|
190
175
|
setForm(evokeForm);
|
|
191
176
|
setFetchedOptions({
|
|
@@ -6,7 +6,7 @@ import { ExpandedSection } from './types';
|
|
|
6
6
|
export type HeaderProps = {
|
|
7
7
|
hasAccordions: boolean;
|
|
8
8
|
shouldShowValidationErrors?: boolean;
|
|
9
|
-
|
|
9
|
+
validationContainerRef?: React.Ref<HTMLDivElement>;
|
|
10
10
|
title?: string;
|
|
11
11
|
expandedSections?: ExpandedSection[];
|
|
12
12
|
onExpandAll?: () => void;
|
|
@@ -7,7 +7,7 @@ import { Typography } from '../../../core/Typography';
|
|
|
7
7
|
import Box from '../../../layout/Box/Box';
|
|
8
8
|
import ValidationErrors from './ValidationFiles/ValidationErrors';
|
|
9
9
|
const Header = (props) => {
|
|
10
|
-
const { title, errors, hasAccordions, shouldShowValidationErrors,
|
|
10
|
+
const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, isDeleteForm, autosaveEnabled, } = props;
|
|
11
11
|
const { width } = useFormContext();
|
|
12
12
|
const { breakpoints, isBelow } = useWidgetSize({
|
|
13
13
|
scroll: false,
|
|
@@ -16,6 +16,7 @@ const Header = (props) => {
|
|
|
16
16
|
const isSmallerThanMd = isBelow('md');
|
|
17
17
|
const { isXs, isSm } = breakpoints;
|
|
18
18
|
const isSmall = isSm || isXs;
|
|
19
|
+
const displayValidationErrors = shouldShowValidationErrors && !isEmpty(errors);
|
|
19
20
|
return (React.createElement(Box, { sx: {
|
|
20
21
|
paddingX: isSmallerThanMd ? 2 : 3,
|
|
21
22
|
paddingTop: '0px',
|
|
@@ -26,11 +27,8 @@ const Header = (props) => {
|
|
|
26
27
|
// when rendering the default delete action, we don't want a border
|
|
27
28
|
borderBottom: isDeleteForm ? undefined : '1px solid #e9ecef',
|
|
28
29
|
gap: isSm || isXs ? 2 : 3,
|
|
29
|
-
'.evoke-form-renderer-header': {
|
|
30
|
-
flex: '1 1 100%',
|
|
31
|
-
},
|
|
32
30
|
...sx,
|
|
33
|
-
} },
|
|
31
|
+
}, ref: validationContainerRef },
|
|
34
32
|
title && (React.createElement(Box, { sx: { flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 } },
|
|
35
33
|
React.createElement(Title, { ...props }),
|
|
36
34
|
props.autosaving && !isSmall && React.createElement(SavingIndicator, null))),
|
|
@@ -45,7 +43,7 @@ const Header = (props) => {
|
|
|
45
43
|
alignItems: 'center',
|
|
46
44
|
marginLeft: 0.5,
|
|
47
45
|
} }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } }))))),
|
|
48
|
-
|
|
46
|
+
displayValidationErrors ? React.createElement(ValidationErrors, { errors: errors }) : null));
|
|
49
47
|
};
|
|
50
48
|
// Default slot components for convenience
|
|
51
49
|
export const Title = ({ title }) => (React.createElement(Typography, { sx: {
|
package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrors.js
CHANGED
|
@@ -29,7 +29,7 @@ function ValidationErrors(props) {
|
|
|
29
29
|
border: '1px solid #721c24',
|
|
30
30
|
padding: '8px 24px',
|
|
31
31
|
borderRadius: '4px',
|
|
32
|
-
flex: 1,
|
|
32
|
+
flex: '1 1 100%',
|
|
33
33
|
...sx,
|
|
34
34
|
} },
|
|
35
35
|
React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
|