Skip to content

Commit

Permalink
Add support for MUI v6
Browse files Browse the repository at this point in the history
  • Loading branch information
@djhi
djhi committed Jan 8, 2025
1 parent 8d6fd0e commit c68a5d3
Show file tree
Hide file tree
Showing 29 changed files with 440 additions and 389 deletions.
4 changes: 2 additions & 2 deletions examples/crm/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"type": "module",
"dependencies": {
"@hello-pangea/dnd": "^16.3.0",
"@mui/icons-material": "^5.16.12",
"@mui/material": "^5.16.12",
"@mui/icons-material": "^6.0.0",
"@mui/material": "^6.0.0",
"@nivo/bar": "^0.80.0",
"@nivo/core": "^0.80.0",
"clsx": "^2.1.1",
Expand Down
2 changes: 1 addition & 1 deletion examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Typography from '@mui/material/Typography';
import { Typography } from '@mui/material';
import { ReferenceField } from 'react-admin';

import { CompanyAvatar } from '../companies/CompanyAvatar';
Expand Down
78 changes: 41 additions & 37 deletions examples/crm/src/companies/CompanyShow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
Stack,
Expand Down Expand Up @@ -142,43 +143,46 @@ const ContactsIterator = () => {
<List dense sx={{ pt: 0 }}>
{contacts.map(contact => (
<RecordContextProvider key={contact.id} value={contact}>
<ListItem
button
component={RouterLink}
to={`/contacts/${contact.id}/show`}
state={{ from: location.pathname }}
>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name}`}
secondary={
<>
{contact.title}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1 ? 's' : ''
}`
: ''}
&nbsp; &nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(contact.last_seen, now)} ago{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
<ListItem disablePadding>
<ListItemButton
component={RouterLink}
to={`/contacts/${contact.id}/show`}
state={{ from: location.pathname }}
>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name}`}
secondary={
<>
{contact.title}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp; &nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(contact.last_seen, now)}{' '}
ago <Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
</ListItemButton>
</ListItem>
</RecordContextProvider>
))}
Expand Down
140 changes: 72 additions & 68 deletions examples/crm/src/contacts/ContactListContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
Checkbox,
List,
ListItem,
ListItemButton,
ListItemAvatar,
ListItemIcon,
ListItemSecondaryAction,
Expand Down Expand Up @@ -50,76 +51,79 @@ export const ContactListContent = () => {
<List dense>
{contacts.map(contact => (
<RecordContextProvider key={contact.id} value={contact}>
<ListItem
button
component={Link}
to={`/contacts/${contact.id}/show`}
>
<ListItemIcon sx={{ minWidth: '2.5em' }}>
<Checkbox
edge="start"
checked={selectedIds.includes(contact.id)}
tabIndex={-1}
disableRipple
onClick={e => {
e.stopPropagation();
onToggleItem(contact.id);
}}
/>
</ListItemIcon>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
secondary={
<>
{contact.title}
{contact.title &&
contact.company_id != null &&
' at '}
{contact.company_id != null && (
<ReferenceField
source="company_id"
reference="companies"
link={false}
>
<TextField source="name" />
</ReferenceField>
<ListItem disablePadding>
<ListItemButton
component={Link}
to={`/contacts/${contact.id}/show`}
>
<ListItemIcon sx={{ minWidth: '2.5em' }}>
<Checkbox
edge="start"
checked={selectedIds.includes(
contact.id
)}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp;&nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction
sx={{
top: '10px',
transform: 'none',
}}
>
<Typography
variant="body2"
color="textSecondary"
title={contact.last_seen}
tabIndex={-1}
disableRipple
onClick={e => {
e.stopPropagation();
onToggleItem(contact.id);
}}
/>
</ListItemIcon>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
secondary={
<>
{contact.title}
{contact.title &&
contact.company_id != null &&
' at '}
{contact.company_id != null && (
<ReferenceField
source="company_id"
reference="companies"
link={false}
>
<TextField source="name" />
</ReferenceField>
)}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp;&nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction
sx={{
top: '10px',
transform: 'none',
}}
>
{!isSmall && 'last activity '}
{formatRelative(
contact.last_seen,
now
)}{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
<Typography
variant="body2"
color="textSecondary"
title={contact.last_seen}
>
{!isSmall && 'last activity '}
{formatRelative(
contact.last_seen,
now
)}{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
</ListItemButton>
</ListItem>
</RecordContextProvider>
))}
Expand Down
9 changes: 5 additions & 4 deletions examples/crm/src/dashboard/DashboardActivityLog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';
import { Box, Card, Typography } from '@mui/material';
import { ActivityLog } from '../activity/ActivityLog';
import { Stack } from '@mui/material';

Expand All @@ -12,7 +10,10 @@ export function DashboardActivityLog() {
<Box mr={1} display="flex">
<AccessTimeIcon color="disabled" fontSize="medium" />
</Box>
<Typography variant="h5" color="textSecondary">
<Typography
variant="h5"
sx={{ color: theme => theme.palette.text.secondary }}
>
Latest Activity
</Typography>
</Box>
Expand Down
12 changes: 8 additions & 4 deletions examples/crm/src/deals/DealEdit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Button, DialogContent, Stack } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import Typography from '@mui/material/Typography';
import {
Button,
Dialog,
DialogContent,
DialogTitle,
Stack,
Typography,
} from '@mui/material';
import {
DeleteButton,
EditBase,
Expand Down
2 changes: 1 addition & 1 deletion examples/crm/src/login/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { styled } from '@mui/material';
import {
Button,
CardActions,
Expand Down
5 changes: 4 additions & 1 deletion examples/crm/src/notes/Note.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,10 @@ export const Note = ({
<CompanyAvatar width={20} height={20} />
</ReferenceField>
)}
<Typography color="text.secondary" variant="body2">
<Typography
sx={{ color: theme => theme.palette.text.secondary }}
variant="body2"
>
<ReferenceField
record={note}
resource={resource}
Expand Down
4 changes: 2 additions & 2 deletions examples/demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"type": "module",
"dependencies": {
"@apollo/client": "^3.3.19",
"@mui/icons-material": "^5.16.12",
"@mui/material": "^5.16.12",
"@mui/icons-material": "^6.0.0",
"@mui/material": "^6.0.0",
"@types/recharts": "^1.8.10",
"@vitejs/plugin-react": "^2.2.0",
"clsx": "^2.1.1",
Expand Down
6 changes: 5 additions & 1 deletion examples/demo/src/dashboard/CardWithIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,11 @@ const CardWithIcon = ({ icon, title, subtitle, to, children }: Props) => (
{createElement(icon, { fontSize: 'large' })}
</Box>
<Box textAlign="right">
<Typography color="textSecondary">{title}</Typography>
<Typography
sx={{ color: theme => theme.palette.text.secondary }}
>
{title}
</Typography>
<Typography variant="h5" component="h2">
{subtitle || ' '}
</Typography>
Expand Down
Loading

0 comments on commit c68a5d3

Please sign in to comment.