aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container/Search.js
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-21 12:06:41 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-21 12:06:41 +0100
commitf0c8cf0e79f003514fd65a70def5820205955a77 (patch)
treecb66d325fb5d16d8b7fa0f14c91ad17dd4ff7c6c /src/client/react/components/container/Search.js
parent569b2969d530f08e55798c5cb3079948c7c037cd (diff)
Move to typescript
Diffstat (limited to 'src/client/react/components/container/Search.js')
-rw-r--r--src/client/react/components/container/Search.js106
1 files changed, 0 insertions, 106 deletions
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
deleted file mode 100644
index e49e6a7..0000000
--- a/src/client/react/components/container/Search.js
+++ /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);