Skip to content

Commit 96ade81

Browse files
slax57slax57
authored
Merge pull request #11033 from smeng9/remove-deprecated-secondary-action
migrate deprecated `<ListItemSecondaryAction />`
2 parents 0d01604 + fdbc39c commit 96ade81

File tree

9 files changed

+86
-92
lines changed

9 files changed

+86
-92
lines changed

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

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
ListItem,
99
ListItemAvatar,
1010
ListItemButton,
11-
ListItemSecondaryAction,
1211
ListItemText,
1312
Stack,
1413
Typography,
@@ -170,17 +169,15 @@ const ContactsIterator = () => {
170169
}
171170
/>
172171
{contact.last_seen && (
173-
<ListItemSecondaryAction>
174-
<Typography
175-
variant="body2"
176-
color="textSecondary"
177-
component="span"
178-
>
179-
last activity{' '}
180-
{formatDistance(contact.last_seen, now)}{' '}
181-
ago <Status status={contact.status} />
182-
</Typography>
183-
</ListItemSecondaryAction>
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>
184181
)}
185182
</ListItemButton>
186183
</ListItem>
@@ -239,16 +236,14 @@ const DealsIterator = () => {
239236
</>
240237
}
241238
/>
242-
<ListItemSecondaryAction>
243-
<Typography
244-
variant="body2"
245-
color="textSecondary"
246-
component="span"
247-
>
248-
last activity{' '}
249-
{formatDistance(deal.updated_at, now)} ago{' '}
250-
</Typography>
251-
</ListItemSecondaryAction>
239+
<Typography
240+
variant="body2"
241+
color="textSecondary"
242+
component="span"
243+
>
244+
last activity{' '}
245+
{formatDistance(deal.updated_at, now)} ago{' '}
246+
</Typography>
252247
</ListItemButton>
253248
</ListItem>
254249
))}

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
ListItemButton,
77
ListItemAvatar,
88
ListItemIcon,
9-
ListItemSecondaryAction,
109
ListItemText,
1110
Typography,
1211
useMediaQuery,
@@ -102,25 +101,22 @@ export const ContactListContent = () => {
102101
}
103102
/>
104103
{contact.last_seen && (
105-
<ListItemSecondaryAction
104+
<Typography
105+
variant="body2"
106+
color="textSecondary"
107+
title={contact.last_seen}
106108
sx={{
107109
top: '10px',
108110
transform: 'none',
109111
}}
110112
>
111-
<Typography
112-
variant="body2"
113-
color="textSecondary"
114-
title={contact.last_seen}
115-
>
116-
{!isSmall && 'last activity '}
117-
{formatRelative(
118-
contact.last_seen,
119-
now
120-
)}{' '}
121-
<Status status={contact.status} />
122-
</Typography>
123-
</ListItemSecondaryAction>
113+
{!isSmall && 'last activity '}
114+
{formatRelative(
115+
contact.last_seen,
116+
now
117+
)}{' '}
118+
<Status status={contact.status} />
119+
</Typography>
124120
)}
125121
</ListItemButton>
126122
</ListItem>

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import {
33
ListItem,
4-
ListItemSecondaryAction,
54
ListItemAvatar,
65
ListItemText,
76
Avatar,
@@ -49,17 +48,15 @@ export const PendingOrder = (props: Props) => {
4948
: '',
5049
})}
5150
/>
52-
<ListItemSecondaryAction>
53-
<Box
54-
component="span"
55-
sx={{
56-
marginRight: '1em',
57-
color: 'text.primary',
58-
}}
59-
>
60-
{order.total}$
61-
</Box>
62-
</ListItemSecondaryAction>
51+
<Box
52+
component="span"
53+
sx={{
54+
marginRight: '1em',
55+
color: 'text.primary',
56+
}}
57+
>
58+
{order.total}$
59+
</Box>
6360
</ListItemButton>
6461
</ListItem>
6562
);

‎examples/demo/src/reviews/ReviewItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const ReviewItem = () => {
7272
</Fragment>
7373
}
7474
secondary={record.comment}
75-
secondaryTypographyProps={{ noWrap: true }}
75+
slotProps={{ secondary: { noWrap: true } }}
7676
/>
7777
</ListItemButton>
7878
</ListItem>

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
List,
1313
ListItem,
1414
ListItemText,
15-
ListItemSecondaryAction,
1615
Collapse,
1716
Card,
1817
Stack,
@@ -63,7 +62,7 @@ const Tree = () => {
6362
getChildNodes={getChildNodes}
6463
openChildren={openChildren}
6564
toggleNode={toggleNode}
66-
level={1}
65+
level={0}
6766
/>
6867
))}
6968
</List>
@@ -76,16 +75,18 @@ const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
7675
const open = openChildren.includes(root.id);
7776
return (
7877
<Fragment>
79-
<ListItem disablePadding style={{ paddingLeft: level * 16 }}>
78+
<ListItem
79+
disablePadding
80+
sx={theme => ({
81+
paddingLeft: theme.spacing(level * 2),
82+
})}
83+
secondaryAction={<EditButton record={root} />}
84+
>
8085
<ListItemButton onClick={() => hasChildren && toggleNode(root)}>
8186
{hasChildren && open && <ExpandLess />}
8287
{hasChildren && !open && <ExpandMore />}
8388
{!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
8489
<ListItemText primary={root.name.en} />
85-
86-
<ListItemSecondaryAction>
87-
<EditButton record={root} />
88-
</ListItemSecondaryAction>
8990
</ListItemButton>
9091
</ListItem>
9192
<Collapse in={open} timeout="auto" unmountOnExit>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {
22
Avatar,
3+
Box,
34
List,
45
ListItemAvatar,
56
ListItemIcon,
6-
ListItemSecondaryAction,
77
ListItemText,
88
ListProps,
99
} from '@mui/material';
@@ -251,7 +251,7 @@ const SimpleListItemContent = <RecordType extends RaRecord = any>(
251251
}
252252
/>
253253
{(rightAvatar || rightIcon) && (
254-
<ListItemSecondaryAction>
254+
<Box>
255255
{rightAvatar && (
256256
<Avatar>{renderAvatar(record, rightAvatar)}</Avatar>
257257
)}
@@ -260,7 +260,7 @@ const SimpleListItemContent = <RecordType extends RaRecord = any>(
260260
{rightIcon(record, record.id)}
261261
</ListItemIcon>
262262
)}
263-
</ListItemSecondaryAction>
263+
</Box>
264264
)}
265265
</>
266266
);

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
type ListProps,
1111
ListItem,
1212
ListItemAvatar,
13-
ListItemSecondaryAction,
1413
ListItemText,
1514
} from '@mui/material';
1615
import { useTimeout } from 'ra-core';
@@ -37,7 +36,12 @@ export const SimpleListLoading = (inProps: SimpleListLoadingProps) => {
3736
return oneSecondHasPassed ? (
3837
<StyledList className={className} {...rest}>
3938
{times(nbFakeLines, key => (
40-
<ListItem key={key}>
39+
<ListItem
40+
key={key}
41+
secondaryAction={
42+
hasRightAvatarOrIcon ? <Avatar>&nbsp;</Avatar> : null
43+
}
44+
>
4145
{hasLeftAvatarOrIcon && (
4246
<ListItemAvatar>
4347
<Avatar>&nbsp;</Avatar>
@@ -64,11 +68,6 @@ export const SimpleListLoading = (inProps: SimpleListLoadingProps) => {
6468
hasSecondaryText ? <Placeholder /> : undefined
6569
}
6670
/>
67-
{hasRightAvatarOrIcon && (
68-
<ListItemSecondaryAction>
69-
<Avatar>&nbsp;</Avatar>
70-
</ListItemSecondaryAction>
71-
)}
7271
</ListItem>
7372
))}
7473
</StyledList>

‎packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
ListItemIcon,
1414
type ListItemProps,
1515
ListItemText,
16-
ListItemSecondaryAction,
1716
} from '@mui/material';
1817
import CancelIcon from '@mui/icons-material/CancelOutlined';
1918
import {
@@ -174,9 +173,25 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
174173
const handleClick = () => setFilters(toggleFilter(value, filterValues));
175174

176175
return (
177-
<StyledListItem disablePadding {...rest}>
176+
<StyledListItem
177+
disablePadding
178+
disableGutters
179+
secondaryAction={
180+
isSelected ? (
181+
<IconButton
182+
size="small"
183+
onClick={event => {
184+
event.stopPropagation();
185+
handleClick();
186+
}}
187+
>
188+
<CancelIcon />
189+
</IconButton>
190+
) : null
191+
}
192+
{...rest}
193+
>
178194
<ListItemButton
179-
disableGutters
180195
onClick={handleClick}
181196
selected={isSelected}
182197
className={FilterListItemClasses.listItemButton}
@@ -197,18 +212,6 @@ export const FilterListItem = memo((inProps: FilterListItemProps) => {
197212
className={FilterListItemClasses.listItemText}
198213
data-selected={isSelected ? 'true' : 'false'}
199214
/>
200-
{isSelected && (
201-
<ListItemSecondaryAction
202-
onClick={event => {
203-
event.stopPropagation();
204-
handleClick();
205-
}}
206-
>
207-
<IconButton size="small">
208-
<CancelIcon />
209-
</IconButton>
210-
</ListItemSecondaryAction>
211-
)}
212215
</ListItemButton>
213216
</StyledListItem>
214217
);

‎packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
ListItemButton,
77
type ListItemProps,
88
ListItemText,
9-
ListItemSecondaryAction,
109
styled,
1110
type ComponentsOverrides,
1211
useThemeProps,
@@ -69,24 +68,28 @@ export const SavedQueryFilterListItem = memo(
6968
isSelected ? removeFilter() : addFilter();
7069

7170
return (
72-
<StyledListItem className={className} sx={sx} disablePadding>
71+
<StyledListItem
72+
className={className}
73+
sx={sx}
74+
disablePadding
75+
disableGutters
76+
secondaryAction={
77+
isSelected ? (
78+
<IconButton size="small" onClick={toggleFilter}>
79+
<CancelIcon />
80+
</IconButton>
81+
) : null
82+
}
83+
>
7384
<ListItemButton
7485
onClick={toggleFilter}
7586
selected={isSelected}
76-
disableGutters
7787
className={SavedQueryFilterListItemClasses.listItemButton}
7888
>
7989
<ListItemText
8090
primary={label}
8191
className={SavedQueryFilterListItemClasses.listItemText}
8292
/>
83-
{isSelected && (
84-
<ListItemSecondaryAction>
85-
<IconButton size="small" onClick={toggleFilter}>
86-
<CancelIcon />
87-
</IconButton>
88-
</ListItemSecondaryAction>
89-
)}
9093
</ListItemButton>
9194
</StyledListItem>
9295
);

0 commit comments

Comments
 (0)