/**
 * Abstract component for collections of CMS banners. At the very least a render() function
 * needs to be implemented.
 */ import React , { Component } from 'react' ; import { Image , LayoutRectangle , Linking , StyleProp , View , ViewStyle } from 'react-native' ; import { TouchableOpacityLink } from './TouchableOpacityLink' ; export interface CMSBannerProps { imageContainerStyle ? : StyleProp < ViewStyle > ; imageHeight ? : number ; imageWidth ? : number ; onPress ? : ( instance : any ) => void ; style ? : StyleProp < ViewStyle > ; cmsData ? : any ; accessible ? : boolean ; getAccessibilityLabel ? : ( instance : any ) => string ; } export interface CMSBannerState { containerWidth : number ; } export abstract class CMSBanner < P extends CMSBannerProps , S = { } > extends Component < P , CMSBannerState > { state : CMSBannerState = { containerWidth : 0 } ; handleOnLayout = ( e ) => { this . setState ( { containerWidth : e . nativeEvent . layout . width } ) ; } ; handlePress = ( instance ) => ( ) => { if ( this . props . onPress ) { this . props . onPress ( instance ) ; } else { Linking . openURL ( instance . Link ) . catch ( e => console . log ( 'Unable to open link' , instance . Link ) ) ; } } ; renderInstance = ( instance , i ) => { const image = instance [ 'Retina-Image' ] || instance . Image ; const imageWidth = this . props . imageWidth || this . state . containerWidth ; let imageHeight = null ; if ( typeof this . props . imageHeight === 'number' ) { imageHeight = this . props . imageHeight ; } else if ( imageWidth && image . height && image . width ) { imageHeight = imageWidth * image . height / image . width ; } else { imageHeight = this . state . containerWidth ; } let accessibilityLabel = null ; if ( typeof this . props . getAccessibilityLabel === 'function' ) { accessibilityLabel = this . props . getAccessibilityLabel ( instance ) ; } else { accessibilityLabel = instance . Title ; } const accessible = ! ! instance . Link || ! ! this . props . accessible ; const ImageJsx = ( < Image source = { { uri : image . path } } accessible = { accessible } accessibilityLabel = { accessibilityLabel } resizeMode = 'contain' style = { { width : imageWidth , height : imageHeight } } />); if ( instance . Link ) { return ( < View key = { i } style = { this . props . imageContainerStyle } onLayout = { this . handleOnLayout } > < TouchableOpacityLink onPress = { this . handlePress ( instance ) } href = { instance . Link } > { ImageJsx } < /TouchableOpacityLink> < /View>); } return ( < View key = { i } style = { this . props . imageContainerStyle } onLayout = { this . handleOnLayout } > { ImageJsx } < /View>); } ; abstract render ( ) ; }