Merge branch 'navbar-css'

Author: RafaelGB

src/components/NavBar.tsx

@@ -11,6 +11,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
 import { c } from "helpers/StylesHelper";
 import MenuIcon from "components/img/MenuIcon";
+import Typography from "@mui/material/Typography";
 
 export function NavBar(navBarProps: NavBarProps) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -72,6 +73,14 @@ export function NavBar(navBarProps: NavBarProps) {
             <MenuIcon />
           </IconButton>
           {renderMenu}
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ display: { xs: "none", sm: "block" } }}
+          >
+            {navBarProps.csvButtonProps.name}
+          </Typography>
           {/** Global filter */}
           <GlobalFilter {...navBarProps.globalFilterRows} />
         </Toolbar>

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

@@ -1,40 +1,13 @@
 import React from "react";
 import "regenerator-runtime/runtime";
 import { GlobalFilterProps } from "cdm/MenuBarModel";
-
-// A debounced input react component
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce = 500,
-  ...props
-}: {
-  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 (
-    <input
-      {...props}
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
-}
+import {
+  DebouncedInputWrapper,
+  Search,
+  SearchIconWrapper,
+} from "components/styles/NavBarSearchStyles";
+import SearchIcon from "@mui/icons-material/Search";
+import DebouncedInput from "components/behavior/DebouncedInputFn";
 
 /**
  * Filter component based on react-table.
@@ -43,19 +16,20 @@ function DebouncedInput({
  * @returns
  */
 export default function GlobalFilter(globalFilterProps: GlobalFilterProps) {
-  // TODO add typing to props
   const { hits, globalFilter, setGlobalFilter } = globalFilterProps;
-  const [value, setValue] = React.useState(globalFilter);
 
   return (
-    <span>
-      Search:{" "}
-      <DebouncedInput
-        value={globalFilter ?? ""}
-        onChange={(value) => setGlobalFilter(String(value))}
-        className="p-2 font-lg shadow border border-block"
-        placeholder={`Search... (${hits})`}
-      />
-    </span>
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon />
+      </SearchIconWrapper>
+      <DebouncedInputWrapper>
+        <DebouncedInput
+          value={globalFilter ?? ""}
+          onChange={(value) => setGlobalFilter(String(value))}
+          placeholder={`Search... (${hits})`}
+        />
+      </DebouncedInputWrapper>
+    </Search>
   );
 }

src/components/styles/NavBarSearchStyles.ts

@@ -0,0 +1,41 @@
+import { alpha, styled } from "@mui/material/styles";
+
+export const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    '&:hover': {
+        backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(3),
+        width: 'auto',
+    },
+}));
+
+export const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    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",
+        },
+    },
+}));