Merge branch 'marie-move-info-button-out-of-header-to-body' into 'master'

Move info button out of header to body

See merge request bloodyhealth/drip!217

components/cycle-day/symptoms/info-symptom.js

@@ -1,35 +1,22 @@
-import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+import React from 'react'
+import { ScrollView, View, TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
-import FramedSegment from '../../framed-segment'
-import styles from '../../../styles/index'
+import styles, {iconStyles} from '../../../styles/index'
 
-export default class InfoSymptom extends Component {
-  render() {
-    const symptomView = this.props.symptomView
-    const symptomMapping = {
-      BleedingEditView: 'bleeding',
-      CervixEditView: 'cervix',
-      DesireEditView: 'desire',
-      MoodEditView: 'mood',
-      MucusEditView: 'mucus',
-      NoteEditView: 'note',
-      PainEditView: 'pain',
-      SexEditView: 'sex',
-      TemperatureEditView: 'temperature'
-    }
-    const currentSymptom = symptomMapping[symptomView]
-
-    return (
-      <ScrollView>
-        <FramedSegment
-          style={styles.framedSegmentLast}
-          title={labels[currentSymptom].title}
-        >
-          <AppText>{labels[currentSymptom].text}</AppText>
-        </FramedSegment>
-      </ScrollView>
-    )
-  }
+export default function InfoSymptom(props) {
+  return (
+    <View style={styles.infoPopUpWrapper}>
+      <View style={styles.dimmed}></View>
+      <View style={styles.infoPopUp}>
+        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+          <Icon name='close' {...iconStyles.infoPopUpClose}/>
+        </TouchableOpacity>
+        <ScrollView style={styles.infoSymptomText}>
+          <AppText>{labels[props.symptom].text}</AppText>
+        </ScrollView>
+      </View>
+    </View>
+  )
 }

components/cycle-day/symptoms/symptom-section.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import AppText, { SymptomSectionHeader } from '../../app-text'
+import styles from '../../../styles'
 
 export default class SymptomSection extends Component {
   render() {
@@ -13,8 +14,10 @@ export default class SymptomSection extends Component {
       }
     }
     return (
-      <View style={placeHeadingInline}>
-        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+      <View style={[placeHeadingInline, styles.symptomSection]}>
+        { p.header &&
+          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+        }
         <View
           flexDirection={p.inline ? 'row' : null}
           flex={1}

components/cycle-day/symptoms/symptom-view.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react'
-import { BackHandler, View, Alert } from 'react-native'
+import {
+  BackHandler, View, Alert, TouchableOpacity
+} from 'react-native'
 import { saveSymptom } from '../../../db'
+import InfoPopUp from './info-symptom'
 import Header from '../../header/symptom-view'
 import { headerTitles } from '../../../i18n/en/labels'
 import { sharedDialogs } from '../../../i18n/en/cycle-day'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import styles, { iconStyles } from '../../../styles'
 
 export default class SymptomView extends Component {
   constructor(props) {
@@ -14,6 +19,10 @@ export default class SymptomView extends Component {
     )
     this.globalBackhandler = props.handleBackButtonPress
     this.date = props.date
+    this.navigate = props.navigate
+    this.state = {
+      showInfo: false
+    }
   }
 
   async handleBackButtonPressOnSymptomView() {
@@ -35,10 +44,17 @@ export default class SymptomView extends Component {
   }
 
   isDeleteIconActive() {
-    return Object.values(this.state).some(value => {
+    const symptomValueHasBeenFilledOut = key => {
+      // the state tracks whether the symptom info should be shown,
+      // we ignore that property
+      if (key === 'showInfo') return
       // is there any meaningful value in the current state?
-      return value || value === 0
-    })
+      return this.state[key] || this.state[key] === 0
+    }
+
+    const symptomValues =  Object.keys(this.state)
+
+    return symptomValues.some(symptomValueHasBeenFilledOut)
   }
 
   render() {
@@ -66,7 +82,27 @@ export default class SymptomView extends Component {
             )
           }}
         />
-        {this.renderContent()}
+        <View flex={1}>
+          { this.renderContent() }
+          <TouchableOpacity
+            onPress={() => {
+              this.setState({showInfo: true})
+            }}
+            style={styles.infoButtonSymptomView}
+          >
+            <FeatherIcon
+              name="info"
+              {...iconStyles.infoInSymptomView}
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+          { this.state.showInfo &&
+              <InfoPopUp
+                symptom={this.symptomName}
+                close={() => this.setState({showInfo: false})}
+              />
+          }
+        </View>
       </View>
     )
   }