72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import autobind from 'autobind-decorator';
|
|
import reduxLang from '../../middleware/lang';
|
|
|
|
@autobind
|
|
class HeaderSearchField extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.searchInput = React.createRef();
|
|
|
|
this.state = {
|
|
search: ''
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.searchInput.current.focus();
|
|
}
|
|
|
|
handleSearchInput(event) {
|
|
this.setState({ search: event.target.value });
|
|
}
|
|
|
|
handleSearch(event) {
|
|
event.preventDefault();
|
|
this.props.search(this.state.search);
|
|
}
|
|
|
|
handleClose() {
|
|
const { closeFunc, getCatalog, showingSearchResults } = this.props;
|
|
if (showingSearchResults) {
|
|
getCatalog();
|
|
}
|
|
|
|
{closeFunc && closeFunc() };
|
|
}
|
|
|
|
render() {
|
|
const { t } = this.props;
|
|
const { search } = this.state;
|
|
const { showClose, getCatalog, showingSearchResults } = this.props;
|
|
return (
|
|
<div className='HeaderSearchField'>
|
|
<form onSubmit={this.handleSearch}>
|
|
<input
|
|
className='medium-text'
|
|
type='text'
|
|
placeholder={t('search')}
|
|
ref={this.searchInput}
|
|
value={search}
|
|
onChange={this.handleSearchInput}
|
|
/>
|
|
</form>
|
|
{showClose && <button className='HeaderSearchField_closeBtn' onClick={this.handleClose}>
|
|
<img src='/static/gfx/alps_x.svg' alt='close' />
|
|
</button>
|
|
}
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
HeaderSearchField.propTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
search: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default reduxLang('HeaderSearchField')(HeaderSearchField);
|