Skip to content

Commit

Permalink
Merge pull request #5252 from ValentinnDimitroff/simple-list-rowStyle
Browse files Browse the repository at this point in the history 
Added rowStyle prop to SimpleList
  • Loading branch information
@djhi
djhi committed Oct 19, 2020
2 parents 50ba45c + 36f236c commit aa639d9
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 19 deletions.
6 changes: 2 additions & 4 deletions cypress/cypress.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,5 @@
"videosFolder": "videos",
"viewportWidth": 1280,
"viewportHeight": 720,
"blockHosts": [
"source.unsplash.com"
]
}
"blockHosts": ["source.unsplash.com"]
}
2 changes: 1 addition & 1 deletion cypress/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@
"cypress": "^5.1.0",
"cypress-skip-and-only-ui": "^1.2.7"
}
}
}
30 changes: 18 additions & 12 deletions docs/List.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2213,17 +2213,18 @@ For mobile devices, a `<Datagrid>` is often unusable - there is simply not enoug

### Properties

| Prop | Required | Type | Default | Description |
| --------------- | -------- | ----------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `primaryText` | Required | `Function` | - | Passed as `<ListItemText primary>` prop |
| `secondaryText` | Optional | `Function` | - | Passed as `<ListItemText secondary>` prop |
| `tertiaryText` | Optional | `Function` | - | Passed as a complement to `<ListItemText primary>` with a custom style |
| `linkType` | Optional | `string` &#124; `Function` &#124; `false` | `edit` | Target of the `<ListItem>` link. Set to `false` to disable the link. Set to a function `(record, id) => string` to have the link target vary per record. |
| `leftAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` before the `<ListItemText>` |
| `leftIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` before the `<ListItemText>` |
| `rightAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` after the `<ListItemText>` |
| `rightIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` after the `<ListItemText>` |
| `className` | Optional | `string` | - | Applied to the root element |
| Prop | Required | Type | Default | Description
| --------------- | -------- | ----------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `primaryText` | Required | `Function` | - | Passed as `<ListItemText primary>` prop |
| `secondaryText` | Optional | `Function` | - | Passed as `<ListItemText secondary>` prop |
| `tertiaryText` | Optional | `Function` | - | Passed as a complement to `<ListItemText primary>` with a custom style |
| `linkType` | Optional | `string` &#124; `Function` &#124; `false` | `edit` | Target of the `<ListItem>` link. Set to `false` to disable the link. Set to a function `(record, id) => string` to have the link target vary per record. |
| `leftAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` before the `<ListItemText>` |
| `leftIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` before the `<ListItemText>` |
| `rightAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` after the `<ListItemText>` |
| `rightIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` after the `<ListItemText>` |
| `className` | Optional | `string` | - | Applied to the root element |
| `rowStyle` | Optional | `Function` | - | Applied to the `<ListItem>` styles prop. The function get's called for each row. Receives the current record and index as arguments and should return a style object.|

### Usage

Expand All @@ -2234,19 +2235,24 @@ You can use `<SimpleList>` as `<List>` or `<ReferenceManyField>` child:
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={record => record.title}
secondaryText={record => `${record.views} views`}
tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
linkType={record => record.canEdit ? "edit" : "show"}
rowStyle={postRowStyle}
/>
</List>
);
```

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

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

Expand Down
14 changes: 12 additions & 2 deletions packages/ra-ui-materialui/src/list/SimpleList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const SimpleList: FC<SimpleListProps> = props => {
rightIcon,
secondaryText,
tertiaryText,
rowStyle,
...rest
} = props;
const { basePath, data, ids, loaded, total } = useListContext(props);
Expand All @@ -95,15 +96,22 @@ const SimpleList: FC<SimpleListProps> = props => {
return (
total > 0 && (
<List className={className} {...sanitizeListRestProps(rest)}>
{ids.map(id => (
{ids.map((id, rowIndex) => (
<LinkOrNot
linkType={linkType}
basePath={basePath}
id={id}
key={id}
record={data[id]}
>
<ListItem button={!!linkType as any}>
<ListItem
button={!!linkType as any}
style={
rowStyle
? rowStyle(data[id], rowIndex)
: undefined
}
>
{leftIcon && (
<ListItemIcon>
{leftIcon(data[id], id)}
Expand Down Expand Up @@ -166,6 +174,7 @@ SimpleList.propTypes = {
rightIcon: PropTypes.func,
secondaryText: PropTypes.func,
tertiaryText: PropTypes.func,
rowStyle: PropTypes.func,
};

export type FunctionToElement = (
Expand All @@ -185,6 +194,7 @@ export interface SimpleListProps extends Omit<ListProps, 'classes'> {
rightIcon?: FunctionToElement;
secondaryText?: FunctionToElement;
tertiaryText?: FunctionToElement;
rowStyle?: (record: Record, index: number) => any;
}

const useLinkOrNotStyles = makeStyles(
Expand Down

0 comments on commit aa639d9

Please sign in to comment.