Improve Select

CodeForAfrica · Nov 29, 2024 · 1cea12a · 1cea12a
1 parent f387125
commit 1cea12a
Showing 1 changed file with 26 additions and 41 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
@@ -1,10 +1,33 @@
-import { Box, Grid, IconButton, useTheme } from "@mui/material";
+import { Box, Grid, IconButton, styled } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg";
 import Select from "@/climatemappedafrica/components/Select";
 
+const StyledSelect = styled(Select)(({ theme }) => ({
+  SelectProps: {
+    width: {
+      width: {
+        xs: theme.typography.pxToRem(165),
+        lg: theme.typography.pxToRem(200),
+      },
+      height: theme.typography.pxToRem(40),
+      paddingLeft: 0,
+      "& .MuiSelect-filled": {
+        padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(
+          40,
+        )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`,
+      },
+    },
+  },
+  MenuProps: {
+    "& .MuiMenu-paper": {
+      maxHeight: theme.typography.pxToRem(310),
+    },
+  },
+}));
+
 function ChartFilter({
   groups,
   onSelectValue,
@@ -16,8 +39,6 @@ function ChartFilter({
   selectedAttribute: selectedAttributeProp,
   selectedValue: selectedValueProp,
 }) {
-  const theme = useTheme();
-
   const [selectedAttribute, setSelectedAttribute] = useState(
     selectedAttributeProp,
   );
@@ -95,30 +116,12 @@ function ChartFilter({
               marginRight: { md: typography.pxToRem(10) },
             })}
           >
-            <Select
+            <StyledSelect
               helperText={attributeText}
               options={attributeOptions}
               selected={selectedAttribute}
               onChange={onAtrributeChange}
               disabled={index === "default"}
-              SelectProps={{
-                width: {
-                  xs: theme.typography.pxToRem(165),
-                  lg: theme.typography.pxToRem(200),
-                },
-                height: theme.typography.pxToRem(40),
-                paddingLeft: 0,
-                "& .MuiSelect-filled": {
-                  padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(
-                    40,
-                  )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`,
-                },
-              }}
-              MenuProps={{
-                "& .MuiMenu-paper": {
-                  maxHeight: theme.typography.pxToRem(310),
-                },
-              }}
             />
           </Grid>
         )}
@@ -129,30 +132,12 @@ function ChartFilter({
               marginRight: { md: typography.pxToRem(10) },
             })}
           >
-            <Select
+            <StyledSelect
               helperText={valueText}
               options={valueOptions}
               selected={selectedValue}
               label={selectedValue?.length ? "" : "Select a value"}
               onChange={onValueChange}
-              SelectProps={{
-                width: {
-                  xs: theme.typography.pxToRem(165),
-                  lg: theme.typography.pxToRem(200),
-                },
-                height: theme.typography.pxToRem(40),
-                paddingLeft: 0,
-                "& .MuiSelect-filled": {
-                  padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(
-                    40,
-                  )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`,
-                },
-              }}
-              MenuProps={{
-                "& .MuiMenu-paper": {
-                  maxHeight: theme.typography.pxToRem(310),
-                },
-              }}
             />
           </Grid>
         )}