Allow passing a function as child to BlocksFinalForm (#3054)

.changeset/honest-bananas-shout.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Export `renderFinalFormChildren` helper

.changeset/mighty-vans-speak.md

@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Allow passing a function as child to `BlocksFinalForm`

packages/admin/admin/src/FinalForm.tsx

@@ -5,9 +5,9 @@ import { MutableRefObject, PropsWithChildren, useCallback, useContext, useEffect
 import { AnyObject, Form, FormRenderProps, FormSpy, RenderableProps } from "react-final-form";
 import { useIntl } from "react-intl";
 
-import { renderComponent } from "./finalFormRenderComponent";
 import { FinalFormContext, FinalFormContextProvider } from "./form/FinalFormContextProvider";
 import { messages } from "./messages";
+import { renderFinalFormChildren } from "./renderFinalFormChildren";
 import { RouterPrompt } from "./router/Prompt";
 import { useSubRoutePrefix } from "./router/SubRoute";
 import { Savable, useSaveBoundaryApi } from "./saveBoundary/SaveBoundary";
@@ -217,7 +217,7 @@ export function FinalForm<FormValues = AnyObject, InitialFormValues = Partial<Fo
                 <RouterPromptIf formApi={formRenderProps.form} doSave={doSave} subRoutePath={subRoutePath}>
                     <form onSubmit={submit}>
                         <div>
-                            {renderComponent<FormValues, InitialFormValues>(
+                            {renderFinalFormChildren<FormValues, InitialFormValues>(
                                 {
                                     children: props.children,
                                     component: props.component,

packages/admin/admin/src/index.ts

@@ -210,6 +210,7 @@ export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRout
 export { Menu, MenuProps } from "./mui/menu/Menu";
 export { MenuClassKey } from "./mui/menu/Menu.styles";
 export { MuiThemeProvider } from "./mui/ThemeProvider";
+export { renderFinalFormChildren } from "./renderFinalFormChildren";
 export { RouterBrowserRouter } from "./router/BrowserRouter";
 export { RouterConfirmationDialog, RouterConfirmationDialogClassKey, RouterConfirmationDialogProps } from "./router/ConfirmationDialog";
 export { RouterContext } from "./router/Context";

packages/admin/admin/src/finalFormRenderComponent.tsx → packages/admin/admin/src/renderFinalFormChildren.tsx

@@ -2,7 +2,7 @@ import { createElement } from "react";
 import { FormRenderProps, RenderableProps } from "react-final-form";
 
 // Render children like final-form does.
-export function renderComponent<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
+export function renderFinalFormChildren<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
     props: RenderableProps<FormRenderProps<FormValues, InitialFormValues>>,
     formRenderProps: FormRenderProps<FormValues, InitialFormValues>,
 ) {

packages/admin/admin/src/table/TableFilterFinalForm.tsx

@@ -5,7 +5,7 @@ import { Component, ReactNode } from "react";
 import { Form, FormProps, FormRenderProps } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
-import { renderComponent } from "../finalFormRenderComponent";
+import { renderFinalFormChildren } from "../renderFinalFormChildren";
 import { IFilterApi } from "./useTableQueryFilter";
 
 type Props<FilterValues = AnyObject> = Omit<FormProps<FilterValues>, "onSubmit" | "initialValues"> & {
@@ -66,7 +66,7 @@ export class TableFilterFinalForm<FilterValues = AnyObject> extends Component<Pr
                         </Grid>
                     )}
                     <Grid item xs={12}>
-                        {renderComponent(this.props, formRenderProps)}
+                        {renderFinalFormChildren(this.props, formRenderProps)}
                     </Grid>
                 </Grid>
             </form>

packages/admin/blocks-admin/src/form/BlocksFinalForm.tsx

@@ -1,5 +1,5 @@
-import { FinalFormContextProvider, FinalFormContextProviderProps } from "@comet/admin";
-import { AnyObject, Form, FormProps, FormSpy } from "react-final-form";
+import { FinalFormContextProvider, FinalFormContextProviderProps, renderFinalFormChildren } from "@comet/admin";
+import { AnyObject, Form, FormProps, FormRenderProps, FormSpy } from "react-final-form";
 
 interface AutoSaveSpyProps<FormValues> {
     onSubmit: FormProps<FormValues>["onSubmit"];
@@ -34,11 +34,20 @@ const finalFormContextValues: Omit<FinalFormContextProviderProps, "children"> =
 export function BlocksFinalForm<FormValues = AnyObject>({ onSubmit, children, ...rest }: FormProps<FormValues>): JSX.Element {
     return <Form {...rest} render={renderForm} onSubmit={noop} />;
 
-    function renderForm() {
+    function renderForm(props: FormRenderProps<FormValues, Partial<FormValues>>) {
         return (
             <>
                 <AutosaveSpy<FormValues> onSubmit={onSubmit} />
-                <FinalFormContextProvider {...finalFormContextValues}>{children}</FinalFormContextProvider>
+                <FinalFormContextProvider {...finalFormContextValues}>
+                    {renderFinalFormChildren(
+                        {
+                            children: children,
+                            component: rest.component,
+                            render: rest.render,
+                        },
+                        props,
+                    )}
+                </FinalFormContextProvider>
             </>
         );
     }