upgrade to Mui5

This commit is contained in:
Olivier Gagnon 2021-09-16 19:42:55 -04:00
parent 407ed70ae3
commit d7a86ab8b9
2 changed files with 45 additions and 17 deletions

@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import clsx from "clsx";
import { Theme } from "@mui/material/styles";
import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import Drawer from "@mui/material/Drawer";
import MuiDrawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@ -59,11 +59,50 @@ import { KEY } from "../../../utils/helpers/keyCodes";
import { FconfSettings } from "../../Fconf/FconfSettings";
import { Page, routing } from "../../ui/navigationTracking";
const drawerWidth = 240;
const openedMixin = (theme: Theme): CSSObject => ({
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: "hidden",
});
const closedMixin = (theme: Theme): CSSObject => ({
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up("sm")]: {
width: `calc(${theme.spacing(9)} + 1px)`,
},
});
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));
const useStyles = makeStyles((theme: Theme) =>
createStyles({
drawer: {
width: theme.spacing(31),
flexShrink: 0,
display: "flex",
whiteSpace: "nowrap",
},
drawerOpen: {
@ -340,19 +379,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
const toggleDrawer = (): void => setOpen((old) => !old);
return (
<BBTheme>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<Drawer open={open} anchor="left" variant="permanent">
<ListItem button onClick={toggleDrawer}>
<ListItemIcon>{!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</ListItemIcon>
<ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />

@ -408,6 +408,7 @@ const Engine = {
},
displayCharacterOverviewInfo: function () {
console.log("rendering");
ReactDOM.render(
<Theme>
<CharacterOverview player={Player} save={() => saveObject.saveGame(Engine.indexedDb)} />
@ -839,6 +840,8 @@ const Engine = {
// Initialization
init: function () {
// Player was working cancel button
Engine.displayCharacterOverviewInfo();
if (Player.isWorking) {
var cancelButton = document.getElementById("work-in-progress-cancel-button");
cancelButton.addEventListener("click", function () {
@ -868,8 +871,6 @@ const Engine = {
}
Engine.loadWorkInProgressContent();
Engine.displayCharacterOverviewInfo();
} else {
Engine.loadTerminalContent();
}