css of navbar improved

Author: RafaelGB

src/components/behavior/DebouncedInputFn.tsx

@@ -0,0 +1,37 @@
+import InputBase from "@mui/material/InputBase";
+import React from "react";
+
+// A debounced input react component
+export default function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  placeholder,
+}: {
+  value: string | number;
+  onChange: (value: string | number) => void;
+  debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
+  const [value, setValue] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return (
+    <InputBase
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder={placeholder}
+      style={{}}
+    />
+  );
+}

src/components/reducers/GlobalFilter.tsx

@@ -2,46 +2,12 @@ import React from "react";
 import "regenerator-runtime/runtime";
 import { GlobalFilterProps } from "cdm/MenuBarModel";
 import {
+  DebouncedInputWrapper,
   Search,
   SearchIconWrapper,
 } from "components/styles/NavBarSearchStyles";
 import SearchIcon from "@mui/icons-material/Search";
-import { styled } from "@mui/material/styles";
-import InputBase from "@mui/material/InputBase";
-
-// A debounced input react component
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce = 500,
-  placeholder,
-}: {
-  value: string | number;
-  onChange: (value: string | number) => void;
-  debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
-  const [value, setValue] = React.useState(initialValue);
-
-  React.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      onChange(value);
-    }, debounce);
-
-    return () => clearTimeout(timeout);
-  }, [value]);
-
-  return (
-    <InputBase
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      placeholder={placeholder}
-    />
-  );
-}
+import DebouncedInput from "components/behavior/DebouncedInputFn";
 
 /**
  * Filter component based on react-table.
@@ -52,29 +18,18 @@ function DebouncedInput({
 export default function GlobalFilter(globalFilterProps: GlobalFilterProps) {
   const { hits, globalFilter, setGlobalFilter } = globalFilterProps;
 
-  const CustomDebouncedInput = styled(DebouncedInput)(({ theme }) => ({
-    color: "inherit",
-    "& .MuiInputBase-input": {
-      padding: theme.spacing(1, 1, 1, 0),
-      // vertical padding + font size from searchIcon
-      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-      transition: theme.transitions.create("width"),
-      width: "100%",
-      [theme.breakpoints.up("md")]: {
-        width: "20ch",
-      },
-    },
-  }));
   return (
     <Search>
       <SearchIconWrapper>
         <SearchIcon />
       </SearchIconWrapper>
-      <CustomDebouncedInput
-        value={globalFilter ?? ""}
-        onChange={(value) => setGlobalFilter(String(value))}
-        placeholder={`Search... (${hits})`}
-      />
+      <DebouncedInputWrapper>
+        <DebouncedInput
+          value={globalFilter ?? ""}
+          onChange={(value) => setGlobalFilter(String(value))}
+          placeholder={`Search... (${hits})`}
+        />
+      </DebouncedInputWrapper>
     </Search>
   );
 }

src/components/styles/NavBarSearchStyles.ts

@@ -1,4 +1,3 @@
-import InputBase from "@mui/material/InputBase";
 import { alpha, styled } from "@mui/material/styles";
 
 export const Search = styled('div')(({ theme }) => ({
@@ -26,3 +25,17 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'center',
 }));
+
+export const DebouncedInputWrapper = styled('div')(({ theme }) => ({
+    color: "inherit",
+    "& div *": {
+        padding: theme.spacing(1, 1, 1, 0),
+        // vertical padding + font size from searchIcon
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create("width"),
+        width: "100%",
+        [theme.breakpoints.up("md")]: {
+            width: "20ch",
+        },
+    },
+}));