remove makeStyle from code

Canadian-Geospatial-Platform · May 27, 2024 · 1a89351 · 1a89351
1 parent ebab5cc
commit 1a89351
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 104 deletions.
diff --git a/packages/geoview-core/src/core/components/map/map-style.ts b/packages/geoview-core/src/core/components/map/map-style.ts
@@ -5,5 +5,73 @@ export const sxClasses = {
     width: '100%',
     height: '100%',
     position: 'relative',
+
+    '& .ol-overviewmap.ol-custom-overviewmap': {
+      bottom: 'auto',
+      left: 'auto',
+      right: '5px',
+      top: '5px',
+      margin: 5,
+      order: 1,
+      padding: 0,
+      position: 'absolute',
+      borderRadius: 4,
+
+      '& .ol-overviewmap-map': {
+        border: 'none',
+        display: 'block !important',
+        '-webkit-transition': '300ms linear',
+        '-moz-transition': '300ms linear',
+        '-o-transition': '300ms linear',
+        '-ms-transition': '300ms linear',
+        transition: '300ms linear',
+      },
+      '&.ol-uncollapsible': {
+        bottom: 'auto',
+        left: 'auto',
+        right: 100,
+        top: 100,
+        margin: 5,
+      },
+      '&:not(.ol-collapsed)': {
+        boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
+        borderRadius: '4px',
+        border: 'none',
+      },
+      '&:is(.ol-collapsed)': {
+        boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
+        borderRadius: 4,
+        border: 'none',
+      },
+      '& button': {
+        zIndex: 100,
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 'auto !important',
+        bottom: 'auto !important',
+        backgroundColor: '#cccccc',
+      },
+      '&::before': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        borderRadius: 2,
+        zIndex: 100,
+        right: 0,
+        top: 0,
+      },
+      '& .ol-overviewmap-box': {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      '& .ol-viewport': {
+        borderRadius: '4px',
+        '& .ol-layer': {
+          backgroundColor: '#FFF',
+        },
+      },
+    },
   },
 };
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle-styles.ts
@@ -0,0 +1,23 @@
+export const sxClasses = {
+  toggleBtn: {
+    transform: 'rotate(45deg)',
+    color: 'black',
+    zIndex: 150,
+    '&:hover': {
+      cursor: 'pointer',
+    },
+
+    '&.minimapOpen': {
+      transform: 'rotate(-45deg)',
+    },
+    '&.minimapClosed': {
+      transform: 'rotate(135deg)',
+    },
+  },
+  toggleBtnContainer: {
+    zIndex: 150,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+};
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
@@ -3,35 +3,10 @@ import { useEffect, useRef, useState } from 'react';
 import { OverviewMap as OLOverviewMap } from 'ol/control';
 import { useTranslation } from 'react-i18next';
 
-import makeStyles from '@mui/styles/makeStyles';
-
 import { ChevronLeftIcon, Tooltip } from '@/ui';
 import { logger } from '@/core/utils/logger';
 import { Box } from '@/ui/layout';
-
-// TODO: We need to find solution to remove makeStyles with either plain css or material ui.
-const useStyles = makeStyles(() => ({
-  toggleBtn: {
-    transform: 'rotate(45deg)',
-    color: 'black',
-    zIndex: 150,
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  toggleBtnContainer: {
-    zIndex: 150,
-    position: 'absolute',
-    top: 0,
-    right: 0,
-  },
-  minimapOpen: {
-    transform: 'rotate(-45deg)',
-  },
-  minimapClosed: {
-    transform: 'rotate(135deg)',
-  },
-}));
+import { sxClasses } from './overview-map-toggle-styles';
 
 /**
  * Properties for the overview map toggle
@@ -59,9 +34,6 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element {
   const [status, setStatus] = useState(true);
   const divRef = useRef<HTMLDivElement>(null);
 
-  // TODO: Remove useStyle
-  const classes = useStyles();
-
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('OVERVIEW-MAP-TOGGLE - mount');
@@ -99,10 +71,11 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element {
 
   return (
     <Tooltip title={tooltipAndAria}>
-      <Box ref={divRef} className={classes.toggleBtnContainer}>
+      <Box ref={divRef} sx={sxClasses.toggleBtnContainer}>
         <Box
           component="div"
-          className={`${classes.toggleBtn} ${!status ? classes.minimapOpen : classes.minimapClosed}`}
+          sx={sxClasses.toggleBtn}
+          className={status ? `minimapOpen` : `minimapClosed`}
           style={{
             margin: 0,
             padding: 0,

diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
@@ -6,7 +6,6 @@ import i18n from 'i18next';
 import { I18nextProvider } from 'react-i18next';
 
 import { ThemeProvider } from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
 
 import TileLayer from 'ol/layer/Tile';
 import { OverviewMap as OLOverviewMap } from 'ol/control';
@@ -21,74 +20,6 @@ import { MapEventProcessor } from '@/api/event-processors/event-processor-childr
 import { logger } from '@/core/utils/logger';
 import { Box } from '@/ui/layout';
 
-// TODO: We need to find solution to remove makeStyles with either plain css or material ui.
-const useStyles = makeStyles(() => ({
-  overviewMap: {
-    bottom: 'auto',
-    left: 'auto',
-    right: '5px',
-    top: '5px',
-    margin: 5,
-    order: 1,
-    padding: 0,
-    '& .ol-overviewmap-map': {
-      border: 'none',
-      display: 'block !important',
-      '-webkit-transition': '300ms linear',
-      '-moz-transition': '300ms linear',
-      '-o-transition': '300ms linear',
-      '-ms-transition': '300ms linear',
-      transition: '300ms linear',
-    },
-    '&.ol-uncollapsible': {
-      bottom: 'auto',
-      left: 'auto',
-      right: 100,
-      top: 100,
-      margin: 5,
-    },
-    '&:not(.ol-collapsed)': {
-      boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
-      borderRadius: 4,
-      border: 'none',
-    },
-    '&:is(.ol-collapsed)': {
-      boxShadow: '0 1px 5px rgb(0 0 0 / 65%)',
-      borderRadius: 4,
-      border: 'none',
-    },
-    '& button': {
-      zIndex: 100,
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 'auto !important',
-      bottom: 'auto !important',
-      backgroundColor: '#cccccc',
-    },
-    '&::before': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      width: 0,
-      height: 0,
-      borderRadius: 2,
-      zIndex: 100,
-      right: 0,
-      top: 0,
-    },
-    '& .ol-overviewmap-box': {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    },
-    '& .ol-viewport': {
-      borderRadius: 4,
-      '& .ol-layer': {
-        backgroundColor: '#FFF',
-      },
-    },
-  },
-}));
-
 type OverwiewMapProps = {
   olMap: OLMap;
 };
@@ -113,9 +44,6 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element {
   const displayLanguage = useAppDisplayLanguage();
   const displayTheme = useAppDisplayTheme();
 
-  // TODO: remove useStyle
-  const classes = useStyles();
-
   useEffect(() => {
     logger.logTraceUseEffect('OVERVIEW-MAP - zoom level changed');
     const overviewMapCtrl = olMap
@@ -163,7 +91,7 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element {
     const toggleButton = document.createElement('div');
 
     const overviewMapControl = new OLOverviewMap({
-      className: `ol-overviewmap ol-custom-overviewmap ${classes.overviewMap}`,
+      className: `ol-overviewmap ol-custom-overviewmap`,
       layers: defaultBasemap?.layers.map((layer) => {
         // create a tile layer for this basemap layer
         const tileLayer = new TileLayer({