@evoke-platform/ui-components 1.1.0-testing.4 → 1.1.0-testing.5
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/Form/Common/Form.d.ts +7 -1
- package/dist/published/components/custom/Form/Common/Form.js +98 -82
- package/dist/published/components/custom/Form/index.d.ts +2 -1
- package/dist/published/components/custom/index.d.ts +3 -2
- package/dist/published/components/custom/index.js +2 -2
- package/dist/published/index.d.ts +1 -0
- package/package.json +1 -1
@@ -1,6 +1,6 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
|
3
2
|
import { ReactComponent } from '@formio/react';
|
3
|
+
import React from 'react';
|
4
4
|
import '../../../../styles/form-component.css';
|
5
5
|
import { Document, ObjectPropertyInputProps } from '../types';
|
6
6
|
type OnSaveResponse = {
|
@@ -34,6 +34,12 @@ export type FormProps = {
|
|
34
34
|
queryAddresses?: unknown;
|
35
35
|
fieldHeight?: 'small' | 'medium';
|
36
36
|
richTextEditor?: typeof ReactComponent;
|
37
|
+
hideButtons?: boolean;
|
38
|
+
formRef?: React.MutableRefObject<FormRef | undefined>;
|
39
|
+
};
|
40
|
+
export type FormRef = {
|
41
|
+
submit: (submission: Record<string, unknown>, type: 'submit' | 'draft', setError: (error?: Record<string, unknown>) => void, setSubmitting?: (value: boolean) => void) => void;
|
42
|
+
data?: Record<string, unknown>;
|
37
43
|
};
|
38
44
|
export declare function Form(props: FormProps): JSX.Element;
|
39
45
|
export default Form;
|
@@ -17,8 +17,9 @@ const usePrevious = (value) => {
|
|
17
17
|
};
|
18
18
|
Utils.Evaluator.noeval = true;
|
19
19
|
export function Form(props) {
|
20
|
-
const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, } = props;
|
20
|
+
const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, hideButtons, formRef, } = props;
|
21
21
|
const [formKey, setFormKey] = useState();
|
22
|
+
const [formData, setFormData] = useState();
|
22
23
|
const [componentProps, setComponentProps] = useState([]);
|
23
24
|
const [snackbarError, setSnackbarError] = useState();
|
24
25
|
const prevFormKey = usePrevious(formKey);
|
@@ -70,6 +71,14 @@ export function Form(props) {
|
|
70
71
|
});
|
71
72
|
buildComponents();
|
72
73
|
};
|
74
|
+
useEffect(() => {
|
75
|
+
if (formRef) {
|
76
|
+
formRef.current = {
|
77
|
+
submit: saveHandler,
|
78
|
+
data: formData,
|
79
|
+
};
|
80
|
+
}
|
81
|
+
}, [formRef, formData]);
|
73
82
|
useEffect(() => {
|
74
83
|
// TODO: Check why formKey is not being set for create actions
|
75
84
|
if (((actionType === 'update' || actionType === 'delete') && !!instance) || !!document) {
|
@@ -130,89 +139,92 @@ export function Form(props) {
|
|
130
139
|
apiServices,
|
131
140
|
user: userAccount,
|
132
141
|
}, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
|
133
|
-
|
134
|
-
|
142
|
+
if (!hideButtons && !isReadOnly) {
|
143
|
+
newComponentProps.push(BottomButtons);
|
144
|
+
}
|
145
|
+
setComponentProps(newComponentProps);
|
135
146
|
}
|
136
147
|
else {
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
148
|
+
const components = await addObjectPropertiesToComponentProps(visibleObjectProperties, [
|
149
|
+
{
|
150
|
+
html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
|
151
|
+
label: 'Content',
|
152
|
+
customClass: '',
|
153
|
+
refreshOnChange: false,
|
154
|
+
hidden: false,
|
155
|
+
modalEdit: false,
|
156
|
+
conditional: {
|
157
|
+
show: null,
|
158
|
+
when: null,
|
159
|
+
eq: '',
|
160
|
+
},
|
161
|
+
type: 'Content',
|
162
|
+
key: 'content',
|
163
|
+
input: false,
|
164
|
+
placeholder: '',
|
165
|
+
prefix: '',
|
166
|
+
suffix: '',
|
167
|
+
multiple: false,
|
168
|
+
defaultValue: null,
|
169
|
+
protected: false,
|
170
|
+
unique: false,
|
171
|
+
persistent: true,
|
172
|
+
clearOnHide: true,
|
173
|
+
refreshOn: '',
|
174
|
+
redrawOn: '',
|
175
|
+
tableView: false,
|
176
|
+
dataGridLabel: false,
|
177
|
+
labelPosition: 'top',
|
178
|
+
description: '',
|
179
|
+
errorLabel: '',
|
180
|
+
tooltip: '',
|
181
|
+
hideLabel: false,
|
182
|
+
tabindex: '',
|
183
|
+
disabled: false,
|
184
|
+
autofocus: false,
|
185
|
+
dbIndex: false,
|
186
|
+
customDefaultValue: '',
|
187
|
+
calculateValue: '',
|
188
|
+
calculateServer: false,
|
189
|
+
widget: null,
|
190
|
+
attributes: {},
|
191
|
+
validateOn: 'change',
|
192
|
+
validate: {
|
193
|
+
required: false,
|
194
|
+
custom: '',
|
195
|
+
customPrivate: false,
|
196
|
+
strictDateValidation: false,
|
158
197
|
multiple: false,
|
159
|
-
defaultValue: null,
|
160
|
-
protected: false,
|
161
198
|
unique: false,
|
162
|
-
persistent: true,
|
163
|
-
clearOnHide: true,
|
164
|
-
refreshOn: '',
|
165
|
-
redrawOn: '',
|
166
|
-
tableView: false,
|
167
|
-
dataGridLabel: false,
|
168
|
-
labelPosition: 'top',
|
169
|
-
description: '',
|
170
|
-
errorLabel: '',
|
171
|
-
tooltip: '',
|
172
|
-
hideLabel: false,
|
173
|
-
tabindex: '',
|
174
|
-
disabled: false,
|
175
|
-
autofocus: false,
|
176
|
-
dbIndex: false,
|
177
|
-
customDefaultValue: '',
|
178
|
-
calculateValue: '',
|
179
|
-
calculateServer: false,
|
180
|
-
widget: null,
|
181
|
-
attributes: {},
|
182
|
-
validateOn: 'change',
|
183
|
-
validate: {
|
184
|
-
required: false,
|
185
|
-
custom: '',
|
186
|
-
customPrivate: false,
|
187
|
-
strictDateValidation: false,
|
188
|
-
multiple: false,
|
189
|
-
unique: false,
|
190
|
-
},
|
191
|
-
overlay: {
|
192
|
-
style: '',
|
193
|
-
left: '',
|
194
|
-
top: '',
|
195
|
-
width: '',
|
196
|
-
height: '',
|
197
|
-
},
|
198
|
-
allowCalculateOverride: false,
|
199
|
-
encrypted: false,
|
200
|
-
showCharCount: false,
|
201
|
-
showWordCount: false,
|
202
|
-
properties: {},
|
203
|
-
allowMultipleMasks: false,
|
204
|
-
addons: [],
|
205
|
-
id: 'eahbwo',
|
206
199
|
},
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
200
|
+
overlay: {
|
201
|
+
style: '',
|
202
|
+
left: '',
|
203
|
+
top: '',
|
204
|
+
width: '',
|
205
|
+
height: '',
|
206
|
+
},
|
207
|
+
allowCalculateOverride: false,
|
208
|
+
encrypted: false,
|
209
|
+
showCharCount: false,
|
210
|
+
showWordCount: false,
|
211
|
+
properties: {},
|
212
|
+
allowMultipleMasks: false,
|
213
|
+
addons: [],
|
214
|
+
id: 'eahbwo',
|
215
|
+
},
|
216
|
+
], instance, {
|
217
|
+
...objectInputCommonProps,
|
218
|
+
defaultPages: allDefaultPages,
|
219
|
+
navigateTo,
|
220
|
+
apiServices,
|
221
|
+
user: userAccount,
|
222
|
+
}, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
|
223
|
+
if (!hideButtons) {
|
224
|
+
components.push(BottomButtons);
|
225
|
+
}
|
226
|
+
// this condition is used for the delete action's modal form
|
227
|
+
setComponentProps(components);
|
216
228
|
}
|
217
229
|
}
|
218
230
|
else if (object?.properties) {
|
@@ -227,14 +239,14 @@ export function Form(props) {
|
|
227
239
|
apiServices,
|
228
240
|
user,
|
229
241
|
}, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
|
230
|
-
!isReadOnly && BottomButtons,
|
242
|
+
!isReadOnly && !hideButtons && BottomButtons,
|
231
243
|
]);
|
232
244
|
}
|
233
245
|
else if (document) {
|
234
246
|
const documentProperties = toPairs(flatten(document ?? {}));
|
235
247
|
setComponentProps([
|
236
248
|
...buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight),
|
237
|
-
!isReadOnly && BottomButtons,
|
249
|
+
!isReadOnly && !hideButtons && BottomButtons,
|
238
250
|
]);
|
239
251
|
}
|
240
252
|
};
|
@@ -427,7 +439,11 @@ export function Form(props) {
|
|
427
439
|
],
|
428
440
|
};
|
429
441
|
return (React.createElement(Box, null,
|
430
|
-
componentProps.length ? (React.createElement(FormIO
|
442
|
+
componentProps.length ? (React.createElement(FormIO
|
443
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
444
|
+
, {
|
445
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
446
|
+
onChange: (e) => setFormData(e.data), key: closeModal ? undefined : formKey, form: {
|
431
447
|
display: 'form',
|
432
448
|
components: componentProps,
|
433
449
|
}, formReady: handleFormReady })) : (React.createElement(Box, null,
|
@@ -3,10 +3,11 @@ export { CriteriaBuilder } from './CriteriaBuilder';
|
|
3
3
|
export { DataGrid } from './DataGrid';
|
4
4
|
export { ErrorComponent } from './ErrorComponent';
|
5
5
|
export { Form } from './Form';
|
6
|
+
export type { FormRef } from './Form';
|
6
7
|
export { FormField } from './FormField';
|
8
|
+
export { HistoryLog } from './HistoryLog';
|
7
9
|
export { MenuBar } from './Menubar';
|
8
10
|
export { MultiSelect } from './MultiSelect';
|
9
11
|
export { RepeatableField } from './RepeatableField';
|
10
|
-
export { UserAvatar } from './UserAvatar';
|
11
|
-
export { HistoryLog } from './HistoryLog';
|
12
12
|
export { RichTextViewer } from './RichTextViewer';
|
13
|
+
export { UserAvatar } from './UserAvatar';
|
@@ -4,9 +4,9 @@ export { DataGrid } from './DataGrid';
|
|
4
4
|
export { ErrorComponent } from './ErrorComponent';
|
5
5
|
export { Form } from './Form';
|
6
6
|
export { FormField } from './FormField';
|
7
|
+
export { HistoryLog } from './HistoryLog';
|
7
8
|
export { MenuBar } from './Menubar';
|
8
9
|
export { MultiSelect } from './MultiSelect';
|
9
10
|
export { RepeatableField } from './RepeatableField';
|
10
|
-
export { UserAvatar } from './UserAvatar';
|
11
|
-
export { HistoryLog } from './HistoryLog';
|
12
11
|
export { RichTextViewer } from './RichTextViewer';
|
12
|
+
export { UserAvatar } from './UserAvatar';
|
@@ -3,6 +3,7 @@ export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTime
|
|
3
3
|
export * from './colors';
|
4
4
|
export * from './components/core';
|
5
5
|
export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
|
6
|
+
export type { FormRef } from './components/custom';
|
6
7
|
export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
|
7
8
|
export { Box, Container, Grid, Stack } from './components/layout';
|
8
9
|
export * as EVOKE_TYPES from './types';
|