Rev 2263 | Rev 2274 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import {
Avatar,
Card,
CardActions,
CardContent,
CardHeader,
CardMedia,
IconButton,
Menu,
MenuItem,
styled
} from '@mui/material'
import { MoreVert } from '@mui/icons-material'
const WidgetContainer = styled(Card)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
boxShadow: theme.shadows[1],
height: 'fit-content',
position: 'relative',
width: '100%',
[theme.breakpoints.up('sm')]: {
borderRadius: theme.shape.borderRadius
}
}))
export function Widget({ children, styles, ...props }) {
return (
<WidgetContainer sx={styles} {...props}>
{children}
</WidgetContainer>
)
}
export function WidgetHeader({
title = '',
subheader = '',
avatar = '',
options = [],
...props
}) {
const [anchorEl, setAnchorEl] = useState(null)
const open = Boolean(anchorEl)
const handleClick = (event) => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
return (
<CardHeader
avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
action={
<>
<IconButton
id='settings-button'
aria-controls={open ? 'settings-menu' : undefined}
aria-haspopup='true'
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
sx={{
display: options.length > 0 ? 'block' : 'none'
}}
>
<MoreVert />
</IconButton>
<Menu
id='settings-menu'
aria-labelledby='settings-button'
anchorEl={anchorEl}
open={open}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
{options.map((option, index) => (
<MenuItem
key={index}
onClick={() => {
option.action()
handleClose()
}}
>
{option.label}
</MenuItem>
))}
</Menu>
</>
}
title={title}
subheader={subheader}
titleTypographyProps={{
sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
}}
subheaderTypographyProps={{
sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
}}
{...props}
/>
)
}
export function WidgetBody({ children, ...props }) {
return <CardContent {...props}>{children}</CardContent>
}
export function WidgetActions({ children, ...props }) {
return (
<CardActions disableSpacing {...props}>
{children}
</CardActions>
)
}
export function WidgetMedia({
src = '',
height = 200,
width = 200,
alt = '',
component = 'img',
...props
}) {
return (
<CardMedia
alt={alt}
component={component}
height={height}
image={src}
width={width}
{...props}
/>
)
}
Widget.Header = WidgetHeader
Widget.Body = WidgetBody
Widget.Actions = WidgetActions
Widget.Media = WidgetMedia
export default Widget