124 lines
2.7 KiB
JavaScript
124 lines
2.7 KiB
JavaScript
import { Component, createRef } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Paper from '@mui/material/Paper';
|
|
import Typography from '@mui/material/Typography';
|
|
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
|
import { injectMuiTheme } from './injectMuiTheme';
|
|
import {
|
|
GRID_COLUMNS,
|
|
TILE_ACTION_PADDING,
|
|
panelTilePaperSx,
|
|
tileActionIconSx,
|
|
tileActionSx,
|
|
} from './panelTileLayout';
|
|
|
|
class PanelTileBase extends Component {
|
|
renderTitle() {
|
|
const { title, action } = this.props;
|
|
if (!title) return null;
|
|
return (
|
|
<Typography
|
|
variant="overline"
|
|
color="text.secondary"
|
|
sx={{ display: 'block', mb: 1, pr: action ? 9 : 0 }}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
);
|
|
}
|
|
|
|
renderAction() {
|
|
const { action } = this.props;
|
|
if (!action) return null;
|
|
|
|
const { label, icon: Icon, onClick, busy } = action;
|
|
|
|
return (
|
|
<>
|
|
<IconButton
|
|
disabled
|
|
aria-hidden
|
|
tabIndex={-1}
|
|
sx={{
|
|
...tileActionSx,
|
|
right: 48,
|
|
visibility: 'hidden',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<SaveOutlinedIcon sx={tileActionIconSx} />
|
|
</IconButton>
|
|
<IconButton
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-label={label}
|
|
disabled={busy}
|
|
sx={{ ...tileActionSx, right: 4 }}
|
|
>
|
|
{busy ? (
|
|
<CircularProgress size={22} color="inherit" />
|
|
) : (
|
|
<Icon sx={tileActionIconSx} />
|
|
)}
|
|
</IconButton>
|
|
</>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
theme,
|
|
wide = 1,
|
|
children,
|
|
sx,
|
|
minHeight = 120,
|
|
tileKey,
|
|
action,
|
|
elevation = 4,
|
|
} = this.props;
|
|
const actionPadding = action ? TILE_ACTION_PADDING : 0;
|
|
|
|
return (
|
|
<Paper
|
|
elevation={elevation}
|
|
sx={panelTilePaperSx({
|
|
wide,
|
|
sx,
|
|
minHeight,
|
|
tileKey,
|
|
theme,
|
|
})}
|
|
>
|
|
{this.renderAction()}
|
|
{this.renderTitle()}
|
|
<Box sx={{ flex: 1, minWidth: 0, pr: actionPadding }}>{children}</Box>
|
|
</Paper>
|
|
);
|
|
}
|
|
}
|
|
|
|
export const PanelTile = injectMuiTheme(PanelTileBase);
|
|
|
|
export function PanelTileGrid({ children, sx }) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'grid',
|
|
gridTemplateColumns: {
|
|
xs: '1fr',
|
|
sm: 'repeat(2, 1fr)',
|
|
md: `repeat(${GRID_COLUMNS}, 1fr)`,
|
|
},
|
|
gap: 2,
|
|
...sx,
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export { GRID_COLUMNS };
|