@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.
@@ -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
- const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
134
- setComponentProps(components);
142
+ if (!hideButtons && !isReadOnly) {
143
+ newComponentProps.push(BottomButtons);
144
+ }
145
+ setComponentProps(newComponentProps);
135
146
  }
136
147
  else {
137
- // this condition is used for the delete action's modal form
138
- setComponentProps([
139
- ...(await addObjectPropertiesToComponentProps(visibleObjectProperties, [
140
- {
141
- html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
142
- label: 'Content',
143
- customClass: '',
144
- refreshOnChange: false,
145
- hidden: false,
146
- modalEdit: false,
147
- conditional: {
148
- show: null,
149
- when: null,
150
- eq: '',
151
- },
152
- type: 'Content',
153
- key: 'content',
154
- input: false,
155
- placeholder: '',
156
- prefix: '',
157
- suffix: '',
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
- ], instance, {
208
- ...objectInputCommonProps,
209
- defaultPages: allDefaultPages,
210
- navigateTo,
211
- apiServices,
212
- user: userAccount,
213
- }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor)),
214
- BottomButtons,
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, { key: closeModal ? undefined : formKey, form: {
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,
@@ -78,7 +78,11 @@ export const ObjectPropertyInput = (props) => {
78
78
  updatedFilter = {};
79
79
  }
80
80
  updatedFilter.limit = 100;
81
- updatedFilter.order = 'name ASC';
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: 'name ASC',
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
  };
@@ -1,3 +1,4 @@
1
- import { Form } from './Common';
1
+ import { Form, FormRef } from './Common';
2
2
  export { Form };
3
+ export type { FormRef };
3
4
  export default Form;
@@ -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",
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.118",
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",