Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 61x 132x 132x | import React from 'react';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField';
import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
import { makeStyles } from '@material-ui/core/styles';
/**
* Simple search.
*
* FIXME: Should the functions for search be defined here?
* const [query, setQuery] = useState('');
* const [results, setResults] = useState('');
*
* const handleSubmit = (event) => {
* if (event.key === 'Enter') { console.log(query); } };
*
* <SearchBar value={query} onInput={e => setQuery(e.target.value)} placeholder="Search the Civic Tech Index" onKeyPress={handleSubmit} />
*
* @param {*} value Value of the input passed into the SearchBar. You'll want to pass a state variable here
* @param {*} onInput Supply hook for value state changes
* @param {String} placeholder Default placeholder value
* @param {function} onKeyPress Listens for enter value.
*/
const useStyles = makeStyles((theme) => ({
icon: {
backgroundColor: theme.palette.secondary.main,
borderBottomRightRadius: '4px',
borderTopRightRadius: '4px',
color: theme.palette.text.secondary,
height: '56px',
marginRight: '-14px',
width: '56px',
'&:hover': {
cursor: 'pointer',
}
},
input: {
backgroundColor: theme.palette.background.default,
borderRadius: '4px',
boxSizing: 'border-box',
},
}));
export default function SearchBar(props) {
const classes = useStyles();
return (
<TextField
className={classes.input}
data-cy={props.dataCy}
fullWidth
InputLabelProps={{
shrink: true,
}}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<SearchRoundedIcon className={classes.icon} onClick={props.onIconClick} />
</InputAdornment>
),
}}
margin='normal'
onInput={props.onInput}
onKeyPress={props.onKeyPress}
placeholder={props.placeholder}
value={props.value}
variant='outlined'
/>
);
}
|