From 270b823c20a734144d3999a41fb59ffbb2be328d Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 17 Nov 2019 17:28:02 +0100
Subject: [PATCH] Introduces SymptomIcon component
---
components/chart/day-column.js | 2 +-
components/chart/styles.js | 6 +++++-
components/chart/symptom-icon.js | 26 ++++++++++++++++++++++++++
components/chart/y-axis.js | 18 +++++++++---------
4 files changed, 41 insertions(+), 11 deletions(-)
create mode 100644 components/chart/symptom-icon.js
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 97a4f149..541377da 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -157,7 +157,7 @@ class DayColumn extends Component {
'white' : symptomColor
const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0
const borderColor = symptomColor
- const styleChild = [styles.symptomIcon, {
+ const styleChild = [styles.symptomDot, {
backgroundColor,
borderColor,
borderWidth
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 9a17f6fa..d95f51d0 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -61,7 +61,7 @@ const styles = {
width: gridLineWidthVertical,
}
},
- symptomIcon: {
+ symptomDot: {
width: 12,
height: 12,
borderRadius: 50,
@@ -127,6 +127,10 @@ const styles = {
fontWeight: '100',
}
},
+ symptomIcon: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
horizontalGrid: {
position:'absolute',
borderStyle: 'solid',
diff --git a/components/chart/symptom-icon.js b/components/chart/symptom-icon.js
new file mode 100644
index 00000000..3236c3b0
--- /dev/null
+++ b/components/chart/symptom-icon.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import DripIcon from '../../assets/drip-icons'
+
+import styles from './styles'
+
+const SymptomIcon = ({ symptom, height }) => {
+ return (
+ <View style={styles.symptomIcon} width={styles.yAxis.width} height={height}>
+ <DripIcon
+ size={16}
+ name={`drip-icon-${symptom}`}
+ color={styles.iconColors[symptom].color}
+ />
+ </View>
+ )
+}
+
+SymptomIcon.propTypes = {
+ height: PropTypes.number,
+ symptom: PropTypes.string,
+}
+
+export default SymptomIcon
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index d2bed28a..54025702 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -6,8 +6,8 @@ import config from '../../config'
import { scaleObservable, unitObservable } from '../../local-storage'
import AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
import DripHomeIcon from '../../assets/drip-home-icons'
+import SymptomIcon from './symptom-icon'
import styles from './styles'
import { cycleDayColor } from '../../styles'
@@ -84,18 +84,18 @@ function getAbsoluteValue(relative, columnHeight) {
}
const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
+ const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
return (
<View>
<View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
{symptomsToDisplay.map(symptom => {
- return <View
- style={{ alignItems: 'center', justifyContent: 'center' }}
- key={symptom}
- width={styles.yAxis.width}
- height={symptomsSectionHeight / symptomsToDisplay.length}
- >
- <DripIcon size={16} name={`drip-icon-${symptom}`} color={styles.iconColors[symptom].color}/>
- </View>
+ return (
+ <SymptomIcon
+ key={symptom}
+ symptom={symptom}
+ height={symptomIconHeight}
+ />
+ )
})}
</View>
<View style={[styles.yAxis, { height }]}>{makeYAxisLabels(height)}</View>
--
GitLab