Make DotAndLine its own component
This commit is contained in:
Julia Friesel
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -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}
|
||||
/>)
|
||||
}
|
||||
Generated
+85
-99
@@ -3479,8 +3479,8 @@
|
||||
"integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"nan": "2.10.0",
|
||||
"node-pre-gyp": "0.10.0"
|
||||
"nan": "^2.9.2",
|
||||
"node-pre-gyp": "^0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"abbrev": {
|
||||
@@ -3502,21 +3502,19 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"delegates": "1.0.0",
|
||||
"readable-stream": "2.3.6"
|
||||
"delegates": "^1.0.0",
|
||||
"readable-stream": "^2.0.6"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "1.0.0",
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
@@ -3527,18 +3525,15 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -3573,7 +3568,7 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minipass": "2.2.4"
|
||||
"minipass": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"fs.realpath": {
|
||||
@@ -3586,14 +3581,14 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"aproba": "1.2.0",
|
||||
"console-control-strings": "1.1.0",
|
||||
"has-unicode": "2.0.1",
|
||||
"object-assign": "4.1.1",
|
||||
"signal-exit": "3.0.2",
|
||||
"string-width": "1.0.2",
|
||||
"strip-ansi": "3.0.1",
|
||||
"wide-align": "1.1.2"
|
||||
"aproba": "^1.0.3",
|
||||
"console-control-strings": "^1.0.0",
|
||||
"has-unicode": "^2.0.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"signal-exit": "^3.0.0",
|
||||
"string-width": "^1.0.1",
|
||||
"strip-ansi": "^3.0.1",
|
||||
"wide-align": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"glob": {
|
||||
@@ -3601,12 +3596,12 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"fs.realpath": "1.0.0",
|
||||
"inflight": "1.0.6",
|
||||
"inherits": "2.0.3",
|
||||
"minimatch": "3.0.4",
|
||||
"once": "1.4.0",
|
||||
"path-is-absolute": "1.0.1"
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^3.0.4",
|
||||
"once": "^1.3.0",
|
||||
"path-is-absolute": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"has-unicode": {
|
||||
@@ -3619,7 +3614,7 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safer-buffer": "2.1.2"
|
||||
"safer-buffer": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"ignore-walk": {
|
||||
@@ -3627,7 +3622,7 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimatch": "3.0.4"
|
||||
"minimatch": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"inflight": {
|
||||
@@ -3635,14 +3630,13 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"once": "1.4.0",
|
||||
"wrappy": "1.0.2"
|
||||
"once": "^1.3.0",
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -3652,9 +3646,8 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "1.0.1"
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"isarray": {
|
||||
@@ -3665,23 +3658,20 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "1.1.11"
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1",
|
||||
"yallist": "3.0.2"
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"minizlib": {
|
||||
@@ -3689,13 +3679,12 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minipass": "2.2.4"
|
||||
"minipass": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -3710,9 +3699,9 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "2.6.9",
|
||||
"iconv-lite": "0.4.21",
|
||||
"sax": "1.2.4"
|
||||
"debug": "^2.1.2",
|
||||
"iconv-lite": "^0.4.4",
|
||||
"sax": "^1.2.4"
|
||||
}
|
||||
},
|
||||
"node-pre-gyp": {
|
||||
@@ -3720,16 +3709,16 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"detect-libc": "1.0.3",
|
||||
"mkdirp": "0.5.1",
|
||||
"needle": "2.2.0",
|
||||
"nopt": "4.0.1",
|
||||
"npm-packlist": "1.1.10",
|
||||
"npmlog": "4.1.2",
|
||||
"rc": "1.2.7",
|
||||
"rimraf": "2.6.2",
|
||||
"semver": "5.5.0",
|
||||
"tar": "4.4.1"
|
||||
"detect-libc": "^1.0.2",
|
||||
"mkdirp": "^0.5.1",
|
||||
"needle": "^2.2.0",
|
||||
"nopt": "^4.0.1",
|
||||
"npm-packlist": "^1.1.6",
|
||||
"npmlog": "^4.0.2",
|
||||
"rc": "^1.1.7",
|
||||
"rimraf": "^2.6.1",
|
||||
"semver": "^5.3.0",
|
||||
"tar": "^4"
|
||||
}
|
||||
},
|
||||
"nopt": {
|
||||
@@ -3737,8 +3726,8 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"abbrev": "1.1.1",
|
||||
"osenv": "0.1.5"
|
||||
"abbrev": "1",
|
||||
"osenv": "^0.1.4"
|
||||
}
|
||||
},
|
||||
"npm-bundled": {
|
||||
@@ -3751,8 +3740,8 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ignore-walk": "3.0.1",
|
||||
"npm-bundled": "1.0.3"
|
||||
"ignore-walk": "^3.0.1",
|
||||
"npm-bundled": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"npmlog": {
|
||||
@@ -3760,16 +3749,15 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"are-we-there-yet": "1.1.4",
|
||||
"console-control-strings": "1.1.0",
|
||||
"gauge": "2.7.4",
|
||||
"set-blocking": "2.0.0"
|
||||
"are-we-there-yet": "~1.1.2",
|
||||
"console-control-strings": "~1.1.0",
|
||||
"gauge": "~2.7.3",
|
||||
"set-blocking": "~2.0.0"
|
||||
}
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -3779,9 +3767,8 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1.0.2"
|
||||
"wrappy": "1"
|
||||
}
|
||||
},
|
||||
"os-homedir": {
|
||||
@@ -3799,8 +3786,8 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"os-homedir": "1.0.2",
|
||||
"os-tmpdir": "1.0.2"
|
||||
"os-homedir": "^1.0.0",
|
||||
"os-tmpdir": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"path-is-absolute": {
|
||||
@@ -3818,10 +3805,10 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"deep-extend": "0.5.1",
|
||||
"ini": "1.3.5",
|
||||
"minimist": "1.2.0",
|
||||
"strip-json-comments": "2.0.1"
|
||||
"deep-extend": "^0.5.1",
|
||||
"ini": "~1.3.0",
|
||||
"minimist": "^1.2.0",
|
||||
"strip-json-comments": "~2.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
@@ -3836,13 +3823,13 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"core-util-is": "1.0.2",
|
||||
"inherits": "2.0.3",
|
||||
"isarray": "1.0.0",
|
||||
"process-nextick-args": "2.0.0",
|
||||
"safe-buffer": "5.1.1",
|
||||
"string_decoder": "1.1.1",
|
||||
"util-deprecate": "1.0.2"
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"rimraf": {
|
||||
@@ -3850,7 +3837,7 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"glob": "7.1.2"
|
||||
"glob": "^7.0.5"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
@@ -3885,11 +3872,10 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "1.1.0",
|
||||
"is-fullwidth-code-point": "1.0.0",
|
||||
"strip-ansi": "3.0.1"
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
"strip-ansi": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
@@ -3897,14 +3883,14 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"requires": {
|
||||
"ansi-regex": "2.1.1"
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"strip-json-comments": {
|
||||
@@ -3917,13 +3903,13 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chownr": "1.0.1",
|
||||
"fs-minipass": "1.2.5",
|
||||
"minipass": "2.2.4",
|
||||
"minizlib": "1.1.0",
|
||||
"mkdirp": "0.5.1",
|
||||
"safe-buffer": "5.1.1",
|
||||
"yallist": "3.0.2"
|
||||
"chownr": "^1.0.1",
|
||||
"fs-minipass": "^1.2.5",
|
||||
"minipass": "^2.2.4",
|
||||
"minizlib": "^1.1.0",
|
||||
"mkdirp": "^0.5.0",
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"util-deprecate": {
|
||||
@@ -3936,7 +3922,7 @@
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"string-width": "1.0.2"
|
||||
"string-width": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"wrappy": {
|
||||
|
||||
Reference in New Issue
Block a user