Converted SearchField component into funcitonal component

This commit is contained in:
Alejandro Celaya 2020-04-05 16:16:55 +02:00
parent cb7062bb95
commit b79333393b
3 changed files with 53 additions and 58 deletions

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
import PropTypes from 'prop-types';
@ -6,69 +6,59 @@ import classNames from 'classnames';
import './SearchField.scss';
const DEFAULT_SEARCH_INTERVAL = 500;
let timer;
export default class SearchField extends React.Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string,
large: PropTypes.bool,
noBorder: PropTypes.bool,
const propTypes = {
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string,
large: PropTypes.bool,
noBorder: PropTypes.bool,
};
const SearchField = ({ onChange, className, placeholder = 'Search...', large = true, noBorder = false }) => {
const [ searchTerm, setSearchTerm ] = useState('');
const resetTimer = () => {
clearTimeout(timer);
timer = null;
};
static defaultProps = {
className: '',
placeholder: 'Search...',
large: true,
noBorder: false,
};
state = { showClearBtn: false, searchTerm: '' };
timer = null;
searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {
this.setState({
showClearBtn: searchTerm !== '',
searchTerm,
});
const resetTimer = () => {
clearTimeout(this.timer);
this.timer = null;
};
const searchTermChanged = (newSearchTerm, timeout = DEFAULT_SEARCH_INTERVAL) => {
setSearchTerm(newSearchTerm);
resetTimer();
this.timer = setTimeout(() => {
this.props.onChange(searchTerm);
timer = setTimeout(() => {
onChange(newSearchTerm);
resetTimer();
}, timeout);
}
};
render() {
const { className, placeholder, large, noBorder } = this.props;
return (
<div className={classNames('search-field', className)}>
<input
type="text"
className={classNames('form-control search-field__input', {
'form-control-lg': large,
'search-field__input--no-border': noBorder,
})}
placeholder={placeholder}
value={this.state.searchTerm}
onChange={(e) => this.searchTermChanged(e.target.value)}
/>
<FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
<div
className="close search-field__close"
hidden={!this.state.showClearBtn}
id="search-field__close"
onClick={() => this.searchTermChanged('', 0)}
>
&times;
</div>
return (
<div className={classNames('search-field', className)}>
<input
type="text"
className={classNames('form-control search-field__input', {
'form-control-lg': large,
'search-field__input--no-border': noBorder,
})}
placeholder={placeholder}
value={searchTerm}
onChange={(e) => searchTermChanged(e.target.value)}
/>
<FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
<div
className="close search-field__close"
hidden={searchTerm === ''}
id="search-field__close"
onClick={() => searchTermChanged('', 0)}
>
&times;
</div>
);
}
}
</div>
);
};
SearchField.propTypes = propTypes;
export default SearchField;

View file

@ -2,6 +2,10 @@
.search-field {
position: relative;
&:focus-within {
z-index: 1;
}
}
.search-field__input.search-field__input {

View file

@ -31,6 +31,7 @@
bottom: 0;
margin-top: 34px;
padding: .5rem;
@include sticky-cell();
}