Skip to content

Commit 9f08f08

Browse files
anserwaseemanserwaseem
committed
changed implementation of AppBar and Drawer to accomodate right Drawer in ModifedTable for Transition Table, and in ResultantDfa for Null Closure Table
1 parent 086fa0d commit 9f08f08

File tree

14 files changed

+360
-332
lines changed

14 files changed

+360
-332
lines changed

‎src/common/AppBarAndDrawer.tsx‎

Lines changed: 0 additions & 144 deletions
This file was deleted.

‎src/common/CustomAppBar.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Toolbar, Grid, IconButton, Typography, styled } from "@mui/material";
2+
import TableChartOutlinedIcon from "@mui/icons-material/TableChartOutlined";
3+
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
4+
import { appBarBackgroundColor } from "../consts/Colors";
5+
import { DrawerWidth } from "../consts/DrawerWidth";
6+
import { CustomAppBarProps } from "./props/CustomAppBarProps";
7+
8+
interface AppBarProps extends MuiAppBarProps {
9+
open?: number;
10+
}
11+
12+
const AppBar = styled(MuiAppBar, {
13+
shouldForwardProp: (prop) => prop !== "open",
14+
})<AppBarProps>(({ theme, open }) => ({
15+
transition: theme.transitions.create(["margin", "width"], {
16+
easing: theme.transitions.easing.easeOut,
17+
duration: theme.transitions.duration.enteringScreen,
18+
}),
19+
top: "auto",
20+
backgroundColor: appBarBackgroundColor,
21+
position: "absolute",
22+
23+
...(open === 0 && {
24+
transition: theme.transitions.create(["margin", "width"], {
25+
easing: theme.transitions.easing.sharp,
26+
duration: theme.transitions.duration.leavingScreen,
27+
}),
28+
}),
29+
...(open === 1 && {
30+
width: `calc(100% - ${DrawerWidth}px)`,
31+
marginLeft: DrawerWidth,
32+
}),
33+
...(open === 2 && {
34+
width: `calc(100% - ${DrawerWidth}px)`,
35+
marginRight: DrawerWidth,
36+
}),
37+
}));
38+
39+
export const CustomAppBar = (props: CustomAppBarProps) => {
40+
console.log("re rendering CustomAppBar, props: ", props);
41+
42+
return (
43+
<AppBar open={props.open}>
44+
<Toolbar>
45+
<Grid container justifyContent="space-between" alignItems="center">
46+
<Grid item>
47+
<IconButton
48+
color="secondary"
49+
aria-label="open transition table"
50+
edge="start"
51+
onClick={() => {
52+
props.setOpen(1);
53+
}}
54+
sx={{
55+
ml: -1,
56+
...(props.open === 1 && { mr: 2, display: "none" }),
57+
}}
58+
>
59+
<TableChartOutlinedIcon />
60+
</IconButton>
61+
</Grid>
62+
<Grid item>
63+
<Typography noWrap variant="h5" fontWeight={"bold"} color={"black"}>
64+
{props.title}
65+
</Typography>
66+
</Grid>
67+
<Grid item>
68+
{props.showRightIcon && (
69+
<IconButton
70+
color="secondary"
71+
aria-label="open transition table"
72+
onClick={() => {
73+
props.setOpen(2);
74+
}}
75+
sx={{
76+
display: { xs: "none", md: "none", lg: "block" },
77+
marginTop: { lg: "8px" },
78+
...(props.open === 2 && { display: "none" }),
79+
}}
80+
>
81+
<TableChartOutlinedIcon />
82+
</IconButton>
83+
)}
84+
</Grid>
85+
</Grid>
86+
</Toolbar>
87+
</AppBar>
88+
);
89+
};

‎src/common/CustomDrawer.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
Typography,
3+
IconButton,
4+
Divider,
5+
Box,
6+
Drawer,
7+
Grid,
8+
} from "@mui/material";
9+
import { appBarBackgroundColor, drawerHeaderBoxShadow } from "../consts/Colors";
10+
import { DrawerWidth } from "../consts/DrawerWidth";
11+
import { ToolsTransitionTable } from "../features/components/tools/TransitionTable";
12+
import { DrawerHeader } from "./DrawerHeader";
13+
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
14+
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
15+
import { CustomDrawerProps } from "./props/CustomDrawerProps";
16+
17+
export const CustomDrawer = (props: CustomDrawerProps) => {
18+
console.log("re rendering CustomDrawer, props: ", props);
19+
20+
return (
21+
<Drawer
22+
sx={{
23+
width: props.isLeft || props.open === 2 ? DrawerWidth : 0,
24+
flexShrink: 0,
25+
"& .MuiDrawer-paper": {
26+
position: "relative",
27+
width: props.isLeft || props.open === 2 ? DrawerWidth : 0,
28+
boxSizing: "border-box",
29+
backgroundColor: "#f5f5f5",
30+
},
31+
}}
32+
variant="persistent"
33+
anchor={props.isLeft ? "left" : "right"}
34+
open={props.isLeft ? props.open === 1 : props.open === 2}
35+
>
36+
<DrawerHeader
37+
sx={{
38+
justifyContent: "space-evenly",
39+
backgroundColor: appBarBackgroundColor,
40+
boxShadow: drawerHeaderBoxShadow,
41+
}}
42+
>
43+
<Grid container justifyContent="space-around" alignItems="center">
44+
<Grid item order={props.isLeft ? 1 : 2}>
45+
<Typography
46+
noWrap
47+
variant="overline"
48+
align="center"
49+
fontWeight={"bold"}
50+
>
51+
{props.title}
52+
</Typography>
53+
</Grid>
54+
<Grid item order={props.isLeft ? 2 : 1}>
55+
<IconButton
56+
onClick={() => {
57+
props.setOpen(0);
58+
}}
59+
>
60+
{props.isLeft ? <ChevronRightIcon /> : <ChevronLeftIcon />}
61+
</IconButton>
62+
</Grid>
63+
</Grid>
64+
</DrawerHeader>
65+
<Divider />
66+
<Box
67+
sx={{
68+
marginTop: "40%",
69+
}}
70+
>
71+
<ToolsTransitionTable {...props.transitionTableProps} />
72+
</Box>
73+
</Drawer>
74+
);
75+
};

‎src/common/MainContent.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import { styled } from "@mui/material";
22
import { DrawerWidth } from "../consts/DrawerWidth";
33

4-
export const MainContent = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
4+
export const MainContent = styled("main", {
5+
shouldForwardProp: (prop) => prop !== "open",
6+
})<{
57
open?: number;
68
}>(({ theme, open }) => ({
79
flexGrow: 1,
810
padding: theme.spacing(3),
11+
marginLeft: `-${DrawerWidth}px`,
912

1013
...(open === 0 && {
1114
transition: theme.transitions.create("margin", {
1215
easing: theme.transitions.easing.sharp,
1316
duration: theme.transitions.duration.leavingScreen,
1417
}),
1518
}),
16-
marginLeft: `-${DrawerWidth}px`,
1719

1820
transition: theme.transitions.create("margin", {
1921
easing: theme.transitions.easing.easeOut,
@@ -22,4 +24,7 @@ export const MainContent = styled("main", { shouldForwardProp: (prop) => prop !=
2224
...(open === 1 && {
2325
marginLeft: 0,
2426
}),
27+
...(open === 2 && {
28+
marginRight: 0,
29+
}),
2530
}));

‎src/common/props/CustomAppBarProps.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export type CustomAppBarProps = {
2+
showRightIcon: boolean;
3+
open: number;
4+
setOpen: React.Dispatch<React.SetStateAction<number>>;
5+
title: string;
6+
};

‎src/common/props/AppBarAndDrawerProps.ts‎ renamed to ‎src/common/props/CustomDrawerProps.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ToolsTransitionTableProps } from "../../features/components/tools/props/TransitionTableProps";
22

3-
export type AppBarAndDrawerProps = {
4-
headerTitle: string;
3+
export type CustomDrawerProps = {
4+
isLeft: boolean;
55
open: number;
66
setOpen: React.Dispatch<React.SetStateAction<number>>;
7+
title: string;
78
transitionTableProps: ToolsTransitionTableProps;
8-
drawerTitle?: string;
99
};

0 commit comments

Comments
 (0)