LBRYCommunity/lbry-fdroid
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #249 from lbryio/omnibar-text-alignment

Browse source 
URI bar text visible from the left when it's not focused
This commit is contained in:
Akinwale Ariwodola 2018-08-21 06:10:10 +01:00 committed by GitHub
commit f926dc28be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/src/component/uriBar/view.js
View file

@ -7,21 +7,22 @@ import uriBarStyle from '../../styles/uriBar';
class UriBar extends React.PureComponent { class UriBar extends React.PureComponent {
static INPUT_TIMEOUT = 500; static INPUT_TIMEOUT = 500;
textInput = null; textInput = null;
keyboardDidHideListener = null; keyboardDidHideListener = null;
componentDidMount () { componentDidMount () {
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
this.setSelection();
} }
componentWillUnmount() { componentWillUnmount() {
if (this.keyboardDidHideListener) { if (this.keyboardDidHideListener) {
this.keyboardDidHideListener.remove(); this.keyboardDidHideListener.remove();
} }
} }
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -31,24 +32,24 @@ class UriBar extends React.PureComponent {
focused: false focused: false
}; };
} }
handleChangeText = text => { handleChangeText = text => {
const newValue = text ? text : ''; const newValue = text ? text : '';
clearTimeout(this.state.changeTextTimeout); clearTimeout(this.state.changeTextTimeout);
const { updateSearchQuery } = this.props; const { updateSearchQuery } = this.props;
let timeout = setTimeout(() => { let timeout = setTimeout(() => {
updateSearchQuery(text); updateSearchQuery(text);
}, UriBar.INPUT_TIMEOUT); }, UriBar.INPUT_TIMEOUT);
this.setState({ inputText: newValue, currentValue: newValue, changeTextTimeout: timeout }); this.setState({ inputText: newValue, currentValue: newValue, changeTextTimeout: timeout });
} }
handleItemPress = (item) => { handleItemPress = (item) => {
const { navigation, updateSearchQuery } = this.props; const { navigation, updateSearchQuery } = this.props;
const { type, value } = item; const { type, value } = item;
Keyboard.dismiss(); Keyboard.dismiss();
if (SEARCH_TYPES.SEARCH === type) { if (SEARCH_TYPES.SEARCH === type) {
navigation.navigate({ routeName: 'Search', key: 'searchPage', params: { searchQuery: value }}); navigation.navigate({ routeName: 'Search', key: 'searchPage', params: { searchQuery: value }});
} else { } else {
@ -56,7 +57,7 @@ class UriBar extends React.PureComponent {
navigation.navigate({ routeName: 'File', key: uri, params: { uri }}); navigation.navigate({ routeName: 'File', key: uri, params: { uri }});
} }
} }
_keyboardDidHide = () => { _keyboardDidHide = () => {
if (this.textInput) { if (this.textInput) {
this.textInput.blur(); this.textInput.blur();
@ -64,17 +65,23 @@ class UriBar extends React.PureComponent {
this.setState({ focused: false }); this.setState({ focused: false });
} }
setSelection() {
if (this.textInput) {
this.textInput.setNativeProps({ selection: { start: 0, end: 0 }});
}
}
render() { render() {
const { navigation, suggestions, updateSearchQuery, value } = this.props; const { navigation, suggestions, updateSearchQuery, value } = this.props;
if (this.state.currentValue === null) { if (this.state.currentValue === null) {
this.setState({ currentValue: value }); this.setState({ currentValue: value });
} }
let style = [uriBarStyle.overlay]; let style = [uriBarStyle.overlay];
if (this.state.focused) { if (this.state.focused) {
style.push(uriBarStyle.inFocus); style.push(uriBarStyle.inFocus);
} }
return ( return (
<View style={style}> <View style={style}>
{this.state.focused && ( {this.state.focused && (
@ -90,6 +97,7 @@ class UriBar extends React.PureComponent {
<View style={uriBarStyle.uriContainer}> <View style={uriBarStyle.uriContainer}>
<TextInput ref={(ref) => { this.textInput = ref }} <TextInput ref={(ref) => { this.textInput = ref }}
style={uriBarStyle.uriText} style={uriBarStyle.uriText}
onLayout={() => { this.setSelection(); }}
selectTextOnFocus={true} selectTextOnFocus={true}
placeholder={'Search for videos, music, games and more'} placeholder={'Search for videos, music, games and more'}
underlineColorAndroid={'transparent'} underlineColorAndroid={'transparent'}
@ -100,14 +108,17 @@ class UriBar extends React.PureComponent {
inlineImageLeft={'baseline_search_black_24'} inlineImageLeft={'baseline_search_black_24'}
inlineImagePadding={16} inlineImagePadding={16}
onFocus={() => this.setState({ focused: true })} onFocus={() => this.setState({ focused: true })}
onBlur={() => this.setState({ focused: false })} onBlur={() => {
this.setState({ focused: false });
this.setSelection();
}}
onChangeText={this.handleChangeText} onChangeText={this.handleChangeText}
onSubmitEditing={() => { onSubmitEditing={() => {
if (this.state.inputText) { if (this.state.inputText) {
let inputText = this.state.inputText; let inputText = this.state.inputText;
if (isNameValid(inputText) || isURIValid(inputText)) { if (isNameValid(inputText) || isURIValid(inputText)) {
const uri = normalizeURI(inputText); const uri = normalizeURI(inputText);
navigation.navigate({ routeName: 'File', key: uri, params: { uri }}); navigation.navigate({ routeName: 'File', key: uri, params: { uri }});
} else { } else {
// Open the search page with the query populated // Open the search page with the query populated
navigation.navigate({ routeName: 'Search', key: 'searchPage', params: { searchQuery: inputText }}); navigation.navigate({ routeName: 'Search', key: 'searchPage', params: { searchQuery: inputText }});