fix: add disabled prop support to various field components for enhanced flexibility

hotlong · hotlong · commit 94a0179c43bf · 2026-02-02T00:36:23.000+08:00
diff --git a/packages/fields/src/widgets/AddressField.tsx b/packages/fields/src/widgets/AddressField.tsx
@@ -51,7 +51,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
           value={address.street || ''}
           onChange={(e) => handleFieldChange('street', e.target.value)}
           placeholder="123 Main St"
-          disabled={readonly}
+          disabled={readonly || props.disabled}
           className={props.className}
         />
       </div>
@@ -65,7 +65,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             value={address.city || ''}
             onChange={(e) => handleFieldChange('city', e.target.value)}
             placeholder="San Francisco"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
           />
         </div>
         
@@ -77,7 +77,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             value={address.state || ''}
             onChange={(e) => handleFieldChange('state', e.target.value)}
             placeholder="CA"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
           />
         </div>
       </div>
@@ -91,7 +91,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             value={address.zipCode || ''}
             onChange={(e) => handleFieldChange('zipCode', e.target.value)}
             placeholder="94102"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
           />
         </div>
         
@@ -103,7 +103,7 @@ export function AddressField({ value, onChange, field, readonly, ...props }: Fie
             value={address.country || ''}
             onChange={(e) => handleFieldChange('country', e.target.value)}
             placeholder="United States"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
           />
         </div>
       </div>
diff --git a/packages/fields/src/widgets/AvatarField.tsx b/packages/fields/src/widgets/AvatarField.tsx
@@ -96,7 +96,7 @@ export function AvatarField({ value, onChange, field, readonly, ...props }: Fiel
           variant="outline"
           size="sm"
           onClick={() => fileInputRef.current?.click()}
-          disabled={readonly}
+          disabled={readonly || props.disabled}
         >
           <Upload className="w-4 h-4 mr-2" />
           {value ? 'Change' : 'Upload'} Avatar
diff --git a/packages/fields/src/widgets/BooleanField.tsx b/packages/fields/src/widgets/BooleanField.tsx
@@ -21,7 +21,7 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
                 id={id}
                 checked={!!value}
                 onCheckedChange={(checked) => onChange(!!checked)}
-                disabled={readonly}
+                disabled={readonly || props.disabled}
             />
             <Label htmlFor={id}>{label}</Label>
         </div>
@@ -35,7 +35,7 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
             id={id} 
             checked={!!value} 
             onCheckedChange={onChange}
-            disabled={readonly}
+            disabled={readonly || props.disabled}
         />
         <Label htmlFor={id}>{label}</Label>
     </div>
diff --git a/packages/fields/src/widgets/CodeField.tsx b/packages/fields/src/widgets/CodeField.tsx
@@ -25,7 +25,7 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || `// Write ${language} code here...`}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       className={`font-mono text-sm ${props.className}`}
       rows={12}
       spellCheck={false}
diff --git a/packages/fields/src/widgets/ColorField.tsx b/packages/fields/src/widgets/ColorField.tsx
@@ -27,15 +27,15 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
         type="color"
         value={value || '#000000'}
         onChange={(e) => onChange(e.target.value)}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className="w-10 h-10 rounded border border-input cursor-pointer"
       />
       <Input
         type="text"
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={colorField?.placeholder || '#000000'}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className={props.className}
         pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
       />
diff --git a/packages/fields/src/widgets/CurrencyField.tsx b/packages/fields/src/widgets/CurrencyField.tsx
@@ -53,7 +53,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         }}
         onBlur={handleBlur}
         placeholder={currencyField?.placeholder || '0.00'}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className={`pl-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
diff --git a/packages/fields/src/widgets/DateField.tsx b/packages/fields/src/widgets/DateField.tsx
@@ -13,7 +13,7 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
     />
   );
 }
diff --git a/packages/fields/src/widgets/DateTimeField.tsx b/packages/fields/src/widgets/DateTimeField.tsx
@@ -19,7 +19,7 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
       type="datetime-local"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
     />
   );
 }
diff --git a/packages/fields/src/widgets/EmailField.tsx b/packages/fields/src/widgets/EmailField.tsx
@@ -23,7 +23,7 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/fields/src/widgets/GeolocationField.tsx b/packages/fields/src/widgets/GeolocationField.tsx
@@ -121,7 +121,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
             value={location.latitude ?? ''}
             onChange={(e) => handleFieldChange('latitude', e.target.value)}
             placeholder="37.7749"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
             step="any"
             className={props.className}
           />
@@ -135,7 +135,7 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
             value={location.longitude ?? ''}
             onChange={(e) => handleFieldChange('longitude', e.target.value)}
             placeholder="-122.4194"
-            disabled={readonly}
+            disabled={readonly || props.disabled}
             step="any"
           />
         </div>
diff --git a/packages/fields/src/widgets/LocationField.tsx b/packages/fields/src/widgets/LocationField.tsx
@@ -39,7 +39,7 @@ export function LocationField({ value, onChange, field, readonly, ...props }: Fi
       value={displayValue}
       onChange={handleChange}
       placeholder={config?.placeholder || 'latitude, longitude'}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       className={props.className}
     />
   );
diff --git a/packages/fields/src/widgets/MasterDetailField.tsx b/packages/fields/src/widgets/MasterDetailField.tsx
@@ -98,7 +98,7 @@ export function MasterDetailField({
                 variant="ghost"
                 size="sm"
                 onClick={() => handleRemove(item.id)}
-                disabled={readonly}
+                disabled={readonly || props.disabled}
               >
                 <X className="w-4 h-4" />
               </Button>
diff --git a/packages/fields/src/widgets/NumberField.tsx b/packages/fields/src/widgets/NumberField.tsx
@@ -21,7 +21,7 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
         onChange(val === '' ? (null as any) : Number(val));
       }}
       placeholder={numberField?.placeholder}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       step={precision ? Math.pow(10, -precision) : 'any'}
     />
   );
diff --git a/packages/fields/src/widgets/ObjectField.tsx b/packages/fields/src/widgets/ObjectField.tsx
@@ -41,7 +41,7 @@ export function ObjectField({ value, onChange, field, readonly, ...props }: Fiel
       value={jsonString}
       onChange={handleChange}
       placeholder={config?.placeholder || '{\n  "key": "value"\n}'}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       className={`font-mono text-xs ${props.className || ''}`}
       rows={6}
     />
diff --git a/packages/fields/src/widgets/PasswordField.tsx b/packages/fields/src/widgets/PasswordField.tsx
@@ -20,7 +20,7 @@ export function PasswordField({ value, onChange, field, readonly, className, ...
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={config?.placeholder}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className={`pr-10 ${className || ''}`}
       />
       <Button
diff --git a/packages/fields/src/widgets/PercentField.tsx b/packages/fields/src/widgets/PercentField.tsx
@@ -36,7 +36,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
         value={displayValue}
         onChange={handleChange}
         placeholder={percentField?.placeholder || '0'}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className={`pr-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
diff --git a/packages/fields/src/widgets/PhoneField.tsx b/packages/fields/src/widgets/PhoneField.tsx
@@ -23,7 +23,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/fields/src/widgets/QRCodeField.tsx b/packages/fields/src/widgets/QRCodeField.tsx
@@ -51,7 +51,7 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
           value={value || ''}
           onChange={(e) => onChange(e.target.value)}
           placeholder={config?.placeholder || 'Enter text for QR code'}
-          disabled={readonly}
+          disabled={readonly || props.disabled}
           className={props.className}
         />
         {value && (
diff --git a/packages/fields/src/widgets/RatingField.tsx b/packages/fields/src/widgets/RatingField.tsx
@@ -46,7 +46,7 @@ export function RatingField({ value, onChange, field, readonly, ...props }: Fiel
           onMouseEnter={() => setHoverValue(i + 1)}
           onMouseLeave={() => setHoverValue(null)}
           className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
-          disabled={readonly}
+          disabled={readonly || props.disabled}
         >
           <Star
             className={`w-5 h-5 transition-colors ${
diff --git a/packages/fields/src/widgets/RichTextField.tsx b/packages/fields/src/widgets/RichTextField.tsx
@@ -32,7 +32,7 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={richField?.placeholder || 'Enter text...'}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         rows={rows}
         className={`font-mono text-sm ${props.className || ''}`}
         aria-invalid={!!errorMessage}
diff --git a/packages/fields/src/widgets/SelectField.tsx b/packages/fields/src/widgets/SelectField.tsx
@@ -23,7 +23,7 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
       {...props}
       value={value} 
       onValueChange={onChange}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
     >
       <SelectTrigger className={props.className}>
         <SelectValue placeholder={config?.placeholder || "Select an option"} />
diff --git a/packages/fields/src/widgets/SliderField.tsx b/packages/fields/src/widgets/SliderField.tsx
@@ -30,7 +30,7 @@ export function SliderField({ value, onChange, field, readonly, ...props }: Fiel
         min={min}
         max={max}
         step={step}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         className={props.className}
       />
       <span className="text-sm font-medium w-12 text-right">{value ?? min}</span>
diff --git a/packages/fields/src/widgets/TextAreaField.tsx b/packages/fields/src/widgets/TextAreaField.tsx
@@ -22,7 +22,7 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={textareaField?.placeholder}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
         rows={rows}
         maxLength={maxLength}
         aria-invalid={!!errorMessage}
diff --git a/packages/fields/src/widgets/TextField.tsx b/packages/fields/src/widgets/TextField.tsx
@@ -4,7 +4,6 @@ import { TextareaFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
 export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
-  console.log('TextField props disabled:', (props as any).disabled, 'readonly:', readonly, 'field:', field ? 'yes' : 'no');
   const fieldData = field || (props as any).schema;
 
   if (readonly) {
@@ -21,7 +20,7 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={fieldData?.placeholder}
-        disabled={readonly}
+        disabled={readonly || props.disabled}
       />
     );
   }
diff --git a/packages/fields/src/widgets/TimeField.tsx b/packages/fields/src/widgets/TimeField.tsx
@@ -13,7 +13,7 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
       type="time"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
     />
   );
 }
diff --git a/packages/fields/src/widgets/UrlField.tsx b/packages/fields/src/widgets/UrlField.tsx
@@ -32,7 +32,7 @@ export function UrlField({ value, onChange, field, readonly, errorMessage, ...pr
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'https://example.com'}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/fields/src/widgets/types.ts b/packages/fields/src/widgets/types.ts
@@ -6,6 +6,8 @@ export type FieldWidgetProps<T = any> = {
   // Use a looser type for field to avoid complex circular dependencies for now
   field: FieldMetadata; 
   readonly?: boolean;
+  disabled?: boolean;
   className?: string;
   errorMessage?: string;
+  [key: string]: any;
 }
diff --git a/packages/plugin-form/src/ObjectForm.tsx b/packages/plugin-form/src/ObjectForm.tsx
@@ -169,12 +169,10 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
         generatedFields.push(customField);
       } else {
         // Auto-generate field from schema
-        const mappedType = mapFieldTypeToFormType(field.type);
-        if (fieldName === 'name') { console.log('DEBUG: Name field mapped to:', mappedType); }
         const formField: FormField = {
           name: fieldName,
           label: field.label || fieldName,
-          type: mappedType,
+          type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
           placeholder: field.placeholder,

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export function AvatarField({ value, onChange, field, readonly, ...props }: Fiel`
`96`	`96`	`variant="outline"`
`97`	`97`	`size="sm"`
`98`	`98`	`onClick={() => fileInputRef.current?.click()}`
`99`		`- disabled={readonly}`
	`99`	`+ disabled={readonly \|\| props.disabled}`
`100`	`100`	`>`
`101`	`101`	`<Upload className="w-4 h-4 mr-2" />`
`102`	`102`	`{value ? 'Change' : 'Upload'} Avatar`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW`
`13`	`13`	`type="date"`
`14`	`14`	`value={value \|\| ''}`
`15`	`15`	`onChange={(e) => onChange(e.target.value)}`
`16`		`- disabled={readonly}`
	`16`	`+ disabled={readonly \|\| props.disabled}`
`17`	`17`	`/>`
`18`	`18`	`);`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi`
`19`	`19`	`type="datetime-local"`
`20`	`20`	`value={value \|\| ''}`
`21`	`21`	`onChange={(e) => onChange(e.target.value)}`
`22`		`- disabled={readonly}`
	`22`	`+ disabled={readonly \|\| props.disabled}`
`23`	`23`	`/>`
`24`	`24`	`);`
`25`	`25`	`}`