Merge pull request #91 from appirio-tech/community-fixes

Fix search bar typeahead and styling

Author: mahestro

components/Panel/Panel.jsx

@@ -42,7 +42,7 @@ class Panel extends Component {
 
     return (
       <div className="Panel">
-        {header}
+        {this.props.showHeader ? header : null}
         {body}
       </div>
     )
@@ -54,4 +54,8 @@ Panel.propTypes = {
   expandTrigger: PropTypes.string
 }
 
+Panel.defaultProps = {
+  showHeader : true
+}
+
 export default Panel

components/Panel/Panel.scss

@@ -19,5 +19,8 @@ $panel-header-bg-color: #DFDFE1;
     border-right : 1px solid $tc-gray-40;
     border-bottom : 1px solid $tc-gray-40;
     padding: 10px;
+    overflow-x: visible;
+    overflow-y: scroll;
+    max-height: 252px;
   }
-}
+}

components/SearchBar/SearchBar.jsx

@@ -67,6 +67,7 @@ class SearchBar extends Component {
 
   handleSuggestionsUpdate(requestNo, data) {
     if (requestNo === this.state.maxRequestNo) {
+      console.log('SUGGESTIONS', data)
       this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null})
     }
   }
@@ -102,6 +103,7 @@ class SearchBar extends Component {
     this.refs.searchValue.value = null
     this.setState({ searchValue: this.refs.searchValue.value })
     this.setState({ searchState: 'empty' })
+    this.setState({ suggestions: false })
     this.props.onClearSearch()
   }
 
@@ -191,11 +193,11 @@ class SearchBar extends Component {
 
     const results = this.state.loading === true
       ? <div className="loading-suggestions"><Loader /></div>
-      : <SearchSuggestions recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } onSuggestionSelect={ this.handleSuggestionSelect } />
+      : <SearchSuggestions hideSuggestionsWhenEmpty={ this.props.hideSuggestionsWhenEmpty } recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } showPopularSearchHeader={ this.props.showPopularSearchHeader } onSuggestionSelect={ this.handleSuggestionSelect } />
     return (
       <div className={ sbClasses }>
-        <input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
         <span className="search-typeahead-text">{ typeaheadText }</span>
+        <input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
         <img className="search-bar__clear" src={ require('./x-mark.svg') } onClick={ this.clearSearch }/>
         <div className="search-icon-wrap" onClick={ this.search }>
           <img className="search-bar__icon" src={ require('./icon-search.png') } />
@@ -209,19 +211,22 @@ class SearchBar extends Component {
   }
 }
 
-
 SearchBar.propTypes = {
+  hideSuggestionsWhenEmpty: PropTypes.func.bool,
   onSearch     : PropTypes.func.isRequired,
   onClearSearch : PropTypes.func,
   onTermChange : PropTypes.func.isRequired,
   recentTerms  : PropTypes.array,
-  searchTermKey: PropTypes.string
+  searchTermKey: PropTypes.string,
+  showPopularSearchHeader: PropTypes.bool
 }
 
 SearchBar.defaultProps = {
+  hideSuggestionsWhenEmpty: false,
   recentTerms   : [],
   searchTermKey : 'q',
-  onClearSearch : () => {}
+  onClearSearch : () => {},
+  showPopularSearchHeader: true
 }
 
 export default SearchBar

components/SearchBar/SearchBar.scss

@@ -79,7 +79,9 @@
     font-size: 17px;
     color: $tc-gray-90;
     line-height: 20px;
-    width: calc(100% - 15px - 46px);
+    // NOTE: If uncommented, it causes problems with the proper alignment of
+    //    the typeahead text.
+    // width: calc(100% - 15px - 46px);
     position: absolute;
     left: 15px;
     top: 50%;
@@ -100,10 +102,11 @@
   }
 
   .search-typeahead-text {
+    position: absolute;
     color: $tc-gray-40;
     display: none;
     z-index: 10;
-    left: 16.5px;
+    top: 19px;
   }
 
   .search-bar__clear {

components/SearchSuggestions/SearchSuggestions.jsx

@@ -83,7 +83,7 @@ class SearchSuggestions extends Component {
 
     const popularSearch = !popularList ? '' :(
 			<div className="popular-search-suggestions">
-				<Panel>
+				<Panel showHeader={this.props.showPopularSearchHeader}>
 					<div className="panel-header">
 						<div className="label">Popular</div>
 					</div>
@@ -100,7 +100,11 @@ class SearchSuggestions extends Component {
       { 'empty-state' : recentList && !popularList }
     )
 
-    return (
+    const hide = this.props.hideSuggestionsWhenEmpty &&
+        (!recentList || !recentList.length) &&
+        (!popularList || !popularList.length)
+
+    return hide ? (<div></div>) : (
 			<div className={ ssClasses }>
 				{ popularSearch }
 				{ recentSearches }
@@ -110,16 +114,20 @@ class SearchSuggestions extends Component {
 }
 
 SearchSuggestions.propTypes = {
+  hideWhenEmpty         : PropTypes.bool,
   onSuggestionSelect    : PropTypes.func.isRequired,
   recentSearch          : PropTypes.array,
   popularSearch         : PropTypes.array,
-  searchTerm            : PropTypes.string
+  searchTerm            : PropTypes.string,
+  showPopularSearchHeader: PropTypes.bool
 }
 
 SearchSuggestions.defaultProps = {
+  hideWhenEmpty         : true,
   recentSearch          : [],
   popularSearch         : [],
-  searchTerm            : ''
+  searchTerm            : '',
+  showPopularSearchHeader: true
 }
 
-export default SearchSuggestions
+export default SearchSuggestions

components/SearchSuggestions/SearchSuggestions.scss

@@ -6,7 +6,7 @@
 	border: 1px solid $tc-gray-30;
 	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
 	border-radius: 2px;
-	min-height: 303px;
+	// min-height: 303px;
 	position: relative;
 
 	.panel-header {
@@ -66,7 +66,7 @@
 	.panel-body {
 		border: none;
 		padding: 0;
-		padding-bottom: 5px;
+		// padding-bottom: 5px;
 
 		li.selected {
 			background-color: $tc-gray-neutral-dark;
@@ -127,4 +127,4 @@
 	.panel-body {
 		padding-bottom: 45px;
 	}
-}
+}

components/SwitchButton/SwitchButton.jsx

@@ -3,8 +3,8 @@ require('./SwitchButton.scss')
 const SwitchButton = ({label, ...props}) => {
   return (
     <div className="SwitchButton clearfix">
-      <span className="label">{label}</span>
       <label>
+        <span className="label">{label}</span>
         <input type="checkbox" {...props} />
         <i/>
       </label>

components/SwitchButton/SwitchButton.scss

@@ -5,7 +5,7 @@
   display: flex;
   .label{
     width: 92px;
-    line-height: 30px;
+    line-height: 20px;
     font-size: 12px;
     @include roboto;
     color: $tc-gray-60;