@evoke-platform/ui-components 1.1.0-testing.3 → 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/FormComponents/ObjectComponent/ObjectPropertyInput.js +7 -3
- package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js +6 -2
- package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js +1 -0
- package/dist/published/components/custom/Form/index.d.ts +2 -1
- package/dist/published/components/custom/Form/utils.js +1 -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 +2 -2
@@ -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,
|
package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js
CHANGED
@@ -78,7 +78,11 @@ export const ObjectPropertyInput = (props) => {
|
|
78
78
|
updatedFilter = {};
|
79
79
|
}
|
80
80
|
updatedFilter.limit = 100;
|
81
|
-
|
81
|
+
const { propertyId, direction } = layout?.sort ?? {
|
82
|
+
propertyId: 'name',
|
83
|
+
direction: 'asc',
|
84
|
+
};
|
85
|
+
updatedFilter.order = `${propertyId} ${direction}`;
|
82
86
|
const where = name
|
83
87
|
? transformToWhere({
|
84
88
|
name: {
|
@@ -103,7 +107,7 @@ export const ObjectPropertyInput = (props) => {
|
|
103
107
|
setLoadingOptions(false);
|
104
108
|
}
|
105
109
|
});
|
106
|
-
}, [relatedObject, setLoadingOptions, setOptions, property, filter]);
|
110
|
+
}, [relatedObject, setLoadingOptions, setOptions, property, filter, layout]);
|
107
111
|
useEffect(() => {
|
108
112
|
if (displayOption === 'dropdown') {
|
109
113
|
getDropdownOptions();
|
@@ -281,7 +285,7 @@ export const ObjectPropertyInput = (props) => {
|
|
281
285
|
caretColor: 'white',
|
282
286
|
}
|
283
287
|
: {}),
|
284
|
-
} })), readOnly: !loadingOptions && !canUpdateProperty, error: error }))) : (React.createElement(Box, { sx: {
|
288
|
+
} })), readOnly: !loadingOptions && !canUpdateProperty, error: error, sortBy: "NONE" }))) : (React.createElement(Box, { sx: {
|
285
289
|
padding: (instance?.[property.id]?.name ?? selectedInstance?.name)
|
286
290
|
? '16.5px 14px'
|
287
291
|
: '10.5px 0',
|
@@ -78,9 +78,13 @@ export const DropdownRepeatableField = (props) => {
|
|
78
78
|
setLoading(true);
|
79
79
|
const endObjectProperty = middleObject.properties?.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
|
80
80
|
if (endObjectProperty?.objectId) {
|
81
|
+
const { propertyId, direction } = layout?.sort ?? {
|
82
|
+
propertyId: 'name',
|
83
|
+
direction: 'asc',
|
84
|
+
};
|
81
85
|
const filter = {
|
82
86
|
limit: 100,
|
83
|
-
order:
|
87
|
+
order: `${propertyId} ${direction}`,
|
84
88
|
};
|
85
89
|
let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
|
86
90
|
if (searchedName?.length) {
|
@@ -106,7 +110,7 @@ export const DropdownRepeatableField = (props) => {
|
|
106
110
|
});
|
107
111
|
}
|
108
112
|
}
|
109
|
-
}, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject]);
|
113
|
+
}, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout]);
|
110
114
|
const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
|
111
115
|
useEffect(() => {
|
112
116
|
debouncedEndObjectSearch(searchValue);
|
@@ -86,6 +86,7 @@ export const DropdownRepeatableFieldInput = (props) => {
|
|
86
86
|
setSearchValue(event.target.value);
|
87
87
|
} })),
|
88
88
|
loading: loading,
|
89
|
+
sortBy: 'NONE',
|
89
90
|
} }),
|
90
91
|
React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
|
91
92
|
};
|
@@ -384,7 +384,7 @@ export function convertComponentsToForm(components) {
|
|
384
384
|
...(component.orderBy ? { sortBy: component.orderBy } : {}),
|
385
385
|
}
|
386
386
|
: isArray(component.initialValue)
|
387
|
-
? component.initialValue.map((c) => c.value)
|
387
|
+
? component.initialValue.map((c) => typeof c === 'string' ? c : c.value)
|
388
388
|
: component.initialValue?.value
|
389
389
|
? component.initialValue?.value
|
390
390
|
: component.initialValue,
|
@@ -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';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@evoke-platform/ui-components",
|
3
|
-
"version": "1.1.0-testing.
|
3
|
+
"version": "1.1.0-testing.5",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/published/index.js",
|
6
6
|
"module": "dist/published/index.js",
|
@@ -94,7 +94,7 @@
|
|
94
94
|
"@dnd-kit/sortable": "^7.0.1",
|
95
95
|
"@emotion/react": "^11.13.5",
|
96
96
|
"@emotion/styled": "^11.8.1",
|
97
|
-
"@evoke-platform/context": "^1.0.0-dev.
|
97
|
+
"@evoke-platform/context": "^1.0.0-dev.126",
|
98
98
|
"@formio/react": "^5.2.4-rc.1",
|
99
99
|
"@js-joda/core": "^3.2.0",
|
100
100
|
"@js-joda/locale_en-us": "^3.2.2",
|