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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import { IconButton, Input, InputAdornment, FormControl } from '@material-ui/core';
const styles = theme => ({
search: {
display: 'block',
background: '#fff',
marginBottom: 10,
paddingTop: 5,
boxShadow: theme.shadows[2],
'& > div': {
width: '100%',
},
'& input': {
padding: '10px 8px'
}
}
});
class SearchIcons extends React.Component {
render() {
const { filterText, classes, handleSearch } = this.props;
return (
<FormControl fullWidth className={classes.search}>
<Input
id="search_filter"
type="text"
placeholder="Search more than 900 icons"
value={filterText}
onChange={handleSearch}
endAdornment={(
<InputAdornment position="end">
<IconButton aria-label="Search filter">
<SearchIcon />
</IconButton>
</InputAdornment>
)}
/>
</FormControl>
);
}
}
SearchIcons.propTypes = {
classes: PropTypes.object.isRequired,
filterText: PropTypes.string.isRequired,
handleSearch: PropTypes.func.isRequired,
};
export default withStyles(styles)(SearchIcons);
|
