bananas-commerce-admin
Version:
What's this, an admin for apes?
55 lines • 1.92 kB
JavaScript
import React, { memo, useCallback, useState } from "react";
import SearchIcon from "@mui/icons-material/Search";
import { FormControl, IconButton, TextField } from "@mui/material";
const styles = {
root: {
position: "relative",
justifyContent: "center",
ml: 2,
width: "100%",
maxWidth: 420,
},
button: {
position: "absolute",
zIndex: 1,
ml: 2,
},
input: {
bgcolor: "background.paper",
border: "1px solid",
borderColor: "divider",
borderRadius: 12,
width: "100%",
maxWidth: 600,
pl: 2,
"& .MuiOutlinedInput-root": {
width: "100%",
pl: 2,
"& input": { pl: 5 },
"& fieldset": { border: 0 },
"&.Mui-focused fieldset": {
border: 0,
borderColor: "secondary.main",
},
},
},
};
export const SearchBar = ({ defaultValue, onChange, onSubmit, variant, sx, ...props }) => {
const [input, setInput] = useState(defaultValue ?? "");
const handleChange = useCallback(({ target: { value } }) => {
setInput(value);
onChange?.(value);
}, [onChange]);
const handleKeyDown = useCallback((e) => {
if (e.key === "Enter") {
e.preventDefault();
onSubmit?.(input);
}
}, [input, onChange]);
return (React.createElement(FormControl, { fullWidth: true, sx: styles.root },
React.createElement(IconButton, { "aria-label": "Search", sx: styles.button, type: "submit" },
React.createElement(SearchIcon, null)),
React.createElement(TextField, { fullWidth: true, sx: { ...sx, ...styles.input }, value: input, variant: variant ?? "outlined", onChange: handleChange, onKeyDown: handleKeyDown, ...props })));
};
export default memo(SearchBar);
//# sourceMappingURL=SearchBar.js.map