Skip to content

Commit

Permalink
Merge pull request #6552 from marmelab/simplelist-recordcontext
Browse files Browse the repository at this point in the history 
Add record context in SimpleList
  • Loading branch information
@fzaninotto
fzaninotto authored Sep 3, 2021
2 parents e77755d + 6fa04ed commit c0cf7d6
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 61 deletions.
28 changes: 28 additions & 0 deletions docs/List.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2499,6 +2499,34 @@ export const PostList = (props) => (

For each record, `<SimpleList>` executes the `primaryText`, `secondaryText`, `linkType`, `rowStyle`, `leftAvatar`, `leftIcon`, `rightAvatar`, and `rightIcon` props functions, and creates a `<ListItem>` with the result.

The `primaryText`, `secondaryText` and `tertiaryText` functions can return a React element. This means you can use any react-admin field, including reference fields:

```jsx
// in src/posts.js
import * as React from "react";
import { List, SimpleList } from 'react-admin';

const postRowStyle = (record, index) => ({
backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
});

export const PostList = (props) => (
<List {...props}>
<SimpleList
primaryText={<TextField source="title" />}
secondaryText={record => `${record.views} views`}
tertiaryText={
<ReferenceField reference="categories" source="category_id">
<TextField source="name" />
</ReferenceField>
}
linkType={record => record.canEdit ? "edit" : "show"}
rowStyle={postRowStyle}
/>
</List>
);
```

**Tip**: To use a `<SimpleList>` on small screens and a `<Datagrid>` on larger screens, use material-ui's `useMediaQuery` hook:

```jsx
Expand Down
52 changes: 52 additions & 0 deletions packages/ra-ui-materialui/src/list/SimpleList.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import { render, waitFor, within } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { ListContext } from 'ra-core';

import SimpleList from './SimpleList';
import TextField from '../field/TextField';

const renderWithRouter = children => {
const history = createMemoryHistory();

return {
history,
...render(<Router history={history}>{children}</Router>),
};
};

describe('<SimpleList />', () => {
it('should render a list of items which provide a record context', async () => {
const { getByText } = renderWithRouter(
<ListContext.Provider
value={{
loaded: true,
loading: false,
ids: [1, 2],
data: {
1: { id: 1, title: 'foo' },
2: { id: 2, title: 'bar' },
},
total: 2,
resource: 'posts',
basePath: '/posts',
}}
>
<SimpleList
primaryText={record => record.id.toString()}
secondaryText={<TextField source="title" />}
/>
</ListContext.Provider>
);

await waitFor(() => {
expect(
within(getByText('1').closest('li')).queryByText('foo')
).not.toBeNull();
expect(
within(getByText('2').closest('li')).queryByText('bar')
).not.toBeNull();
});
});
});
147 changes: 86 additions & 61 deletions packages/ra-ui-materialui/src/list/SimpleList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { ReactNode, ReactElement } from 'react';
import { isValidElement, ReactNode, ReactElement } from 'react';
import PropTypes from 'prop-types';
import {
Avatar,
Expand All @@ -20,6 +20,7 @@ import {
Record,
RecordMap,
Identifier,
RecordContextProvider,
} from 'ra-core';

import SimpleListLoading from './SimpleListLoading';
Expand Down Expand Up @@ -121,62 +122,86 @@ const SimpleList = <RecordType extends Record = Record>(
total > 0 && (
<List className={className} {...sanitizeListRestProps(rest)}>
{ids.map((id, rowIndex) => (
<LinkOrNot
linkType={linkType}
basePath={basePath}
id={id}
key={id}
record={data[id]}
>
<ListItem
button={!!linkType as any}
style={
rowStyle
? rowStyle(data[id], rowIndex)
: undefined
}
>
{leftIcon && (
<ListItemIcon>
{leftIcon(data[id], id)}
</ListItemIcon>
)}
{leftAvatar && (
<ListItemAvatar>
{renderAvatar(id, leftAvatar)}
</ListItemAvatar>
)}
<ListItemText
primary={
<div>
{primaryText(data[id], id)}
{tertiaryText && (
<span className={classes.tertiary}>
{tertiaryText(data[id], id)}
</span>
)}
</div>
}
secondary={
secondaryText && secondaryText(data[id], id)
}
/>
{(rightAvatar || rightIcon) && (
<ListItemSecondaryAction>
{rightAvatar && (
<Avatar>
{renderAvatar(id, rightAvatar)}
</Avatar>
)}
{rightIcon && (
<RecordContextProvider key={id} value={data[id]}>
<li>
<LinkOrNot
linkType={linkType}
basePath={basePath}
id={id}
record={data[id]}
>
<ListItem
button={!!linkType as any}
style={
rowStyle
? rowStyle(data[id], rowIndex)
: undefined
}
>
{leftIcon && (
<ListItemIcon>
{rightIcon(data[id], id)}
{leftIcon(data[id], id)}
</ListItemIcon>
)}
</ListItemSecondaryAction>
)}
</ListItem>
</LinkOrNot>
{leftAvatar && (
<ListItemAvatar>
{renderAvatar(id, leftAvatar)}
</ListItemAvatar>
)}
<ListItemText
primary={
<div>
{isValidElement(primaryText)
? primaryText
: primaryText(data[id], id)}

{!!tertiaryText &&
(isValidElement(
tertiaryText
) ? (
tertiaryText
) : (
<span
className={
classes.tertiary
}
>
{tertiaryText(
data[id],
id
)}
</span>
))}
</div>
}
secondary={
!!secondaryText &&
(isValidElement(secondaryText)
? secondaryText
: secondaryText(data[id], id))
}
/>
{(rightAvatar || rightIcon) && (
<ListItemSecondaryAction>
{rightAvatar && (
<Avatar>
{renderAvatar(
id,
rightAvatar
)}
</Avatar>
)}
{rightIcon && (
<ListItemIcon>
{rightIcon(data[id], id)}
</ListItemIcon>
)}
</ListItemSecondaryAction>
)}
</ListItem>
</LinkOrNot>
</li>
</RecordContextProvider>
))}
</List>
)
Expand All @@ -193,18 +218,18 @@ SimpleList.propTypes = {
PropTypes.bool,
PropTypes.func,
]),
primaryText: PropTypes.func,
primaryText: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
rightAvatar: PropTypes.func,
rightIcon: PropTypes.func,
secondaryText: PropTypes.func,
tertiaryText: PropTypes.func,
secondaryText: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
tertiaryText: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
rowStyle: PropTypes.func,
};

export type FunctionToElement<RecordType extends Record = Record> = (
record: RecordType,
id: Identifier
) => ReactElement | string;
) => ReactNode;

export interface SimpleListProps<RecordType extends Record = Record>
extends Omit<ListProps, 'classes'> {
Expand All @@ -213,12 +238,12 @@ export interface SimpleListProps<RecordType extends Record = Record>
hasBulkActions?: boolean;
leftAvatar?: FunctionToElement<RecordType>;
leftIcon?: FunctionToElement<RecordType>;
primaryText?: FunctionToElement<RecordType>;
primaryText?: FunctionToElement<RecordType> | ReactElement;
linkType?: string | FunctionLinkType | boolean;
rightAvatar?: FunctionToElement<RecordType>;
rightIcon?: FunctionToElement<RecordType>;
secondaryText?: FunctionToElement<RecordType>;
tertiaryText?: FunctionToElement<RecordType>;
secondaryText?: FunctionToElement<RecordType> | ReactElement;
tertiaryText?: FunctionToElement<RecordType> | ReactElement;
rowStyle?: (record: Record, index: number) => any;
// can be injected when using the component without context
basePath?: string;
Expand Down

0 comments on commit c0cf7d6

Please sign in to comment.