feat: support Component and Element as actions prop

marmelab · Feb 21, 2025 · 63ddf92 · 63ddf92
1 parent bb92631
commit 63ddf92
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/list/List.stories.tsx b/packages/ra-ui-materialui/src/list/List.stories.tsx
@@ -169,7 +169,7 @@ export const Basic = () => (
     </TestMemoryRouter>
 );
 
-export const Actions = () => (
+export const ActionsElement = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <Admin dataProvider={defaultDataProvider}>
             <Resource
@@ -190,6 +190,23 @@ export const Actions = () => (
     </TestMemoryRouter>
 );
 
+const Actions = () => <Box sx={{ backgroundColor: 'info.main' }}>Actions</Box>;
+
+export const ActionsComponent = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <Admin dataProvider={defaultDataProvider}>
+            <Resource
+                name="books"
+                list={() => (
+                    <List actions={Actions}>
+                        <BookList />
+                    </List>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 export const Filters = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <Admin dataProvider={defaultDataProvider}>

diff --git a/packages/ra-ui-materialui/src/list/ListView.tsx b/packages/ra-ui-materialui/src/list/ListView.tsx
@@ -1,16 +1,23 @@
 import * as React from 'react';
+import {
+    ComponentType,
+    ElementType,
+    ReactElement,
+    ReactNode,
+    isValidElement,
+} from 'react';
+import Card from '@mui/material/Card';
 import { styled } from '@mui/material/styles';
-import { ReactElement, ReactNode, ElementType } from 'react';
 import { SxProps } from '@mui/system';
-import Card from '@mui/material/Card';
 import clsx from 'clsx';
-import { useListContext, RaRecord } from 'ra-core';
+import { RaRecord, useListContext } from 'ra-core';
 
 import { Title } from '../layout/Title';
+import { Empty } from './Empty';
+import { ListActions as DefaultActions } from './ListActions';
 import { ListToolbar } from './ListToolbar';
 import { Pagination as DefaultPagination } from './pagination';
-import { ListActions as DefaultActions } from './ListActions';
-import { Empty } from './Empty';
+import { isValidElementType } from 'react-is';
 
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
@@ -55,7 +62,7 @@ export const ListView = <RecordType extends RaRecord = any>(
                 <ListToolbar
                     className={ListClasses.actions}
                     filters={filters}
-                    actions={actions}
+                    actions={getElement(actions)}
                 />
             )}
             <Content className={ListClasses.content}>{children}</Content>
@@ -97,6 +104,25 @@ export const ListView = <RecordType extends RaRecord = any>(
     );
 };
 
+const getElement = (
+    ElementOrComponent: React.ComponentType<any> | ReactElement | false
+) => {
+    if (ElementOrComponent === false) {
+        return;
+    }
+
+    if (isValidElement(ElementOrComponent)) {
+        console.log(`We have an element`);
+        return ElementOrComponent;
+    }
+
+    if (isValidElementType(ElementOrComponent)) {
+        console.log(`We have a component`);
+        const Element = ElementOrComponent as ComponentType<any>;
+        return <Element />;
+    }
+};
+
 export interface ListViewProps {
     /**
      * The actions to display in the toolbar. defaults to Filter + Create + Export.
@@ -131,7 +157,7 @@ export interface ListViewProps {
      *     </List>
      * );
      */
-    actions?: ReactElement | false;
+    actions?: ReactElement | React.ComponentType | false;
 
     /**
      * The content to render as a sidebar.