From cefe77bc0e4f9420d2479ce45187ebe5c466c6bb Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 28 Dec 2025 01:09:02 +0000
Subject: [PATCH] Enhance ObjectProperty component to support conditional input
 rendering

- Added `useFormItem` prop to control input rendering behavior.
- Refactored input rendering logic to streamline component structure and improve maintainability.
- Updated various input types to utilize the new `inputProps` for consistent handling of properties.
---
 .../Dashboard/common/ObjectProperty.jsx       | 310 ++++++++----------
 1 file changed, 138 insertions(+), 172 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectProperty.jsx b/src/components/Dashboard/common/ObjectProperty.jsx
index bfa623f..0f52cad 100644
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@@ -85,6 +85,7 @@ const ObjectProperty = ({
   minimal = false,
   previewOpen = false,
   showPreview = true,
+  useFormItem = true,
   options = [],
   roundNumber = false,
   fixedNumber = false,
@@ -613,254 +614,218 @@ const ObjectProperty = ({
       mergedFormItemProps.onChange = onChange
     }
 
-    switch (type) {
-      case 'netGross':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+    const inputProps = useFormItem
+      ? {}
+      : {
+          value,
+          onChange,
+          disabled
+        }
+
+    const renderInput = () => {
+      switch (type) {
+        case 'netGross':
+          return (
             <NetGrossInput
               difference={difference}
               prefix={prefix}
               suffix={suffix}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'secret':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'secret':
+          return (
             <Input.Password
               placeholder={label}
-              disabled={disabled}
-              {...mergedFormItemProps}
               iconRender={(visible) =>
                 visible ? <EyeSlashIcon /> : <EyeIcon />
               }
+              {...mergedFormItemProps}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'wsprotocol':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'wsprotocol':
+          return (
             <Select
               defaultValue='ws'
-              disabled={disabled}
               options={[
                 { value: 'ws', label: 'Websocket' },
                 { value: 'wss', label: 'Websocket Secure' }
               ]}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'select':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'select':
+          return (
             <CustomSelect
               placeholder={'Select a ' + label.toLowerCase() + '...'}
-              disabled={disabled}
               options={Array.isArray(options) ? options : []}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'priceMode':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'priceMode':
+          return (
             <Select
               defaultValue='margin'
-              disabled={disabled}
               options={[
                 { value: 'margin', label: 'Margin %' },
                 { value: 'amount', label: '£ Amount' }
               ]}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'bool':
-        return (
-          <Form.Item
-            name={formItemName}
-            {...mergedFormItemProps}
-            valuePropName='checked'
-          >
-            <Switch disabled={disabled} />
-          </Form.Item>
-        )
-      case 'dateTime':
-        return (
-          <Form.Item
-            name={formItemName}
-            {...mergedFormItemProps}
-            getValueProps={(v) => ({ value: v ? dayjs(v) : null })}
-          >
+          )
+        case 'bool':
+          return (
+            <Switch
+              {...inputProps}
+              {...(useFormItem ? {} : { checked: value })}
+            />
+          )
+        case 'dateTime':
+          return (
             <DatePicker
               showTime
               style={{ width: '100%' }}
-              disabled={disabled}
+              {...inputProps}
+              {...(useFormItem ? {} : { value: value ? dayjs(value) : null })}
             />
-          </Form.Item>
-        )
-      case 'country':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <CountrySelect disabled={disabled} />
-          </Form.Item>
-        )
-      case 'color':
-        return (
-          <Form.Item
-            name={formItemName}
-            {...mergedFormItemProps}
-            valuePropName='value'
-            getValueFromEvent={(v) => v}
-          >
-            <ColorSelector required={required} disabled={disabled} />
-          </Form.Item>
-        )
-      case 'weight':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'country':
+          return <CountrySelect {...inputProps} />
+        case 'color':
+          return (
+            <ColorSelector
+              required={required}
+              {...inputProps}
+              {...(useFormItem ? {} : { value })}
+            />
+          )
+        case 'weight':
+          return (
             <InputNumber
               suffix='g'
               style={{ width: '100%' }}
               placeholder={label}
-              disabled={disabled}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'number':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'number':
+          return (
             <InputNumber
               placeholder={label}
-              disabled={disabled}
               prefix={prefix}
               suffix={suffix}
               min={min}
               max={max}
               step={step}
-              {...mergedFormItemProps}
               style={{ width: '100%' }}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'text':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <Input
-              placeholder={label}
-              {...mergedFormItemProps}
-              disabled={disabled}
-            />
-          </Form.Item>
-        )
-      case 'codeBlock':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'text':
+          return <Input placeholder={label} {...inputProps} />
+        case 'codeBlock':
+          return (
             <CodeBlockEditor
               code={value}
               language={language}
-              disabled={disabled}
               height={height}
               minimal={minimal}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'markdown':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <MarkdownInput value={value} />
-          </Form.Item>
-        )
-      case 'material':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'markdown':
+          return <MarkdownInput {...inputProps} />
+        case 'material':
+          return (
             <Select
               options={MATERIAL_OPTIONS}
               placeholder={label}
-              disabled={disabled}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'id':
-        // id is not editable, just show view mode
-        if (value) {
-          return <IdDisplay id={value} type={objectType} {...rest} />
-        } else {
-          return (
-            <Text type='secondary' {...textParams}>
-              n/a
-            </Text>
           )
-        }
-      case 'object':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+        case 'id':
+          // id is not editable, just show view mode
+          if (value) {
+            return <IdDisplay id={value} type={objectType} {...rest} />
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
+        case 'object':
+          return (
             <ObjectSelect
               type={objectType}
-              disabled={disabled}
               masterFilter={masterFilter}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'objectType':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectTypeSelect disabled={disabled} masterFilter={masterFilter} />
-          </Form.Item>
-        )
-      case 'objectList':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} multiple disabled={disabled} />
-          </Form.Item>
-        )
-      case 'tags':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <TagsInput />
-          </Form.Item>
-        )
-      case 'file':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'objectType':
+          return (
+            <ObjectTypeSelect masterFilter={masterFilter} {...inputProps} />
+          )
+        case 'objectList':
+          return <ObjectSelect type={objectType} multiple {...inputProps} />
+        case 'tags':
+          return <TagsInput {...inputProps} />
+        case 'file':
+          return (
             <FileUpload
-              value={value}
               multiple={false}
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'fileList':
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
+          )
+        case 'fileList':
+          return (
             <FileUpload
-              value={value}
               multiple={true}
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              {...inputProps}
             />
-          </Form.Item>
-        )
-      case 'objectChildren': {
-        return (
-          <ObjectChildTable
-            value={value}
-            properties={properties}
-            objectData={objectData}
-            isEditing={true}
-            formListName={formItemName}
-            rollups={rollups}
-          />
-        )
+          )
+        case 'objectChildren': {
+          return (
+            <ObjectChildTable
+              properties={properties}
+              objectData={objectData}
+              isEditing={true}
+              rollups={rollups}
+              {...inputProps}
+            />
+          )
+        }
+        default:
+          return <Input placeholder={label} {...inputProps} />
       }
-      default:
-        return (
-          <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <Input placeholder={label} {...mergedFormItemProps} />
-          </Form.Item>
-        )
     }
+
+    if (!useFormItem) {
+      return renderInput()
+    }
+
+    return (
+      <Form.Item
+        name={formItemName}
+        {...mergedFormItemProps}
+        {...(type === 'bool' ? { valuePropName: 'checked' } : {})}
+        {...(type === 'color'
+          ? { valuePropName: 'value', getValueFromEvent: (v) => v }
+          : {})}
+        {...(type === 'dateTime'
+          ? { getValueProps: (v) => ({ value: v ? dayjs(v) : null }) }
+          : {})}
+      >
+        {renderInput()}
+      </Form.Item>
+    )
   }
 
   const property = renderProperty()
@@ -892,6 +857,7 @@ ObjectProperty.propTypes = {
   height: PropTypes.string,
   previewOpen: PropTypes.bool,
   showPreview: PropTypes.bool,
+  useFormItem: PropTypes.bool,
   showHyperlink: PropTypes.bool,
   options: PropTypes.array,
   showSince: PropTypes.bool,