diff --git a/src/Components/IframeOverlay/SearchInput.js b/src/Components/IframeOverlay/SearchInput.js index f201d3143be7501aa4631ecacdecfd972a985130..3fd246cb70a501f5d0c091df2e133ce8c2ac3f80 100644 --- a/src/Components/IframeOverlay/SearchInput.js +++ b/src/Components/IframeOverlay/SearchInput.js @@ -5,6 +5,8 @@ import IconButton from '@material-ui/core/IconButton'; import OutlinedInput from '@material-ui/core/OutlinedInput'; import InputAdornment from '@material-ui/core/InputAdornment'; import FormControl from '@material-ui/core/FormControl'; +import Divider from '@material-ui/core/Divider'; +import CloseRoundedIcon from '@material-ui/icons/CloseRounded'; export default function SearchInput(props) { const [text, setText] = useState(props.stdin); @@ -17,31 +19,56 @@ export default function SearchInput(props) { props.search(text); } + const handleCleanInput = () => { + setText(""); + } + + const handleKeyUp = (event) => { + if (event.key === "Enter") + handleClickSearch() + } + return ( <Wrapper> - <FormControl variant="outlined" style={{width: '100%'}}> + <FormControl variant="outlined" style={{ width: '100%' }}> <OutlinedInput type="text" value={text} + placeholder="O quê você está buscando?" onChange={handleChange} + onKeyUp={handleKeyUp} endAdornment={ - <InputAdornment position="end"> - <IconButton - onClick={handleClickSearch} - edge="end" - > - <SearchIcon /> - </IconButton> - </InputAdornment> + <> + <InputAdornment position="end"> + <IconButton + onClick={handleCleanInput} + edge="end" + > + <CloseRoundedIcon /> + </IconButton> + </InputAdornment> + <SizedWidhtBox /> + <Divider orientation="vertical" flexItem /> + <InputAdornment position="end"> + <IconButton + onClick={handleClickSearch} + edge="end" + > + <SearchIcon style={{ fill: "#00bcd4" }} /> + </IconButton> + </InputAdornment> + </> } /> </FormControl> </Wrapper> ); } -const Wrapper=styled.div` +const Wrapper = styled.div` background-color: white; border-radius: 5px; margin: 20px; - +` +const SizedWidhtBox = styled.div` + margin-right : 22px; `