feat: support Component and Element for List props #10539
+236
−47
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -22,6 +22,9 @@ import { | |||||||||||||
| PartialPagination, | ||||||||||||||
| Default, | ||||||||||||||
| SelectAllLimit, | ||||||||||||||
| TitleComponent, | ||||||||||||||
| ActionsElement, | ||||||||||||||
| ActionsComponent, | ||||||||||||||
| } from './List.stories'; | ||||||||||||||
|
|
||||||||||||||
| const theme = createTheme(defaultTheme); | ||||||||||||||
|
|
@@ -112,6 +115,25 @@ describe('<List />', () => { | |||||||||||||
| expect(screen.queryAllByText('Hello')).toHaveLength(1); | ||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| it('should display aside component with ComponentType', () => { | ||||||||||||||
| const Dummy = () => <div />; | ||||||||||||||
| const Aside = () => <div id="aside">Hello</div>; | ||||||||||||||
| render( | ||||||||||||||
| <CoreAdminContext | ||||||||||||||
| dataProvider={testDataProvider({ | ||||||||||||||
| getList: () => Promise.resolve({ data: [], total: 0 }), | ||||||||||||||
| })} | ||||||||||||||
| > | ||||||||||||||
| <ThemeProvider theme={theme}> | ||||||||||||||
| <List resource="posts" aside={Aside}> | ||||||||||||||
| <Dummy /> | ||||||||||||||
| </List> | ||||||||||||||
| </ThemeProvider> | ||||||||||||||
| </CoreAdminContext> | ||||||||||||||
| ); | ||||||||||||||
| expect(screen.queryAllByText('Hello')).toHaveLength(1); | ||||||||||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| describe('empty', () => { | ||||||||||||||
| it('should render an invite when the list is empty', async () => { | ||||||||||||||
| const Dummy = () => { | ||||||||||||||
|
|
@@ -197,6 +219,36 @@ describe('<List />', () => { | |||||||||||||
| }); | ||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| it('should render custom empty component when data is empty with ComponentType', async () => { | ||||||||||||||
| const Dummy = () => null; | ||||||||||||||
| const CustomEmpty = () => <div>Custom Empty</div>; | ||||||||||||||
|
|
||||||||||||||
| const dataProvider = { | ||||||||||||||
| getList: jest.fn(() => | ||||||||||||||
| Promise.resolve({ | ||||||||||||||
| data: [], | ||||||||||||||
| pageInfo: { | ||||||||||||||
| hasNextPage: false, | ||||||||||||||
| hasPreviousPage: false, | ||||||||||||||
| }, | ||||||||||||||
| }) | ||||||||||||||
| ), | ||||||||||||||
| } as any; | ||||||||||||||
| render( | ||||||||||||||
| <CoreAdminContext dataProvider={dataProvider}> | ||||||||||||||
| <ThemeProvider theme={theme}> | ||||||||||||||
| <List resource="posts" empty={CustomEmpty}> | ||||||||||||||
| <Dummy /> | ||||||||||||||
| </List> | ||||||||||||||
| </ThemeProvider> | ||||||||||||||
| </CoreAdminContext> | ||||||||||||||
| ); | ||||||||||||||
| await waitFor(() => { | ||||||||||||||
| expect(screen.queryByText('resources.posts.empty')).toBeNull(); | ||||||||||||||
| screen.getByText('Custom Empty'); | ||||||||||||||
| }); | ||||||||||||||
|
Comment on lines
+246
to
+249
There was a problem hiding this comment.
Suggested change
|
||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| it('should not render an invite when a filter is active', async () => { | ||||||||||||||
| const Dummy = () => { | ||||||||||||||
| const { isPending } = useListContext(); | ||||||||||||||
|
|
@@ -336,6 +388,12 @@ describe('<List />', () => { | |||||||||||||
| screen.getByText('Custom list title'); | ||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| it('should render custom title component when defined', async () => { | ||||||||||||||
| render(<TitleComponent />); | ||||||||||||||
| await screen.findByText('War and Peace (1869)'); | ||||||||||||||
| screen.getByText('Custom list title'); | ||||||||||||||
| }); | ||||||||||||||
|
|
||||||||||||||
| it('should not render default title when false', async () => { | ||||||||||||||
| render(<TitleFalse />); | ||||||||||||||
| await screen.findByText('War and Peace (1869)'); | ||||||||||||||
|
|
@@ -486,4 +544,16 @@ describe('<List />', () => { | |||||||||||||
| ); | ||||||||||||||
| }); | ||||||||||||||
| }); | ||||||||||||||
| describe('Custom actions', () => { | ||||||||||||||
| it('should render custom actions with ReactElement', async () => { | ||||||||||||||
| render(<ActionsElement />); | ||||||||||||||
| await screen.findByText('War and Peace (1869)'); | ||||||||||||||
| screen.getByText('Actions'); | ||||||||||||||
| }); | ||||||||||||||
| it('should render custom actions with ComponentType', async () => { | ||||||||||||||
| render(<ActionsComponent />); | ||||||||||||||
| await screen.findByText('War and Peace (1869)'); | ||||||||||||||
| screen.getByText('Actions'); | ||||||||||||||
| }); | ||||||||||||||
| }); | ||||||||||||||
| }); | ||||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import * as React from 'react'; | ||
| import { Admin, AutocompleteInput, Pagination } from 'react-admin'; | ||
|
There was a problem hiding this comment. linter warning at this line |
||
| import { | ||
| CustomRoutes, | ||
| Resource, | ||
|
|
@@ -10,6 +10,8 @@ | |
| import fakeRestDataProvider from 'ra-data-fakerest'; | ||
| import { Box, Card, Typography, Button, Link as MuiLink } from '@mui/material'; | ||
|
|
||
| import { Empty as DefaultEmpty } from './Empty'; | ||
| import { Pagination as DefaultPagination } from './pagination'; | ||
| import { List } from './List'; | ||
| import { SimpleList } from './SimpleList'; | ||
| import { ListActions } from './ListActions'; | ||
|
|
@@ -169,7 +171,7 @@ | |
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const ActionsElement = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
|
|
@@ -190,6 +192,23 @@ | |
| </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}> | ||
|
|
@@ -267,6 +286,23 @@ | |
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| const TitleSpan = () => <span>Custom list title</span>; | ||
|
|
||
| export const TitleComponent = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
| name="books" | ||
| list={() => ( | ||
| <List title={TitleSpan}> | ||
| <BookList /> | ||
| </List> | ||
| )} | ||
| /> | ||
| </Admin> | ||
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const TitleFalse = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
|
|
@@ -297,15 +333,30 @@ | |
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| const AsideBlock = () => <Card sx={{ padding: 2 }}>Aside</Card>; | ||
|
|
||
| export const AsideElement = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
| name="books" | ||
| list={() => ( | ||
| <List aside={<AsideBlock />}> | ||
| <BookList /> | ||
| </List> | ||
| )} | ||
| /> | ||
| </Admin> | ||
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const AsideComponent = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
| name="books" | ||
| list={() => ( | ||
| <List aside={AsideBlock}> | ||
| <BookList /> | ||
| </List> | ||
| )} | ||
|
|
@@ -387,6 +438,22 @@ | |
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const EmptyComponent = () => ( | ||
| <TestMemoryRouter initialEntries={['/authors']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
| name="authors" | ||
| list={() => ( | ||
| <List empty={DefaultEmpty}> | ||
| <span /> | ||
| </List> | ||
| )} | ||
| create={() => <span />} | ||
| /> | ||
| </Admin> | ||
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const EmptyPartialPagination = () => ( | ||
| <TestMemoryRouter initialEntries={['/authors']}> | ||
| <Admin | ||
|
|
@@ -415,6 +482,21 @@ | |
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const PaginationComponent = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
| <Resource | ||
| name="books" | ||
| list={() => ( | ||
| <List pagination={DefaultPagination}> | ||
| <BookList /> | ||
| </List> | ||
| )} | ||
| /> | ||
| </Admin> | ||
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const SX = () => ( | ||
| <TestMemoryRouter initialEntries={['/books']}> | ||
| <Admin dataProvider={defaultDataProvider}> | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thought: I'd be tempted to use the component syntax in the example above (since it's shorter and offers better performances), and simply mention that
actionalso accepts the other typesBut on the other hand, it may be odd to encourage this syntax only for the
Listcomponent (since it's the only one we support for now...)So I'm hesitating.
Same remark applies to other props below.
@fzaninotto @djhi wdyt?