aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components/container')
-rw-r--r--src/client/react/components/container/Search.js141
-rw-r--r--src/client/react/components/container/Search.scss42
2 files changed, 3 insertions, 180 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,
diff --git a/src/client/react/components/container/Search.scss b/src/client/react/components/container/Search.scss
deleted file mode 100644
index ef629c2..0000000
--- a/src/client/react/components/container/Search.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.Search {
- height: 54px;
- position: relative;
-
- .overflow {
- border-radius: 2px;
- background-color: white;
- position: absolute;
- width: 100%;
- box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
-
- &.hasFocus {
- box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
- }
-
- .inputWrapper {
- display: flex;
- height: 54px;
-
- .iconWrapper {
- height: 54px;
- padding: 15px;
-
- svg {
- height: 24px;
- width: 24px;
- }
- }
-
- input {
- border: 0;
- background-color: transparent;
- flex-grow: 1;
- height: inherit;
- padding: 16px;
- padding-left: 0px;
- font-size: 16px;
- outline: none;
- }
- }
- }
-}