Support render prop

Author: djhi

packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx

@@ -15,7 +15,11 @@ import {
     ReferenceArrayInputBase,
     ReferenceArrayInputBaseProps,
 } from './ReferenceArrayInputBase';
-import { ChoicesProps, useChoicesContext } from '../../form';
+import {
+    ChoicesContextValue,
+    ChoicesProps,
+    useChoicesContext,
+} from '../../form';
 import { useGetRecordRepresentation } from '../..';
 
 export default { title: 'ra-core/controller/ReferenceArrayInputBase' };
@@ -51,8 +55,15 @@ const i18nProvider = polyglotI18nProvider(() => englishMessages);
 const CheckboxGroupInput = (
     props: Omit<InputProps, 'source'> & ChoicesProps
 ) => {
-    const { allChoices, isPending, error, resource, source, total } =
-        useChoicesContext(props);
+    const choicesContext = useChoicesContext(props);
+
+    return <CheckboxGroupInputBase {...props} {...choicesContext} />;
+};
+
+const CheckboxGroupInputBase = (
+    props: Omit<InputProps, 'source'> & ChoicesProps & ChoicesContextValue
+) => {
+    const { allChoices, isPending, error, resource, source, total } = props;
     const input = useInput({ ...props, source });
     const getRecordRepresentation = useGetRecordRepresentation(resource);
 
@@ -141,6 +152,53 @@ Basic.argTypes = {
     meta: { control: 'boolean' },
 };
 
+export const WithRender = ({
+    dataProvider = defaultDataProvider,
+    meta,
+    ...props
+}: Partial<ReferenceArrayInputBaseProps> & {
+    dataProvider?: DataProvider;
+    meta?: boolean;
+}) => (
+    <TestMemoryRouter initialEntries={['/posts/create']}>
+        <CoreAdmin dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <Resource
+                name="posts"
+                create={
+                    <CreateBase resource="posts" record={{ tags_ids: [1, 3] }}>
+                        <h1>Create Post</h1>
+                        <Form>
+                            <ReferenceArrayInputBase
+                                reference="tags"
+                                resource="posts"
+                                source="tags_ids"
+                                queryOptions={
+                                    meta ? { meta: { foo: 'bar' } } : {}
+                                }
+                                {...props}
+                                render={context => (
+                                    <CheckboxGroupInputBase
+                                        {...context}
+                                        source="tags_ids"
+                                    />
+                                )}
+                            />
+                        </Form>
+                    </CreateBase>
+                }
+            />
+        </CoreAdmin>
+    </TestMemoryRouter>
+);
+
+WithRender.args = {
+    meta: false,
+};
+
+WithRender.argTypes = {
+    meta: { control: 'boolean' },
+};
+
 export const WithError = () => (
     <TestMemoryRouter initialEntries={['/posts/create']}>
         <CoreAdmin

packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx

@@ -7,6 +7,7 @@ import {
 import { ResourceContextProvider } from '../../core/ResourceContextProvider';
 import { ChoicesContextProvider } from '../../form/choices/ChoicesContextProvider';
 import { RaRecord } from '../../types';
+import { ChoicesContextValue } from '../../form';
 
 /**
  * An Input component for fields containing a list of references to another resource.
@@ -78,13 +79,19 @@ import { RaRecord } from '../../types';
 export const ReferenceArrayInputBase = <RecordType extends RaRecord = any>(
     props: ReferenceArrayInputBaseProps<RecordType>
 ) => {
-    const { children, reference, sort, filter = defaultFilter } = props;
-    if (React.Children.count(children) !== 1) {
+    const { children, filter = defaultFilter, reference, render, sort } = props;
+    if (children && React.Children.count(children) !== 1) {
         throw new Error(
             '<ReferenceArrayInputBase> only accepts a single child (like <Datagrid>)'
         );
     }
 
+    if (!render && !children) {
+        throw new Error(
+            "<EditBase> requires either a 'render' prop or 'children' prop"
+        );
+    }
+
     const controllerProps = useReferenceArrayInputController({
         ...props,
         sort,
@@ -94,7 +101,7 @@ export const ReferenceArrayInputBase = <RecordType extends RaRecord = any>(
     return (
         <ResourceContextProvider value={reference}>
             <ChoicesContextProvider value={controllerProps}>
-                {children}
+                {render ? render(controllerProps) : children}
             </ChoicesContextProvider>
         </ResourceContextProvider>
     );
@@ -105,5 +112,6 @@ const defaultFilter = {};
 export interface ReferenceArrayInputBaseProps<RecordType extends RaRecord = any>
     extends InputProps,
         UseReferenceArrayInputParams<RecordType> {
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    render?: (context: ChoicesContextValue<RecordType>) => React.ReactNode;
 }