@evoke-platform/ui-components 1.5.0-testing.12 → 1.5.0-testing.13

package/dist/published/components/custom/Form/Common/FormComponentWrapper.d.ts

@@ -18,7 +18,7 @@ type FormComponentWrapperProps = {
     viewOnly: boolean;
     children: React.ReactNode;
     key: string;
-    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox';
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox' | 'switch' | 'checkbox';
     onChange?: (key: string, value: unknown) => void;
     property?: ObjectProperty;
     readOnly?: boolean;

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

@@ -15,6 +15,6 @@ export declare class ViewOnlyComponent extends ReactComponent {
      * @param data - The contextual data object (model) used for this component.
      */
     constructor(component: BaseFormComponentProps, options: any, data: any);
-    showValue(value: unknown): {} | undefined;
+    showValue(value: unknown): unknown;
     attachReact(element: Element): void;
 }

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

@@ -4,6 +4,7 @@ import { DateTime } from 'luxon';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Link, Typography } from '../../../core';
+import BooleanSelect from '../../FormField/BooleanSelect/BooleanSelect';
 import { FormComponentWrapper } from '../Common/FormComponentWrapper';
 export class ViewOnlyComponent extends ReactComponent {
     /**
@@ -25,7 +26,7 @@ export class ViewOnlyComponent extends ReactComponent {
         this.showValue = this.showValue.bind(this);
     }
     showValue(value) {
-        if (value === null || value === undefined)
+        if ((value === null || value === undefined) && this.component.type !== 'ViewOnlyBoolean')
             return React.createElement("span", null, "\u00A0");
         switch (this.component.type) {
             case 'ViewOnlyObject':
@@ -63,7 +64,9 @@ export class ViewOnlyComponent extends ReactComponent {
             case 'ViewOnlyTime':
                 return DateTime.fromISO(DateTime.now().toISODate() + 'T' + value).toFormat('hh:mm a');
             case 'ViewOnlyBoolean':
-                return value ? 'Yes' : 'No';
+                return (React.createElement(BooleanSelect, { id: this.component.key, readOnly: true, label: this.component.label, required: this.component.validate?.required, description: this.component.description, property: this.component.property, defaultValue: this.component.instance
+                        ? get(this.component.instance, this.component.key)
+                        : this.component.defaultValue, size: this.component.fieldHeight, displayOption: this.component.displayOption }));
             default:
                 return value;
         }

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

@@ -50,6 +50,8 @@ export type BaseFormComponentProps = {
     autoSave?: (update: Record<string, unknown>) => void;
     baseUrl: string;
     apiServices: ApiServices;
+    description?: string;
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox' | 'switch' | 'checkbox';
 };
 export type ObjectPropertyInputProps = {
     id: string;

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

@@ -189,7 +189,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 tableView: false,
                 displayOption: parameter.type === 'object'
                     ? displayOptions?.relatedObjectDisplay
-                    : parameter.type === 'string' && parameter.enum
+                    : (parameter.type === 'string' && parameter.enum) || parameter.type === 'boolean'
                         ? displayOptions?.choicesDisplay?.type
                         : undefined,
                 labelPosition: 'top',
@@ -789,7 +789,9 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
     ];
 }
 export function getDefaultValue(initialValue, selectOptions) {
-    if (!isEmpty(initialValue) || (initialValue !== undefined && typeof initialValue === 'number')) {
+    if (typeof initialValue === 'boolean' ||
+        !isEmpty(initialValue) ||
+        (initialValue !== undefined && typeof initialValue === 'number')) {
         if (Array.isArray(initialValue)) {
             return initialValue
                 .map((option) => {

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -34,12 +34,12 @@ const AddressFieldComponent = (props) => {
                     return { label, sublabel, value: address.address };
                 }));
             });
-        props.onChange(property.id, inputValue, property, undefined);
+        props.onChange && props.onChange(property.id, inputValue, property, undefined);
     };
     const handleClick = (option) => {
         setAnchorEl(null);
         setValue(option.value.line1);
-        props.onChange(property.id, option.value, property, undefined);
+        props.onChange && props.onChange(property.id, option.value, property, undefined);
     };
     const handleClose = () => {
         setAnchorEl(null);

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -17,7 +17,7 @@ const BooleanSelect = (props) => {
     }, [defaultValue]);
     const handleChange = (value) => {
         setValue(value);
-        props.onChange(property.id, value, property);
+        props.onChange && props.onChange(property.id, value, property);
     };
     const booleanOptions = [
         {

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -33,7 +33,7 @@ const DatePickerSelect = (props) => {
     }, [defaultValue]);
     const handleChange = (date) => {
         setValue(date);
-        onChange(property.id, date, property);
+        onChange && onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
         React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.js

@@ -40,7 +40,7 @@ const DateTimePickerSelect = (props) => {
             date = LocalDateTime.of(date, LocalTime.of(0));
         }
         setValue(date);
-        props.onChange(property.id, date, property);
+        props.onChange && props.onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
         React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));

package/dist/published/components/custom/FormField/FileUpload/FileUpload.js

@@ -30,13 +30,13 @@ const FileUploadControl = (props) => {
     };
     useEffect(() => {
         if (uploadedFile) {
-            props.onChange(property.id, uploadedFile, property);
+            props.onChange && props.onChange(property.id, uploadedFile, property);
         }
     }, [uploadedFile]);
     const handleSelectFile = () => {
         if (uploadedFile) {
             setUploadedFile(undefined);
-            props.onChange(property.id, undefined, property);
+            props.onChange && props.onChange(property.id, undefined, property);
         }
     };
     const onDrop = useCallback(

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -6,7 +6,7 @@ import { Address } from './AddressFieldComponent/addressFieldComponent';
 export type FormFieldProps = {
     id?: string;
     property: ObjectProperty;
-    onChange: Function;
+    onChange?: Function;
     onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     defaultValue?: unknown;
     error?: boolean;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -26,11 +26,11 @@ const InputFieldComponent = (props) => {
             ? parseInt(e.target.value, 10)
             : e.target.value;
         setValue(inputValue);
-        props.onChange(property.id, inputValue, property);
+        props.onChange && props.onChange(property.id, inputValue, property);
     };
     const handleSelectChange = (e, selected) => {
         setValue(selected.label);
-        props.onChange(property.id, selected.label, property);
+        props.onChange && props.onChange(property.id, selected.label, property);
     };
     const handleInputValueChange = (event, selectValue) => {
         setInputValue(selectValue);

package/dist/published/components/custom/FormField/Select/Select.js

@@ -12,11 +12,12 @@ const Select = (props) => {
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             setValue(selected.map((option) => option.value ?? option));
-            props.onChange(property.id, selected.map((option) => option.value ?? option), property);
+            props.onChange &&
+                props.onChange(property.id, selected.map((option) => option.value ?? option), property);
         }
         else {
             setValue(selected);
-            props.onChange(property.id, selected, property);
+            props.onChange && props.onChange(property.id, selected, property);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.js

@@ -32,11 +32,11 @@ const TimePickerSelect = (props) => {
             const hour = padStart(date?.hour().toString(), 2, '0');
             const minute = padStart(date?.minute().toString(), 2, '0');
             const second = padStart(date?.second().toString(), 2, '0');
-            props.onChange(property.id, `${hour}:${minute}:${second}`, property);
+            props.onChange && props.onChange(property.id, `${hour}:${minute}:${second}`, property);
         }
         else {
             setValue(null);
-            props.onChange(property.id, date, property);
+            props.onChange && props.onChange(property.id, date, property);
         }
     };
     return (React.createElement(LocalizationProvider, null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.0-testing.12",
+    "version": "1.5.0-testing.13",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",