import React , { FunctionComponent , memo } from 'react' ; import { Image , ImageStyle , ImageURISource , StyleProp , StyleSheet , Text , TextStyle , View , ViewStyle } from 'react-native' ; import FSI18n , { translationKeys } from '@brandingbrand/fsi18n' ; const componentTranslationKeys = translationKeys . flagship . cart . itemsInCart ; const DEFAULT_CART_IMAGE = require ( '../../assets/images/cart.png' ) ; export type TextPositions = 'topLeft' | 'topRight' | 'center' | 'bottomLeft' | 'bottomRight' ; export interface SerializableCartCountProps { cartImage ? : ImageURISource ; cartImageStyle ? : ImageStyle ; count : number ; style ? : ViewStyle ; textPosition : TextPositions ; textStyle ? : TextStyle ; } export interface CartCountProps extends Omit < SerializableCartCountProps , 'cartImageStyle' | 'style' | 'textStyle' > { cartImageStyle ? : StyleProp < ImageStyle > ; style ? : StyleProp < ViewStyle > ; textStyle ? : StyleProp < TextStyle > ; } const styles = StyleSheet . create ( { container : { width : 33 , height : 33 , padding : 4 } , image : { height : 25 , width : 25 } , text : { color : 'white' , position : 'absolute' , padding : 1 , borderRadius : 7 , backgroundColor : 'red' , fontSize : 10 , width : 14 , height : 14 , textAlign : 'center' , overflow : 'hidden' } , topLeft : { top : 0 , left : 0 } , topRight : { top : 0 , right : 0 } , bottomLeft : { bottom : 0 , left : 0 } , bottomRight : { bottom : 0 , right : 0 } , center : { alignSelf : 'center' , marginTop : 8 } } ) ; export const CartCount = memo ( ( props ) : JSX . Element => { const textPosition = props . textPosition || 'center' ; const accessibilityString = FSI18n . number ( props . count ) + ' ' + FSI18n . string ( componentTranslationKeys ) ; return ( < View style = { [ styles . container , props . style ] } accessibilityLabel = { accessibilityString } > < Image resizeMode = 'contain' style = { [ styles . image , props . cartImageStyle ] } source = { props . cartImage || DEFAULT_CART_IMAGE } accessibilityRole = { 'image' } accessibilityLabel = { accessibilityString } / > { props . count && ( < Text style = { [ styles . text , styles [ textPosition ] , props . textStyle ] } > { props . count } < /Text>)} < /View>); } ) ;