Add style to link on video file on tap. Adds a timeout to set it to false as Linking has a weird behavior when chrome vs youtube page is open.

This commit is contained in:
Daniel Dominguez 2018-06-18 20:44:06 -03:00
parent 35cf4255a6
commit 5be022e011
3 changed files with 32 additions and 6 deletions

View file

@ -2,17 +2,35 @@ import React from 'react';
import { Linking, Text, TouchableOpacity } from 'react-native'; import { Linking, Text, TouchableOpacity } from 'react-native';
export default class Link extends React.PureComponent { export default class Link extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
tappedStyle: false,
}
this.addTappedStyle = this.addTappedStyle.bind(this)
}
handlePress = () => { handlePress = () => {
const { error, href, navigation, notify } = this.props; const { error, href, navigation, notify } = this.props;
if (navigation && href.startsWith('#')) { if (navigation && href.startsWith('#')) {
navigation.navigate(href.substring(1)); navigation.navigate(href.substring(1));
} else { } else {
Linking.openURL(href).catch(err => notify({ if (this.props.effectOnTap) this.addTappedStyle();
message: error, Linking.openURL(href)
displayType: ['toast'] .then(() => setTimeout(() => { this.setState({ tappedStyle: false }); }, 2000))
})); .catch(err => {
notify({ message: error, displayType: ['toast']})
this.setState({tappedStyle: false})
} }
);
}
}
addTappedStyle() {
this.setState({ tappedStyle: true });
setTimeout(() => { this.setState({ tappedStyle: false }); }, 2000);
} }
render() { render() {
@ -31,6 +49,10 @@ export default class Link extends React.PureComponent {
} }
} }
if (this.props.effectOnTap && this.state.tappedStyle) {
styles.push(this.props.effectOnTap);
}
return ( return (
<Text style={styles} onPress={onPress ? onPress : this.handlePress}> <Text style={styles} onPress={onPress ? onPress : this.handlePress}>
{text} {text}

View file

@ -148,7 +148,8 @@ class FilePage extends React.PureComponent {
<Link key={j} <Link key={j}
style={filePageStyle.link} style={filePageStyle.link}
href={token} href={token}
text={token} /> text={token}
effectOnTap={filePageStyle.linkTapped} />
); );
} else { } else {
return token + space; return token + space;

View file

@ -160,7 +160,10 @@ const filePageStyle = StyleSheet.create({
}, },
link: { link: {
color: Colors.LbryGreen color: Colors.LbryGreen
} },
linkTapped: {
backgroundColor: '#0c604b',
},
}); });
export default filePageStyle; export default filePageStyle;