From d2c2af1cc989a232014aab6e9db845e1f90df52f Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 1 Feb 2021 12:25:42 -0300
Subject: [PATCH] Added icons to seacrh and clean input
---
src/Components/IframeOverlay/SearchInput.js | 49 ++++++++++++++++-----
1 file changed, 38 insertions(+), 11 deletions(-)
diff --git a/src/Components/IframeOverlay/SearchInput.js b/src/Components/IframeOverlay/SearchInput.js
index f201d314..3fd246cb 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;
`
--
GitLab