Add render prop page and reference MUI components

[ThieryMichel]

follow #10832

Problem

When doing custom UI, having to read the ListContext forces to create a separate component, or to use 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:

• List
• Edit
• Create
• Show
• InfiniteList
• ReferenceField
• ReferenceManyField
• ReferenceArrayField
• ReferenceOneField
  Add stories and documentation for these props.

Excluded (not necessary):

• SingleFieldList

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.