1719: Makes rowRenderer configurable

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/fields/FieldWrap.tsx

@@ -17,31 +17,27 @@ import { FormRow } from './FormRow';
 
 interface FieldWrapProps {
     pydanticFormField: PydanticFormField;
-    fieldState: ControllerFieldState;
     children: React.ReactNode;
 }
 
-export const FieldWrap = ({
-    pydanticFormField,
-    fieldState,
-    children,
-}: FieldWrapProps) => {
-    const { errorDetails } = usePydanticFormContext();
-
+export const FieldWrap = ({ pydanticFormField, children }: FieldWrapProps) => {
+    const { errorDetails, rhf, config } = usePydanticFormContext();
+    const RowRenderer = config?.rowRenderer ? config.rowRenderer : FormRow;
+    const fieldState = rhf.getFieldState(pydanticFormField.id);
     const errorMsg =
         errorDetails?.mapped?.[pydanticFormField.id]?.msg ??
         fieldState.error?.message;
     const isInvalid = errorMsg ?? fieldState.invalid;
 
     return (
-        <FormRow
+        <RowRenderer
             title={pydanticFormField.title}
             description={pydanticFormField.description}
             required={pydanticFormField.required}
             isInvalid={!!isInvalid}
             error={errorMsg as string}
         >
             <div>{children}</div>
-        </FormRow>
+        </RowRenderer>
     );
 };

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -67,7 +67,9 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
 
     return (
         <form action={''} onSubmit={submitForm}>
-            {title !== false && <h2>{title ?? pydanticFormSchema.title}</h2>}
+            {title !== false && title !== 'undefined' && (
+                <h2>{title ?? pydanticFormSchema.title}</h2>
+            )}
 
             {headerComponent}
 

frontend/packages/pydantic-forms/src/core/WrapFieldElement.tsx

@@ -18,7 +18,7 @@ export const WrapFieldElement = ({
         <Controller
             name={pydanticFormField.id}
             control={rhf.control}
-            render={({ field, fieldState }) => {
+            render={({ field }) => {
                 const { onChange, onBlur, value, name, ref } = field;
                 const onChangeHandle = (val: string) => {
                     onChange(val);
@@ -30,10 +30,7 @@ export const WrapFieldElement = ({
                 };
 
                 return (
-                    <FieldWrap
-                        pydanticFormField={pydanticFormField}
-                        fieldState={fieldState}
-                    >
+                    <FieldWrap pydanticFormField={pydanticFormField}>
                         <PydanticFormControlledElement
                             onChange={onChangeHandle}
                             onBlur={onBlur}

frontend/packages/pydantic-forms/src/types.ts

@@ -249,6 +249,15 @@ export type PydanticFormZodValidationFn = (
     rhf?: ReturnType<typeof useForm>,
 ) => z.ZodTypeAny;
 
+export type RowRenderer = React.JSXElementConstructor<{
+    title: string;
+    description?: string;
+    required?: boolean;
+    isInvalid?: boolean;
+    error?: string;
+    children: React.ReactNode;
+}>;
+
 export interface PydanticFormZodValidationPresets {
     [type: string]: PydanticFormZodValidationFn;
 }
@@ -286,6 +295,7 @@ export interface PydanticFormsContextConfig {
 
     formRenderer?: FormRenderer;
     footerRenderer?: React.JSXElementConstructor<object>;
+    rowRenderer?: RowRenderer;
 
     // Extend field definitions
     fieldDetailProvider?: PydanticFormFieldDetailProvider;