645 searchdropdown

.gitignore

@@ -65,6 +65,9 @@ package-lock.json
 .vscode/
 jsconfig.json
 
+# jetbrains
+.idea
+
 #nvm
 .nvmrc
 

packages/app/app/actions/search.js

@@ -32,6 +32,8 @@ export const LASTFM_TRACK_SEARCH_SUCCESS = 'LASTFM_TRACK_SEARCH_SUCCESS';
 export const YOUTUBE_PLAYLIST_SEARCH_START = 'YOUTUBE_PLAYLIST_SEARCH_START';
 export const YOUTUBE_PLAYLIST_SEARCH_SUCCESS = 'YOUTUBE_PLAYLIST_SEARCH_SUCCESS';
 
+export const SEARCH_DROPDOWN_DISPLAY_CHANGE = 'SEARCH_DROPDOWN_DISPLAY_CHANGE';
+
 export function sourcesSearch(terms, plugins) {
   let searchResults = {};
   for (let i = 0; i < plugins.streamProviders.length; i++) {
@@ -298,3 +300,8 @@ export const albumInfoSearchByName = (albumName, history) => async (dispatch, ge
     ));
   }
 };
+
+export const setSearchDropdownVisibility = displayState => ({
+  type: SEARCH_DROPDOWN_DISPLAY_CHANGE,
+  payload: displayState
+});

packages/app/app/containers/SearchBoxContainer/index.js

@@ -18,7 +18,9 @@ const SearchBoxContainer = ({
   selectedSearchProviderOption,
   handleSelectSearchProvider,
   isConnected,
-  t
+  t,
+  isFocused,
+  handleFocus
 }) => (
   <SearchBox
     loading={unifiedSearchStarted}
@@ -29,14 +31,17 @@ const SearchBoxContainer = ({
     searchProviders={searchProvidersOptions}
     selectedSearchProvider={selectedSearchProviderOption}
     onSearchProviderSelect={handleSelectSearchProvider}
+    isFocused={isFocused}
+    handleFocus={handleFocus}
   />
 );
 
 const mapStateToProps = state => ({
   unifiedSearchStarted: state.search.unifiedSearchStarted,
   isConnected: state.connectivity,
   searchProviders: state.plugin.plugins.metaProviders,
-  selectedSearchProvider: state.plugin.selected.metaProviders
+  selectedSearchProvider: state.plugin.selected.metaProviders,
+  isFocused: state.search.isFocused
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -55,14 +60,15 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withTranslation('search'),
   withHandlers({
-    handleSearch: 
-    ({ searchActions, history }) => value => 
-      value.length >= MIN_SEARCH_LENGTH ? searchActions.unifiedSearch(value, history) : null,
-    handleSelectSearchProvider:  
-      ({ pluginActions }) => provider => 
-        pluginActions.selectMetaProvider(provider.value)
+    handleSearch:
+      ({ searchActions, history }) => value =>
+        value.length >= MIN_SEARCH_LENGTH ? searchActions.unifiedSearch(value, history) : null,
+    handleSelectSearchProvider:
+      ({ pluginActions }) => provider =>
+        pluginActions.selectMetaProvider(provider.value),
+    handleFocus: ({ searchActions }) => bool => searchActions.setSearchDropdownVisibility(bool)
   }),
-  withProps(({searchProviders, selectedSearchProvider}) => ({
+  withProps(({ searchProviders, selectedSearchProvider }) => ({
     searchProvidersOptions: _.map(searchProviders, providerToOption),
     selectedSearchProviderOption: providerToOption(
       _.find(searchProviders, { sourceName: selectedSearchProvider })

packages/app/app/reducers/search.js

@@ -15,7 +15,8 @@ import {
   LASTFM_TRACK_SEARCH_SUCCESS,
   YOUTUBE_PLAYLIST_SEARCH_START,
   YOUTUBE_PLAYLIST_SEARCH_SUCCESS,
-  ALBUM_INFO_SEARCH_ERROR
+  ALBUM_INFO_SEARCH_ERROR,
+  SEARCH_DROPDOWN_DISPLAY_CHANGE
 } from '../actions/search';
 import { Artist } from '@nuclear/core';
 
@@ -28,13 +29,13 @@ const initialState = {
   albumDetails: {},
   artistDetails: {},
   unifiedSearchStarted: false,
-  playlistSearchStarted: false
+  playlistSearchStarted: false,
+  isFocused: false
 };
 
 function reduceAlbumSearchSuccess(state, action) {
   return {
-    ...
-    state,
+    ...state,
     albumSearchResults: action.payload
   };
 }
@@ -75,6 +76,13 @@ function reduceYoutubePlaylistSearchSuccess(state, action) {
   };
 }
 
+function reduceSearchDropdownDisplay(state, action) {
+  return {
+    ...state,
+    isFocused: action.payload
+  };
+}
+
 export default function SearchReducer(state = initialState, action) {
   switch (action.type) {
   case UNIFIED_SEARCH_START:
@@ -200,6 +208,8 @@ export default function SearchReducer(state = initialState, action) {
     return reduceYoutubePlaylistSearchStart(state, action);
   case YOUTUBE_PLAYLIST_SEARCH_SUCCESS:
     return reduceYoutubePlaylistSearchSuccess(state, action);
+  case SEARCH_DROPDOWN_DISPLAY_CHANGE:
+    return reduceSearchDropdownDisplay(state, action);
   default:
     return state;
   }

packages/ui/lib/components/SearchBox/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import _ from 'lodash';
-import { Icon, Dropdown } from 'semantic-ui-react';
+import { Dropdown, Icon } from 'semantic-ui-react';
 import { compose, withHandlers, withState } from 'recompose';
+import SearchBoxDropdown from '../SearchBoxDropbown';
 
 import common from '../../common.scss';
 import styles from './styles.scss';
@@ -16,35 +17,60 @@ const SearchBox = ({
   selectedSearchProvider,
   onSearchProviderSelect,
   onChange,
-  onKeyDown
-}) => (
-  <div
-    className={cx(
-      common.nuclear,
-      styles.search_box_container
-    )}
-  >
-    <Icon name='search' disabled={disabled} />
-    <input
-      autoFocus
-      placeholder={placeholder}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      disabled={disabled}
-      className={cx({ [styles.disabled]: disabled })}
-    />
-    {loading && <Icon name='spinner' loading />}
-    {
-      !_.isNil(searchProviders) && !_.isEmpty(searchProviders) &&
-        <Dropdown
-          value={selectedSearchProvider.value}
-          onChange={onSearchProviderSelect}
-          options={searchProviders}
+  onKeyDown,
+  handleFocus,
+  isFocused,
+  onClick
+}) => {
+
+  const searchRef = useRef(null);
+  useEffect(() => {
+    const handleClick = e => {
+      if (searchRef.current && !searchRef.current.contains(e.target)) {
+        handleFocus(false);
+      }
+    };
+    if (isFocused) {
+      document.addEventListener('mousedown', handleClick);
+      return () => document.removeEventListener('mousedown', handleClick);
+    }
+  }, [handleFocus, isFocused, searchRef]);
+
+  return (
+    <div className={cx(common.nuclear, styles.search_box_container)}>
+
+      <div
+        className={cx(
+          common.nuclear,
+          styles.search_box
+        )}
+        ref={searchRef}
+      >
+        <Icon name='search' disabled={disabled}/>
+        <input
+          autoFocus
+          placeholder={placeholder}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
           disabled={disabled}
+          className={cx({ [styles.disabled]: disabled })}
+          onClick={onClick}
         />
-    }
-  </div>
-);
+        {loading && <Icon name='spinner' loading/>}
+        {
+          !_.isNil(searchProviders) && !_.isEmpty(searchProviders) &&
+          <Dropdown
+            value={selectedSearchProvider.value}
+            onChange={onSearchProviderSelect}
+            options={searchProviders}
+            disabled={disabled}
+          />
+        }
+        {isFocused ? <SearchBoxDropdown display={isFocused}/> : null}
+      </div>
+    </div>
+  );
+};
 
 const optionShape = PropTypes.shape({
   key: PropTypes.string,
@@ -64,22 +90,32 @@ SearchBox.propTypes = {
   /* eslint-disable react/no-unused-prop-types */
   onSearch: PropTypes.func,
   setTerms: PropTypes.func,
-  terms: PropTypes.string
+  terms: PropTypes.string,
   /* eslint-enable react/no-unused-prop-types */
+  handleFocus: PropTypes.func
 };
 
 const RETURN_KEYCODE = 13;
+const ESC_KEYCODE = 27;
 export default compose(
   withState('terms', 'setTerms', ''),
   withHandlers({
     onSearchProviderSelect:
-    ({ searchProviders, onSearchProviderSelect }) =>
-      (e, { value }) =>
-        onSearchProviderSelect(_.find(searchProviders, { value })),
+      ({ searchProviders, onSearchProviderSelect }) =>
+        (e, { value }) =>
+          onSearchProviderSelect(_.find(searchProviders, { value })),
     onChange: ({ onChange, setTerms }) => e => {
       setTerms(e.target.value);
       onChange(e.target.value);
     },
-    onKeyDown: ({ onSearch, terms }) => e => e.which === RETURN_KEYCODE && onSearch(terms)
+    onKeyDown: ({ onSearch, terms, handleFocus }) => e => {
+      if (e.which === RETURN_KEYCODE) {
+        onSearch(terms);
+      }
+      if (e.which === ESC_KEYCODE) {
+        handleFocus(false);
+      }
+    },
+    onClick: ({ handleFocus }) => () => handleFocus(true)
   })
 )(SearchBox);

packages/ui/lib/components/SearchBox/styles.scss

@@ -4,63 +4,71 @@ $input_height: 30px;
 
 .search_box_container {
   display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
 
-  i.icon {
+  .search_box {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $white;
+    position: relative;
+    flex: 1 1 auto;
 
-    width: $input_height;
-    height: $input_height;
-    margin: 0;
-  }
+    i.icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: $white;
 
-  i.search.icon {
-    border-radius: 0;
-    background-color: $blue;
-  }
+      width: $input_height;
+      height: $input_height;
+      margin: 0;
+    }
 
-  i.spinner.icon {
-    margin-left: -$input_height;
-  }
+    i.search.icon {
+      border-radius: 0;
+      background-color: $blue;
+    }
 
-  input {
-    flex: 1 1 auto;
-    height: $input_height;
-    border-radius: 0;
-    border: none;
-    padding: 0 1em;
+    i.spinner.icon {
+      margin-left: -$input_height;
+    }
 
-    color: $grey;
-    outline: none;
-    background-color: $background3;
+    input {
+      flex: 1 1 auto;
+      height: $input_height;
+      border-radius: 0;
+      border: none;
+      padding: 0 1em;
 
-    font-family: inherit;
-    font-size: 16px;
+      color: $grey;
+      outline: none;
+      background-color: $background3;
 
-    &::selection {
-      background: rgba($lightbg, 0.85);
-    }
+      font-family: inherit;
+      font-size: 16px;
+
+      &::selection {
+        background: rgba($lightbg, 0.85);
+      }
 
-    &.disabled {
-      opacity: .45;
+      &.disabled {
+        opacity: .45;
+      }
     }
-  }
 
-  .ui.dropdown {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 12px;
+    .ui.dropdown {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 12px;
 
-    color: $white;
-    background: $blue;
+      color: $white;
+      background: $blue;
 
-    .item,
-    .text {
-      color: $white !important;
+      .item,
+      .text {
+        color: $white !important;
+      }
     }
   }
 }
+

packages/ui/lib/components/SearchBoxDropbown/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './styles.scss';
+
+const SearchBoxDropdown = props => {
+  return props.display ? (
+    <div className={styles.search_box_dropdown}>
+      {props.children}
+    </div>) : null;
+};
+
+export default SearchBoxDropdown;