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)
-  }
 }

components/chart/dot-and-line.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import styles from './styles'
+import config from './config'
+
+export default class DotAndLine extends Component {
+  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}
+      />
+    )
+    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) + 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}
+  />)
+}