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:
parent
35cf4255a6
commit
5be022e011
3 changed files with 32 additions and 6 deletions
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue