Add support for additional property types in ObjectProperty component, including variance, markdown, and object list displays. Enhance prop types to accommodate functions for prefix, suffix, and object type. Update ObjectInfo to pass custom property props.

src/components/Dashboard/common/ObjectInfo.jsx

@@ -13,6 +13,7 @@ const ObjectInfo = ({
   properties = [],
   required = undefined,
   visibleProperties = {},
+  objectPropertyProps = {},
   ...rest
 }) => {
   const allItems = getModelProperties(type)
@@ -55,6 +56,7 @@ const ObjectInfo = ({
       children: (
         <ObjectProperty
           {...item}
+          {...objectPropertyProps}
           isEditing={isEditing}
           objectData={objectData}
         />
@@ -91,7 +93,8 @@ ObjectInfo.propTypes = {
   type: PropTypes.string.isRequired,
   objectData: PropTypes.object,
   required: PropTypes.bool,
-  visibleProperties: PropTypes.object
+  visibleProperties: PropTypes.object,
+  objectPropertyProps: PropTypes.object
 }
 
 export default ObjectInfo

src/components/Dashboard/common/ObjectProperty.jsx

@@ -37,6 +37,10 @@ import { getPropertyValue } from '../../../database/ObjectModels'
 import PropertyChanges from './PropertyChanges'
 import NetGrossDisplay from './NetGrossDisplay'
 import NetGrossInput from './NetGrossInput'
+import ObjectList from './ObjectList'
+import VarianceDisplay from './VarianceDisplay'
+import OperationDisplay from './OperationDisplay'
+import MarkdownDisplay from './MarkdownDisplay'
 
 const { Text } = Typography
 
@@ -71,7 +75,7 @@ const ObjectProperty = ({
   initial = false,
   ...rest
 }) => {
-  if (typeof value == 'function' && objectData) {
+  if (value && typeof value == 'function' && objectData) {
     value = value(objectData)
   }
 
@@ -87,6 +91,14 @@ const ObjectProperty = ({
     difference = difference(objectData)
   }
 
+  if (prefix && typeof prefix == 'function' && objectData) {
+    prefix = prefix(objectData)
+  }
+
+  if (suffix && typeof suffix == 'function' && objectData) {
+    suffix = suffix(objectData)
+  }
+
   if (!value) {
     value = getPropertyValue(objectData, name)
   }
@@ -218,6 +230,19 @@ const ObjectProperty = ({
             )
           }
         }
+        case 'variance': {
+          if (value != null) {
+            return (
+              <VarianceDisplay value={value} prefix={prefix} suffix={suffix} />
+            )
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
+        }
         case 'text':
           if (value != null && value != '') {
             return (
@@ -234,6 +259,16 @@ const ObjectProperty = ({
               </Text>
             )
           }
+        case 'markdown':
+          if (value != null && value != '') {
+            return <MarkdownDisplay content={value} />
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
         case 'email':
           if (value != null && value != '') {
             return <EmailDisplay email={value} />
@@ -265,6 +300,9 @@ const ObjectProperty = ({
             )
           }
         }
+        case 'objectList': {
+          return <ObjectList value={value} objectType={objectType} />
+        }
         case 'state': {
           if (value && value?.type) {
             switch (objectType) {
@@ -346,6 +384,17 @@ const ObjectProperty = ({
             )
           }
         }
+        case 'operation': {
+          if (value != null) {
+            return <OperationDisplay operation={value} />
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
+        }
         case 'propertyChanges': {
           return <PropertyChanges type={objectType} value={value} />
         }
@@ -555,7 +604,7 @@ const ObjectProperty = ({
                 <PrinterSelect placeholder={label} />
               </Form.Item>
             )
-          case 'gcodefile':
+          case 'gcodeFile':
             return (
               <Form.Item name={formItemName} {...mergedFormItemProps}>
                 <GCodeFileSelect placeholder={label} />
@@ -603,20 +652,22 @@ const ObjectProperty = ({
 
 ObjectProperty.propTypes = {
   type: PropTypes.string.isRequired,
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   isEditing: PropTypes.bool,
   formItemProps: PropTypes.object,
   required: PropTypes.bool,
   name: PropTypes.string,
-  prefix: PropTypes.string,
-  suffix: PropTypes.string,
+  prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   min: PropTypes.number,
   max: PropTypes.number,
   step: PropTypes.number,
   showLabel: PropTypes.bool,
-  objectType: PropTypes.string,
+  objectType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   readOnly: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  difference: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
+  objectData: PropTypes.object
 }
 
 export default ObjectProperty