import * as React from 'react' ; import { StyleSheet , SectionList } from 'react-native' ; import * as c from '@frogpond/colors' ; import toPairs from 'lodash/toPairs' ; import type { EventListProps , EventGroup } from './types' ; import type { EventType } from '@frogpond/event-type' ; import groupBy from 'lodash/groupBy' ; import type { Moment } from 'moment-timezone' ; import { ListSeparator , ListSectionHeader } from '@frogpond/lists' ; import { NoticeView } from '@frogpond/notice' ; import EventRow from './event-row' ; const FullWidthSeparator = ( props ) => ( < ListSeparator fullWidth = { true } { ... props } />); export class EventList extends React . Component < EventListProps > { groupEvents = ( events , now ) : EventGroup [ ] => { let grouped = groupBy ( events , ( event ) => { if ( event . isOngoing ) { return 'Ongoing' ; } if ( event . startTime . isSame ( now , 'day' ) ) { return 'Today' ; } return event . startTime . format ( 'ddd  MMM Do' ) ; } ) ; return toPairs ( grouped ) . map ( ( [ key , value ] ) => ( { title : key , data : value , } ) ) ; } ; onPressEvent = ( event ) : void => { let detailView = this . props . detailView || 'EventDetailView' ; this . props . navigation . navigate ( detailView , { event , poweredBy : this . props . poweredBy , } ) ; } ; renderSectionHeader = ( { section : { title } } ) => ( < ListSectionHeader spacing = { { left : 10 } } title = { title } / > ) ; renderItem = ( { item } ) : JSX . Element => ( < EventRow event = { item } onPress = { this . onPressEvent } / > ) ; keyExtractor = ( _item , index ) : string => index . toString ( ) ; render ( ) { if ( this . props . message ) { return < NoticeView text = { this . props . message } />; } return ( < SectionList ItemSeparatorComponent = { FullWidthSeparator } ListEmptyComponent = { < NoticeView text = "No events." / > } contentContainerStyle = { styles . contentContainer } keyExtractor = { this . keyExtractor } onRefresh = { this . props . onRefresh } refreshing = { this . props . refreshing } renderItem = { this . renderItem } renderSectionHeader = { this . renderSectionHeader } sections = { this . groupEvents ( this . props . events , this . props . now ) } showsVerticalScrollIndicator = { false } style = { styles . container } / > ) ; } } const styles = StyleSheet . create ( { container : { flex : 1 , backgroundColor : c . white , } , contentContainer : { flexGrow : 1 , } , } ) ;