diff options
author | Noah Loomans <noahloomans@gmail.com> | 2017-12-14 18:54:00 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2017-12-14 18:54:00 +0100 |
commit | 569b2969d530f08e55798c5cb3079948c7c037cd (patch) | |
tree | f90c5c524f1d3536a1f6ab665a7350739f590b7a /src/client/react/components/container/Search.jsx | |
parent | 8e9d5e98793f7594a8a1a1b5956163eca6795164 (diff) |
Use .js extention instead of .jsx
Diffstat (limited to 'src/client/react/components/container/Search.jsx')
-rw-r--r-- | src/client/react/components/container/Search.jsx | 106 |
1 files changed, 0 insertions, 106 deletions
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx deleted file mode 100644 index e49e6a7..0000000 --- a/src/client/react/components/container/Search.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import classnames from 'classnames'; - -import SearchIcon from 'react-icons/lib/md/search'; - -import { inputChange, changeSelectedResult } from '../../actions/search'; - -import users from '../../users'; -import Results from './Results'; -import IconFromUserType from '../presentational/IconFromUserType'; - -class Search extends React.Component { - constructor(props) { - super(props); - - this.state = { - hasFocus: false, - }; - - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - this.onKeyDown = this.onKeyDown.bind(this); - } - - onFocus() { - this.setState({ - hasFocus: true, - }); - } - - onBlur() { - this.setState({ - hasFocus: false, - }); - } - - onKeyDown(event) { - if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { - event.preventDefault(); - switch (event.key) { - case 'ArrowUp': - this.props.dispatch(changeSelectedResult(-1)); - break; - case 'ArrowDown': - this.props.dispatch(changeSelectedResult(+1)); - break; - default: - throw new Error('This should never happen... pls?'); - } - } - } - - render() { - const { - selectedResult, - isExactMatch, - dispatch, - } = this.props; - - const { - hasFocus, - } = this.state; - - return ( - <div className={classnames('search', { 'search--has-focus': hasFocus })}> - <div className="search__input-wrapper"> - <div className="search__icon-wrapper"> - <IconFromUserType - userType={isExactMatch ? users.byId[selectedResult].type : null} - defaultIcon={<SearchIcon />} - /> - </div> - <input - id="search__input" - onChange={event => dispatch(inputChange(event.target.value))} - onKeyDown={this.onKeyDown} - placeholder="Zoeken" - onFocus={this.onFocus} - onBlur={this.onBlur} - /> - </div> - <Results /> - </div> - ); - } -} - -Search.propTypes = { - selectedResult: PropTypes.string, - isExactMatch: PropTypes.bool.isRequired, - dispatch: PropTypes.func.isRequired, -}; - -Search.defaultProps = { - selectedResult: null, -}; - -const mapStateToProps = state => ({ - results: state.search.results, - selectedResult: state.search.selectedResult, - isExactMatch: state.search.isExactMatch, -}); - -export default connect(mapStateToProps)(Search); |