From 7e63aa14ea4298a1511f75e875ca001d2bd61ee8 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 13:53:07 +0100
Subject: Add results
---
.../react/components/presentational/Search.jsx | 30 ++++++++++++++++------
src/client/react/reducers/search.js | 2 +-
src/client/static/bundle.css | 17 +++++++++---
src/client/style/index.scss | 23 ++++++++++++++---
4 files changed, 56 insertions(+), 16 deletions(-)
(limited to 'src')
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 01c6f7d..40cd3e8 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -2,6 +2,23 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SearchIcon from 'react-icons/lib/md/search';
+import PersonIcon from 'react-icons/lib/md/person';
+
+const userShape = {
+ value: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+};
+
+const Result = ({ user }) => (
+ <div className="search__result">
+ <div className="search__icon-wrapper"><PersonIcon /></div>
+ <div className="search__result__text">{user.value}</div>
+ </div>
+);
+
+Result.propTypes = {
+ user: PropTypes.shape(userShape).isRequired,
+};
const Search = ({
onInputChange,
@@ -11,7 +28,7 @@ const Search = ({
value,
results,
}) => (
- <div className={classnames('search', { focus: hasFocus })}>
+ <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
<div className="search__input-wrapper">
<div className="search__icon-wrapper"><SearchIcon /></div>
<input
@@ -22,9 +39,9 @@ const Search = ({
onBlur={onBlur}
/>
</div>
- <ul>
- {results.map(result => <li key={result.name}>{result.name}</li>)}
- </ul>
+ {results.map(user => (
+ <Result key={user.value} user={user} />
+ ))}
</div>
);
@@ -34,10 +51,7 @@ Search.propTypes = {
onBlur: PropTypes.func.isRequired,
hasFocus: PropTypes.bool.isRequired,
value: PropTypes.string.isRequired,
- results: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- })).isRequired,
+ results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
};
export default Search;
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index a695184..50233a7 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -11,7 +11,7 @@ const search = (state = DEFAULT_STATE, action) => {
...state,
searchInput: action.typedValue,
searchResults: [
- { type: 's', name: '18561' },
+ { type: 's', value: '18561' },
],
};
case 'SEARCH/FOCUS_CHANGE':
diff --git a/src/client/static/bundle.css b/src/client/static/bundle.css
index d04fba6..5755992 100644
--- a/src/client/static/bundle.css
+++ b/src/client/static/bundle.css
@@ -1,15 +1,18 @@
body {
- background-color: #ececec; }
+ background-color: #ececec;
+ font-family: 'Roboto'; }
* {
box-sizing: border-box; }
.search {
width: 580px;
- height: 54px;
+ border-radius: 2px;
background-color: white; }
- .search.focus {
+ .search--has-focus {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+ .search--has-results .search__input-wrapper {
+ border-bottom: 1px #BDBDBD solid; }
.search__icon-wrapper {
height: 54px;
padding: 15px; }
@@ -18,7 +21,6 @@ body {
width: 24px; }
.search__input-wrapper {
display: flex;
- widows: inherit;
height: 54px; }
.search__input-wrapper input {
border: 0;
@@ -28,3 +30,10 @@ body {
padding: 16px;
padding-left: 0px;
font-size: 16px; }
+ .search__result {
+ display: flex; }
+ .search__result__text {
+ padding: 15px;
+ padding-left: 0px;
+ font-size: 16px;
+ transform: translate(0, 3px); }
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 6f1592c..d7d8b01 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -1,5 +1,6 @@
body {
background-color: #ececec;
+ font-family: 'Roboto';
}
* {
@@ -8,13 +9,19 @@ body {
.search {
width: 580px;
- height: 54px;
+ border-radius: 2px;
background-color: white;
- &.focus {
+ &--has-focus {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
+ &--has-results {
+ .search__input-wrapper {
+ border-bottom: 1px #BDBDBD solid;
+ }
+ }
+
&__icon-wrapper {
height: 54px;
padding: 15px;
@@ -26,7 +33,6 @@ body {
&__input-wrapper {
display: flex;
- widows: inherit;
height: 54px;
input {
@@ -39,4 +45,15 @@ body {
font-size: 16px;
}
}
+
+ &__result {
+ display: flex;
+
+ &__text {
+ padding: 15px;
+ padding-left: 0px;
+ font-size: 16px;
+ transform: translate(0, 3px);
+ }
+ }
}
--
cgit v1.1