From 71af282d9ba1a23842326045c5829ecc3826fea8 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sat, 1 Sep 2018 19:11:44 +0200
Subject: [PATCH] Convert radio button group to select tab group
---
components/cycle-day/radio-button-group.js | 36 -----------------
components/cycle-day/select-tab-group.js | 46 ++++++++++++++++++++++
components/cycle-day/symptoms/bleeding.js | 4 +-
components/cycle-day/symptoms/cervix.js | 8 ++--
components/cycle-day/symptoms/desire.js | 4 +-
components/cycle-day/symptoms/mucus.js | 6 +--
styles/index.js | 38 +++++++++---------
7 files changed, 77 insertions(+), 65 deletions(-)
delete mode 100644 components/cycle-day/radio-button-group.js
create mode 100644 components/cycle-day/select-tab-group.js
diff --git a/components/cycle-day/radio-button-group.js b/components/cycle-day/radio-button-group.js
deleted file mode 100644
index 8b7ffacd..00000000
--- a/components/cycle-day/radio-button-group.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
-import { AppText } from '../app-text'
-
-export default class RadioButton extends Component {
- render() {
- return (
- <View style={styles.radioButtonGroup}>
- {
- this.props.buttons.map(({ label, value }) => {
- const isActive = value === this.props.active
- return (
- <TouchableOpacity
- onPress={() => this.props.onSelect(value)}
- key={value}
- activeOpacity={1}
- >
- <View style={styles.radioButtonTextGroup}>
- <View style={styles.radioButton}>
- {isActive ?
- <View style={styles.radioButtonActiveDot}/> : null}
- </View>
- <AppText>{label}</AppText>
- </View>
- </TouchableOpacity>
- )
- })
- }
- </View>
- )
- }
-}
\ No newline at end of file
diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js
new file mode 100644
index 00000000..f4022407
--- /dev/null
+++ b/components/cycle-day/select-tab-group.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {
+ View,
+ TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectTabGroup extends Component {
+ render() {
+ return (
+ <View style={styles.selectTabGroup}>
+ {
+ 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)}
+ key={value}
+ activeOpacity={1}
+ >
+ <View style={styles.radioButtonTextGroup}>
+ <View style={[
+ styles.selectTab,
+ firstOrLastStyle,
+ activeStyle
+ ]}>
+ <AppText style={activeStyle}>{label}</AppText>
+ </View>
+ </View>
+ </TouchableOpacity>
+ )
+ })
+ }
+ </View>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 57a084ac..13211627 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/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 })}
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 86d46aae..ba1872e0 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/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 })}
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index 64a0306e..d78bcff4 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/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 })}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index f8c35343..586fcb23 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/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}
diff --git a/styles/index.js b/styles/index.js
index b357a828..e3fd7d2f 100644
--- a/styles/index.js
+++ b/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
--
GitLab