theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { StyleProp, TouchableHighlight, View, ViewStyle } from 'react-native';
|
|
import { Text } from 'react-native-paper';
|
|
|
|
import { translate } from '../../../base/i18n/functions';
|
|
import Icon from '../../../base/icons/components/Icon';
|
|
import { IconCheck } from '../../../base/icons/svg';
|
|
|
|
import styles from './styles';
|
|
|
|
|
|
interface ILanguageListItemProps extends WithTranslation {
|
|
|
|
/**
|
|
* Language string.
|
|
*/
|
|
lang: string;
|
|
|
|
/**
|
|
* Callback for language selection.
|
|
*/
|
|
onLanguageSelected: (lang: string) => void;
|
|
|
|
/**
|
|
* If language item is selected or not.
|
|
*/
|
|
selected?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Component that renders the language list item.
|
|
*
|
|
* @returns {React$Element<any>}
|
|
*/
|
|
|
|
const LanguageListItem = ({ t, lang, selected, onLanguageSelected
|
|
}: ILanguageListItemProps) => {
|
|
|
|
const onLanguageSelectedWrapper
|
|
= useCallback(() => onLanguageSelected(lang), [ lang ]);
|
|
|
|
return (
|
|
<View style = { styles.languageItemWrapper as StyleProp<ViewStyle> }>
|
|
<View style = { styles.iconWrapper }>
|
|
{
|
|
selected
|
|
&& <Icon
|
|
size = { 20 }
|
|
src = { IconCheck } />
|
|
}
|
|
</View>
|
|
<TouchableHighlight
|
|
onPress = { onLanguageSelectedWrapper }
|
|
underlayColor = { 'transparent' } >
|
|
<Text
|
|
style = { [
|
|
styles.languageItemText,
|
|
selected && styles.activeLanguageItemText ] }>
|
|
{ t(lang) }
|
|
</Text>
|
|
</TouchableHighlight>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default translate(LanguageListItem);
|