import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { BorderlessButton } from 'react-native-gesture-handler'; import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; import sharedStyles from '../../Styles'; import Touch from '../../../utils/touch'; import { IServer } from '../index'; const styles = StyleSheet.create({ container: { height: 56, paddingHorizontal: 15, flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }, content: { flex: 1, flexDirection: 'column' }, server: { ...sharedStyles.textMedium, fontSize: 16 } }); interface IItem { item: IServer; theme: string; onPress(url: string): void; onDelete(item: IServer): void; } const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => ( <Touch style={styles.container} onPress={() => onPress(item.url)} theme={theme} testID={`server-history-${item.url}`}> <View style={styles.content}> <Text numberOfLines={1} style={[styles.server, { color: themes[theme].bodyText }]}> {item.url} </Text> <Text numberOfLines={1} style={{ color: themes[theme].auxiliaryText }}> {item.username} </Text> </View> <BorderlessButton onPress={() => onDelete(item)} testID={`server-history-delete-${item.url}`}> <CustomIcon name='delete' size={24} color={themes[theme].auxiliaryText} /> </BorderlessButton> </Touch> ); export default Item;