89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import { TouchableOpacity, Animated, StyleSheet, Platform } from 'react-native';
|
|
import { Column, Text, useTheme } from 'native-base';
|
|
|
|
interface LinkBaseProps {
|
|
text: string;
|
|
onPress: () => void;
|
|
}
|
|
|
|
const LinkBase: React.FC<LinkBaseProps> = ({ text, onPress }) => {
|
|
const underlineHeight = useRef(new Animated.Value(4)).current;
|
|
const opacity = useRef(new Animated.Value(1)).current;
|
|
const color = useRef(new Animated.Value(1)).current;
|
|
const theme = useTheme();
|
|
|
|
const handleMouseEnter = () => {
|
|
if (Platform.OS === 'web') {
|
|
Animated.timing(underlineHeight, {
|
|
toValue: 20,
|
|
duration: 250,
|
|
useNativeDriver: false
|
|
}).start();
|
|
}
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
if (Platform.OS === 'web') {
|
|
Animated.timing(underlineHeight, {
|
|
toValue: 4,
|
|
duration: 250,
|
|
useNativeDriver: false
|
|
}).start();
|
|
}
|
|
};
|
|
|
|
const handlePressIn = () => {
|
|
Animated.timing(opacity, {
|
|
toValue: 0.8,
|
|
duration: 250,
|
|
useNativeDriver: false
|
|
}).start();
|
|
};
|
|
|
|
const handlePressOut = () => {
|
|
Animated.timing(opacity, {
|
|
toValue: 1,
|
|
duration: 250,
|
|
useNativeDriver: false
|
|
}).start();
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.container}
|
|
onPress={onPress}
|
|
onPressIn={handlePressIn}
|
|
onPressOut={handlePressOut}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<Column>
|
|
<Text>{text}</Text>
|
|
<Animated.View style={[
|
|
styles.underline,
|
|
{
|
|
backgroundColor: theme.colors.primary[300],
|
|
height: underlineHeight,
|
|
opacity: opacity
|
|
}
|
|
]}/>
|
|
</Column>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'relative',
|
|
},
|
|
underline: {
|
|
width: '100%',
|
|
position: 'absolute',
|
|
zIndex: -1,
|
|
bottom: 0,
|
|
},
|
|
});
|
|
|
|
export default LinkBase;
|