maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add multilanguage support

Browse source
This commit is contained in:
Maarten 2024-08-12 16:48:41 +02:00
parent f8cbcb2908
commit fc53bb14a0
15 changed files with 489 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

10
lib/components/EditModal.tsx
View file

@ -5,6 +5,7 @@ import {
StyleSheet,
} from 'react-native';
import Modal from "react-native-modal";
import { useTranslation } from 'react-i18next';
import { Colors } from '@/lib/constants/Colors';
import { ThemedView } from '@/lib/components/ThemedView';
@ -29,6 +30,7 @@ interface EditModalProps {
const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
const colorScheme = useColorScheme() ?? 'light';
const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );
const { t } = useTranslation();
useEffect( () => {
const initialValues: Record<string, string> = {};
@ -54,13 +56,13 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
return (
<Modal isVisible={visible} useNativeDriverForBackdrop={true}>
<ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedText style={styles.text}>{title ? title : 'Pas je gegevens aan:'}</ThemedText>
<ThemedText style={styles.text}>{title ? title : t( "modal.default.title" )}</ThemedText>
{fields.map( (field, index) => (
<ThemedView key={index} style={styles.inputContainer}>
{field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
<TextInput
style={[styles.input, {color: Colors[ colorScheme ].text}]}
style={[ styles.input, { color: Colors[ colorScheme ].text } ]}
placeholder={field.placeholder}
onChangeText={(text) => handleInputChange( field.name, text )}
value={inputValues[ field.name ] || ''}
@ -73,11 +75,11 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
<ThemedView style={styles.buttonContainer}>
<TouchableOpacity onPress={onClose || ( () => {
} )}>
<ThemedText style={[ styles.textStyle, styles.buttonClose ]}>Annuleren</ThemedText>
<ThemedText style={[ styles.textStyle, styles.buttonClose ]}>{t( "modal.default.cancel" )}</ThemedText>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
<ThemedText style={styles.textStyle}>Opslaan</ThemedText>
<ThemedText style={styles.textStyle}>{t( "modal.default.save" )}</ThemedText>
</TouchableOpacity>
</ThemedView>
</ThemedView>