153 lines
4.1 KiB
TypeScript
153 lines
4.1 KiB
TypeScript
import {
|
|
AppBar,
|
|
Box,
|
|
Button,
|
|
Drawer,
|
|
Grid2 as Grid,
|
|
IconButton,
|
|
Theme,
|
|
Typography
|
|
} from "@mui/material";
|
|
import { ArrowBackIos, ArrowForwardIos, Close, Fullscreen } from "@mui/icons-material";
|
|
import { useMobile } from "hooks";
|
|
import DeleteIcon from "products/AgIcons/Delete";
|
|
import GearMarkerIcon from "products/AgIcons/GearMarker";
|
|
import { useState } from "react";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: (refresh?: boolean) => void;
|
|
displayPrev: () => void;
|
|
displayNext: () => void;
|
|
title: string;
|
|
subheader?: JSX.Element;
|
|
drawerBody: JSX.Element;
|
|
removeElement?: () => void;
|
|
updateElement?: () => void;
|
|
objectActions?: JSX.Element;
|
|
width: string | number;
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
drawerMobile: {
|
|
borderRadius: 30
|
|
},
|
|
drawerDesktop: {
|
|
position: "relative",
|
|
top: 64
|
|
},
|
|
header: {
|
|
position: "static",
|
|
background: theme.palette.background.default,
|
|
paddingLeft: 15,
|
|
paddingRight: 15,
|
|
paddingBottom: 15,
|
|
zIndex: 101
|
|
},
|
|
titleDisplay: {
|
|
position: "static",
|
|
borderRadius: 30,
|
|
backgroundColor: theme.palette.secondary.main
|
|
},
|
|
drawerPaper: {
|
|
overflowX: "hidden"
|
|
}
|
|
}));
|
|
|
|
export default function DisplayDrawer(props: Props) {
|
|
const {
|
|
open,
|
|
onClose,
|
|
displayPrev,
|
|
displayNext,
|
|
title,
|
|
drawerBody,
|
|
removeElement,
|
|
updateElement,
|
|
objectActions,
|
|
width
|
|
} = props;
|
|
const isMobile = useMobile();
|
|
const classes = useStyles();
|
|
const [fullScreen, setFullScreen] = useState(false);
|
|
const [drawerHeight, setDrawerHeight] = useState(60);
|
|
|
|
const toggleFullScreen = () => {
|
|
if (!fullScreen) {
|
|
setDrawerHeight(94);
|
|
setFullScreen(true);
|
|
} else {
|
|
setDrawerHeight(60);
|
|
setFullScreen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
anchor={isMobile ? "bottom" : "right"}
|
|
BackdropProps={{ invisible: true }}
|
|
variant={isMobile ? "temporary" : "persistent"}
|
|
classes={{ paper: classes.drawerPaper }}>
|
|
<Box
|
|
className={isMobile ? classes.drawerMobile : classes.drawerDesktop}
|
|
style={{ width: isMobile ? "100%" : width }}>
|
|
<Box className={classes.header} style={{ width: isMobile ? "100%" : width }}>
|
|
<Box display="flex" justifyContent="space-between" alignItems="center">
|
|
<Box>
|
|
<IconButton onClick={() => onClose()}>
|
|
<Close />
|
|
</IconButton>
|
|
</Box>
|
|
<Box>
|
|
{updateElement && (
|
|
<IconButton onClick={updateElement}>
|
|
<GearMarkerIcon />
|
|
</IconButton>
|
|
)}
|
|
{removeElement && (
|
|
<IconButton onClick={removeElement}>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
)}
|
|
{objectActions && objectActions}
|
|
{isMobile && (
|
|
<IconButton onClick={() => toggleFullScreen()}>
|
|
<Fullscreen />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Box className={classes.titleDisplay}>
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
wrap="nowrap">
|
|
<Grid>
|
|
<Button onClick={() => displayPrev()}>
|
|
<ArrowBackIos style={{ color: "black" }} />
|
|
</Button>
|
|
</Grid>
|
|
<Grid>
|
|
<Box>
|
|
<Typography sx={{ color: "black", fontWeight: 650}} align="center" variant="h5">
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid>
|
|
<Button onClick={() => displayNext()}>
|
|
<ArrowForwardIos style={{ color: "black" }} />
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
<Box>{drawerBody}</Box>
|
|
</Box>
|
|
</Drawer>
|
|
);
|
|
}
|