92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { NavigationContainer } from "@react-navigation/native";
|
|
|
|
import {
|
|
default as ReactNativeSettings,
|
|
SettingsElement,
|
|
} from "@mmomtchev/react-native-settings";
|
|
import { longLang } from "@/app/i18n/lang";
|
|
import { Translator, language_matrix } from "@/app/i18n/api";
|
|
|
|
// We will store the config here
|
|
const configData: Record<string, string> = {};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
justifyContent: "center",
|
|
padding: "1.5%",
|
|
},
|
|
});
|
|
|
|
// Retrieve a conf item or return the default
|
|
const confGet = (key: string, def: string): string => configData[key] || def;
|
|
|
|
// Store a conf item
|
|
const confSet = (key: string, value: string): void => {
|
|
configData[key] = value;
|
|
};
|
|
|
|
// Choose from a list item
|
|
const intelligence: Record<string, string> = {
|
|
L: "Low",
|
|
M: "Medium",
|
|
H: "High",
|
|
};
|
|
|
|
// This is the configuration schema
|
|
const settings: SettingsElement[] = [
|
|
{
|
|
label: "Host Language",
|
|
type: "enum",
|
|
// You can override the way the value is displayed
|
|
values: ["en", "es", "fr"],
|
|
display: (v) => {
|
|
return longLang(v);
|
|
},
|
|
get: confGet.bind(null, "@hostLanguage", ""),
|
|
set: confSet.bind(null, "@hostLanguage"),
|
|
},
|
|
// Choose from a list, uses the standard phone navigation screens
|
|
{
|
|
label: "Intelligence",
|
|
title: "Select Intelligence",
|
|
type: "enum",
|
|
values: Object.keys(intelligence),
|
|
display: (v: string) => intelligence[v],
|
|
get: confGet.bind(null, "@int", "M"),
|
|
set: confSet.bind(null, "@int"),
|
|
},
|
|
];
|
|
|
|
export default function Settings() {
|
|
// Simply pass the schema here
|
|
// It integrates in your existing `NavigationContainer` or `Screen`
|
|
const [translator, setTranslator] = useState<Translator>(new Translator("en"))
|
|
const [languages, setLanguages] = useState<language_matrix | undefined>();
|
|
const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
// Replace with your actual async data fetching logic
|
|
const languages = await translator.fetchLanguages();
|
|
setLanguages(languages);
|
|
setLanguagesLoaded(true);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
}
|
|
};
|
|
});
|
|
|
|
return (
|
|
<NavigationContainer>
|
|
<View style={styles.container}>
|
|
<ReactNativeSettings settings={settings} />
|
|
</View>
|
|
</NavigationContainer>
|
|
);
|
|
}
|