Skip to content

Commit aa639d9

Browse files
djhidjhi
authored
Merge pull request #5252 from ValentinnDimitroff/simple-list-rowStyle
Added rowStyle prop to SimpleList
2 parents 50ba45c + 36f236c commit aa639d9

File tree

4 files changed

+33
-19
lines changed

4 files changed

+33
-19
lines changed

‎cypress/cypress.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,5 @@
88
"videosFolder": "videos",
99
"viewportWidth": 1280,
1010
"viewportHeight": 720,
11-
"blockHosts": [
12-
"source.unsplash.com"
13-
]
14-
}
11+
"blockHosts": ["source.unsplash.com"]
12+
}

‎cypress/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@
1111
"cypress": "^5.1.0",
1212
"cypress-skip-and-only-ui": "^1.2.7"
1313
}
14-
}
14+
}

‎docs/List.md

+18-12
Original file line numberDiff line numberDiff line change
@@ -2213,17 +2213,18 @@ For mobile devices, a `<Datagrid>` is often unusable - there is simply not enoug
22132213

22142214
### Properties
22152215

2216-
| Prop | Required | Type | Default | Description |
2217-
| --------------- | -------- | ----------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
2218-
| `primaryText` | Required | `Function` | - | Passed as `<ListItemText primary>` prop |
2219-
| `secondaryText` | Optional | `Function` | - | Passed as `<ListItemText secondary>` prop |
2220-
| `tertiaryText` | Optional | `Function` | - | Passed as a complement to `<ListItemText primary>` with a custom style |
2221-
| `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. |
2222-
| `leftAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` before the `<ListItemText>` |
2223-
| `leftIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` before the `<ListItemText>` |
2224-
| `rightAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` after the `<ListItemText>` |
2225-
| `rightIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` after the `<ListItemText>` |
2226-
| `className` | Optional | `string` | - | Applied to the root element |
2216+
| Prop | Required | Type | Default | Description
2217+
| --------------- | -------- | ----------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
2218+
| `primaryText` | Required | `Function` | - | Passed as `<ListItemText primary>` prop |
2219+
| `secondaryText` | Optional | `Function` | - | Passed as `<ListItemText secondary>` prop |
2220+
| `tertiaryText` | Optional | `Function` | - | Passed as a complement to `<ListItemText primary>` with a custom style |
2221+
| `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. |
2222+
| `leftAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` before the `<ListItemText>` |
2223+
| `leftIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` before the `<ListItemText>` |
2224+
| `rightAvatar` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListItemAvatar>` after the `<ListItemText>` |
2225+
| `rightIcon` | Optional | `Function` | - | When present, the `<ListItem>` renders a `<ListIcon>` after the `<ListItemText>` |
2226+
| `className` | Optional | `string` | - | Applied to the root element |
2227+
| `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.|
22272228

22282229
### Usage
22292230

@@ -2234,19 +2235,24 @@ You can use `<SimpleList>` as `<List>` or `<ReferenceManyField>` child:
22342235
import * as React from "react";
22352236
import { List, SimpleList } from 'react-admin';
22362237

2238+
const postRowStyle = (record, index) => ({
2239+
backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
2240+
});
2241+
22372242
export const PostList = (props) => (
22382243
<List {...props}>
22392244
<SimpleList
22402245
primaryText={record => record.title}
22412246
secondaryText={record => `${record.views} views`}
22422247
tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
22432248
linkType={record => record.canEdit ? "edit" : "show"}
2249+
rowStyle={postRowStyle}
22442250
/>
22452251
</List>
22462252
);
22472253
```
22482254

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

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

‎packages/ra-ui-materialui/src/list/SimpleList.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const SimpleList: FC<SimpleListProps> = props => {
7474
rightIcon,
7575
secondaryText,
7676
tertiaryText,
77+
rowStyle,
7778
...rest
7879
} = props;
7980
const { basePath, data, ids, loaded, total } = useListContext(props);
@@ -95,15 +96,22 @@ const SimpleList: FC<SimpleListProps> = props => {
9596
return (
9697
total > 0 && (
9798
<List className={className} {...sanitizeListRestProps(rest)}>
98-
{ids.map(id => (
99+
{ids.map((id, rowIndex) => (
99100
<LinkOrNot
100101
linkType={linkType}
101102
basePath={basePath}
102103
id={id}
103104
key={id}
104105
record={data[id]}
105106
>
106-
<ListItem button={!!linkType as any}>
107+
<ListItem
108+
button={!!linkType as any}
109+
style={
110+
rowStyle
111+
? rowStyle(data[id], rowIndex)
112+
: undefined
113+
}
114+
>
107115
{leftIcon && (
108116
<ListItemIcon>
109117
{leftIcon(data[id], id)}
@@ -166,6 +174,7 @@ SimpleList.propTypes = {
166174
rightIcon: PropTypes.func,
167175
secondaryText: PropTypes.func,
168176
tertiaryText: PropTypes.func,
177+
rowStyle: PropTypes.func,
169178
};
170179

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

190200
const useLinkOrNotStyles = makeStyles(

0 commit comments

Comments
 (0)