Merge pull request #5165 from marmelab/allows-list-empty-page-disabling

Allows List Empty Page Disabling
marmelab · Aug 19, 2020 · 3eb2e3d · 3eb2e3d
2 parents 4abaeeb + e4842ce
commit 3eb2e3d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -683,6 +683,18 @@ The `empty` component can call the `useListContext()` hook to receive the same p
 -   `total`,
 -   `version`,
 
+You can also set the `empty` props value to `false` to bypass the empty page display and render an empty list instead.
+
+```
+import { List } from 'react-admin';
+
+const ProductList = props => (
+    <List empty={false} {...props}>
+        ...
+    </List>
+);
+```
+
 ### Component
 
 By default, the List view renders the main content area inside a material-ui `<Card>` element. The actual layout of the list depends on the child component you're using (`<Datagrid>`, `<SimpleList>`, or a custom layout component).

diff --git a/packages/ra-ui-materialui/src/list/List.spec.js b/packages/ra-ui-materialui/src/list/List.spec.js
@@ -108,6 +108,26 @@ describe('<List />', () => {
         });
     });
 
+    it('should not render an invite when the list is empty with an empty prop set to false', async () => {
+        const Dummy = () => <div />;
+        const dataProvider = {
+            getList: jest.fn(() => Promise.resolve({ data: [], total: 0 })),
+        };
+        const { queryAllByText } = renderWithRedux(
+            <ThemeProvider theme={theme}>
+                <DataProviderContext.Provider value={dataProvider}>
+                    <List {...defaultProps} empty={false}>
+                        <Dummy />
+                    </List>
+                </DataProviderContext.Provider>
+            </ThemeProvider>,
+            defaultStateForList
+        );
+        await wait(() => {
+            expect(queryAllByText('resources.posts.empty')).toHaveLength(0);
+        });
+    });
+
     it('should not render an invite when a filter is active', async () => {
         const Dummy = () => <div />;
         const dataProvider = {

diff --git a/packages/ra-ui-materialui/src/list/ListView.tsx b/packages/ra-ui-materialui/src/list/ListView.tsx
@@ -100,7 +100,7 @@ export const ListView: FC<ListViewProps> = props => {
             {...sanitizeRestProps(rest)}
         >
             <Title title={title} defaultTitle={defaultTitle} />
-            {shouldRenderEmptyPage
+            {shouldRenderEmptyPage && empty !== false
                 ? cloneElement(empty, listContext)
                 : renderList()}
         </div>

diff --git a/packages/ra-ui-materialui/src/types.ts b/packages/ra-ui-materialui/src/types.ts
@@ -27,7 +27,7 @@ export interface ListProps extends ResourceComponentProps {
     classes?: any;
     className?: string;
     component?: FC<{ className?: string }>;
-    empty?: ReactElement;
+    empty?: ReactElement | false;
     exporter?: Exporter | false;
     filter?: any;
     filterDefaultValues?: any;