@evoke-platform/ui-components 1.9.1-testing.0 → 1.10.0-testing.0
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.d.ts +20 -6
- package/dist/published/components/custom/FormV2/FormRenderer.js +142 -128
- package/dist/published/components/custom/FormV2/FormRendererContainer.d.ts +21 -2
- package/dist/published/components/custom/FormV2/FormRendererContainer.js +44 -46
- package/dist/published/components/custom/FormV2/components/Body.d.ts +18 -0
- package/dist/published/components/custom/FormV2/components/Body.js +27 -0
- package/dist/published/components/custom/FormV2/components/Footer.d.ts +15 -0
- package/dist/published/components/custom/FormV2/components/Footer.js +77 -0
- package/dist/published/components/custom/FormV2/components/FormContext.d.ts +2 -2
- package/dist/published/components/custom/FormV2/components/FormContext.js +1 -1
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts +1 -1
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js +64 -22
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js +18 -16
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js +7 -7
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.d.ts +0 -1
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.js +10 -8
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js +38 -49
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts +2 -1
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js +95 -51
- package/dist/published/components/custom/FormV2/components/Header.d.ts +29 -0
- package/dist/published/components/custom/FormV2/components/Header.js +63 -0
- package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js +3 -3
- package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrors.d.ts +9 -0
- package/dist/published/components/custom/FormV2/components/ValidationFiles/{ValidationErrorDisplay.js → ValidationErrors.js} +11 -8
- package/dist/published/components/custom/FormV2/components/types.d.ts +1 -7
- package/dist/published/components/custom/FormV2/index.d.ts +3 -0
- package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js +6 -5
- package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js +4 -3
- package/dist/published/components/custom/index.d.ts +1 -1
- package/dist/published/components/custom/index.js +1 -1
- package/dist/published/index.d.ts +1 -1
- package/dist/published/stories/FormRenderer.stories.d.ts +24 -16
- package/dist/published/stories/FormRenderer.stories.js +2 -10
- package/dist/published/stories/FormRendererContainer.stories.d.ts +40 -10
- package/dist/published/theme/hooks.d.ts +12 -3
- package/package.json +2 -2
- package/dist/published/components/custom/FormV2/components/ActionButtons.d.ts +0 -17
- package/dist/published/components/custom/FormV2/components/ActionButtons.js +0 -111
- package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts +0 -11
|
@@ -41,7 +41,7 @@ describe('Form component', () => {
|
|
|
41
41
|
if (sanitizedVersion === 'true') {
|
|
42
42
|
return HttpResponse.json(specialtyObject);
|
|
43
43
|
}
|
|
44
|
-
}), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
|
|
44
|
+
}), http.get('/api/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
|
|
45
45
|
return HttpResponse.json([rnLicense, npLicense]);
|
|
46
46
|
}), http.get('/api/data/objects/specialtyType/instances', (req) => {
|
|
47
47
|
const filter = new URL(req.request.url).searchParams.get('filter');
|
|
@@ -57,7 +57,8 @@ describe('Form component', () => {
|
|
|
57
57
|
npSpecialtyType1,
|
|
58
58
|
npSpecialtyType2,
|
|
59
59
|
]);
|
|
60
|
-
else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] })
|
|
60
|
+
else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }) ||
|
|
61
|
+
isEqual(whereFilter, { 'licenseType.id': 'rnLicenseType' }))
|
|
61
62
|
return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
|
|
62
63
|
else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
|
|
63
64
|
return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
|
|
@@ -77,7 +78,7 @@ describe('Form component', () => {
|
|
|
77
78
|
const user = userEvent.setup();
|
|
78
79
|
server.use(http.get('/api/data/objects/license/instances/rnLicense', () => {
|
|
79
80
|
return HttpResponse.json(rnLicense);
|
|
80
|
-
}), http.get('api/data/forms/specialtyForm', () => {
|
|
81
|
+
}), http.get('/api/data/forms/specialtyForm', () => {
|
|
81
82
|
return HttpResponse.json(createSpecialtyForm);
|
|
82
83
|
}));
|
|
83
84
|
render(React.createElement(MemoryRouter, null,
|
|
@@ -6,7 +6,7 @@ export { ErrorComponent } from './ErrorComponent';
|
|
|
6
6
|
export { Form } from './Form';
|
|
7
7
|
export type { FormRef } from './Form';
|
|
8
8
|
export { FormField } from './FormField';
|
|
9
|
-
export
|
|
9
|
+
export * from './FormV2';
|
|
10
10
|
export { HistoryLog } from './HistoryLog';
|
|
11
11
|
export { MenuBar } from './Menubar';
|
|
12
12
|
export { MultiSelect } from './MultiSelect';
|
|
@@ -4,7 +4,7 @@ export { DataGrid } from './DataGrid';
|
|
|
4
4
|
export { ErrorComponent } from './ErrorComponent';
|
|
5
5
|
export { Form } from './Form';
|
|
6
6
|
export { FormField } from './FormField';
|
|
7
|
-
export
|
|
7
|
+
export * from './FormV2';
|
|
8
8
|
export { HistoryLog } from './HistoryLog';
|
|
9
9
|
export { MenuBar } from './Menubar';
|
|
10
10
|
export { MultiSelect } from './MultiSelect';
|
|
@@ -3,7 +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, FormContext, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RecursiveEntryRenderer, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
|
|
6
|
-
export type { FormRef, GridSortModel } from './components/custom';
|
|
6
|
+
export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps } from './components/custom';
|
|
7
7
|
export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
|
|
8
8
|
export { Box, Container, Grid, Stack } from './components/layout';
|
|
9
9
|
export * from './theme';
|
|
@@ -1,70 +1,78 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
3
3
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
4
|
-
hideButtons?: boolean | undefined;
|
|
5
4
|
value?: import("react-hook-form").FieldValues | undefined;
|
|
6
5
|
onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
|
|
6
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
7
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
7
8
|
fieldHeight?: "medium" | "small" | undefined;
|
|
8
|
-
stickyFooter?: boolean | undefined;
|
|
9
|
-
onCancel?: (() => void) | undefined;
|
|
10
9
|
form: import("@evoke-platform/context").EvokeForm;
|
|
10
|
+
title?: React.ReactNode;
|
|
11
11
|
instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
|
|
12
12
|
onChange: (id: string, value: unknown) => void;
|
|
13
|
-
onValidationChange?: ((errors: import("react-hook-form").FieldErrors<import("react-hook-form").FieldValues>) => void) | undefined;
|
|
14
13
|
associatedObject?: {
|
|
15
14
|
instanceId?: string | undefined;
|
|
16
15
|
propertyId?: string | undefined;
|
|
17
16
|
} | undefined;
|
|
17
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
18
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
19
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
18
20
|
}>;
|
|
19
21
|
export default _default;
|
|
20
22
|
export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
21
23
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
22
|
-
hideButtons?: boolean | undefined;
|
|
23
24
|
value?: import("react-hook-form").FieldValues | undefined;
|
|
24
25
|
onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
|
|
26
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
27
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
25
28
|
fieldHeight?: "medium" | "small" | undefined;
|
|
26
|
-
stickyFooter?: boolean | undefined;
|
|
27
|
-
onCancel?: (() => void) | undefined;
|
|
28
29
|
form: import("@evoke-platform/context").EvokeForm;
|
|
30
|
+
title?: React.ReactNode;
|
|
29
31
|
instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
|
|
30
32
|
onChange: (id: string, value: unknown) => void;
|
|
31
|
-
onValidationChange?: ((errors: import("react-hook-form").FieldErrors<import("react-hook-form").FieldValues>) => void) | undefined;
|
|
32
33
|
associatedObject?: {
|
|
33
34
|
instanceId?: string | undefined;
|
|
34
35
|
propertyId?: string | undefined;
|
|
35
36
|
} | undefined;
|
|
37
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
38
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
39
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
36
40
|
}>;
|
|
37
41
|
export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
38
42
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
39
|
-
hideButtons?: boolean | undefined;
|
|
40
43
|
value?: import("react-hook-form").FieldValues | undefined;
|
|
41
44
|
onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
|
|
45
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
46
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
42
47
|
fieldHeight?: "medium" | "small" | undefined;
|
|
43
|
-
stickyFooter?: boolean | undefined;
|
|
44
|
-
onCancel?: (() => void) | undefined;
|
|
45
48
|
form: import("@evoke-platform/context").EvokeForm;
|
|
49
|
+
title?: React.ReactNode;
|
|
46
50
|
instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
|
|
47
51
|
onChange: (id: string, value: unknown) => void;
|
|
48
|
-
onValidationChange?: ((errors: import("react-hook-form").FieldErrors<import("react-hook-form").FieldValues>) => void) | undefined;
|
|
49
52
|
associatedObject?: {
|
|
50
53
|
instanceId?: string | undefined;
|
|
51
54
|
propertyId?: string | undefined;
|
|
52
55
|
} | undefined;
|
|
56
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
57
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
58
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
53
59
|
}>;
|
|
54
60
|
export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
55
61
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
56
|
-
hideButtons?: boolean | undefined;
|
|
57
62
|
value?: import("react-hook-form").FieldValues | undefined;
|
|
58
63
|
onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
|
|
64
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
65
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
59
66
|
fieldHeight?: "medium" | "small" | undefined;
|
|
60
|
-
stickyFooter?: boolean | undefined;
|
|
61
|
-
onCancel?: (() => void) | undefined;
|
|
62
67
|
form: import("@evoke-platform/context").EvokeForm;
|
|
68
|
+
title?: React.ReactNode;
|
|
63
69
|
instance?: import("../components/custom/FormV2/components/types").Document | import("@evoke-platform/context").ObjectInstance | undefined;
|
|
64
70
|
onChange: (id: string, value: unknown) => void;
|
|
65
|
-
onValidationChange?: ((errors: import("react-hook-form").FieldErrors<import("react-hook-form").FieldValues>) => void) | undefined;
|
|
66
71
|
associatedObject?: {
|
|
67
72
|
instanceId?: string | undefined;
|
|
68
73
|
propertyId?: string | undefined;
|
|
69
74
|
} | undefined;
|
|
75
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
76
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
77
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
70
78
|
}>;
|
|
@@ -22,16 +22,11 @@ async function onSave(data) {
|
|
|
22
22
|
const formattedSubmission = await formatSubmission(structuredClone(data));
|
|
23
23
|
console.log('formatted data', formattedSubmission);
|
|
24
24
|
}
|
|
25
|
-
function onValidationChange(error) {
|
|
26
|
-
console.log('error', error);
|
|
27
|
-
}
|
|
28
25
|
const mockProps = {
|
|
29
26
|
onSubmit: onSave,
|
|
30
|
-
hideButtons: false,
|
|
31
27
|
fieldHeight: 'medium',
|
|
32
28
|
form: mockEvokeForm,
|
|
33
29
|
instance: instance,
|
|
34
|
-
onValidationChange: onValidationChange,
|
|
35
30
|
};
|
|
36
31
|
const Template = (args) => {
|
|
37
32
|
const [formDataState, setFormDataState] = React.useState(args.form.id === 'documentForm' ? docFormData : formData);
|
|
@@ -42,11 +37,8 @@ const Template = (args) => {
|
|
|
42
37
|
return newData;
|
|
43
38
|
});
|
|
44
39
|
}, []);
|
|
45
|
-
function onCancel() {
|
|
46
|
-
setFormDataState(formData);
|
|
47
|
-
}
|
|
48
40
|
return (React.createElement(MemoryRouter, null,
|
|
49
|
-
React.createElement(FormRenderer, { ...args, value: formDataState, onChange: handleChange
|
|
41
|
+
React.createElement(FormRenderer, { ...args, value: formDataState, onChange: handleChange })));
|
|
50
42
|
};
|
|
51
43
|
export const Editable = Template.bind({});
|
|
52
44
|
Editable.args = {
|
|
@@ -55,7 +47,7 @@ Editable.args = {
|
|
|
55
47
|
export const NoButtons = Template.bind({});
|
|
56
48
|
NoButtons.args = {
|
|
57
49
|
...mockProps,
|
|
58
|
-
|
|
50
|
+
renderFooter: () => null,
|
|
59
51
|
};
|
|
60
52
|
export const DocumentForm = Template.bind({});
|
|
61
53
|
DocumentForm.args = {
|
|
@@ -14,12 +14,18 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
14
14
|
hideButtons?: boolean | undefined;
|
|
15
15
|
objectId: string;
|
|
16
16
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
|
|
18
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
19
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
19
20
|
associatedObject?: {
|
|
20
21
|
instanceId?: string | undefined;
|
|
21
22
|
propertyId?: string | undefined;
|
|
22
23
|
} | undefined;
|
|
24
|
+
renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
|
|
25
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
26
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
27
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
28
|
+
sx?: import("@mui/material").SxProps<{}> | undefined;
|
|
23
29
|
}>;
|
|
24
30
|
export default _default;
|
|
25
31
|
export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
@@ -37,12 +43,18 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
|
|
|
37
43
|
hideButtons?: boolean | undefined;
|
|
38
44
|
objectId: string;
|
|
39
45
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
|
|
47
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
48
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
42
49
|
associatedObject?: {
|
|
43
50
|
instanceId?: string | undefined;
|
|
44
51
|
propertyId?: string | undefined;
|
|
45
52
|
} | undefined;
|
|
53
|
+
renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
|
|
54
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
55
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
56
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
57
|
+
sx?: import("@mui/material").SxProps<{}> | undefined;
|
|
46
58
|
}>;
|
|
47
59
|
export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
48
60
|
formId?: string | undefined;
|
|
@@ -59,12 +71,18 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
|
|
|
59
71
|
hideButtons?: boolean | undefined;
|
|
60
72
|
objectId: string;
|
|
61
73
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
62
|
-
|
|
63
|
-
|
|
74
|
+
onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
|
|
75
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
76
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
64
77
|
associatedObject?: {
|
|
65
78
|
instanceId?: string | undefined;
|
|
66
79
|
propertyId?: string | undefined;
|
|
67
80
|
} | undefined;
|
|
81
|
+
renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
|
|
82
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
83
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
84
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
85
|
+
sx?: import("@mui/material").SxProps<{}> | undefined;
|
|
68
86
|
}>;
|
|
69
87
|
export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
70
88
|
formId?: string | undefined;
|
|
@@ -81,12 +99,18 @@ export declare const DocumentForm: import("@storybook/types").AnnotatedStoryFn<i
|
|
|
81
99
|
hideButtons?: boolean | undefined;
|
|
82
100
|
objectId: string;
|
|
83
101
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
84
|
-
|
|
85
|
-
|
|
102
|
+
onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
|
|
103
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
104
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
86
105
|
associatedObject?: {
|
|
87
106
|
instanceId?: string | undefined;
|
|
88
107
|
propertyId?: string | undefined;
|
|
89
108
|
} | undefined;
|
|
109
|
+
renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
|
|
110
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
111
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
112
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
113
|
+
sx?: import("@mui/material").SxProps<{}> | undefined;
|
|
90
114
|
}>;
|
|
91
115
|
export declare const FormWithSections: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
|
|
92
116
|
formId?: string | undefined;
|
|
@@ -103,10 +127,16 @@ export declare const FormWithSections: import("@storybook/types").AnnotatedStory
|
|
|
103
127
|
hideButtons?: boolean | undefined;
|
|
104
128
|
objectId: string;
|
|
105
129
|
richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
|
|
106
|
-
|
|
107
|
-
|
|
130
|
+
onSubmit?: ((submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>) | undefined;
|
|
131
|
+
onDiscardChanges?: (() => void) | undefined;
|
|
132
|
+
onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
|
|
108
133
|
associatedObject?: {
|
|
109
134
|
instanceId?: string | undefined;
|
|
110
135
|
propertyId?: string | undefined;
|
|
111
136
|
} | undefined;
|
|
137
|
+
renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
|
|
138
|
+
renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
|
|
139
|
+
renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
|
|
140
|
+
renderFooter?: ((props: import("../components/custom").FooterProps) => React.ReactNode) | undefined;
|
|
141
|
+
sx?: import("@mui/material").SxProps<{}> | undefined;
|
|
112
142
|
}>;
|
|
@@ -126,10 +126,18 @@ export declare const useWidgetSize: (options?: {
|
|
|
126
126
|
}) => WidgetSizeInfo;
|
|
127
127
|
export default useWidgetSize;
|
|
128
128
|
export declare function useFormContext(): {
|
|
129
|
-
fetchedOptions: import("react-hook-form").FieldValues;
|
|
129
|
+
fetchedOptions: import("react-hook-form").FieldValues; /**
|
|
130
|
+
* Custom hook for responsive design breakpoints using size terminology.
|
|
131
|
+
* Breakpoints based on MUI default theme:
|
|
132
|
+
* - xs: 0px to 599px
|
|
133
|
+
* - sm: 600px to 899px
|
|
134
|
+
* - md: 900px to 1199px
|
|
135
|
+
* - lg: 1200px to 1535px
|
|
136
|
+
* - xl: 1536px and up
|
|
137
|
+
* @returns Object with boolean flags for different breakpoints
|
|
138
|
+
*/
|
|
130
139
|
setFetchedOptions: (newData: import("react-hook-form").FieldValues) => void;
|
|
131
140
|
getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
|
|
132
|
-
stickyFooter?: boolean | undefined;
|
|
133
141
|
object?: import("@evoke-platform/context").Obj | undefined;
|
|
134
142
|
errors?: import("react-hook-form").FieldValues | undefined;
|
|
135
143
|
instance?: import("react-hook-form").FieldValues | undefined;
|
|
@@ -137,7 +145,7 @@ export declare function useFormContext(): {
|
|
|
137
145
|
expandAll?: boolean | null | undefined;
|
|
138
146
|
expandedSections?: import("../components/custom/FormV2/components/types").ExpandedSection[] | undefined;
|
|
139
147
|
setExpandedSections?: import("react").Dispatch<import("react").SetStateAction<import("../components/custom/FormV2/components/types").ExpandedSection[]>> | undefined;
|
|
140
|
-
setExpandAll?: import("react").Dispatch<import("react").SetStateAction<boolean | null | undefined>> | undefined;
|
|
148
|
+
setExpandAll?: import("react").Dispatch<import("react").SetStateAction<boolean | null | undefined>> | undefined;
|
|
141
149
|
parameters?: import("@evoke-platform/context").InputParameter[] | undefined;
|
|
142
150
|
handleChange: (name: string, value: unknown) => void;
|
|
143
151
|
fieldHeight?: "medium" | "small" | undefined;
|
|
@@ -147,5 +155,6 @@ export declare function useFormContext(): {
|
|
|
147
155
|
instanceId?: string | undefined;
|
|
148
156
|
propertyId?: string | undefined;
|
|
149
157
|
} | undefined;
|
|
158
|
+
form?: import("@evoke-platform/context").EvokeForm | undefined;
|
|
150
159
|
width: number;
|
|
151
160
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@evoke-platform/ui-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0-testing.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/published/index.js",
|
|
6
6
|
"module": "dist/published/index.js",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"yalc": "^1.0.0-pre.53"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
|
-
"@evoke-platform/context": "^1.
|
|
95
|
+
"@evoke-platform/context": "^1.5.0-0",
|
|
96
96
|
"react": "^18.1.0",
|
|
97
97
|
"react-dom": "^18.1.0"
|
|
98
98
|
},
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ActionType, FormEntry } from '@evoke-platform/context';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
|
|
4
|
-
type ActionButtonProps = {
|
|
5
|
-
onSubmit: (data: FieldValues) => void;
|
|
6
|
-
handleSubmit: UseFormReturn['handleSubmit'];
|
|
7
|
-
isModal: boolean;
|
|
8
|
-
submitButtonLabel?: string;
|
|
9
|
-
actionType?: ActionType;
|
|
10
|
-
onReset: () => void;
|
|
11
|
-
unregister: UseFormUnregister<FieldValues>;
|
|
12
|
-
entries: FormEntry[];
|
|
13
|
-
setValue: UseFormSetValue<FieldValues>;
|
|
14
|
-
formId?: string;
|
|
15
|
-
};
|
|
16
|
-
declare function ActionButtons(props: ActionButtonProps): React.JSX.Element;
|
|
17
|
-
export default ActionButtons;
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { isEmpty, omit } from 'lodash';
|
|
2
|
-
import React, { useContext, useState } from 'react';
|
|
3
|
-
import { useWidgetSize } from '../../../../theme';
|
|
4
|
-
import { Button, LoadingButton } from '../../../core';
|
|
5
|
-
import { Box } from '../../../layout';
|
|
6
|
-
import { FormContext } from './FormContext';
|
|
7
|
-
import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
|
|
8
|
-
function ActionButtons(props) {
|
|
9
|
-
const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, isModal, entries, setValue, formId, } = props;
|
|
10
|
-
const [isSubmitLoading, setIsSubmitLoading] = useState(false);
|
|
11
|
-
const { getValues, instance, errors, width } = useContext(FormContext);
|
|
12
|
-
const { breakpoints } = useWidgetSize({
|
|
13
|
-
scroll: false,
|
|
14
|
-
defaultWidth: width,
|
|
15
|
-
});
|
|
16
|
-
const { isXs } = breakpoints;
|
|
17
|
-
const unregisterHiddenFields = (entriesToCheck) => {
|
|
18
|
-
entriesToCheck.forEach((entry) => {
|
|
19
|
-
if (entry.type === 'sections' || entry.type === 'columns') {
|
|
20
|
-
const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
|
|
21
|
-
subEntries.forEach((subEntry) => {
|
|
22
|
-
if (subEntry.entries) {
|
|
23
|
-
unregisterHiddenFields(subEntry.entries);
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
if (!entryIsVisible(entry, getValues(), instance)) {
|
|
28
|
-
if (entry.type === 'sections' || entry.type === 'columns') {
|
|
29
|
-
const fieldsToUnregister = getNestedParameterIds(entry);
|
|
30
|
-
fieldsToUnregister.forEach(processFieldUnregister);
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
const fieldId = getEntryId(entry);
|
|
34
|
-
if (fieldId)
|
|
35
|
-
processFieldUnregister(fieldId);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
const processFieldUnregister = (fieldId) => {
|
|
41
|
-
if (isAddressProperty(fieldId)) {
|
|
42
|
-
// Unregister entire addressObject to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
|
|
43
|
-
const [addressObject, addressField] = fieldId.split('.');
|
|
44
|
-
let addressValues = getValues(addressObject);
|
|
45
|
-
addressValues = omit(addressValues, addressField);
|
|
46
|
-
unregister(addressObject);
|
|
47
|
-
setValue(addressObject, addressValues);
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
unregister(fieldId);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
async function showErrorsOrSubmit() {
|
|
54
|
-
setIsSubmitLoading(true);
|
|
55
|
-
unregisterHiddenFields(entries ?? []);
|
|
56
|
-
try {
|
|
57
|
-
await handleSubmit((data) => onSubmit(actionType === 'delete' ? {} : data))();
|
|
58
|
-
}
|
|
59
|
-
finally {
|
|
60
|
-
setIsSubmitLoading(false);
|
|
61
|
-
}
|
|
62
|
-
if (!isEmpty(errors)) {
|
|
63
|
-
setTimeout(() => {
|
|
64
|
-
const errorElement = document.getElementById(`validation-error-display-${formId}`);
|
|
65
|
-
let modal = errorElement?.closest('.MuiPaper-root');
|
|
66
|
-
const hasCloseIcon = modal?.querySelector('svg[data-testid="CloseIcon"]');
|
|
67
|
-
modal = hasCloseIcon ? document.querySelector('.MuiDialogContent-root') : modal;
|
|
68
|
-
if (errorElement) {
|
|
69
|
-
scrollIntoViewWithOffset(errorElement, 170, modal);
|
|
70
|
-
}
|
|
71
|
-
}, 0);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
return (React.createElement(Box, { sx: {
|
|
75
|
-
display: 'flex',
|
|
76
|
-
justifyContent: 'flex-end',
|
|
77
|
-
flexWrap: 'wrap-reverse',
|
|
78
|
-
width: '100%',
|
|
79
|
-
} },
|
|
80
|
-
React.createElement(Button, { key: "cancel", variant: "outlined", sx: {
|
|
81
|
-
margin: '5px',
|
|
82
|
-
marginX: isXs ? '0px' : undefined,
|
|
83
|
-
color: 'black',
|
|
84
|
-
border: '1px solid rgb(206, 212, 218)',
|
|
85
|
-
width: isXs ? '100%' : 'auto',
|
|
86
|
-
'&:hover': {
|
|
87
|
-
backgroundColor: '#f2f4f7',
|
|
88
|
-
border: '1px solid rgb(206, 212, 218)',
|
|
89
|
-
},
|
|
90
|
-
}, onClick: () => onReset() }, isModal ? 'Cancel' : 'Discard Changes'),
|
|
91
|
-
React.createElement(LoadingButton, { key: "submit", variant: "contained", sx: {
|
|
92
|
-
lineHeight: '2.75',
|
|
93
|
-
margin: '5px 0 5px 5px',
|
|
94
|
-
marginX: isXs ? '0px' : undefined,
|
|
95
|
-
padding: '0 23px',
|
|
96
|
-
backgroundColor: actionType === 'delete' ? '#A12723' : 'primary',
|
|
97
|
-
borderRadius: '8px',
|
|
98
|
-
boxShadow: 'none',
|
|
99
|
-
whiteSpace: 'nowrap',
|
|
100
|
-
width: isXs ? '100%' : 'auto',
|
|
101
|
-
'& .MuiCircularProgress-root': {
|
|
102
|
-
color: 'white',
|
|
103
|
-
},
|
|
104
|
-
'&:hover': {
|
|
105
|
-
backgroundColor: actionType === 'delete' ? ' #8C2421' : '#014E7B',
|
|
106
|
-
},
|
|
107
|
-
}, onClick: () => {
|
|
108
|
-
showErrorsOrSubmit();
|
|
109
|
-
}, loading: isSubmitLoading }, submitButtonLabel || 'Submit')));
|
|
110
|
-
}
|
|
111
|
-
export default ActionButtons;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { FieldErrors } from 'react-hook-form';
|
|
3
|
-
export type ValidationErrorDisplayProps = {
|
|
4
|
-
formId: string;
|
|
5
|
-
title?: string;
|
|
6
|
-
errors?: FieldErrors;
|
|
7
|
-
showSubmitError?: boolean;
|
|
8
|
-
isSmallerThanMd: boolean;
|
|
9
|
-
};
|
|
10
|
-
declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
|
|
11
|
-
export default ValidationErrorDisplay;
|