@evoke-platform/ui-components 1.0.0-dev.230 → 1.0.0-dev.232

package/dist/published/components/custom/Form/Common/Form.js

@@ -36,7 +36,7 @@ export function Form(props) {
             ViewOnlyTextField: ViewOnlyComponent,
             ViewOnlyDecimal: ViewOnlyComponent,
             ViewOnlyInteger: ViewOnlyComponent,
-            ViewOnlyRichText: richTextEditor,
+            ViewOnlyRichText: richTextEditor ?? ViewOnlyComponent,
             ViewOnlySection: Components.components.fieldset,
             ViewOnlyManyToManyRepeatableField: RepeatableFieldComponent,
             ViewOnlyRepeatableField: RepeatableFieldComponent,
@@ -59,7 +59,7 @@ export function Form(props) {
             Integer: FormFieldComponent,
             Buttons: ButtonComponent,
             Content: Components.components.content,
-            RichText: richTextEditor,
+            RichText: richTextEditor ?? FormFieldComponent,
             Section: Components.components.tabs,
             ManyToManyRepeatableField: RepeatableFieldComponent,
             RepeatableField: RepeatableFieldComponent,
@@ -124,7 +124,7 @@ export function Form(props) {
                     navigateTo,
                     apiServices,
                     user: userAccount,
-                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight);
+                }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
                 const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
                 setComponentProps(components);
             }
@@ -205,7 +205,7 @@ export function Form(props) {
                         navigateTo,
                         apiServices,
                         user: userAccount,
-                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight)),
+                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor)),
                     BottomButtons,
                 ]);
             }
@@ -221,7 +221,7 @@ export function Form(props) {
                     navigateTo,
                     apiServices,
                     user,
-                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight),
+                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
                 !isReadOnly && BottomButtons,
             ]);
         }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -20,5 +20,4 @@ export declare class DocumentComponent extends ReactComponent {
     handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
     beforeSubmit(): Promise<void>;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.js

@@ -133,7 +133,4 @@ export class DocumentComponent extends ReactComponent {
             React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
                 React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue }))), root);
     }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
-    }
 }

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -38,6 +38,5 @@ export declare class FormFieldComponent extends ReactComponent {
     handleComponentChange: (components: any, value: any) => void;
     handleChange: (key: string, value: any) => void;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }
 export {};

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -467,7 +467,4 @@ export class FormFieldComponent extends ReactComponent {
                             this.emit('changed-' + this.component.key, e.target.value);
                     }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium' }))), root);
     }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
-    }
 }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.d.ts

@@ -22,5 +22,4 @@ export declare class ImageComponent extends ReactComponent {
     handleChange: (key: string, value: string | null) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.js

@@ -115,7 +115,4 @@ export class ImageComponent extends ReactComponent {
         return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
             React.createElement(Image, { ...this.component, id: inputId, value: this.dataValue, handleChange: this.handleChange, error: this.hasErrors() }))) : null), root);
     }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
-    }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.d.ts

@@ -6,6 +6,7 @@ interface ObjectComponentProps extends BaseFormComponentProps {
     mode: 'default' | 'existingOnly';
     defaultValueCriteria?: Record<string, unknown>;
     initialValue?: string;
+    richTextEditor?: typeof ReactComponent;
 }
 export declare class ObjectComponent extends ReactComponent {
     relatedObject?: Obj;
@@ -31,6 +32,5 @@ export declare class ObjectComponent extends ReactComponent {
     handleChangeObjectProperty: (key: string, value?: ObjectInstance | null) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }
 export {};

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.js

@@ -182,9 +182,6 @@ export class ObjectComponent extends ReactComponent {
          * Will need to be revisited later. Possibly look into using this.ref */
         return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
-                React.createElement(ObjectPropertyInput, { ...updatedComponent, id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))), root);
-    }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
+                React.createElement(ObjectPropertyInput, { ...updatedComponent, id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined, richTextEditor: this.component.richTextEditor }))), root);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -8,7 +8,7 @@ import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
 export const ObjectPropertyInput = (props) => {
-    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, } = props;
+    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, richTextEditor, } = props;
     const [relatedObject, setRelatedObject] = useState();
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
     const [selectedInstance, setSelectedInstance] = useState();
@@ -333,7 +333,7 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(Typography, { sx: {
                     marginTop: '28px',
                     fontSize: '22px',
@@ -341,5 +341,5 @@ export const ObjectPropertyInput = (props) => {
                     marginLeft: '24px',
                     marginBottom: '10px',
                 } }, `Add ${property.name}`),
-            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })))))));
+            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })))))));
 };

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, Property, TableViewLayout, UserAccount } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 export declare type RelatedObjectInstanceProps = {
     relatedObject?: Obj;
     property: Property;
@@ -21,5 +22,6 @@ export declare type RelatedObjectInstanceProps = {
     filter?: Record<string, unknown>;
     user?: UserAccount;
     layout?: TableViewLayout;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -20,7 +20,7 @@ const styles = {
 };
 const DEFAULT_CREATE_ACTION = '_create';
 export const RelatedObjectInstance = (props) => {
-    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, } = props;
+    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, richTextEditor, } = props;
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
     const [selectedRow, setSelectedRow] = useState();
     const [errors, setErrors] = useState([]);
@@ -104,7 +104,7 @@ export const RelatedObjectInstance = (props) => {
                 React.createElement(Form, { actionId: "_create", actionType: "create", object: relatedObject, onSave: createNewInstance, submitButtonLabel: 'Add', closeModal: onClose, apiServices: apiServices, clearable: true, objectInputCommonProps: {
                         apiServices: apiServices,
                         setSnackbarError: setSnackbarError,
-                    }, queryAddresses: queryAddresses, user: userAccount }))) : (relatedObject && (React.createElement(React.Fragment, null,
+                    }, queryAddresses: queryAddresses, user: userAccount, richTextEditor: richTextEditor }))) : (relatedObject && (React.createElement(React.Fragment, null,
                 React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
         relationType !== 'new' && (React.createElement(Box, { sx: styles.actionButtons },
             React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserComponent.d.ts

@@ -25,5 +25,4 @@ export declare class UserComponent extends ReactComponent {
     handleChangeUserProperty: (value: AutocompleteOption) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserComponent.js

@@ -124,7 +124,4 @@ export class UserComponent extends ReactComponent {
             React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
                 React.createElement(UserProperty, { ...updatedComponent, id: inputId, value: this.dataValue ?? '', handleChangeUserProperty: this.handleChangeUserProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))), root);
     }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
-    }
 }

package/dist/published/components/custom/Form/FormComponents/ViewOnlyComponent.d.ts

@@ -17,5 +17,4 @@ export declare class ViewOnlyComponent extends ReactComponent {
     constructor(component: BaseFormComponentProps, options: any, data: any);
     showValue(value: unknown): {} | undefined;
     attachReact(element: Element): void;
-    detachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/ViewOnlyComponent.js

@@ -82,7 +82,4 @@ export class ViewOnlyComponent extends ReactComponent {
                     ? get(this.component.instance, this.component.key)
                     : this.component.defaultValue)))), root);
     }
-    detachReact(element) {
-        ReactDOM.unmountComponentAtNode(element);
-    }
 }

package/dist/published/components/custom/Form/types.d.ts

@@ -1,4 +1,5 @@
 import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import { AutocompleteOption } from '../../core';
 export declare type BaseFormComponentProps = {
     key: string;
@@ -76,6 +77,7 @@ export declare type ObjectPropertyInputProps = {
     isModal?: boolean;
     label?: string;
     viewLayout?: ViewLayoutEntityReference;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare type Address = {
     line1?: string;

package/dist/published/components/custom/Form/utils.d.ts

@@ -1,4 +1,5 @@
 import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
 import { ObjectPropertyInputProps } from './types';
@@ -20,9 +21,9 @@ export declare function getMiddleObject(instance: ObjectInstance, property: Prop
 } | undefined;
 export declare function getMiddleInstance(instanceId: string, property: Property, middleObjectInstances: ObjectInstance[]): ObjectInstance | undefined;
 export declare function getPrefixedUrl(url: string): string;
-export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium'): Promise<ActionInput[]>;
+export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
-export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium') => unknown[];
+export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];
 export declare const buildComponentPropsFromDocumentProperties: (documentProperties: [string, unknown][], readOnly?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, fieldHeight?: 'small' | 'medium') => {
     type: string;
     key: string;

package/dist/published/components/custom/Form/utils.js

@@ -468,7 +468,7 @@ export function getPrefixedUrl(url) {
 // This function is used when there is no form configured in the form builder.
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight) {
+formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
@@ -625,6 +625,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         middleObject,
                         getMiddleObjectInstances,
                         isModal,
+                        richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                            ? richTextEditor
+                            : undefined,
                     };
                 }
                 const defaultValue = getDefaultValue(isNil(instanceValue) ? component.initialValue : instanceValue, component?.data?.values);
@@ -665,11 +668,14 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                         }
                         : undefined,
                     isModal,
+                    richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                        ? richTextEditor
+                        : undefined,
                 };
             }
             if (component.columns) {
                 for (const column of component.columns) {
-                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight);
+                    column.components = await addObjectPropertiesToComponentProps(properties, column.components, instance, objectPropertyInputProps, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
@@ -703,6 +709,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     item.navigateTo = navigateTo;
                     item.isModal = isModal;
                     item.fieldHeight = fieldHeight;
+                    item.richTextEditor = ['RepeatableField', 'Object'].includes(item.type)
+                        ? richTextEditor
+                        : undefined;
                     if (item.addressPropertyId) {
                         item.queryAddresses = queryAddresses;
                     }
@@ -724,7 +733,7 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     }
                 }
                 return {
-                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight),
+                    components: await addObjectPropertiesToComponentProps(properties, component.components, instance, objectPropertyInputProps, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor),
                     ...component,
                     ...(component.type === 'Object' && objectPropertyInputProps),
                     type: `${readOnly ? 'ViewOnly' : ''}${component.type}`,
@@ -738,6 +747,9 @@ formComponents, instance, objectPropertyInputProps, autoSave, readOnly, defaultP
                     queryAddresses: component.isAddressLine1 ? queryAddresses : undefined,
                     isModal,
                     fieldHeight,
+                    richTextEditor: ['RepeatableField', 'Object'].includes(component.type)
+                        ? richTextEditor
+                        : undefined,
                 };
             }
         }))).filter((component) => !!component),
@@ -788,7 +800,7 @@ export function getDefaultValue(initialValue, selectOptions) {
 }
 // The following function adds the configured properties to the form components.
 // This function is used when there is a form configured in the form builder.
-export const buildComponentPropsFromObjectProperties = (properties, objectId, instance, objectPropertyInputProps, hasActionPermissions, autoSave, readOnly, queryAddresses, isModal, fieldHeight) => {
+export const buildComponentPropsFromObjectProperties = (properties, objectId, instance, objectPropertyInputProps, hasActionPermissions, autoSave, readOnly, queryAddresses, isModal, fieldHeight, richTextEditor) => {
     const matchType = (type) => {
         switch (type) {
             case 'boolean':
@@ -1049,6 +1061,7 @@ export const buildComponentPropsFromObjectProperties = (properties, objectId, in
             autoSave,
             queryAddresses: ['collection', 'object'].includes(property?.type) ? queryAddresses : undefined,
             isModal,
+            richTextEditor: property.type === 'object' ? richTextEditor : undefined,
         };
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.230",
+    "version": "1.0.0-dev.232",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",