Skip to content

Commit 6c269cd

Browse files
author
smeng9
committed
fix display issue after deprecating list item secondary action
1 parent 82e32a2 commit 6c269cd

File tree

6 files changed

+95
-118
lines changed

6 files changed

+95
-118
lines changed

‎examples/crm/src/companies/CompanyShow.tsx‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -142,22 +142,7 @@ const ContactsIterator = () => {
142142
<List dense sx={{ pt: 0 }}>
143143
{contacts.map(contact => (
144144
<RecordContextProvider key={contact.id} value={contact}>
145-
<ListItem
146-
disablePadding
147-
secondaryAction={
148-
contact.last_seen ? (
149-
<Typography
150-
variant="body2"
151-
color="textSecondary"
152-
component="span"
153-
>
154-
last activity{' '}
155-
{formatDistance(contact.last_seen, now)} ago{' '}
156-
<Status status={contact.status} />
157-
</Typography>
158-
) : null
159-
}
160-
>
145+
<ListItem disablePadding>
161146
<ListItemButton
162147
component={RouterLink}
163148
to={`/contacts/${contact.id}/show`}
@@ -183,6 +168,17 @@ const ContactsIterator = () => {
183168
</>
184169
}
185170
/>
171+
{contact.last_seen && (
172+
<Typography
173+
variant="body2"
174+
color="textSecondary"
175+
component="span"
176+
>
177+
last activity{' '}
178+
{formatDistance(contact.last_seen, now)} ago{' '}
179+
<Status status={contact.status} />
180+
</Typography>
181+
)}
186182
</ListItemButton>
187183
</ListItem>
188184
</RecordContextProvider>
@@ -217,20 +213,7 @@ const DealsIterator = () => {
217213
<Box>
218214
<List dense>
219215
{deals.map(deal => (
220-
<ListItem
221-
key={deal.id}
222-
disablePadding
223-
secondaryAction={
224-
<Typography
225-
variant="body2"
226-
color="textSecondary"
227-
component="span"
228-
>
229-
last activity{' '}
230-
{formatDistance(deal.updated_at, now)} ago{' '}
231-
</Typography>
232-
}
233-
>
216+
<ListItem key={deal.id} disablePadding>
234217
<ListItemButton
235218
component={RouterLink}
236219
to={`/deals/${deal.id}/show`}
@@ -253,6 +236,14 @@ const DealsIterator = () => {
253236
</>
254237
}
255238
/>
239+
<Typography
240+
variant="body2"
241+
color="textSecondary"
242+
component="span"
243+
>
244+
last activity{' '}
245+
{formatDistance(deal.updated_at, now)} ago{' '}
246+
</Typography>
256247
</ListItemButton>
257248
</ListItem>
258249
))}

‎examples/crm/src/contacts/ContactListContent.tsx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,7 @@ export const ContactListContent = () => {
4949
<List dense>
5050
{contacts.map(contact => (
5151
<RecordContextProvider key={contact.id} value={contact}>
52-
<ListItem
53-
disablePadding
54-
secondaryAction={
55-
contact.last_seen ? (
56-
<Typography
57-
variant="body2"
58-
color="textSecondary"
59-
title={contact.last_seen}
60-
sx={{
61-
top: '10px',
62-
transform: 'none',
63-
}}
64-
>
65-
{!isSmall && 'last activity '}
66-
{formatRelative(
67-
contact.last_seen,
68-
now
69-
)}{' '}
70-
<Status status={contact.status} />
71-
</Typography>
72-
) : null
73-
}
74-
>
52+
<ListItem disablePadding>
7553
<ListItemButton
7654
component={Link}
7755
to={`/contacts/${contact.id}/show`}
@@ -122,6 +100,24 @@ export const ContactListContent = () => {
122100
</>
123101
}
124102
/>
103+
{contact.last_seen && (
104+
<Typography
105+
variant="body2"
106+
color="textSecondary"
107+
title={contact.last_seen}
108+
sx={{
109+
top: '10px',
110+
transform: 'none',
111+
}}
112+
>
113+
{!isSmall && 'last activity '}
114+
{formatRelative(
115+
contact.last_seen,
116+
now
117+
)}{' '}
118+
<Status status={contact.status} />
119+
</Typography>
120+
)}
125121
</ListItemButton>
126122
</ListItem>
127123
</RecordContextProvider>

‎examples/demo/src/dashboard/PendingOrder.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,7 @@ export const PendingOrder = (props: Props) => {
2525
});
2626

2727
return (
28-
<ListItem
29-
disablePadding
30-
secondaryAction={
31-
<Box
32-
component="span"
33-
sx={{
34-
marginRight: '1em',
35-
color: 'text.primary',
36-
}}
37-
>
38-
{order.total}$
39-
</Box>
40-
}
41-
>
28+
<ListItem disablePadding>
4229
<ListItemButton component={Link} to={`/orders/${order.id}`}>
4330
<ListItemAvatar>
4431
{isPending ? (
@@ -61,6 +48,15 @@ export const PendingOrder = (props: Props) => {
6148
: '',
6249
})}
6350
/>
51+
<Box
52+
component="span"
53+
sx={{
54+
marginRight: '1em',
55+
color: 'text.primary',
56+
}}
57+
>
58+
{order.total}$
59+
</Box>
6460
</ListItemButton>
6561
</ListItem>
6662
);

‎examples/simple/src/tags/TagList.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
List,
1313
ListItem,
1414
ListItemText,
15+
ListItemSecondaryAction,
1516
Collapse,
1617
Card,
1718
Stack,
@@ -62,7 +63,7 @@ const Tree = () => {
6263
getChildNodes={getChildNodes}
6364
openChildren={openChildren}
6465
toggleNode={toggleNode}
65-
level={1}
66+
level={0}
6667
/>
6768
))}
6869
</List>
@@ -77,7 +78,9 @@ const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
7778
<Fragment>
7879
<ListItem
7980
disablePadding
80-
sx={{ paddingLeft: level * 16 }}
81+
sx={theme => ({
82+
paddingLeft: theme.spacing(level * 2),
83+
})}
8184
secondaryAction={<EditButton record={root} />}
8285
>
8386
<ListItemButton onClick={() => hasChildren && toggleNode(root)}>

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

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Avatar,
3+
Box,
34
List,
45
ListItemAvatar,
56
ListItemIcon,
@@ -124,33 +125,13 @@ export const SimpleList = <RecordType extends RaRecord = any>(
124125
rowSx={rowSx}
125126
rowStyle={rowStyle}
126127
resource={resource}
127-
secondaryAction={
128-
rightAvatar || rightIcon ? (
129-
<>
130-
{rightAvatar && (
131-
<Avatar>
132-
{renderAvatar(
133-
record,
134-
rightAvatar
135-
)}
136-
</Avatar>
137-
)}
138-
{rightIcon && (
139-
<ListItemIcon>
140-
{rightIcon(
141-
record,
142-
record.id
143-
)}
144-
</ListItemIcon>
145-
)}
146-
</>
147-
) : null
148-
}
149128
>
150129
<SimpleListItemContent
151130
leftAvatar={leftAvatar}
152131
leftIcon={leftIcon}
153132
primaryText={primaryText}
133+
rightAvatar={rightAvatar}
134+
rightIcon={rightIcon}
154135
secondaryText={secondaryText}
155136
tertiaryText={tertiaryText}
156137
rowIndex={rowIndex}
@@ -182,13 +163,35 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
182163
const SimpleListItemContent = <RecordType extends RaRecord = any>(
183164
props: SimpleListItemProps<RecordType>
184165
) => {
185-
const { leftAvatar, leftIcon, primaryText, secondaryText, tertiaryText } =
186-
props;
166+
const {
167+
leftAvatar,
168+
leftIcon,
169+
primaryText,
170+
rightAvatar,
171+
rightIcon,
172+
secondaryText,
173+
tertiaryText,
174+
} = props;
187175
const resource = useResourceContext(props);
188176
const record = useRecordContext<RecordType>(props);
189177
const getRecordRepresentation = useGetRecordRepresentation(resource);
190178
const translate = useTranslate();
191179

180+
const renderAvatar = (
181+
record: RecordType,
182+
avatarCallback: FunctionToElement<RecordType>
183+
) => {
184+
const avatarValue = avatarCallback(record, record.id);
185+
if (
186+
typeof avatarValue === 'string' &&
187+
(avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
188+
) {
189+
return <Avatar src={avatarValue} />;
190+
} else {
191+
return <Avatar>{avatarValue}</Avatar>;
192+
}
193+
};
194+
192195
if (!record) return null;
193196

194197
return (
@@ -247,25 +250,22 @@ const SimpleListItemContent = <RecordType extends RaRecord = any>(
247250
secondaryText(record, record.id))
248251
}
249252
/>
253+
{(rightAvatar || rightIcon) && (
254+
<Box>
255+
{rightAvatar && (
256+
<Avatar>{renderAvatar(record, rightAvatar)}</Avatar>
257+
)}
258+
{rightIcon && (
259+
<ListItemIcon>
260+
{rightIcon(record, record.id)}
261+
</ListItemIcon>
262+
)}
263+
</Box>
264+
)}
250265
</>
251266
);
252267
};
253268

254-
const renderAvatar = <RecordType extends RaRecord = any>(
255-
record: RecordType,
256-
avatarCallback: FunctionToElement<RecordType>
257-
) => {
258-
const avatarValue = avatarCallback(record, record.id);
259-
if (
260-
typeof avatarValue === 'string' &&
261-
(avatarValue.startsWith('http') || avatarValue.startsWith('data:'))
262-
) {
263-
return <Avatar src={avatarValue} />;
264-
} else {
265-
return <Avatar>{avatarValue}</Avatar>;
266-
}
267-
};
268-
269269
const PREFIX = 'RaSimpleList';
270270

271271
export const SimpleListClasses = {

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,7 @@ import { RowClickFunction } from '../types';
1717
export const SimpleListItem = <RecordType extends RaRecord = any>(
1818
props: SimpleListItemProps<RecordType>
1919
) => {
20-
const {
21-
children,
22-
linkType,
23-
rowClick,
24-
rowIndex,
25-
rowSx,
26-
rowStyle,
27-
secondaryAction,
28-
} = props;
20+
const { children, linkType, rowClick, rowIndex, rowSx, rowStyle } = props;
2921
const resource = useResourceContext(props);
3022
const record = useRecordContext<RecordType>(props);
3123
const navigate = useNavigate();
@@ -72,7 +64,6 @@ export const SimpleListItem = <RecordType extends RaRecord = any>(
7264
width: '100%',
7365
},
7466
}}
75-
secondaryAction={secondaryAction}
7667
>
7768
<ListItemButton
7869
onClick={handleClick}

0 commit comments

Comments
 (0)