import React from 'react' ; import { StyleProp , StyleSheet , Text , TextStyle , View , ViewStyle } from 'react-native' ; import FSI18n from '@brandingbrand/fsi18n' ; type CurrencyValue = import ( '@brandingbrand/fscommerce' ) . CommerceTypes . CurrencyValue ; const styles = StyleSheet . create ( { row : { flexDirection : 'row' , alignItems : 'center' , paddingTop : 3 , paddingBottom : 3 } , leftColumn : { flex : 1 } , rightColumn : { flex : 1 , justifyContent : 'flex-end' } , rightColumnText : { textAlign : 'right' } } ) ; export interface SerializableTotalProps { keyName : string | JSX . Element ; value : string | CurrencyValue | JSX . Element ; keyStyle ? : TextStyle ; valueStyle ? : TextStyle ; style ? : ViewStyle ; } export interface TotalProps extends Pick < SerializableTotalProps , 'keyName' | 'value' > { keyStyle ? : StyleProp < TextStyle > ; valueStyle ? : StyleProp < TextStyle > ; style ? : StyleProp < ViewStyle > ; } function isCurrency ( data ) { return ! ! ( ( data as CurrencyValue ) . value && ( data as CurrencyValue ) . currencyCode ) ; } const TotalInner = ( props ) : JSX . Element => { const renderData = ( data , style ? ) : JSX . Element => { if ( typeof data === 'string' ) { return ( < Text style = { style } > { data } < /Text>); } if ( isCurrency ( data ) ) { let convertedTotal ; try { convertedTotal = FSI18n . currency ( data ) ; } catch ( e ) { console . error ( e ) ; } return ( < Text style = { style } > { convertedTotal } < /Text>); } return data ; } ; return ( < View style = { [ styles . row , props . style ] } > < View style = { styles . leftColumn } > { renderData ( props . keyName , [ props . keyStyle ] ) } < /View> < View style = { styles . rightColumn } > { renderData ( props . value , [ styles . rightColumnText as StyleProp < TextStyle > , props . valueStyle ] ) } < /View> < /View>); } ; export const Total = React . memo ( TotalInner ) ;