upgrade mui

osscar-org · Feb 17, 2024 · d2c1a9b · d2c1a9b
1 parent 390ea54
commit d2c1a9b
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 84 deletions.
diff --git a/src/inputs.tsx b/src/inputs.tsx
@@ -1,45 +1,56 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import SearchIcon from '@material-ui/icons/Search';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import TextField from '@material-ui/core/TextField';
+import { styled } from '@mui/system';
+import Paper from '@mui/material/Paper';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 
-interface IInputPros {
-  inputHandler: (e: string) => void;
-  options: string[];
-  label: string;
-  factory: IDefaultFileBrowser;
-  getFiles: (types: string[]) => string[];
-  types: string[];
-}
+const PREFIX = 'inputs';
+
+const classes = {
+  root: `${PREFIX}-root`,
+  input: `${PREFIX}-input`,
+  iconButton: `${PREFIX}-iconButton`,
+  divider: `${PREFIX}-divider`
+};
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.root}`]: {
     padding: '2px 4px',
     display: 'flex',
     alignItems: 'center',
     width: 250,
     height: 30
   },
-  input: {
+
+  [`& .${classes.input}`]: {
     marginLeft: theme.spacing(1),
     flex: 1
   },
-  iconButton: {
+
+  [`& .${classes.iconButton}`]: {
     padding: 10
   },
-  divider: {
+
+  [`& .${classes.divider}`]: {
     height: 28,
     margin: 4
   }
 }));
 
+interface IInputPros {
+  inputHandler: (e: string) => void;
+  options: string[];
+  label: string;
+  factory: IDefaultFileBrowser;
+  getFiles: (types: string[]) => string[];
+  types: string[];
+}
+
 export default function Inputs(Props: IInputPros) {
-  const classes = useStyles();
   const [value, setValue] = React.useState(Props.options[0]);
   const [inputValue, setInputValue] = React.useState('');
   const [files, setFiles] = React.useState(Props.options);
@@ -56,7 +67,7 @@ export default function Inputs(Props: IInputPros) {
   });
 
   return (
-    <div>
+    <Root>
       <Paper component="form" className={classes.root}>
         <Autocomplete
           color="primary"
@@ -82,10 +93,10 @@ export default function Inputs(Props: IInputPros) {
           className={classes.iconButton}
           aria-label="directions"
           onClick={handerClick}
-        >
+          size="large">
           <SearchIcon />
         </IconButton>
       </Paper>
-    </div>
+    </Root>
   );
 }
diff --git a/src/sliders.tsx b/src/sliders.tsx
@@ -1,35 +1,44 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { styled, createTheme, ThemeProvider } from '@mui/system';
+import Slider from '@mui/material/Slider';
+
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+
+const PREFIX = 'sliders';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const StyledThemeProvider = styled(ThemeProvider)({
+  [`& .${classes.root}`]: {
+    flexGrow: 1,
+    marginTop: '40px',
+    width: '900px',
+    margin: '0 auto'
+  }
+});
 
 interface INglProps {
   uuid: string;
   changeHandler1: (
-    event: React.ChangeEvent<unknown>,
-    val: number | number[]
+    event: Event,
+    val: number | number[],
+    activeThumb: number
   ) => void;
   changeHandler2: (
-    event: React.ChangeEvent<unknown>,
-    val: number | number[]
+    event: Event,
+    val: number | number[],
+    activeThumb: number
   ) => void;
 }
 
 export default function VerticalSlider(Props: INglProps) {
-  const useStyles = makeStyles({
-    root: {
-      flexGrow: 1,
-      marginTop: '40px',
-      width: '900px',
-      margin: '0 auto'
-    }
-  });
-
   function valuetext(value: number) {
     return `${value}°C`;
   }
@@ -84,26 +93,24 @@ export default function VerticalSlider(Props: INglProps) {
     }
   ];
 
-  const classes = useStyles();
-
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
   const theme = React.useMemo(
     () =>
       createTheme({
         palette: {
-          type: prefersDarkMode ? 'dark' : 'light'
+          mode: prefersDarkMode ? 'dark' : 'light'
         }
       }),
     [prefersDarkMode]
   );
 
   return (
-    <ThemeProvider theme={theme}>
+    <StyledThemeProvider theme={theme}>
       <CssBaseline />
       <React.Fragment>
         <div className={classes.root}>
-          <Grid container spacing={3} justify="center">
+          <Grid container spacing={3} justifyContent="center">
             <Grid item sm={8}>
               <Box
                 id={Props.uuid}
@@ -154,6 +161,6 @@ export default function VerticalSlider(Props: INglProps) {
           </Grid>
         </div>
       </React.Fragment>
-    </ThemeProvider>
+    </StyledThemeProvider>
   );
 }
diff --git a/src/switches.tsx b/src/switches.tsx
@@ -1,9 +1,40 @@
 import React from 'react';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import { styled } from '@mui/system';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Grid from '@mui/material/Grid';
+
+const PREFIX = 'switches';
+
+const classes = {
+  container: `${PREFIX}-container`,
+  textField: `${PREFIX}-textField`,
+  formGroup: `${PREFIX}-formGroup`
+};
+
+const Root = styled('div')( ({ theme }) => ({
+  [`& .${classes.container}`]: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    alignItems: 'center'
+  },
+
+  [`& .${classes.textField}`]: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    width: 200
+  },
+
+  [`& .${classes.formGroup}`]: {
+    alignItems: 'center'
+  }
+}));
 
 interface IToggleProps {
   clickHandler1: () => void;
@@ -14,28 +45,6 @@ interface IToggleProps {
 }
 
 export default function SwitchLabels(Props: IToggleProps) {
-  const useStyles = makeStyles(theme => ({
-    container: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      height: '100%',
-      width: '100%',
-      alignItems: 'center'
-    },
-    textField: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      width: 200
-    },
-    formGroup: {
-      alignItems: 'center'
-    }
-  }));
-  const classes = useStyles();
-
   const [state, setState] = React.useState({
     checkedA: false,
     checkedB: true,
@@ -81,7 +90,7 @@ export default function SwitchLabels(Props: IToggleProps) {
   };
 
   return (
-    <div>
+    <Root>
       <Grid container spacing={3} justifyContent="center">
         <Grid item sm={3}>
           <FormControlLabel
@@ -144,6 +153,6 @@ export default function SwitchLabels(Props: IToggleProps) {
           />
         </FormGroup>
       </Grid>
-    </div>
+    </Root>
   );
 }
diff --git a/src/widget.tsx b/src/widget.tsx
@@ -12,9 +12,9 @@ import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import VerticalSlider from './sliders';
 import SwitchLabels from './switches';
 import Inputs from './inputs';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import { toArray, map } from '@lumino/algorithm';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 /**
  * A Counter Lumino Widget that wraps a CounterComponent.
@@ -203,14 +203,14 @@ export class CounterWidget extends ReactWidget {
         <VerticalSlider
           uuid={this.uuid}
           changeHandler1={(
-            event: React.ChangeEvent<unknown>,
+            event: Event,
             val: number | number[]
           ): void => {
             const value = (val as number) / 100.0;
             this.updateIsosurface(value);
           }}
           changeHandler2={(
-            event: React.ChangeEvent<unknown>,
+            event: Event,
             val: number | number[]
           ): void => {
             const value = val as number;