diff options
Diffstat (limited to 'src/client/react/components/container/Search.js')
-rw-r--r-- | src/client/react/components/container/Search.js | 141 |
1 files changed, 3 insertions, 138 deletions
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index 3e599e7..8308d67 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -18,145 +18,10 @@ * */ -import React from 'react'; -import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import classnames from 'classnames'; import { withRouter } from 'react-router-dom'; - -import SearchIcon from 'react-icons/lib/md/search'; - -import { userFromMatch } from '../../lib/url'; -import { setUser as setUserAction } from '../../store/actions'; - -import users from '../../users'; -import Menu from './Menu'; -import Results from './Results'; -import IconFromUserType from '../presentational/IconFromUserType'; - -import './Search.scss'; - -class Search extends React.Component { - static propTypes = { - selectedResult: PropTypes.string, - searchText: PropTypes.string.isRequired, - match: PropTypes.object.isRequired, - setUser: PropTypes.func.isRequired, - onInputChange: PropTypes.func.isRequired, - changeSelectedResult: PropTypes.func.isRequired, - }; - - static defaultProps = { - selectedResult: null, - }; - - 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) { - const { - selectedResult, - match, - setUser, - changeSelectedResult, - } = this.props; - - const urlUser = userFromMatch(match); - - switch (event.key) { - case 'ArrowUp': - event.preventDefault(); - changeSelectedResult(-1); - break; - - case 'ArrowDown': - event.preventDefault(); - changeSelectedResult(+1); - break; - - case 'Escape': - event.preventDefault(); - setUser(urlUser); - break; - - case 'Enter': - event.preventDefault(); - if (selectedResult) { - setUser(selectedResult); - } - break; - - default: - // Do nothing - } - } - - render() { - const { - searchText, - match, - onInputChange, - } = this.props; - - const { - hasFocus, - } = this.state; - - const urlUser = userFromMatch(match); - - const isExactMatch = ( - urlUser != null && searchText === users.byId[urlUser].value - ); - - return ( - <div className="Search"> - <div className={classnames('overflow', { hasFocus })}> - <div className="inputWrapper"> - <div className="iconWrapper"> - <IconFromUserType - userType={isExactMatch ? users.byId[urlUser].type : null} - defaultIcon={<SearchIcon />} - /> - </div> - <input - id="searchInput" - onChange={event => onInputChange(event.target.value)} - onKeyDown={this.onKeyDown} - value={searchText} - placeholder="Zoeken" - onFocus={this.onFocus} - onBlur={this.onBlur} - autoComplete="off" - /> - <Menu /> - </div> - <Results /> - </div> - </div> - ); - } -} +import Search from '../presentational/Search'; +import { setUser } from '../../store/actions'; const mapStateToProps = state => ({ results: state.search.results, @@ -165,7 +30,7 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ - setUser: user => dispatch(setUserAction(user)), + setUser: user => dispatch(setUser(user)), onInputChange: searchText => dispatch({ type: 'SEARCH/INPUT_CHANGE', searchText, |