fix(Select): mui styles refactor Closes #646

Canadian-Geospatial-Platform · Oct 25, 2023 · 41882e4 · 41882e4
1 parent 84e86e9
commit 41882e4
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 72 deletions.
diff --git a/packages/geoview-core/src/ui/select/custom-select-style.ts b/packages/geoview-core/src/ui/select/custom-select-style.ts
@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  formControl: {
+    width: '50%',
+    margin: '15px 0',
+    '& .MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiOutlinedInput-root.Mui-focused': {
+      border: `1px solid ${theme.palette.primary.contrastText}`,
+    },
+  },
+  label: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    transform: 'translate(14px, -9px) scale(0.75)',
+    background: theme.palette.primary.light,
+  },
+  select: {
+    width: '100%',
+  },
+});
diff --git a/packages/geoview-core/src/ui/select/custom-select.tsx b/packages/geoview-core/src/ui/select/custom-select.tsx
@@ -10,9 +10,10 @@ import {
   MenuItem,
   Select as MaterialSelect,
   SelectChangeEvent,
+  useTheme,
 } from '@mui/material';
 
-import makeStyles from '@mui/styles/makeStyles';
+import { getSxClasses } from './custom-select-style';
 
 /**
  * Properties for the Custom Select component
@@ -55,38 +56,16 @@ export interface TypeItemProps {
   default?: boolean;
 }
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    width: '50%',
-    margin: '15px 0',
-    '& .MuiFormLabel-root.Mui-focused': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiOutlinedInput-root.Mui-focused': {
-      border: `1px solid ${theme.palette.primary.contrastText}`,
-    },
-  },
-  label: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    transform: 'translate(14px, -9px) scale(0.75)',
-    background: theme.palette.primary.light,
-  },
-  select: {
-    width: '100%',
-  },
-}));
-
 /**
  * Create a customizable Material UI Select
  *
  * @param {TypeCustomSelectProps} props the properties passed to the Select component
  * @returns {JSX.Element} the created Select element
  */
 export function CustomSelect(props: TypeCustomSelectProps): JSX.Element {
-  const classes = useStyles();
+  const sxtheme = useTheme();
+  const classes = getSxClasses(sxtheme);
+
   const [value, setValue] = useState('');
   const [multipleValue, setMultipleValue] = useState([]);
   const { className, style, labelId, label, selectItems, callBack, helperText, multiple, ...otherProps } = props;
@@ -133,12 +112,13 @@ export function CustomSelect(props: TypeCustomSelectProps): JSX.Element {
   }
 
   return (
-    <FormControl className={classes.formControl} {...otherProps}>
-      <InputLabel className={(isDefault && classes.label) as string} id={labelId}>
+    <FormControl sx={classes.formControl} {...otherProps}>
+      <InputLabel sx={{ ...(isDefault ? classes.label : {}) }} id={labelId}>
         {label}
       </InputLabel>
       <MaterialSelect
-        className={`${classes.select} ${className && className}`}
+        sx={classes.select}
+        className={`${className && className}`}
         style={style}
         labelId={labelId}
         id={`select-${labelId}`}

diff --git a/packages/geoview-core/src/ui/select/select-style.ts b/packages/geoview-core/src/ui/select/select-style.ts
@@ -0,0 +1,39 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  formControl: {
+    fontSize: 14,
+    width: '100%',
+    marginBottom: '16px',
+    color: theme.palette.text.primary,
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: `1px solid ${theme.palette.border.primary}`,
+      padding: '0 12px 0 8px',
+      '&[aria-hidden="true"]': {
+        border: `1px solid ${theme.palette.border.primary}`,
+      },
+    },
+    '&:hover': {
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${theme.palette.border.primary}`,
+      },
+    },
+    '& .MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiSelect-select': {
+      padding: '16px 12px',
+    },
+    '& .MuiSvgIcon-root': {
+      color: theme.palette.text.primary,
+    },
+  },
+  label: {
+    color: theme.palette.text.primary,
+    fontSize: 16,
+  },
+  menuItem: {
+    fontSize: 14,
+  },
+});
diff --git a/packages/geoview-core/src/ui/select/select.tsx b/packages/geoview-core/src/ui/select/select.tsx
@@ -9,9 +9,9 @@ import {
   MenuItemProps,
   Select as MaterialSelect,
   SelectProps,
+  useTheme,
 } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { getSxClasses } from './select-style';
 
 /**
  * Custom MUI Select properties
@@ -31,43 +31,6 @@ interface TypeMenuItemProps {
   item: MenuItemProps | ListSubheaderProps | null;
 }
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    fontSize: 14,
-    width: '100%',
-    marginBottom: 16,
-    color: theme.palette.text.primary,
-    '& .MuiOutlinedInput-notchedOutline': {
-      border: `1px solid ${theme.palette.border.primary}`,
-      padding: '0 12px 0 8px',
-      '&[aria-hidden="true"]': {
-        border: `1px solid ${theme.palette.border.primary}`,
-      },
-    },
-    '&:hover': {
-      '& .MuiOutlinedInput-notchedOutline': {
-        border: `1px solid ${theme.palette.border.primary}`,
-      },
-    },
-    '& .MuiFormLabel-root.Mui-focused': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiSelect-select': {
-      padding: '16px 12px',
-    },
-    '& .MuiSvgIcon-root': {
-      color: theme.palette.text.primary,
-    },
-  },
-  label: {
-    color: theme.palette.text.primary,
-    fontSize: 16,
-  },
-  menuItem: {
-    fontSize: 14,
-  },
-}));
 /**
  * Create a Material UI Select component
  *
@@ -76,14 +39,16 @@ const useStyles = makeStyles((theme) => ({
  */
 export function Select(props: TypeSelectProps): JSX.Element {
   const { fullWidth, inputLabel, menuItems, ...selectProps } = props;
-  const classes = useStyles();
+
+  const sxtheme = useTheme();
+  const classes = getSxClasses(sxtheme);
 
   return (
     <FormControl fullWidth={fullWidth}>
-      <InputLabel className={classes.label} {...inputLabel}>
+      <InputLabel sx={classes.label} {...inputLabel}>
         {selectProps.label}
       </InputLabel>
-      <MaterialSelect className={classes.formControl} {...selectProps}>
+      <MaterialSelect sx={classes.formControl} {...selectProps}>
         {menuItems.map((menuItem: TypeMenuItemProps, index) => {
           if (menuItem) {
             if (menuItem.type === 'header') {
@@ -92,7 +57,7 @@ export function Select(props: TypeSelectProps): JSX.Element {
             }
 
             // eslint-disable-next-line react/no-array-index-key
-            return <MenuItem key={index} {...(menuItem.item as MenuItemProps)} className={classes.menuItem} />;
+            return <MenuItem key={index} {...(menuItem.item as MenuItemProps)} sx={classes.menuItem} />;
           }
 
           return null;