Convert radio button group to select tab group

components/cycle-day/radio-button-group.js → components/cycle-day/select-tab-group.js

@@ -6,13 +6,21 @@ import {
 import styles from '../../styles'
 import { AppText } from '../app-text'
 
-export default class RadioButton extends Component {
+export default class SelectTabGroup extends Component {
   render() {
     return (
-      <View style={styles.radioButtonGroup}>
+      <View style={styles.selectTabGroup}>
         {
-          this.props.buttons.map(({ label, value }) => {
+          this.props.buttons.map(({ label, value }, i) => {
+            let firstOrLastStyle
+            if (i === this.props.buttons.length - 1) {
+              firstOrLastStyle = styles.selectTabLast
+            } else if (i === 0) {
+              firstOrLastStyle = styles.selectTabFirst
+            }
+            let activeStyle
             const isActive = value === this.props.active
+            if (isActive) activeStyle = styles.selectTabActive
             return (
               <TouchableOpacity
                 onPress={() => this.props.onSelect(value)}
@@ -20,11 +28,13 @@ export default class RadioButton extends Component {
                 activeOpacity={1}
               >
                 <View style={styles.radioButtonTextGroup}>
-                  <View style={styles.radioButton}>
-                    {isActive ?
-                      <View style={styles.radioButtonActiveDot}/> : null}
+                  <View style={[
+                    styles.selectTab,
+                    firstOrLastStyle,
+                    activeStyle
+                  ]}>
+                    <AppText style={activeStyle}>{label}</AppText>
                   </View>
-                  <AppText>{label}</AppText>
                 </View>
               </TouchableOpacity>
             )

components/cycle-day/symptoms/bleeding.js

@@ -8,7 +8,7 @@ import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { bleeding as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class Bleeding extends Component {
@@ -39,7 +39,7 @@ export default class Bleeding extends Component {
           <View>
             <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
             <AppText>How heavy is the bleeding?</AppText>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}

components/cycle-day/symptoms/cervix.js

@@ -12,7 +12,7 @@ import {
   cervixPosition as positionLabels
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader } from '../../app-text'
 
 export default class Cervix extends Component {
@@ -54,19 +54,19 @@ export default class Cervix extends Component {
         <ScrollView style={styles.page}>
           <View>
             <SymptomSectionHeader>Opening</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
             />
             <SymptomSectionHeader>Firmness</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
             />
             <SymptomSectionHeader>Position</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}

components/cycle-day/symptoms/desire.js

@@ -7,7 +7,7 @@ import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { intensity as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -31,7 +31,7 @@ export default class Desire extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={desireRadioProps}
               acitve={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}

components/cycle-day/symptoms/mucus.js

@@ -12,7 +12,7 @@ import {
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader } from '../../app-text'
 
 
@@ -52,13 +52,13 @@ export default class Mucus extends Component {
         <ScrollView style={styles.page}>
           <View>
             <SymptomSectionHeader>Feeling</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={mucusFeeling}
               onSelect={val => this.setState({ feeling: val })}
               active={this.state.feeling}
             />
             <SymptomSectionHeader>Texture</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={mucusTexture}
               onSelect={val => this.setState({ texture: val })}
               active={this.state.texture}

styles/index.js

@@ -213,31 +213,33 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     marginVertical: 10,
   },
-  radioButtonGroup: {
-    marginTop: 10
+  selectTabGroup: {
+    marginTop: 10,
+    flexDirection: 'row'
   },
-  radioButton: {
-    width: 20,
-    height: 20,
-    borderRadius: 100,
+  selectTab: {
+    backgroundColor: 'lightgrey',
     borderStyle: 'solid',
-    borderWidth: 2,
-    borderColor: secondaryColor,
+    borderLeftWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderColor: 'white',
     marginBottom: 3,
-    marginRight: 10,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  radioButtonActiveDot: {
-    width: 10,
-    height: 10,
-    borderRadius: 100,
-    backgroundColor: secondaryColor
+  selectTabActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
   },
-  radioButtonTextGroup: {
-    marginRight: 10,
-    flexDirection: 'row',
-    marginBottom: 10
+  selectTabLast: {
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  selectTabFirst: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderLeftWidth: null
   },
   page: {
     marginHorizontal: 10