Make DotAndLine its own component

components/chart/day-column.js

@@ -8,6 +8,7 @@ import config from './config'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import setUpFertilityStatusFunc from './nfp-lines'
+import DotAndLine from './dot-and-line'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
@@ -17,7 +18,17 @@ export default class DayColumn extends Component {
   constructor(props) {
     super(props)
   }
-  makeDayColumn(data, index) {
+
+  passDateToDayView(dateString) {
+    const cycleDay = getOrCreateCycleDay(dateString)
+    this.props.navigate('cycleDay', { cycleDay })
+  }
+
+  shouldComponentUpdate(newProps) {
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
+  }
+
+  render() {
     const {
       dateString,
       y,
@@ -25,7 +36,7 @@ export default class DayColumn extends Component {
       temperatureExclude,
       bleeding,
       mucus
-    } = data
+    } = this.props.item
     const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
 
     const columnElements = []
@@ -78,7 +89,14 @@ export default class DayColumn extends Component {
     }
 
     if (y) {
-      columnElements.push(...this.drawDotAndLine(y, temperatureExclude, index))
+      columnElements.push(
+        <DotAndLine
+          y={y}
+          exclude={temperatureExclude}
+          leftY={this.props.leftY}
+          rightY={this.props.righty}
+        />
+      )
     }
 
     const cycleDayNumber = getCycleDayNumber(dateString)
@@ -103,7 +121,7 @@ export default class DayColumn extends Component {
       TouchableOpacity,
       {
         style: styles.column.rect,
-        key: index.toString(),
+        key: this.props.index.toString(),
         onPress: () => {
           this.passDateToDayView(dateString)
         },
@@ -112,74 +130,4 @@ export default class DayColumn extends Component {
       columnElements
     )
   }
-
-  drawDotAndLine(currY, exclude) {
-    let lineToRight
-    let lineToLeft
-
-    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) + 3
-      // 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}
-      />)
-    }
-
-    if (this.props.leftY) {
-      const middleY = ((this.props.leftY - currY) / 2) + currY
-      const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(middleY, currY, 'left', excludedLine)
-    }
-    if (this.props.rightY) {
-      const middleY = ((currY - this.props.rightY) / 2) + this.props.rightY
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(currY, middleY, 'right', excludedLine)
-    }
-
-    const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    const dot = (
-      <View
-        position='absolute'
-        top={currY - (dotStyle.height / 2)}
-        left={config.columnMiddle - (dotStyle.width / 2)}
-        style={dotStyle}
-      />
-    )
-    return [lineToLeft, lineToRight, dot]
-  }
-
-  passDateToDayView(dateString) {
-    const cycleDay = getOrCreateCycleDay(dateString)
-    this.props.navigate('cycleDay', { cycleDay })
-  }
-
-  shouldComponentUpdate(newProps) {
-    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
-  }
-
-  render() {
-    return this.makeDayColumn(this.props.item, this.props.index)
-  }
 }