Sofiya Tepikin
53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import { StyleSheet, View } from 'react-native'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import AppText from '../common/app-text'
|
|
|
|
import { Sizes } from '../../styles'
|
|
import { CHART_TICK_WIDTH } from '../../config'
|
|
|
|
const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
|
|
const top = yPosition - height / 2
|
|
const containerStyle = [ styles.container, { flexBasis: height, height, top }]
|
|
const textStyle = isBold ? styles.textBold : styles.textNormal
|
|
|
|
return(
|
|
<View style={containerStyle}>
|
|
<AppText style={textStyle}>{shouldShowLabel && label}</AppText>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
Tick.propTypes = {
|
|
yPosition: PropTypes.number,
|
|
height: PropTypes.number.isRequired,
|
|
isBold: PropTypes.bool,
|
|
shouldShowLabel: PropTypes.bool,
|
|
label: PropTypes.string,
|
|
}
|
|
|
|
|
|
const text = {
|
|
textAlign: 'right',
|
|
}
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
justifyContent: 'center',
|
|
position: 'absolute',
|
|
right: 0,
|
|
width: CHART_TICK_WIDTH
|
|
},
|
|
textBold: {
|
|
fontSize: Sizes.base,
|
|
fontWeight: 'bold',
|
|
...text
|
|
},
|
|
textNormal: {
|
|
fontSize: Sizes.small,
|
|
...text
|
|
}
|
|
})
|
|
|
|
export default Tick
|