-
Notifications
You must be signed in to change notification settings - Fork 12
/
ResponsiveDrawer.jsx
77 lines (67 loc) · 2.06 KB
/
ResponsiveDrawer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { useCallback } from "react";
import makeStyles from '@mui/styles/makeStyles';
import Drawer from "@mui/material/Drawer";
import DragIcon from '@mui/icons-material/MoreVert';
export const defaultWidth = 360;
const minWidth = 50;
const maxWidth = 1000;
const useStyles = makeStyles(theme => ({
drawer: {
flexShrink: 0
},
toolbar: theme.mixins.toolbar,
dragger: {
width: "8px",
cursor: "ew-resize",
padding: "4px 0 0",
borderTop: "1px solid #ddd",
position: "absolute",
top: '64px',
left: 0,
bottom: 0,
zIndex: 100,
backgroundColor: "#f4f7f9",
height: 'calc(100vh - 64px)',
}
}));
const ResponsiveDrawer = ({formComponent, variant, isOpen, onClose, onWidthChange}) => {
const [open, setOpen] = React.useState(isOpen);
const classes = useStyles();
const [drawerWidth, setDrawerWidth] = React.useState(defaultWidth);
const handleMouseDown = () => {
document.addEventListener("mouseup", handleMouseUp, true);
document.addEventListener("mousemove", handleMouseMove, true);
};
const handleMouseUp = () => {
document.removeEventListener("mouseup", handleMouseUp, true);
document.removeEventListener("mousemove", handleMouseMove, true);
};
const handleMouseMove = useCallback(e => {
let offsetRight =
document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
if (offsetRight > minWidth && offsetRight < maxWidth) {
setDrawerWidth(offsetRight)
onWidthChange(offsetRight)
}
}, []);
React.useEffect(() => setOpen(isOpen), [isOpen])
return (
<Drawer
anchor='right'
open={open}
className={classes.drawer}
variant={variant}
PaperProps={{ style: { width: drawerWidth } }}
onClose={onClose}
>
<div className={classes.toolbar} />
<div onMouseDown={e => handleMouseDown(e)} className={classes.dragger + ' flex-vertical-center'}>
<DragIcon style={{marginLeft: '-8px', color: 'rgba(0, 0, 0, 0.3)'}} />
</div>
{
formComponent
}
</Drawer>
);
}
export default ResponsiveDrawer;