tina
71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { View } from 'react-native'
|
|
import styles from './styles'
|
|
import config from '../../config'
|
|
|
|
export default class DotAndLine extends Component {
|
|
shouldComponentUpdate(newProps) {
|
|
return Object.keys(newProps).some(key => newProps[key] != this.props[key])
|
|
}
|
|
|
|
render() {
|
|
const y = this.props.y
|
|
const exclude = this.props.exclude
|
|
let lineToRight
|
|
let lineToLeft
|
|
|
|
if (this.props.leftY) {
|
|
const middleY = ((this.props.leftY - y) / 2) + y
|
|
const excludedLine = this.props.leftTemperatureExclude || exclude
|
|
lineToLeft = makeLine(middleY, y, 'left', excludedLine)
|
|
}
|
|
if (this.props.rightY) {
|
|
const middleY = ((y - this.props.rightY) / 2) + this.props.rightY
|
|
const excludedLine = this.props.rightTemperatureExclude || exclude
|
|
lineToRight = makeLine(y, middleY, 'right', excludedLine)
|
|
}
|
|
|
|
const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
|
|
const dot = (
|
|
<View
|
|
position='absolute'
|
|
top={y - (dotStyle.height / 2)}
|
|
left={config.columnMiddle - (dotStyle.width / 2)}
|
|
style={dotStyle}
|
|
key='dot'
|
|
/>
|
|
)
|
|
return [lineToLeft, lineToRight, dot]
|
|
}
|
|
}
|
|
|
|
function makeLine(leftY, rightY, direction, excludeLine) {
|
|
const colWidth = config.columnWidth
|
|
const heightDiff = -(leftY - rightY)
|
|
const angle = Math.atan2(heightDiff, colWidth / 2)
|
|
const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
|
|
// hypotenuse, we add 3px for good measure, because otherwise the lines
|
|
// don't quite touch at the day border
|
|
const h = (colWidth / 2) / Math.cos(angle) + 10
|
|
// the rotation by default rotates from the middle of the line,
|
|
// but we want the transform origin to be at its beginning
|
|
// react native doesn't have transformOrigin, so we do this manually
|
|
// if it's the right line, we put the pivot at 3/4 of the column
|
|
// if it's to the left, at 1/4
|
|
const pivot = direction === 'right' ? colWidth / 4 : -(colWidth / 4)
|
|
const projectedX = -(h - colWidth) / 2 + pivot
|
|
|
|
return (<View
|
|
width={h}
|
|
position='absolute'
|
|
top={((leftY + rightY) / 2) - lineStyle.borderWidth / 2}
|
|
left={projectedX}
|
|
style={{
|
|
transform: [
|
|
{ rotateZ: `${angle}rad` }
|
|
],
|
|
}}
|
|
{...lineStyle}
|
|
key ={direction}
|
|
/>)
|
|
} |