[add]: LinkBase && PopupCC, starting theme management (light and dark) and translation

2023-10-27 20:50:05 +02:00
parent 6a8ca7d0fa
commit 77f0c2f06f
32 changed files with 739 additions and 1151 deletions
@@ -1,23 +1,88 @@
-import React, { ReactNode, FunctionComponent } from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-	linkText: {
-		textDecorationLine: 'underline',
-		color: '#A3AFFC',
-		fontWeight: '700',
-	},
-});
+import React, { useRef } from 'react';
+import { TouchableOpacity, Animated, StyleSheet, Platform } from 'react-native';
+import { Column, Text, useTheme } from 'native-base';

 interface LinkBaseProps {
-	children: ReactNode;
-	onPress: () => void;
+    text: string;
+    onPress: () => void;
 }

-const LinkBase: FunctionComponent<LinkBaseProps> = ({ children, onPress }) => (
-	<TouchableOpacity onPress={onPress}>
-		<Text style={styles.linkText}>{children}</Text>
-	</TouchableOpacity>
-);
+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[400],
+                        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;