From 075f745ddd91a194a4f498cc1b3527a762b5d37b Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 11 Jul 2019 14:16:39 -0400 Subject: [PATCH] add tag to wunderbar autocomplete --- src/ui/component/common/icon-custom.jsx | 6 ++++++ src/ui/component/wunderbar/view.jsx | 28 +++++++++++++++++-------- src/ui/constants/icons.js | 1 + src/ui/scss/component/_wunderbar.scss | 1 + 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/ui/component/common/icon-custom.jsx b/src/ui/component/common/icon-custom.jsx index 4057af42e..a96191376 100644 --- a/src/ui/component/common/icon-custom.jsx +++ b/src/ui/component/common/icon-custom.jsx @@ -253,6 +253,12 @@ export const icons = { ), + [ICONS.TAG]: buildIcon( + + + + + ), [ICONS.SUPPORT]: buildIcon( diff --git a/src/ui/component/wunderbar/view.jsx b/src/ui/component/wunderbar/view.jsx index b4d40f692..94f8b45e2 100644 --- a/src/ui/component/wunderbar/view.jsx +++ b/src/ui/component/wunderbar/view.jsx @@ -3,10 +3,11 @@ import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import React from 'react'; import classnames from 'classnames'; -import { normalizeURI, SEARCH_TYPES, isURIValid, buildURI } from 'lbry-redux'; +import { normalizeURI, SEARCH_TYPES, isURIValid } from 'lbry-redux'; +import { withRouter } from 'react-router'; import Icon from 'component/common/icon'; -import { parseQueryParams } from 'util/query-params'; import Autocomplete from './internal/autocomplete'; +import Tag from 'component/tag'; const L_KEY_CODE = 76; const ESC_KEY_CODE = 27; @@ -22,6 +23,7 @@ type Props = { doBlur: () => void, focused: boolean, doShowSnackBar: string => void, + history: { push: string => void }, }; type State = { @@ -51,10 +53,12 @@ class WunderBar extends React.PureComponent { getSuggestionIcon = (type: string) => { switch (type) { - case 'file': + case SEARCH_TYPES.FILE: return ICONS.FILE; - case 'channel': + case SEARCH_TYPES.CHANNEL: return ICONS.CHANNEL; + case SEARCH_TYPES.TAG: + return ICONS.TAG; default: return ICONS.SEARCH; } @@ -90,7 +94,7 @@ class WunderBar extends React.PureComponent { } handleSubmit(value: string, suggestion?: { value: string, type: string }) { - const { onSubmit, onSearch, doShowSnackBar } = this.props; + const { onSubmit, onSearch, doShowSnackBar, history } = this.props; const query = value.trim(); const showSnackError = () => { @@ -99,8 +103,10 @@ class WunderBar extends React.PureComponent { // User selected a suggestion if (suggestion) { - if (suggestion.type === 'search') { + if (suggestion.type === SEARCH_TYPES.SEARCH) { onSearch(query); + } else if (suggestion.type === SEARCH_TYPES.TAG) { + history.push(`/$/${PAGES.TAGS}?t=${suggestion.value}`); } else if (isURIValid(query)) { const uri = normalizeURI(query); onSubmit(uri); @@ -157,18 +163,22 @@ class WunderBar extends React.PureComponent { )} renderItem={({ value, type }, isHighlighted) => (
- {value} + + {type === SEARCH_TYPES.TAG ? : value} + {isHighlighted && ( {type === SEARCH_TYPES.SEARCH && __('Search')} {type === SEARCH_TYPES.CHANNEL && __('View channel')} {type === SEARCH_TYPES.FILE && __('View file')} + {type === SEARCH_TYPES.TAG && __('View Tag')} )}
@@ -179,4 +189,4 @@ class WunderBar extends React.PureComponent { } } -export default WunderBar; +export default withRouter(WunderBar); diff --git a/src/ui/constants/icons.js b/src/ui/constants/icons.js index a5306cdce..502d19de9 100644 --- a/src/ui/constants/icons.js +++ b/src/ui/constants/icons.js @@ -69,4 +69,5 @@ export const MUSIC_EQUALIZER = 'Sliders'; export const LIGHT = 'Sun'; export const DARK = 'Moon'; export const LIBRARY = 'Folder'; +export const TAG = 'Tag'; export const SUPPORT = 'TrendingUp'; diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index e3266c463..574e7ca31 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -72,6 +72,7 @@ box-shadow: 0 1px 5px rgba($lbry-black, 0.15); min-width: 100%; overflow: hidden; + font-size: 14px; [data-mode='dark'] & { background-color: $lbry-gray-5;