From 5583c9cff545bc6843a02a039a392bf90b080b3f Mon Sep 17 00:00:00 2001 From: Thomas Dax Date: Fri, 10 Jan 2025 11:21:20 +0100 Subject: [PATCH] Allow passing a function as child to `BlocksFinalForm` (#3054) --- .changeset/honest-bananas-shout.md | 5 +++++ .changeset/mighty-vans-speak.md | 5 +++++ packages/admin/admin/src/FinalForm.tsx | 4 ++-- packages/admin/admin/src/index.ts | 1 + ...omponent.tsx => renderFinalFormChildren.tsx} | 2 +- .../admin/src/table/TableFilterFinalForm.tsx | 4 ++-- .../blocks-admin/src/form/BlocksFinalForm.tsx | 17 +++++++++++++---- 7 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 .changeset/honest-bananas-shout.md create mode 100644 .changeset/mighty-vans-speak.md rename packages/admin/admin/src/{finalFormRenderComponent.tsx => renderFinalFormChildren.tsx} (91%) diff --git a/.changeset/honest-bananas-shout.md b/.changeset/honest-bananas-shout.md new file mode 100644 index 0000000000..81b05daabe --- /dev/null +++ b/.changeset/honest-bananas-shout.md @@ -0,0 +1,5 @@ +--- +"@comet/admin": minor +--- + +Export `renderFinalFormChildren` helper diff --git a/.changeset/mighty-vans-speak.md b/.changeset/mighty-vans-speak.md new file mode 100644 index 0000000000..43180523b1 --- /dev/null +++ b/.changeset/mighty-vans-speak.md @@ -0,0 +1,5 @@ +--- +"@comet/blocks-admin": patch +--- + +Allow passing a function as child to `BlocksFinalForm` diff --git a/packages/admin/admin/src/FinalForm.tsx b/packages/admin/admin/src/FinalForm.tsx index 30e072bb56..37e9690373 100644 --- a/packages/admin/admin/src/FinalForm.tsx +++ b/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
- {renderComponent( + {renderFinalFormChildren( { children: props.children, component: props.component, diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 362cf69a91..12e3aee8ae 100644 --- a/packages/admin/admin/src/index.ts +++ b/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"; diff --git a/packages/admin/admin/src/finalFormRenderComponent.tsx b/packages/admin/admin/src/renderFinalFormChildren.tsx similarity index 91% rename from packages/admin/admin/src/finalFormRenderComponent.tsx rename to packages/admin/admin/src/renderFinalFormChildren.tsx index 0a3c4efe15..c8c375124b 100644 --- a/packages/admin/admin/src/finalFormRenderComponent.tsx +++ b/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, InitialFormValues = Partial>( +export function renderFinalFormChildren, InitialFormValues = Partial>( props: RenderableProps>, formRenderProps: FormRenderProps, ) { diff --git a/packages/admin/admin/src/table/TableFilterFinalForm.tsx b/packages/admin/admin/src/table/TableFilterFinalForm.tsx index 1db18819c1..ae51c859b1 100644 --- a/packages/admin/admin/src/table/TableFilterFinalForm.tsx +++ b/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 = Omit, "onSubmit" | "initialValues"> & { @@ -66,7 +66,7 @@ export class TableFilterFinalForm extends Component )} - {renderComponent(this.props, formRenderProps)} + {renderFinalFormChildren(this.props, formRenderProps)} diff --git a/packages/admin/blocks-admin/src/form/BlocksFinalForm.tsx b/packages/admin/blocks-admin/src/form/BlocksFinalForm.tsx index 95bad8cce2..122716ffc0 100644 --- a/packages/admin/blocks-admin/src/form/BlocksFinalForm.tsx +++ b/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 { onSubmit: FormProps["onSubmit"]; @@ -34,11 +34,20 @@ const finalFormContextValues: Omit = export function BlocksFinalForm({ onSubmit, children, ...rest }: FormProps): JSX.Element { return
; - function renderForm() { + function renderForm(props: FormRenderProps>) { return ( <> onSubmit={onSubmit} /> - {children} + + {renderFinalFormChildren( + { + children: children, + component: rest.component, + render: rest.render, + }, + props, + )} + ); }