122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
import { NavigationProp, useNavigation } from '@react-navigation/native'
|
|
import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
|
|
import {
|
|
Button,
|
|
ButtonGroup,
|
|
StyleService,
|
|
useStyleSheet,
|
|
} from '@ui-kitten/components'
|
|
import React, { useState } from 'react'
|
|
import { View } from 'react-native'
|
|
import { ScrollView } from 'react-native-gesture-handler'
|
|
import RNRestart from 'react-native-restart'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useLanguage } from '../hooks/useLanguage'
|
|
import { isRTL, LanguageService } from '../services/languageService'
|
|
import { Layout as LayoutStyle, Sizing } from '../styles'
|
|
import { languages, translate } from '../utils/translation'
|
|
import { RootStackParamList } from './navigation.component'
|
|
import {
|
|
SettingGroup,
|
|
SettingListItemSelectable,
|
|
} from './settingsComponents.component'
|
|
|
|
export const setLanguageRouteOptions = (): NativeStackNavigationOptions => ({
|
|
title: translate('language.changeLanguage'),
|
|
})
|
|
|
|
export const SetLanguage = () => {
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>()
|
|
const styles = useStyleSheet(themedStyles)
|
|
|
|
const currentLanguage = LanguageService.getLanguageCode()
|
|
|
|
const [selectedLanguage, setSelectedLanguage] =
|
|
useState<string>(currentLanguage)
|
|
const { setLanguageCode } = useLanguage()
|
|
|
|
const shouldRestart = () => {
|
|
return isRTL(selectedLanguage) || isRTL(currentLanguage)
|
|
}
|
|
|
|
const saveLanguage = () => {
|
|
setLanguageCode({ languageCode: selectedLanguage })
|
|
|
|
// Checks if rtl mode has changed, then we need to restart the app
|
|
if (shouldRestart()) {
|
|
RNRestart.Restart()
|
|
} else {
|
|
goBack()
|
|
}
|
|
}
|
|
|
|
const isSelected = (lang: string): boolean => {
|
|
return selectedLanguage === lang
|
|
}
|
|
|
|
const goBack = () => {
|
|
// Need to reset the view so it updates the language
|
|
navigation.navigate('Settings', { rand: Math.random() })
|
|
}
|
|
|
|
const activeLanguages = languages.filter((language) => language.active)
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['bottom']}>
|
|
<ScrollView contentContainerStyle={styles.scrollView}>
|
|
<SettingGroup>
|
|
<View style={styles.languageList}>
|
|
{activeLanguages.map((language) => (
|
|
<SettingListItemSelectable
|
|
key={language.langCode}
|
|
onPress={() => setSelectedLanguage(language.langCode)}
|
|
title={language.languageLocalName}
|
|
subTitle={language.languageName}
|
|
isSelected={isSelected(language.langCode)}
|
|
/>
|
|
))}
|
|
</View>
|
|
</SettingGroup>
|
|
</ScrollView>
|
|
<ButtonGroup style={styles.buttonGroup}>
|
|
<Button
|
|
onPress={() => saveLanguage()}
|
|
appearance="ghost"
|
|
status="primary"
|
|
disabled={currentLanguage === selectedLanguage}
|
|
style={styles.button}
|
|
size="medium"
|
|
>
|
|
{translate('language.changeLanguageButton')}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const themedStyles = StyleService.create({
|
|
languageList: {
|
|
flex: 1,
|
|
alignSelf: 'stretch',
|
|
flexDirection: 'column',
|
|
marginTop: 8,
|
|
paddingHorizontal: Sizing.t4,
|
|
},
|
|
icon: {
|
|
width: 30,
|
|
height: 30,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
scrollView: {
|
|
padding: Sizing.t4,
|
|
},
|
|
buttonGroup: {
|
|
minHeight: 45,
|
|
marginTop: 20,
|
|
marginHorizontal: Sizing.t5,
|
|
},
|
|
button: { ...LayoutStyle.flex.full },
|
|
})
|