frontend: fix breaking MUI-X v7 changes

This commit is contained in:
Reckless_Satoshi 2024-04-20 20:19:19 +01:00
parent 9ae50948dd
commit 471583733c
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 37 additions and 29 deletions

View File

@ -55,7 +55,7 @@
"@mui/base": "^5.0.0-beta.7",
"@mui/icons-material": "^5.15.9",
"@mui/lab": "^5.0.0-alpha.136",
"@mui/material": "^5.15.9",
"@mui/material": "^5.15.14",
"@mui/system": "^5.15.11",
"@mui/x-data-grid": "^7.3.0",
"@mui/x-date-pickers": "^7.2.0",

View File

@ -24,6 +24,7 @@ import {
type GridPaginationModel,
type GridColDef,
type GridValidRowModel,
GridSlotsComponent,
} from '@mui/x-data-grid';
import currencyDict from '../../../static/assets/currencies.json';
import { type PublicOrder } from '../../models';
@ -204,12 +205,12 @@ const BookTable = ({
renderCell: (params: any) => {
return (
<ListItemButton
style={{ cursor: 'pointer', position: 'relative', left: '-1.3em' }}
style={{ cursor: 'pointer' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
<ListItemAvatar>
<ListItemAvatar sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}>
<RobotAvatar
hashId={params.row.maker_hash_id}
style={{ width: '3.215em', height: '3.215em' }}
@ -221,7 +222,10 @@ const BookTable = ({
small={true}
/>
</ListItemAvatar>
<ListItemText primary={params.row.maker_nick} />
<ListItemText
primary={params.row.maker_nick}
sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}
/>
</ListItemButton>
);
},
@ -236,7 +240,7 @@ const BookTable = ({
renderCell: (params: any) => {
return (
<div
style={{ position: 'relative', left: '-0.34em', cursor: 'pointer' }}
style={{ position: 'relative', left: '-0.34em', cursor: 'pointer', bottom: '0.2em' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
@ -270,12 +274,12 @@ const BookTable = ({
renderCell: (params: any) => {
return (
<ListItemButton
style={{ cursor: 'pointer', position: 'relative', left: '-1.54em' }}
style={{ cursor: 'pointer' }}
onClick={() => {
onClickCoordinator(params.row.coordinatorShortAlias);
}}
>
<ListItemAvatar>
<ListItemAvatar sx={{ position: 'relative', left: '-1.54em', bottom: '0.4em' }}>
<RobotAvatar
shortAlias={params.row.coordinatorShortAlias}
style={{ width: '3.215em', height: '3.215em' }}
@ -364,8 +368,9 @@ const BookTable = ({
}}
>
{currencyCode}
<div style={{ width: '0.3em' }} />
<FlagWithProps code={currencyCode} />
<div style={{ position: 'relative', left: '0.3em', bottom: '0.7em' }}>
<FlagWithProps code={currencyCode} />
</div>
</div>
);
},
@ -386,12 +391,14 @@ const BookTable = ({
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
<PaymentStringAsIcons
othersText={t('Others')}
verbose={true}
size={1.7 * fontSize}
text={params.row.payment_method}
/>
<div style={{ position: 'relative', top: '0.4em' }}>
<PaymentStringAsIcons
othersText={t('Others')}
verbose={true}
size={1.7 * fontSize}
text={params.row.payment_method}
/>
</div>
</div>
);
},
@ -410,7 +417,8 @@ const BookTable = ({
<div
style={{
position: 'relative',
left: '-4px',
left: '-0.25em',
top: '0.3em',
cursor: 'pointer',
}}
onClick={() => {
@ -545,7 +553,7 @@ const BookTable = ({
const minutes = Math.round((timeToExpiry - hours * (3600 * 1000)) / 60000);
return (
<Box
sx={{ position: 'relative', display: 'inline-flex', left: '0.3em' }}
sx={{ position: 'relative', display: 'inline-flex', left: '0.3em', top: '0.5em' }}
onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
@ -880,19 +888,19 @@ const BookTable = ({
};
const gridComponents = useMemo(() => {
const components: GridComponentProps = {
LoadingOverlay: LinearProgress,
const components: GridSlotsComponent = {
loadingOverlay: LinearProgress,
};
if (showNoResults) {
components.NoResultsOverlay = NoResultsOverlay;
components.NoRowsOverlay = NoResultsOverlay;
components.noResultsOverlay = NoResultsOverlay;
components.noRowsOverlay = NoResultsOverlay;
}
if (showFooter) {
components.Footer = Footer;
components.footer = Footer;
}
if (showControls) {
components.Toolbar = BookControl;
components.toolbar = BookControl;
}
return components;
}, [showNoResults, showFooter, showControls, fullscreen]);
@ -930,8 +938,8 @@ const BookTable = ({
setColumnVisibilityModel(newColumnVisibilityModel);
}}
hideFooter={!showFooter}
components={gridComponents}
componentsProps={{
slots={gridComponents}
slotProps={{
toolbar: {
width,
paymentMethod: paymentMethods,
@ -966,12 +974,12 @@ const BookTable = ({
loading={federation.loading}
columns={columns}
hideFooter={!showFooter}
components={gridComponents}
slots={gridComponents}
columnVisibilityModel={columnVisibilityModel}
onColumnVisibilityModelChange={(newColumnVisibilityModel) => {
setColumnVisibilityModel(newColumnVisibilityModel);
}}
componentsProps={{
slotProps={{
toolbar: {
width,
paymentMethod: paymentMethods,

View File

@ -1028,7 +1028,7 @@ const MakerForm = ({
views={['hours', 'minutes']}
inputFormat='HH:mm'
mask='__:__'
componentsProps={{
slotProps={{
textField: {
InputProps: {
style: {
@ -1061,7 +1061,7 @@ const MakerForm = ({
views={['hours', 'minutes']}
inputFormat='HH:mm'
mask='__:__'
componentsProps={{
slotProps={{
textField: {
InputProps: {
style: {