u

src/components/panels/PanelTile.jsx

@@ -1,27 +1,75 @@
-import { Component } from 'react';
+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, panelTilePaperSx } from './panelTileLayout';
+import {
+  GRID_COLUMNS,
+  TILE_ACTION_PADDING,
+  panelTilePaperSx,
+  tileActionIconSx,
+  tileActionSx,
+} from './panelTileLayout';
 
 class PanelTileBase extends Component {
   renderTitle() {
-    const { title } = this.props;
+    const { title, action } = this.props;
     if (!title) return null;
     return (
       <Typography
         variant="overline"
         color="text.secondary"
-        sx={{ display: 'block', mb: 1 }}
+        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 } = this.props;
+    const { theme, wide = 1, children, sx, minHeight = 120, tileKey, action } = this.props;
+    const actionPadding = action ? TILE_ACTION_PADDING : 0;
 
     return (
       <Paper
@@ -34,8 +82,9 @@ class PanelTileBase extends Component {
           theme,
         })}
       >
+        {this.renderAction()}
         {this.renderTitle()}
-        <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+        <Box sx={{ flex: 1, minWidth: 0, pr: actionPadding }}>{children}</Box>
       </Paper>
     );
   }