import { Theme } from '@ulangi/ulangi-common/enums' ; import { ObservablePublicSet , ObservableScreenLayout , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { TouchableOpacity , View } from 'react-native' ; import { PublicSetItemIds } from '../../constants/ids/PublicSetItemIds' ; import { DefaultText } from '../common/DefaultText' ; import { PublicSetItemStyles , publicSetItemResponsiveStyles , } from './PublicSetItem.style' ; export interface PublicSetItemProps { theme : Theme ; screenLayout : ObservableScreenLayout ; set : ObservablePublicSet ; showSetDetailModal : ( set : ObservablePublicSet ) => void ; styles ? : { light : PublicSetItemStyles ; dark : PublicSetItemStyles ; } ; } @ observer export class PublicSetItem extends React . Component < PublicSetItemProps > { public get styles ( ) : PublicSetItemStyles { return publicSetItemResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < TouchableOpacity testID = { PublicSetItemIds . VIEW_DETAIL_BTN_BY_SET_TITLE ( this . props . set . title ) } onPress = { ( ) : void => this . props . showSetDetailModal ( this . props . set ) } hitSlop = { { top : 8 , bottom : 8 } } style = { this . styles . item_container } > < View style = { this . styles . top_container } > < View style = { this . styles . left } > < DefaultText style = { this . styles . title } > < DefaultText style = { this . styles . set_name } > { this . props . set . title } < /DefaultText> { typeof this . props . set . subtitle !== 'undefined' && this . props . set . subtitle !== '' ? ( < DefaultText style = { this . styles . set_subtitle } > { ' ' + this . props . set . subtitle } < /DefaultText>) : null} < /DefaultText> < View style = { this . styles . meta_container } > < DefaultText > < DefaultText style = { this . styles . authors } > { 'By ' + this . props . set . attributions . map ( ( attributions ) : string => attributions . sourceName ) . join ( ', ' ) } < /DefaultText> { this . props . set . isCurated === true ? ( < React . Fragment > < DefaultText style = { this . styles . dot } > { ' \u00B7 ' } < /DefaultText> < DefaultText style = { this . styles . curated_text } > Curated < /DefaultText> < /React.Fragment>) : null} < /DefaultText> < /View> < /View> < View style = { this . styles . right } > < DefaultText style = { this . styles . count } > { this . props . set . vocabularyList . length } < /DefaultText> < DefaultText style = { this . styles . terms } > terms < /DefaultText> < /View> < /View> < /TouchableOpacity>); } }