import { ReadonlyTuple } from '@ulangi/extended-types' ; import { Theme , VocabularyStatus } from '@ulangi/ulangi-common/enums' ; import { ObservableCategory , ObservableCategoryListState , ObservableScreenLayout , } from '@ulangi/ulangi-observable' ; import { IObservableValue } from 'mobx' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { FlatList , View } from 'react-native' ; import { CategoryItem } from '../category/CategoryItem' ; import { DefaultActivityIndicator } from '../common/DefaultActivityIndicator' ; import { CategoryListStyles , categoryListResponsiveStyles , } from './CategoryList.style' ; export interface CategoryListProps { testID : string ; theme : Theme ; screenLayout : ObservableScreenLayout ; categoryListState : ObservableCategoryListState ; selectedVocabularyStatus : IObservableValue < VocabularyStatus > ; toggleSelection : ( categoryName : string ) => void ; showCategoryDetail : ( category : ObservableCategory ) => void ; showCategoryActionMenu : ( category : ObservableCategory , vocabularyStatus : VocabularyStatus ) => void ; goToSpacedRepetition : ( selectedCategoryNames : string [ ] ) => void ; goToWriting : ( selectedCategoryNames : string [ ] ) => void ; showLevelBreakdownForSR : ( category : ObservableCategory ) => void ; showLevelBreakdownForWR : ( category : ObservableCategory ) => void ; shouldShowLevelProgressForSR : boolean ; shouldShowLevelProgressForWR : boolean ; refresh : ( ) => void ; fetchNext : ( ) => void ; } @ observer export class CategoryList extends React . Component < CategoryListProps > { private keyExtractor = ( item ) : string => item [ 0 ] ; private get styles ( ) : CategoryListStyles { return categoryListResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < View style = { this . styles . list_container } > < FlatList testID = { this . props . testID } contentContainerStyle = { this . styles . list } data = { this . props . categoryListState . categoryList ? Array . from ( this . props . categoryListState . categoryList ) : [ ] } renderItem = { ( { item , } ) : React . ReactElement < any > => { const [ , category ] = item ; return ( < CategoryItem theme = { this . props . theme } screenLayout = { this . props . screenLayout } category = { category } selectedVocabularyStatus = { this . props . selectedVocabularyStatus } isSelectionModeOn = { this . props . categoryListState . isSelectionModeOn } toggleSelection = { this . props . toggleSelection } showCategoryDetail = { this . props . showCategoryDetail } showCategoryActionMenu = { this . props . showCategoryActionMenu } reviewBySpacedRepetition = { ( ) : void => this . props . goToSpacedRepetition ( [ category . categoryName ] ) } reviewByWriting = { ( ) : void => this . props . goToWriting ( [ category . categoryName ] ) } showLevelBreakdownForSR = { this . props . showLevelBreakdownForSR } showLevelBreakdownForWR = { this . props . showLevelBreakdownForWR } shouldShowLevelProgressForSR = { this . props . shouldShowLevelProgressForSR } shouldShowLevelProgressForWR = { this . props . shouldShowLevelProgressForWR } / > ) ; } } keyExtractor = { this . keyExtractor } onEndReachedThreshold = { 0.5 } onEndReached = { ( ) : void => this . props . fetchNext ( ) } onRefresh = { this . props . refresh } refreshing = { this . props . categoryListState . isRefreshing . get ( ) } ListFooterComponent = { < DefaultActivityIndicator activityState = { this . props . categoryListState . fetchState } isRefreshing = { this . props . categoryListState . isRefreshing } size = "small" style = { this . styles . activity_indicator } / > } /> < /View>); } }