1import React, {ReactNode} from 'react'; 2import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from './themeText'; 5import useColors from '@/hooks/useColors'; 6import IconButton from './iconButton'; 7 8interface IChipProps { 9 containerStyle?: StyleProp<ViewStyle>; 10 children?: ReactNode; 11 onPress?: () => void; 12 onClose?: () => void; 13} 14export default function Chip(props: IChipProps) { 15 const {containerStyle, children, onPress, onClose} = props; 16 const colors = useColors(); 17 18 return ( 19 <Pressable 20 onPress={onPress} 21 style={[ 22 styles.container, 23 { 24 backgroundColor: colors.placeholder, 25 }, 26 containerStyle, 27 ]}> 28 {typeof children === 'string' ? ( 29 <ThemeText fontSize="subTitle" numberOfLines={1}> 30 {children} 31 </ThemeText> 32 ) : ( 33 children 34 )} 35 <IconButton 36 onPress={onClose} 37 name="x-mark" 38 sizeType="small" 39 style={styles.icon} 40 /> 41 </Pressable> 42 ); 43} 44 45const styles = StyleSheet.create({ 46 container: { 47 height: rpx(56), 48 paddingHorizontal: rpx(18), 49 borderRadius: rpx(28), 50 flexDirection: 'row', 51 alignItems: 'center', 52 justifyContent: 'center', 53 }, 54 icon: { 55 marginLeft: rpx(8), 56 }, 57}); 58