From a17cc89ec5ce14e538066120b7d2404d284a0b07 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 16 Aug 2018 09:52:07 +0200
Subject: [PATCH] Make DotAndLine its own component
---
components/chart/day-column.js | 96 ++++------------
components/chart/dot-and-line.js | 65 +++++++++++
package-lock.json | 184 ++++++++++++++-----------------
3 files changed, 172 insertions(+), 173 deletions(-)
create mode 100644 components/chart/dot-and-line.js
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index a1ec1584..8d70e66a 100644
--- a/components/chart/day-column.js
+++ b/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)
- }
}
\ No newline at end of file
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
new file mode 100644
index 00000000..92e5f63a
--- /dev/null
+++ b/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}
+ />)
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6c10f49e..b0cdbd30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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": {
--
GitLab