import { Theme } from '@ulangi/ulangi-common/enums' ; import { PublicVocabulary } from '@ulangi/ulangi-common/interfaces' ; import { ObservablePublicVocabulary , ObservableScreenLayout , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { FlatList } from 'react-native' ; import { PublicVocabularyItem } from './PublicVocabularyItem' ; import { PublicVocabularyListStyles , publicVocabularyListResponsiveStyles , } from './PublicVocabularyList.style' ; export interface PublicVocabularyListProps { testID : string ; theme : Theme ; screenLayout : ObservableScreenLayout ; vocabularyList : readonly ObservablePublicVocabulary [ ] ; addVocabulary : ( vocabulary : PublicVocabulary ) => void ; showPublicVocabularyActionMenu : ( vocabulary : PublicVocabulary ) => void ; showPublicVocabularyDetail : ( vocabulary : PublicVocabulary ) => void ; showLink : ( link : string , screenTitle : string ) => void ; } @ observer export class PublicVocabularyList extends React . Component < PublicVocabularyListProps > { private keyExtractor = ( item ) : string => item . publicVocabularyId ; private get styles ( ) : PublicVocabularyListStyles { return publicVocabularyListResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < FlatList testID = { this . props . testID } keyExtractor = { this . keyExtractor } contentContainerStyle = { this . styles . list_container } data = { this . props . vocabularyList } renderItem = { ( { item , } ) : React . ReactElement < any > => { return ( < PublicVocabularyItem theme = { this . props . theme } screenLayout = { this . props . screenLayout } vocabulary = { item } addVocabulary = { this . props . addVocabulary } showPublicVocabularyDetail = { this . props . showPublicVocabularyDetail } showPublicVocabularyActionMenu = { this . props . showPublicVocabularyActionMenu } showLink = { this . props . showLink } / > ) ; } } />); } }