Add ability to define filters as an array of Inputs

[fzaninotto]

Problem

<ListActions> is hard to override, partly because of the filter button/form combo. The <Filter> element renders twice, which isn't a common practice, and creates a few problems.

Refs #6212

Solution

Allow <List filters> to be an array of inputs instead of a React element.

-const PostFilter = props => (
-    <Filter {...props}>
-        <SearchInput source="q" alwaysOn />
-        <TextInput
-            source="title"
-            defaultValue="Qui tempore rerum et voluptates"
-        />
-        <QuickFilter
-            label="resources.posts.fields.commentable"
-            source="commentable"
-            defaultValue
-        />
-    </Filter>
-);
+const postFilters = [
+    <SearchInput source="q" alwaysOn />,
+    <TextInput source="title" defaultValue="Qui tempore rerum et voluptates" />,
+    <QuickFilter
+        label="resources.posts.fields.commentable"
+        source="commentable"
+        defaultValue
+    />,
+];

const PostList = props => {
         <List
             {...props}
             bulkActionButtons={<PostListBulkActions />}
-            filters={<PostFilter />}
+            filters={postFilters}
             sort={{ field: 'published_at', order: 'DESC' }}
             exporter={exporter}
         >

This allows to put the filters in a context, and to use <FilterForm> and <FilterButton> directly:

const  ListActions = () => (
    <TopToolbar>
        <FilterButton />
        <CreateButton />
        <ExportButton />
    </TopToolbar>
);

• Add support for array filters in <List>
• Write tests
• Update documentation

The change is backwards compatible: <Filter> continues to exist and still works as before.

[fzaninotto]

Switching to RFR

[djhi]

Awesome! I remember having eslint issues about missing keys with the array syntax for the <Resource> though.

[fzaninotto]

@djhi I have had no eslint warning, and GitHub doesn't show any... Would you have a reproducible case?

[djhi]

Nope, it was just something I remembered while working with the <Resource> in a render function. All good then!