fix typing in uri bar on search page
This commit is contained in:
parent
7f57447e57
commit
90ccf18fbf
4 changed files with 24 additions and 7 deletions
|
@ -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)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue