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 {connect} from 'react-redux';
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 Paper from 'material-ui/Paper';
import classNames from 'classnames';
......@@ -36,9 +38,18 @@ class SearchBar extends React.Component {
});
};
clear = () => {
this.setState({
value: ''
});
this.props.setSearchTerm('');
};
render() {
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'}>
<SearchIcon className={'search-bar-search-icon'}/>
</div>
......@@ -53,7 +64,11 @@ class SearchBar extends React.Component {
inputProps={{
'aria-label': 'Search Bar',
}}
value={this.state.value}
/>
<IconButton onClick={this.clear} className={'search-bar-close-btn'}>
<CloseIcon />
</IconButton>
</Paper>
);
}
......
......@@ -29,4 +29,16 @@
align-items: center !important;
transition: ease-in-out width 250ms;
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