common fields

react-openapi/components/fields/DefaultFieldComponents.ts

@@ -6,6 +6,7 @@ import DateField from './DateField';
 import EnumField from './EnumField';
 import RelationField from './RelationField';
 import ImageUploadField from './ImageUploadField';
+import FallbackField from './FallbackField';
 
 export const defaultFieldComponents: FieldComponents = {
   string: TextFieldEntry,
@@ -17,4 +18,5 @@ export const defaultFieldComponents: FieldComponents = {
   enum: EnumField,
   image: ImageUploadField,
   relation: RelationField,
+  default: FallbackField,
 };

react-openapi/components/fields/FallbackField.tsx

@@ -0,0 +1,13 @@
+import { TextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function FallbackField({ field, value }: FieldComponentProps) {
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
+      disabled
+    />
+  );
+}

react-openapi/components/fields/FormField.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { TextField as MuiTextField } from '@mui/material';
 import { ResourceField } from '../../types/config';
 import { FieldComponentProps, FieldComponents } from '../../types/overrides';
-import { defaultFieldComponents } from './DefaultFieldComponents';
 import ObjectField from './ObjectField';
-import ImageUploadField from './ImageUploadField';
 
-interface FormFieldProps {
+export interface FormFieldProps {
   name: string;
   field: ResourceField;
   value: any;
@@ -16,18 +13,7 @@ interface FormFieldProps {
   uploading: boolean;
   baseUrl: string;
   relationDataMap?: Record<string, any[]>;
-  components?: FieldComponents;
-}
-
-function FallbackField({ field, value }: FieldComponentProps) {
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
-      disabled
-    />
-  );
+  components: FieldComponents;
 }
 
 export default function FormField({
@@ -40,13 +26,8 @@ export default function FormField({
   uploading,
   baseUrl,
   relationDataMap = {},
-  components: componentsProp,
+  components,
 }: FormFieldProps) {
-  const components = React.useMemo(
-    () => ({ ...defaultFieldComponents, ...componentsProp }),
-    [componentsProp],
-  );
-
   const fieldProps: FieldComponentProps = {
     name,
     field,
@@ -59,6 +40,8 @@ export default function FormField({
     uploading,
   };
 
+  const childComponents = components;
+
   // 1. Object (recursive) - requires parent FormField for recursion
   if (field.type === 'object' && field.schema && !field.relation) {
     const renderChild = (childProps: FieldComponentProps) => (
@@ -72,7 +55,7 @@ export default function FormField({
         uploading={childProps.uploading!}
         baseUrl={childProps.baseUrl!}
         relationDataMap={childProps.relationDataMap}
-        components={componentsProp}
+        components={components}
       />
     );
     return <ObjectField {...fieldProps} renderField={renderChild} />;
@@ -80,22 +63,23 @@ export default function FormField({
 
   // 2. Image
   if (field.type === 'image') {
-    const ImageField = components.image || ImageUploadField;
+    const ImageField = components.image;
+    if (!ImageField) return null;
     return <ImageField {...fieldProps} />;
   }
 
   // 3. Relation
   if (field.relation && relationDataMap[field.relation]) {
-    const RelationFieldComp = components.relation || defaultFieldComponents.relation!;
+    const RelationFieldComp = components.relation;
+    if (!RelationFieldComp) return null;
     return <RelationFieldComp {...fieldProps} />;
   }
 
   // 4. Lookup by field type
-  const Component = components[field.type];
+  const Component = components[field.type] || components.default;
   if (Component) {
     return <Component {...fieldProps} />;
   }
 
-  // 5. Fallback for unknown types
-  return <FallbackField {...fieldProps} />;
+  return null;
 }

react-openapi/components/fields/index.ts

@@ -7,5 +7,6 @@ export { default as DateField } from './DateField';
 export { default as EnumField } from './EnumField';
 export { default as RelationField } from './RelationField';
 export { default as ObjectField } from './ObjectField';
+export { default as FallbackField } from './FallbackField';
 export { defaultFieldComponents } from './DefaultFieldComponents';
 export type { ObjectFieldProps } from './ObjectField';