From 98fbacf9f8cf65b386a5789f3bd854ad96132b0c Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sat, 1 Sep 2018 21:17:54 +0200
Subject: [PATCH] Make symptom section component
---
components/cycle-day/symptoms/bleeding.js | 35 ++++++-----
components/cycle-day/symptoms/cervix.js | 62 +++++++++++--------
components/cycle-day/symptoms/desire.js | 19 +++---
.../cycle-day/symptoms/symptom-section.js | 19 ++++++
4 files changed, 85 insertions(+), 50 deletions(-)
create mode 100644 components/cycle-day/symptoms/symptom-section.js
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index ecfaf208..25e697cb 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -9,7 +9,7 @@ import { saveSymptom } from '../../../db'
import { bleeding as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text'
+import SymptomSection from './symptom-section'
export default class Bleeding extends Component {
constructor(props) {
@@ -36,27 +36,28 @@ export default class Bleeding extends Component {
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
- <View>
- <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
- <AppText>How heavy is the bleeding?</AppText>
+ <SymptomSection
+ header="Heaviness"
+ explainer="How heavy is the bleeding?"
+ >
<SelectTabGroup
buttons={bleedingRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
/>
- <SymptomSectionHeader>Exclude</SymptomSectionHeader>
- <View flexDirection={'row'}>
- <View flex={1}>
- <AppText>{"You can exclude this value if it's not menstrual bleeding"}</AppText>
- </View>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
- </View>
- </View>
+ </SymptomSection>
+ <SymptomSection
+ header="Exclude"
+ explainer="You can exclude this value if it's not menstrual bleeding"
+ inlineExplainer={true}
+ >
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </SymptomSection>
</ScrollView>
<ActionButtonFooter
symptom='bleeding'
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index b05f9753..4b792be1 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -9,7 +9,7 @@ import { saveSymptom } from '../../../db'
import { cervix as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text'
+import SymptomSection from './symptom-section'
export default class Cervix extends Component {
constructor(props) {
@@ -48,36 +48,48 @@ export default class Cervix extends Component {
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
- <SymptomSectionHeader>Opening</SymptomSectionHeader>
- <AppText>{labels.opening.explainer}</AppText>
- <SelectTabGroup
- buttons={cervixOpeningRadioProps}
- active={this.state.opening}
- onSelect={val => this.setState({ opening: val })}
- />
- <SymptomSectionHeader>Firmness</SymptomSectionHeader>
- <AppText>{labels.firmness.explainer}</AppText>
- <SelectTabGroup
- buttons={cervixFirmnessRadioProps}
- active={this.state.firmness}
- onSelect={val => this.setState({ firmness: val })}
- />
- <SymptomSectionHeader>Position</SymptomSectionHeader>
- <AppText>{labels.position.explainer}</AppText>
- <SelectTabGroup
- buttons={cervixPositionRadioProps}
- active={this.state.position}
- onSelect={val => this.setState({ position: val })}
- />
- <View style={styles.symptomViewRowInline}>
- <SymptomSectionHeader>Exclude</SymptomSectionHeader>
+ <SymptomSection
+ header="Opening"
+ explainer={labels.opening.explainer}
+ >
+ <SelectTabGroup
+ buttons={cervixOpeningRadioProps}
+ active={this.state.opening}
+ onSelect={val => this.setState({ opening: val })}
+ />
+ </SymptomSection>
+ <SymptomSection
+ header="Firmness"
+ explainer={labels.firmness.explainer}
+ >
+ <SelectTabGroup
+ buttons={cervixFirmnessRadioProps}
+ active={this.state.firmness}
+ onSelect={val => this.setState({ firmness: val })}
+ />
+ </SymptomSection>
+ <SymptomSection
+ header="Position"
+ explainer={labels.position.explainer}
+ >
+ <SelectTabGroup
+ buttons={cervixPositionRadioProps}
+ active={this.state.position}
+ onSelect={val => this.setState({ position: val })}
+ />
+ </SymptomSection>
+ <SymptomSection
+ header="Exclude"
+ explainer="You can exclude this value if you don't want to use it for fertility detection"
+ inlineExplainer={true}
+ >
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
}}
value={this.state.exclude}
/>
- </View>
+ </SymptomSection>
</ScrollView>
<ActionButtonFooter
symptom='cervix'
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index 0802e6cc..93776030 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -8,7 +8,7 @@ import { saveSymptom } from '../../../db'
import { intensity, desire } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text';
+import SymptomSection from './symptom-section'
export default class Desire extends Component {
constructor(props) {
@@ -31,13 +31,16 @@ export default class Desire extends Component {
return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
- <SymptomSectionHeader>{desire.header}</SymptomSectionHeader>
- <AppText>{desire.explainer}</AppText>
- <SelectTabGroup
- buttons={desireRadioProps}
- acitve={this.state.currentValue}
- onSelect={val => this.setState({ currentValue: val })}
- />
+ <SymptomSection
+ header={desire.header}
+ explainer={desire.explainer}
+ >
+ <SelectTabGroup
+ buttons={desireRadioProps}
+ acitve={this.state.currentValue}
+ onSelect={val => this.setState({ currentValue: val })}
+ />
+ </SymptomSection>
</ScrollView>
<ActionButtonFooter
symptom='desire'
diff --git a/components/cycle-day/symptoms/symptom-section.js b/components/cycle-day/symptoms/symptom-section.js
new file mode 100644
index 00000000..c1af4d77
--- /dev/null
+++ b/components/cycle-day/symptoms/symptom-section.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import { SymptomSectionHeader, AppText } from '../../app-text'
+
+export default class SymptomSection extends Component {
+ render() {
+ return (
+ <View>
+ <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader>
+ <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}>
+ <View flex={1}>
+ <AppText>{this.props.explainer}</AppText>
+ </View>
+ {this.props.children}
+ </View>
+ </View>
+ )
+ }
+}
\ No newline at end of file
--
GitLab