aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/presentational
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components/presentational')
-rw-r--r--src/client/react/components/presentational/Search.jsx35
1 files changed, 26 insertions, 9 deletions
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index a713db4..01c6f7d 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -1,13 +1,27 @@
import React from 'react';
import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SearchIcon from 'react-icons/lib/md/search';
-const Search = ({ onInputChange, value, results }) => (
- <div>
- <input
- onChange={onInputChange}
- value={value}
- placeholder="Zoeken"
- />
+const Search = ({
+ onInputChange,
+ onFocus,
+ onBlur,
+ hasFocus,
+ value,
+ results,
+}) => (
+ <div className={classnames('search', { focus: hasFocus })}>
+ <div className="search__input-wrapper">
+ <div className="search__icon-wrapper"><SearchIcon /></div>
+ <input
+ onChange={onInputChange}
+ value={value}
+ placeholder="Zoeken"
+ onFocus={onFocus}
+ onBlur={onBlur}
+ />
+ </div>
<ul>
{results.map(result => <li key={result.name}>{result.name}</li>)}
</ul>
@@ -16,10 +30,13 @@ const Search = ({ onInputChange, value, results }) => (
Search.propTypes = {
onInputChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func.isRequired,
+ onBlur: PropTypes.func.isRequired,
+ hasFocus: PropTypes.bool.isRequired,
value: PropTypes.string.isRequired,
results: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string.require,
- type: PropTypes.string.require,
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
})).isRequired,
};