42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
import { useEffect, useRef } from "react";
|
|
import Paper from "@mui/material/Paper";
|
|
import InputBase from "@mui/material/InputBase";
|
|
import Divider from "@mui/material/Divider";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import DirectionsIcon from "@mui/icons-material/Directions";
|
|
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
|
|
|
|
export default function CatalogSearch(props) {
|
|
const { onChange, onClear } = props;
|
|
|
|
const searchRef = useRef(null);
|
|
|
|
const handleClear = () => {
|
|
searchRef.current.children[0].value = null;
|
|
searchRef.current.children[0].focus();
|
|
onClear();
|
|
};
|
|
|
|
return (
|
|
<Paper component="form" sx={{ display: "flex", alignItems: "center" }}>
|
|
<InputBase
|
|
ref={searchRef}
|
|
sx={{ ml: 1, flex: 1 }}
|
|
placeholder="Search Catalog"
|
|
inputProps={{ "aria-label": `search catalog` }}
|
|
onChange={onChange}
|
|
fullWidth
|
|
/>
|
|
<Divider sx={{ height: 26, m: 0.5 }} orientation="vertical" />
|
|
<IconButton
|
|
sx={{ p: "10px", mr: 0.5 }}
|
|
aria-label="clear"
|
|
onClick={handleClear}
|
|
>
|
|
<ClearOutlinedIcon />
|
|
</IconButton>
|
|
</Paper>
|
|
);
|
|
}
|