75 lines
1.5 KiB
JavaScript
75 lines
1.5 KiB
JavaScript
const GRID_COLUMNS = 4;
|
|
|
|
export const PENDING_EDIT_BORDER = '#e11d48';
|
|
export const EDITING_TILE_BORDER = '#94a3b8';
|
|
|
|
function clampWide(wide) {
|
|
return Math.min(Math.max(wide, 1), 3);
|
|
}
|
|
|
|
export function responsiveColumnSpan(wide) {
|
|
const span = clampWide(wide);
|
|
return {
|
|
xs: '1 / -1',
|
|
sm: span >= 2 ? 'span 2' : 'span 1',
|
|
md: `span ${span}`,
|
|
};
|
|
}
|
|
|
|
export const PENDING_EDIT_RING_PX = 4;
|
|
export const TILE_ACTION_PADDING = 0;
|
|
|
|
export const tileActionSx = {
|
|
position: 'absolute',
|
|
top: 4,
|
|
color: 'text.secondary',
|
|
};
|
|
|
|
export const tileActionIconSx = {
|
|
fontSize: 28,
|
|
};
|
|
|
|
export const PANEL_TILE_BORDER_RADIUS = 4;
|
|
|
|
function tileRingBoxShadow(ringColor, elevationShadow) {
|
|
const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
|
|
return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
|
|
}
|
|
|
|
export function panelTilePaperSx({
|
|
wide,
|
|
sx,
|
|
minHeight = 120,
|
|
editing = false,
|
|
pending = false,
|
|
color,
|
|
theme,
|
|
}) {
|
|
const elevationShadow = theme?.shadows?.[4];
|
|
const ringColor = pending
|
|
? PENDING_EDIT_BORDER
|
|
: editing
|
|
? EDITING_TILE_BORDER
|
|
: null;
|
|
|
|
return {
|
|
gridColumn: responsiveColumnSpan(wide),
|
|
position: 'relative',
|
|
p: 2,
|
|
minHeight,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
border: 'none',
|
|
borderRadius: PANEL_TILE_BORDER_RADIUS,
|
|
...(color ? { bgcolor: color } : {}),
|
|
...(ringColor
|
|
? {
|
|
boxShadow: tileRingBoxShadow(ringColor, elevationShadow),
|
|
}
|
|
: {}),
|
|
...sx,
|
|
};
|
|
}
|
|
|
|
export { GRID_COLUMNS };
|