refactor(striker-ui): migrate MUI v4->5 on Display/FullSize

main
Tsu-ba-me 3 years ago
parent a887a03b33
commit 61438a8de4
  1. 69
      striker-ui/components/Display/FullSize.tsx

@ -1,11 +1,16 @@
import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
import dynamic from 'next/dynamic';
import { Box, Menu, MenuItem, Button } from '@material-ui/core';
import Typography from '@mui/material/Typography';
import { makeStyles } from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close';
import KeyboardIcon from '@material-ui/icons/Keyboard';
import IconButton from '@material-ui/core/IconButton';
import {
Box,
Button,
IconButton,
Menu,
MenuItem,
Typography,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import KeyboardIcon from '@mui/icons-material/Keyboard';
import RFB from '@novnc/novnc/core/rfb';
import { Panel } from '../Panels';
import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
@ -15,10 +20,21 @@ import putFetchWithTimeout from '../../lib/fetchers/putFetchWithTimeout';
import { HeaderText } from '../Text';
import Spinner from '../Spinner';
const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
const PREFIX = 'FullSize';
const classes = {
displayBox: `${PREFIX}-displayBox`,
spinnerBox: `${PREFIX}-spinnerBox`,
closeButton: `${PREFIX}-closeButton`,
keyboardButton: `${PREFIX}-keyboardButton`,
closeBox: `${PREFIX}-closeBox`,
buttonsBox: `${PREFIX}-buttonsBox`,
keysItem: `${PREFIX}-keysItem`,
buttonText: `${PREFIX}-buttonText`,
};
const useStyles = makeStyles(() => ({
displayBox: {
const StyledDiv = styled('div')(() => ({
[`& .${classes.displayBox}`]: {
width: '75vw',
height: '75vh',
paddingTop: '1em',
@ -26,47 +42,56 @@ const useStyles = makeStyles(() => ({
paddingLeft: 0,
paddingRight: 0,
},
spinnerBox: {
[`& .${classes.spinnerBox}`]: {
flexDirection: 'column',
width: '75vw',
height: '75vh',
alignItems: 'center',
justifyContent: 'center',
},
closeButton: {
[`& .${classes.closeButton}`]: {
borderRadius: 8,
backgroundColor: RED,
'&:hover': {
backgroundColor: RED,
},
},
keyboardButton: {
[`& .${classes.keyboardButton}`]: {
borderRadius: 8,
backgroundColor: TEXT,
'&:hover': {
backgroundColor: TEXT,
},
},
closeBox: {
[`& .${classes.closeBox}`]: {
paddingBottom: '1em',
paddingLeft: '.7em',
paddingRight: 0,
},
buttonsBox: {
[`& .${classes.buttonsBox}`]: {
paddingTop: 0,
},
keysItem: {
[`& .${classes.keysItem}`]: {
backgroundColor: TEXT,
paddingRight: '3em',
'&:hover': {
backgroundColor: TEXT,
},
},
buttonText: {
[`& .${classes.buttonText}`]: {
color: BLACK,
},
}));
const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
interface FullSizeProps {
setMode: Dispatch<SetStateAction<boolean>>;
uuid: string;
@ -90,7 +115,6 @@ const FullSize = ({
VncConnectionProps | undefined
>(undefined);
const [isError, setIsError] = useState<boolean>(false);
const classes = useStyles();
useEffect(() => {
if (typeof window !== 'undefined') {
@ -146,6 +170,7 @@ const FullSize = ({
return (
<Panel>
<StyledDiv>
<Box flexGrow={1}>
<HeaderText text={`Server: ${serverName}`} />
</Box>
@ -213,7 +238,9 @@ const FullSize = ({
<Box display="flex" className={classes.spinnerBox}>
{!isError ? (
<>
<HeaderText text={`Establishing connection with ${serverName}`} />
<HeaderText
text={`Establishing connection with ${serverName}`}
/>
<HeaderText text="This may take a few minutes" />
<Spinner />
</>
@ -229,7 +256,10 @@ const FullSize = ({
}}
style={{ textTransform: 'none' }}
>
<Typography className={classes.buttonText} variant="subtitle1">
<Typography
className={classes.buttonText}
variant="subtitle1"
>
Reconnect
</Typography>
</Button>
@ -237,6 +267,7 @@ const FullSize = ({
)}
</Box>
)}
</StyledDiv>
</Panel>
);
};

Loading…
Cancel
Save