108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { CachedTranslator, Translator, language_matrix_entry } from "@/app/i18n/api"
|
|
import { longLang } from "@/app/i18n/lang"
|
|
import React, { useEffect, useRef, useState } from "react"
|
|
import { Button, Image, ImageBackground, Pressable, StyleSheet, TouchableOpacity, View } from "react-native"
|
|
import { Text } from '@react-navigation/elements';
|
|
import CountryFlag from "react-native-country-flag";
|
|
import { chooseCountry } from '@/app/i18n/countries';
|
|
|
|
type ISpeakButtonProps = {
|
|
language: language_matrix_entry,
|
|
translator?: Translator,
|
|
}
|
|
|
|
function iSpeak(language : language_matrix_entry) {
|
|
return `I speak ${language.name}.`
|
|
}
|
|
|
|
async function iSpeakTr(translator : CachedTranslator, targetLang : language_matrix_entry) {
|
|
const sourceStr = iSpeak(targetLang)
|
|
return await translator.translate(sourceStr, targetLang.code);
|
|
}
|
|
|
|
const DEFAULT_FLAGS = {
|
|
"en": ["us", "gb"],
|
|
// "sq": ["al"],
|
|
"ar": ["ae"],
|
|
"es": ["es"],
|
|
"pt": ["pt"],
|
|
"ru": ["ru"],
|
|
"it": ["it"],
|
|
"ir": ["ie"],
|
|
"sk": ["sk"],
|
|
"ro": ["ro"],
|
|
"ja": ["jp"],
|
|
"ko": ["kp", "kr"],
|
|
"el": ["gr"],
|
|
"fr": ["fr"],
|
|
"de": ["de"],
|
|
"nl": ["nl"],
|
|
"cz": ["cz"],
|
|
"uk": ["ua"],
|
|
"he": ["il"],
|
|
"hi": ["in"],
|
|
"gl": ["es"],
|
|
"fa": ["ir"],
|
|
"ur": ["pk"],
|
|
"ga": ["ie"],
|
|
"eo": ["es"]
|
|
}
|
|
|
|
const ISpeakButton = (props : ISpeakButtonProps) => {
|
|
|
|
const [title, setTitle] = useState<string | undefined>();
|
|
const [titleLoaded, setTitleLoaded] = useState<boolean>(false);
|
|
const translator = props.translator || new CachedTranslator("en");
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
// Replace with your actual async data fetching logic
|
|
const title = await iSpeakTr(translator, props.language);
|
|
setTitle(title);
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
} finally {
|
|
setTitleLoaded(true);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const countries = DEFAULT_FLAGS[props.language.code] || chooseCountry(props.language.code);
|
|
|
|
return (
|
|
title ? (
|
|
<TouchableOpacity style={styles.button}>
|
|
<View>
|
|
{countries &&
|
|
countries.map( c => {
|
|
return <CountryFlag isoCode={c} size={25} key={c}/> }
|
|
)
|
|
}
|
|
<Text style={{textAlign: "center", verticalAlign: "bottom"}}>{ title } { props.language.name } { props.language.code }</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<Text>Loading...</Text>
|
|
)
|
|
)
|
|
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
// backgroundColor: "blue",
|
|
width: "20%",
|
|
// height: "20%",
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
}
|
|
})
|
|
|
|
export default ISpeakButton; |