Skip to content

Commit f3320f9

Browse files
anserwaseemanserwaseem
committed
moved MainContent, AppBar and Drawer in commons to use it across the project
1 parent b94c62b commit f3320f9

File tree

6 files changed

+210
-175
lines changed

6 files changed

+210
-175
lines changed

‎src/common/AppBarAndDrawer.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import {
2+
Toolbar,
3+
Grid,
4+
IconButton,
5+
Typography,
6+
Drawer,
7+
Divider,
8+
Box,
9+
styled,
10+
useTheme,
11+
} from "@mui/material";
12+
import { useState } from "react";
13+
import { appBarBackgroundColor, drawerHeaderBoxShadow } from "../consts/Colors";
14+
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
15+
import { ToolsTransitionTable } from "../features/components/tools/TransitionTable";
16+
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
17+
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
18+
import TableChartOutlinedIcon from "@mui/icons-material/TableChartOutlined";
19+
import { AppBarAndDrawerProps } from "./props/AppBarAndDrawerProps";
20+
import { DrawerHeader } from "./DrawerHeader";
21+
import { DrawerWidth } from "../consts/DrawerWidth";
22+
23+
interface AppBarProps extends MuiAppBarProps {
24+
open?: number;
25+
}
26+
27+
const AppBar = styled(MuiAppBar, {
28+
shouldForwardProp: (prop) => prop !== "open",
29+
})<AppBarProps>(({ theme, open }) => ({
30+
transition: theme.transitions.create(["margin", "width"], {
31+
easing: theme.transitions.easing.easeOut,
32+
duration: theme.transitions.duration.enteringScreen,
33+
}),
34+
top: "auto",
35+
backgroundColor: appBarBackgroundColor,
36+
position: "absolute",
37+
38+
...(open === 0 && {
39+
transition: theme.transitions.create(["margin", "width"], {
40+
easing: theme.transitions.easing.sharp,
41+
duration: theme.transitions.duration.leavingScreen,
42+
}),
43+
}),
44+
...(open === 1 && {
45+
width: `calc(100% - ${DrawerWidth}px)`,
46+
marginLeft: DrawerWidth,
47+
}),
48+
}));
49+
50+
export const AppBarAndDrawer = (props: AppBarAndDrawerProps) => {
51+
const theme = useTheme();
52+
53+
return (
54+
<>
55+
<AppBar open={props.open}>
56+
<Toolbar>
57+
<Grid container>
58+
<Grid item xs={5}>
59+
<IconButton
60+
color="secondary"
61+
aria-label="open transition table"
62+
onClick={() => {
63+
props.setOpen(1);
64+
}}
65+
sx={{
66+
ml: -1,
67+
...(props.open === 1 && { mr: 2, display: "none" }),
68+
}}
69+
>
70+
<TableChartOutlinedIcon />
71+
</IconButton>
72+
</Grid>
73+
<Grid item xs={7}>
74+
<Typography
75+
noWrap
76+
variant="h5"
77+
fontWeight={"bold"}
78+
color={"black"}
79+
sx={{
80+
...(props.open === 0 && { mt: 0.5 }),
81+
}}
82+
>
83+
{props.title}
84+
</Typography>
85+
</Grid>
86+
</Grid>
87+
</Toolbar>
88+
</AppBar>
89+
90+
<Drawer
91+
sx={{
92+
width: DrawerWidth,
93+
flexShrink: 0,
94+
"& .MuiDrawer-paper": {
95+
position: "relative",
96+
width: DrawerWidth,
97+
boxSizing: "border-box",
98+
backgroundColor: "#f5f5f5",
99+
},
100+
}}
101+
variant="persistent"
102+
anchor="left"
103+
open={props.open === 1}
104+
>
105+
<DrawerHeader
106+
sx={{
107+
justifyContent: "space-evenly",
108+
backgroundColor: appBarBackgroundColor,
109+
boxShadow: drawerHeaderBoxShadow,
110+
}}
111+
>
112+
<Typography
113+
noWrap
114+
variant="overline"
115+
align="center"
116+
fontWeight={"bold"}
117+
>
118+
Transition Table
119+
</Typography>
120+
<IconButton
121+
onClick={() => {
122+
props.setOpen(0);
123+
}}
124+
>
125+
{theme.direction === "ltr" ? (
126+
<ChevronLeftIcon />
127+
) : (
128+
<ChevronRightIcon />
129+
)}
130+
</IconButton>
131+
</DrawerHeader>
132+
<Divider />
133+
<Box
134+
sx={{
135+
marginTop: "40%",
136+
}}
137+
>
138+
<ToolsTransitionTable {...props.transitionTableProps} />
139+
</Box>
140+
</Drawer>
141+
</>
142+
);
143+
};

‎src/common/DrawerHeader.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { styled } from "@mui/material";
2+
3+
export const DrawerHeader = styled("div")(({ theme }) => ({
4+
display: "flex",
5+
alignItems: "center",
6+
padding: theme.spacing(0, 1),
7+
// necessary for content to be below app bar
8+
...theme.mixins.toolbar,
9+
}));

‎src/common/MainContent.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { styled } from "@mui/material";
2+
import { DrawerWidth } from "../consts/DrawerWidth";
3+
4+
export const MainContent = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
5+
open?: number;
6+
}>(({ theme, open }) => ({
7+
flexGrow: 1,
8+
padding: theme.spacing(3),
9+
10+
...(open === 0 && {
11+
transition: theme.transitions.create("margin", {
12+
easing: theme.transitions.easing.sharp,
13+
duration: theme.transitions.duration.leavingScreen,
14+
}),
15+
}),
16+
marginLeft: `-${DrawerWidth}px`,
17+
18+
transition: theme.transitions.create("margin", {
19+
easing: theme.transitions.easing.easeOut,
20+
duration: theme.transitions.duration.enteringScreen,
21+
}),
22+
...(open === 1 && {
23+
marginLeft: 0,
24+
}),
25+
}));

‎src/common/props/AppBarAndDrawerProps.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ToolsTransitionTableProps } from "../../features/components/tools/props/TransitionTableProps";
2+
3+
export type AppBarAndDrawerProps = {
4+
title: string;
5+
open: number;
6+
setOpen: React.Dispatch<React.SetStateAction<number>>;
7+
transitionTableProps: ToolsTransitionTableProps;
8+
};

‎src/consts/DrawerWidth.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const DrawerWidth = 200;

0 commit comments

Comments
 (0)