@evoke-platform/ui-components 1.1.0-testing.4 → 1.1.0-testing.6

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.
@@ -309,9 +309,10 @@ const CriteriaBuilder = (props) => {
309
309
  const propertyType = properties.find((property) => property.id === rule.field)?.type;
310
310
  let adjustedValue = rule.value;
311
311
  if ((propertyType === 'array' ||
312
- (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))) &&
312
+ ((propertyType === 'string' || propertyType === 'richText') &&
313
+ (rule.operator === 'in' || rule.operator === 'notIn'))) &&
313
314
  isSavedValue) {
314
- adjustedValue = rule.value.split(',');
315
+ adjustedValue = rule.value?.split(',');
315
316
  }
316
317
  else if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
317
318
  adjustedValue = null;
@@ -49,7 +49,6 @@ const ValueEditor = (props) => {
49
49
  }
50
50
  else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
51
51
  handleOnChange([]);
52
- setInputValue('');
53
52
  }
54
53
  }, [operator]);
55
54
  if (context.disabledCriteria) {
@@ -182,7 +181,6 @@ const ValueEditor = (props) => {
182
181
  inputValue &&
183
182
  (options.some((option) => option.name === inputValue) || !options.length) &&
184
183
  (operator === 'in' || operator === 'notIn')) {
185
- event.preventDefault();
186
184
  const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
187
185
  handleOnChange(Array.from(new Set(newValues)));
188
186
  setInputValue('');
@@ -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,
@@ -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;
@@ -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.4",
3
+ "version": "1.1.0-testing.6",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",