Skip to content

Commit c68a5d3

Browse files
djhidjhi
committed
Add support for MUI v6
1 parent 8d6fd0e commit c68a5d3

File tree

29 files changed

+440
-389
lines changed

29 files changed

+440
-389
lines changed

‎examples/crm/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"type": "module",
66
"dependencies": {
77
"@hello-pangea/dnd": "^16.3.0",
8-
"@mui/icons-material": "^5.16.12",
9-
"@mui/material": "^5.16.12",
8+
"@mui/icons-material": "^6.0.0",
9+
"@mui/material": "^6.0.0",
1010
"@nivo/bar": "^0.80.0",
1111
"@nivo/core": "^0.80.0",
1212
"clsx": "^2.1.1",

‎examples/crm/src/activity/ActivityLogDealNoteCreated.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Typography from '@mui/material/Typography';
1+
import { Typography } from '@mui/material';
22
import { ReferenceField } from 'react-admin';
33

44
import { CompanyAvatar } from '../companies/CompanyAvatar';

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

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
List,
88
ListItem,
99
ListItemAvatar,
10+
ListItemButton,
1011
ListItemSecondaryAction,
1112
ListItemText,
1213
Stack,
@@ -142,43 +143,46 @@ const ContactsIterator = () => {
142143
<List dense sx={{ pt: 0 }}>
143144
{contacts.map(contact => (
144145
<RecordContextProvider key={contact.id} value={contact}>
145-
<ListItem
146-
button
147-
component={RouterLink}
148-
to={`/contacts/${contact.id}/show`}
149-
state={{ from: location.pathname }}
150-
>
151-
<ListItemAvatar>
152-
<Avatar />
153-
</ListItemAvatar>
154-
<ListItemText
155-
primary={`${contact.first_name} ${contact.last_name}`}
156-
secondary={
157-
<>
158-
{contact.title}
159-
{contact.nb_tasks
160-
? ` - ${contact.nb_tasks} task${
161-
contact.nb_tasks > 1 ? 's' : ''
162-
}`
163-
: ''}
164-
&nbsp; &nbsp;
165-
<TagsList />
166-
</>
167-
}
168-
/>
169-
{contact.last_seen && (
170-
<ListItemSecondaryAction>
171-
<Typography
172-
variant="body2"
173-
color="textSecondary"
174-
component="span"
175-
>
176-
last activity{' '}
177-
{formatDistance(contact.last_seen, now)} ago{' '}
178-
<Status status={contact.status} />
179-
</Typography>
180-
</ListItemSecondaryAction>
181-
)}
146+
<ListItem disablePadding>
147+
<ListItemButton
148+
component={RouterLink}
149+
to={`/contacts/${contact.id}/show`}
150+
state={{ from: location.pathname }}
151+
>
152+
<ListItemAvatar>
153+
<Avatar />
154+
</ListItemAvatar>
155+
<ListItemText
156+
primary={`${contact.first_name} ${contact.last_name}`}
157+
secondary={
158+
<>
159+
{contact.title}
160+
{contact.nb_tasks
161+
? ` - ${contact.nb_tasks} task${
162+
contact.nb_tasks > 1
163+
? 's'
164+
: ''
165+
}`
166+
: ''}
167+
&nbsp; &nbsp;
168+
<TagsList />
169+
</>
170+
}
171+
/>
172+
{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>
184+
)}
185+
</ListItemButton>
182186
</ListItem>
183187
</RecordContextProvider>
184188
))}

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

Lines changed: 72 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Checkbox,
55
List,
66
ListItem,
7+
ListItemButton,
78
ListItemAvatar,
89
ListItemIcon,
910
ListItemSecondaryAction,
@@ -50,76 +51,79 @@ export const ContactListContent = () => {
5051
<List dense>
5152
{contacts.map(contact => (
5253
<RecordContextProvider key={contact.id} value={contact}>
53-
<ListItem
54-
button
55-
component={Link}
56-
to={`/contacts/${contact.id}/show`}
57-
>
58-
<ListItemIcon sx={{ minWidth: '2.5em' }}>
59-
<Checkbox
60-
edge="start"
61-
checked={selectedIds.includes(contact.id)}
62-
tabIndex={-1}
63-
disableRipple
64-
onClick={e => {
65-
e.stopPropagation();
66-
onToggleItem(contact.id);
67-
}}
68-
/>
69-
</ListItemIcon>
70-
<ListItemAvatar>
71-
<Avatar />
72-
</ListItemAvatar>
73-
<ListItemText
74-
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
75-
secondary={
76-
<>
77-
{contact.title}
78-
{contact.title &&
79-
contact.company_id != null &&
80-
' at '}
81-
{contact.company_id != null && (
82-
<ReferenceField
83-
source="company_id"
84-
reference="companies"
85-
link={false}
86-
>
87-
<TextField source="name" />
88-
</ReferenceField>
54+
<ListItem disablePadding>
55+
<ListItemButton
56+
component={Link}
57+
to={`/contacts/${contact.id}/show`}
58+
>
59+
<ListItemIcon sx={{ minWidth: '2.5em' }}>
60+
<Checkbox
61+
edge="start"
62+
checked={selectedIds.includes(
63+
contact.id
8964
)}
90-
{contact.nb_tasks
91-
? ` - ${contact.nb_tasks} task${
92-
contact.nb_tasks > 1
93-
? 's'
94-
: ''
95-
}`
96-
: ''}
97-
&nbsp;&nbsp;
98-
<TagsList />
99-
</>
100-
}
101-
/>
102-
{contact.last_seen && (
103-
<ListItemSecondaryAction
104-
sx={{
105-
top: '10px',
106-
transform: 'none',
107-
}}
108-
>
109-
<Typography
110-
variant="body2"
111-
color="textSecondary"
112-
title={contact.last_seen}
65+
tabIndex={-1}
66+
disableRipple
67+
onClick={e => {
68+
e.stopPropagation();
69+
onToggleItem(contact.id);
70+
}}
71+
/>
72+
</ListItemIcon>
73+
<ListItemAvatar>
74+
<Avatar />
75+
</ListItemAvatar>
76+
<ListItemText
77+
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
78+
secondary={
79+
<>
80+
{contact.title}
81+
{contact.title &&
82+
contact.company_id != null &&
83+
' at '}
84+
{contact.company_id != null && (
85+
<ReferenceField
86+
source="company_id"
87+
reference="companies"
88+
link={false}
89+
>
90+
<TextField source="name" />
91+
</ReferenceField>
92+
)}
93+
{contact.nb_tasks
94+
? ` - ${contact.nb_tasks} task${
95+
contact.nb_tasks > 1
96+
? 's'
97+
: ''
98+
}`
99+
: ''}
100+
&nbsp;&nbsp;
101+
<TagsList />
102+
</>
103+
}
104+
/>
105+
{contact.last_seen && (
106+
<ListItemSecondaryAction
107+
sx={{
108+
top: '10px',
109+
transform: 'none',
110+
}}
113111
>
114-
{!isSmall && 'last activity '}
115-
{formatRelative(
116-
contact.last_seen,
117-
now
118-
)}{' '}
119-
<Status status={contact.status} />
120-
</Typography>
121-
</ListItemSecondaryAction>
122-
)}
112+
<Typography
113+
variant="body2"
114+
color="textSecondary"
115+
title={contact.last_seen}
116+
>
117+
{!isSmall && 'last activity '}
118+
{formatRelative(
119+
contact.last_seen,
120+
now
121+
)}{' '}
122+
<Status status={contact.status} />
123+
</Typography>
124+
</ListItemSecondaryAction>
125+
)}
126+
</ListItemButton>
123127
</ListItem>
124128
</RecordContextProvider>
125129
))}

‎examples/crm/src/dashboard/DashboardActivityLog.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import AccessTimeIcon from '@mui/icons-material/AccessTime';
2-
import Box from '@mui/material/Box';
3-
import Card from '@mui/material/Card';
4-
import Typography from '@mui/material/Typography';
2+
import { Box, Card, Typography } from '@mui/material';
53
import { ActivityLog } from '../activity/ActivityLog';
64
import { Stack } from '@mui/material';
75

@@ -12,7 +10,10 @@ export function DashboardActivityLog() {
1210
<Box mr={1} display="flex">
1311
<AccessTimeIcon color="disabled" fontSize="medium" />
1412
</Box>
15-
<Typography variant="h5" color="textSecondary">
13+
<Typography
14+
variant="h5"
15+
sx={{ color: theme => theme.palette.text.secondary }}
16+
>
1617
Latest Activity
1718
</Typography>
1819
</Box>

‎examples/crm/src/deals/DealEdit.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { Button, DialogContent, Stack } from '@mui/material';
2-
import Dialog from '@mui/material/Dialog';
3-
import DialogTitle from '@mui/material/DialogTitle';
4-
import Typography from '@mui/material/Typography';
1+
import {
2+
Button,
3+
Dialog,
4+
DialogContent,
5+
DialogTitle,
6+
Stack,
7+
Typography,
8+
} from '@mui/material';
59
import {
610
DeleteButton,
711
EditBase,

‎examples/crm/src/login/LoginForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { useState } from 'react';
3-
import { styled } from '@mui/material/styles';
3+
import { styled } from '@mui/material';
44
import {
55
Button,
66
CardActions,

‎examples/crm/src/notes/Note.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,10 @@ export const Note = ({
100100
<CompanyAvatar width={20} height={20} />
101101
</ReferenceField>
102102
)}
103-
<Typography color="text.secondary" variant="body2">
103+
<Typography
104+
sx={{ color: theme => theme.palette.text.secondary }}
105+
variant="body2"
106+
>
104107
<ReferenceField
105108
record={note}
106109
resource={resource}

‎examples/demo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"type": "module",
66
"dependencies": {
77
"@apollo/client": "^3.3.19",
8-
"@mui/icons-material": "^5.16.12",
9-
"@mui/material": "^5.16.12",
8+
"@mui/icons-material": "^6.0.0",
9+
"@mui/material": "^6.0.0",
1010
"@types/recharts": "^1.8.10",
1111
"@vitejs/plugin-react": "^2.2.0",
1212
"clsx": "^2.1.1",

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,11 @@ const CardWithIcon = ({ icon, title, subtitle, to, children }: Props) => (
5656
{createElement(icon, { fontSize: 'large' })}
5757
</Box>
5858
<Box textAlign="right">
59-
<Typography color="textSecondary">{title}</Typography>
59+
<Typography
60+
sx={{ color: theme => theme.palette.text.secondary }}
61+
>
62+
{title}
63+
</Typography>
6064
<Typography variant="h5" component="h2">
6165
{subtitle || ' '}
6266
</Typography>

0 commit comments

Comments
 (0)