import * as React from 'react' ; import { Text , Image , StyleSheet } from 'react-native' ; import type { ListType , ListItemSpecType } from './types' ; import { Section , Cell } from '@frogpond/tableview' ; import { Column } from '@frogpond/layout' ; import concat from 'lodash/concat' ; import isEqual from 'lodash/isEqual' ; import reject from 'lodash/reject' ; type PropsType = { filter : ListType ; onChange : ( filter : ListType ) => any ; } ; export function ListSection ( { filter , onChange } ) { let { spec } = filter ; let { title = '' , options , selected , mode } = spec ; let quantifier = mode === 'AND' ? 'all' : 'any' ; let { caption = `Show items with ${ quantifier } of these options.` } = spec ; function buttonPushed ( tappedValue ) { let result ; if ( mode === 'OR' && selected . length === options . length ) { result = [ tappedValue ] ; } else if ( selected . some ( ( val ) => isEqual ( val , tappedValue ) ) ) { result = reject ( selected , ( val ) => isEqual ( val , tappedValue ) ) ; } else { result = concat ( selected , tappedValue ) ; } let enabled = false ; if ( mode === 'OR' ) { enabled = result . length !== options . length ; } else if ( mode === 'AND' ) { enabled = result . length > 0 ; } onChange ( { ... filter , enabled : enabled , spec : { ... spec , selected : result } , } ) ; } function showAll ( ) { let result ; if ( selected . length === options . length ) { result = [ ] ; } else { result = options ; } onChange ( { ... filter , enabled : result . length !== options . length , spec : { ... spec , selected : result } , } ) ; } let hasImageColumn = options . some ( ( val ) => Boolean ( val . image ) ) ; let buttons = options . map ( ( val ) => ( < Cell key = { val . title } accessory = { selected . some ( ( s ) => isEqual ( s , val ) ) ? 'Checkmark' : undefined } cellContentView = { < Column style = { styles . content } > < Text style = { styles . title } > { spec . displayTitle ? val . title : val . label } < /Text> { val . detail ? < Text style = { styles . detail } > { val . detail } < /Text> : null} < /Column>} cellStyle="RightDetail" disableImageResize={true} image={spec.showImages ? (<Image source={val.image} style={styles.icon}/ > ) : undefined } onPress = { ( ) => buttonPushed ( val ) } />)); if ( mode === 'OR' ) { let showAllButton = ( < Cell key = "__show_all" accessory = { selected . length === options . length ? 'Checkmark' : undefined } onPress = { showAll } title = "Show All" / > ) ; buttons = [ showAllButton ] . concat ( buttons ) ; } return ( < Section footer = { caption } header = { title . toUpperCase ( ) } separatorInsetLeft = { hasImageColumn ? 45 : undefined } > { buttons } < /Section>); } const styles = StyleSheet . create ( { content : { flex : 1 , paddingVertical : 10 , } , title : { fontSize : 16 , } , detail : { fontSize : 11 , } , icon : { width : 16 , height : 16 , } , } ) ;