import * as React from 'react' ; import * as c from '@frogpond/colors' ; import { View , StyleSheet , Platform } from 'react-native' ; import type { BusStopStatusEnum } from '../lib' ; const isAndroid = Platform . OS === 'android' ; const styles = StyleSheet . create ( { barContainer : { paddingRight : 5 , width : 45 , flexDirection : 'column' , alignItems : 'center' , } , bar : { flex : 1 , width : 5 , } , dot : { height : 15 , width : 15 , marginVertical : - 10 , borderRadius : 20 , zIndex : 1 , } , skippingStop : { backgroundColor : c . transparent , borderColor : c . transparent , } , passedStop : { height : 12 , width : 12 , } , beforeStop : { borderWidth : 3 , backgroundColor : c . white , height : 18 , width : 18 , } , atStop : { height : 20 , width : 20 , borderColor : c . white , borderWidth : 3 , backgroundColor : c . white , } , } ) ; type Props = { barColor : string ; currentStopColor : string ; isFirstChunk : boolean ; isLastChunk : boolean ; stopStatus : BusStopStatusEnum ; } ; export class ProgressChunk extends React . PureComponent < Props , void > { render ( ) { let { stopStatus , barColor , currentStopColor , isFirstChunk , isLastChunk } = this . props ; let startBarColor = isAndroid && isFirstChunk ? c . transparent : barColor ; let endBarColor = isAndroid && isLastChunk ? c . transparent : barColor ; return ( < View style = { styles . barContainer } > < View style = { [ styles . bar , { backgroundColor : startBarColor } ] } /> < View style = { [ styles . dot , stopStatus === 'after' && [ styles . passedStop , { borderColor : barColor , backgroundColor : barColor } , ] , stopStatus === 'before' && [ styles . beforeStop , { borderColor : barColor } , ] , stopStatus === 'at' && [ styles . atStop , { borderColor : currentStopColor } , ] , stopStatus === 'skip' && styles . skippingStop , ] } / > < View style = { [ styles . bar , { backgroundColor : endBarColor } ] } /> < /View>); } }