fix typing in uri bar on search page

This commit is contained in:
Akinwale Ariwodola 2019-05-29 16:39:34 +01:00
parent 7f57447e57
commit 90ccf18fbf
4 changed files with 24 additions and 7 deletions

View file

@ -5,6 +5,7 @@ import {
selectSearchValue, selectSearchValue,
selectSearchSuggestions selectSearchSuggestions
} from 'lbry-redux'; } from 'lbry-redux';
import { selectCurrentRoute } from 'redux/selectors/drawer';
import UriBar from './view'; import UriBar from './view';
const select = state => { const select = state => {
@ -13,6 +14,7 @@ const select = state => {
return { return {
...searchState, ...searchState,
query: selectSearchValue(state), query: selectSearchValue(state),
currentRoute: selectCurrentRoute(state),
suggestions: selectSearchSuggestions(state) suggestions: selectSearchSuggestions(state)
}; };
}; };

View file

@ -3,6 +3,7 @@ import React from 'react';
import { SEARCH_TYPES, isNameValid, isURIValid, normalizeURI } from 'lbry-redux'; import { SEARCH_TYPES, isNameValid, isURIValid, normalizeURI } from 'lbry-redux';
import { FlatList, Keyboard, TextInput, View } from 'react-native'; import { FlatList, Keyboard, TextInput, View } from 'react-native';
import { navigateToUri } from 'utils/helper'; import { navigateToUri } from 'utils/helper';
import Constants from 'constants';
import UriBarItem from './internal/uri-bar-item'; import UriBarItem from './internal/uri-bar-item';
import NavigationButton from 'component/navigationButton'; import NavigationButton from 'component/navigationButton';
import discoverStyle from 'styles/discover'; import discoverStyle from 'styles/discover';
@ -26,6 +27,15 @@ class UriBar extends React.PureComponent {
} }
} }
componentWillReceiveProps(nextProps) {
const { currentRoute, query } = nextProps;
const { currentRoute: prevRoute } = this.props;
if (Constants.DRAWER_ROUTE_SEARCH === currentRoute && currentRoute !== prevRoute) {
this.setState({ currentValue: query, inputText: query });
}
}
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -33,6 +43,7 @@ class UriBar extends React.PureComponent {
currentValue: null, currentValue: null,
inputText: null, inputText: null,
focused: false, focused: false,
currentValueSet: false,
// TODO: Add a setting to enable / disable direct search? // TODO: Add a setting to enable / disable direct search?
directSearch: true directSearch: true
}; };
@ -122,10 +133,14 @@ class UriBar extends React.PureComponent {
} }
} }
onSearchPageBlurred() {
this.setState({ currenValueSet: false });
}
render() { render() {
const { navigation, suggestions, query, searchView, value } = this.props; const { navigation, suggestions, query, value } = this.props;
if (value && this.state.currentValue === null) { if (!this.state.currentValue) {
this.setState({ currentValue: value }); this.setState({ currentValue: value, currentValueSet: true });
} }
let style = [uriBarStyle.overlay]; let style = [uriBarStyle.overlay];
@ -150,7 +165,7 @@ class UriBar extends React.PureComponent {
underlineColorAndroid={'transparent'} underlineColorAndroid={'transparent'}
numberOfLines={1} numberOfLines={1}
clearButtonMode={'while-editing'} clearButtonMode={'while-editing'}
value={searchView ? query : this.state.currentValue} value={this.state.currentValue}
returnKeyType={'go'} returnKeyType={'go'}
inlineImageLeft={'baseline_search_black_24'} inlineImageLeft={'baseline_search_black_24'}
inlineImagePadding={16} inlineImagePadding={16}

View file

@ -97,8 +97,7 @@ class SearchPage extends React.PureComponent {
<View style={searchStyle.container}> <View style={searchStyle.container}>
<UriBar value={query} <UriBar value={query}
navigation={navigation} navigation={navigation}
onSearchSubmitted={this.handleSearchSubmitted} onSearchSubmitted={this.handleSearchSubmitted} />
searchView={true} />
{isSearching && {isSearching &&
<View style={searchStyle.busyContainer}> <View style={searchStyle.busyContainer}>
<ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} /> <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} />

View file

@ -16,7 +16,6 @@ const searchStyle = StyleSheet.create({
justifyContent: 'center' justifyContent: 'center'
}, },
scrollPadding: { scrollPadding: {
flex: 1,
paddingBottom: 16 paddingBottom: 16
}, },
resultItem: { resultItem: {
@ -28,6 +27,7 @@ const searchStyle = StyleSheet.create({
marginRight: 8 marginRight: 8
}, },
featuredResultItem: { featuredResultItem: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingTop: 8, paddingTop: 8,
@ -52,6 +52,7 @@ const searchStyle = StyleSheet.create({
noResultsText: { noResultsText: {
fontFamily: 'Inter-UI-Regular', fontFamily: 'Inter-UI-Regular',
fontSize: 16, fontSize: 16,
marginTop: 16,
marginLeft: 16, marginLeft: 16,
marginRight: 16 marginRight: 16
}, },