76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
|
|
|
|
import { useTheme } from '../../theme';
|
|
import { CustomIcon } from '../CustomIcon';
|
|
import sharedStyles from '../../views/Styles';
|
|
import Avatar from '../Avatar';
|
|
|
|
const styles = StyleSheet.create({
|
|
pressable: {
|
|
paddingHorizontal: 8,
|
|
marginRight: 8,
|
|
borderRadius: 4,
|
|
justifyContent: 'center',
|
|
maxWidth: 192
|
|
},
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center'
|
|
},
|
|
avatar: {
|
|
marginRight: 8,
|
|
marginVertical: 8
|
|
},
|
|
textContainer: {
|
|
marginRight: 8,
|
|
maxWidth: 120
|
|
},
|
|
name: {
|
|
fontSize: 16,
|
|
...sharedStyles.textMedium
|
|
}
|
|
});
|
|
|
|
export interface IChip {
|
|
avatar?: string;
|
|
text: string;
|
|
onPress?: Function;
|
|
testID?: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<Pressable
|
|
testID={testID}
|
|
style={({ pressed }) => [
|
|
styles.pressable,
|
|
{
|
|
backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground
|
|
},
|
|
style
|
|
]}
|
|
disabled={!onPress}
|
|
onPress={() => onPress?.()}
|
|
android_ripple={{
|
|
color: colors.bannerBackground
|
|
}}
|
|
>
|
|
<View style={styles.container}>
|
|
{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
|
|
<View style={styles.textContainer}>
|
|
<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
|
|
{text}
|
|
</Text>
|
|
</View>
|
|
{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null}
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default Chip;
|