123 lines
2.8 KiB
JavaScript
123 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import classnames from "classnames";
|
|
import {
|
|
Paper,
|
|
IconButton,
|
|
Menu,
|
|
MenuItem,
|
|
withStyles
|
|
} from "@material-ui/core";
|
|
import { MoreVert as MoreIcon } from "@material-ui/icons";
|
|
import Typography from "@material-ui/core/es/Typography/Typography";
|
|
|
|
const Widget = ({
|
|
classes,
|
|
children,
|
|
title,
|
|
noBodyPadding,
|
|
bodyClass,
|
|
className,
|
|
disableWidgetMenu,
|
|
...props
|
|
}) => (
|
|
<div className={classes.widgetWrapper}>
|
|
<Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
|
|
<div className={classes.widgetHeader}>
|
|
{props.header ? (
|
|
props.header
|
|
) : (
|
|
<React.Fragment>
|
|
<Typography variant="h5" color="textSecondary">
|
|
{title}
|
|
</Typography>
|
|
{!disableWidgetMenu && (
|
|
<IconButton
|
|
color="primary"
|
|
classes={{ root: classes.moreButton }}
|
|
aria-owns="widget-menu"
|
|
aria-haspopup="true"
|
|
onClick={() => props.setMoreMenuOpen(true)}
|
|
ref={props.setMoreButtonRef}
|
|
>
|
|
<MoreIcon />
|
|
</IconButton>
|
|
)}
|
|
</React.Fragment>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={classnames(classes.widgetBody, {
|
|
[classes.noPadding]: noBodyPadding,
|
|
[bodyClass]: bodyClass
|
|
})}
|
|
>
|
|
{children}
|
|
</div>
|
|
</Paper>
|
|
<Menu
|
|
id="widget-menu"
|
|
open={props.isMoreMenuOpen}
|
|
anchorEl={props.moreButtonRef}
|
|
onClose={() => props.setMoreMenuOpen(false)}
|
|
disableAutoFocusItem
|
|
>
|
|
<MenuItem>
|
|
<Typography>Edit</Typography>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<Typography>Copy</Typography>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<Typography>Delete</Typography>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<Typography>Print</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
|
|
const styles = (theme) => ({
|
|
widgetWrapper: {
|
|
display: "flex",
|
|
minHeight: "100%"
|
|
},
|
|
widgetHeader: {
|
|
padding: theme.spacing.unit * 3,
|
|
paddingBottom: theme.spacing.unit,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
},
|
|
widgetRoot: {
|
|
boxShadow: theme.customShadows.widget
|
|
},
|
|
widgetBody: {
|
|
paddingBottom: theme.spacing.unit * 3,
|
|
paddingRight: theme.spacing.unit * 3,
|
|
paddingLeft: theme.spacing.unit * 3
|
|
},
|
|
noPadding: {
|
|
padding: 0
|
|
},
|
|
paper: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
overflow: "hidden"
|
|
},
|
|
moreButton: {
|
|
margin: -theme.spacing.unit,
|
|
padding: 0,
|
|
width: 40,
|
|
height: 40,
|
|
color: theme.palette.text.hint,
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: "rgba(255, 255, 255, 0.35)"
|
|
}
|
|
}
|
|
});
|
|
|
|
export default withStyles(styles, { withTheme: true })(Widget);
|