Add render prop to page and reference base components

[ThieryMichel]

Problem

When doing custom UI, having to read the RecordContext or ListContext forces to create a separate component, or to use WithRecord and WithListContext. For really custom UIs, it feels like an unnecessary indirection.

const PagesList = () => (
   <List>
       <ul>
           <WithListContext render={({ data }) =>
               data.map(page => (
                   <li key={page.id}>
                       <Link to={page.url}>{page.title}</Link>
                   </li>
               ))
           } />
       </ul>
   </List>
);

Solution

Support a render prop that renders inside the created context, but also passes the context as argument.

const PagesList = () => (
   <List render={({ data }) =>
      <ul>{data.map(page => (
            <li key={page.id}>
               <Link to={page.url}>{page.title}</Link>
            </li>
      ))}</ul>} />
   </List>
);

This prop is optional. When absent, the component falls back to using children .

Concerned components:

• ListBase (supersedes ListController)
• InfiniteListBase
• EditBase(supersedes EditController)
• CreateBase (supersedes CreateController)
• ShowBase (supersedes ShowController)
• ReferenceFieldBase
• ReferenceManyFieldBase
• ReferenceArrayFieldBase (to be introduced)
• ReferenceOneFieldBase

Add stories and documentation for these props.

Out of scope

• ReferenceXXXInput components
• RA Mui components
• EE components
• ListIterator / SingleFieldListBase (cf (1) Add a headless version of SingleFieldList In development 🔥)

How To Test

Describe the steps required to test the changes

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

Also, please make sure to read the contributing guidelines.