Commit 883586a6 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Add clear btn to search.

parent f3afc915
Pipeline #1882 passed with stage
in 1 minute and 42 seconds
import React from 'react'; import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui'; import {setSearchTerm} from '../actions/ui';
import SearchIcon from 'material-ui-icons/Search' import SearchIcon from 'material-ui-icons/Search';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import Input from 'material-ui/Input'; import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper'; import Paper from 'material-ui/Paper';
import classNames from 'classnames'; import classNames from 'classnames';
...@@ -36,9 +38,18 @@ class SearchBar extends React.Component { ...@@ -36,9 +38,18 @@ class SearchBar extends React.Component {
}); });
}; };
clear = () => {
this.setState({
value: ''
});
this.props.setSearchTerm('');
};
render() { render() {
return ( return (
<Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus')}> <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
this.state.value && 'search-bar-has-value')}>
<div className={'search-bar-left-search-container'}> <div className={'search-bar-left-search-container'}>
<SearchIcon className={'search-bar-search-icon'}/> <SearchIcon className={'search-bar-search-icon'}/>
</div> </div>
...@@ -53,7 +64,11 @@ class SearchBar extends React.Component { ...@@ -53,7 +64,11 @@ class SearchBar extends React.Component {
inputProps={{ inputProps={{
'aria-label': 'Search Bar', 'aria-label': 'Search Bar',
}} }}
value={this.state.value}
/> />
<IconButton onClick={this.clear} className={'search-bar-close-btn'}>
<CloseIcon />
</IconButton>
</Paper> </Paper>
); );
} }
......
...@@ -29,4 +29,16 @@ ...@@ -29,4 +29,16 @@
align-items: center !important; align-items: center !important;
transition: ease-in-out width 250ms; transition: ease-in-out width 250ms;
width: 100% width: 100%
}
.search-bar-close-btn {
width: 44px !important;
height: 44px !important;
display: none !important;
}
.search-bar-has-value {
.search-bar-close-btn {
display: inline-flex !important;
}
} }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment