From 2ec6626b4e013f9bbada16df18625c8d5560e27c Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sat, 1 Sep 2018 19:36:04 +0200
Subject: [PATCH] Use select box group instead of single select boxes
---
components/cycle-day/select-box-group.js | 34 ++++++++++++++++++
components/cycle-day/select-box.js | 25 -------------
components/cycle-day/symptoms/sex.js | 45 ++++++++++--------------
3 files changed, 52 insertions(+), 52 deletions(-)
create mode 100644 components/cycle-day/select-box-group.js
delete mode 100644 components/cycle-day/select-box.js
diff --git a/components/cycle-day/select-box-group.js b/components/cycle-day/select-box-group.js
new file mode 100644
index 00000000..bde91772
--- /dev/null
+++ b/components/cycle-day/select-box-group.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import {
+ View,
+ TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectBoxGroup extends Component {
+ render() {
+ return (
+ <View flexDirection='row' flexWrap='wrap'>
+ {this.props.data.map(({ label, stateKey }) => {
+ const style = [styles.selectBox]
+ const textStyle = []
+ if (this.props.optionsState[stateKey]) {
+ style.push(styles.selectBoxActive)
+ textStyle.push(styles.selectBoxTextActive)
+ }
+ return (
+ <TouchableOpacity
+ onPress={() => this.props.onSelect(stateKey)}
+ key={stateKey}
+ >
+ <View style={style}>
+ <AppText style={textStyle}>{label}</AppText>
+ </View>
+ </TouchableOpacity>
+ )
+ })}
+ </View>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/select-box.js b/components/cycle-day/select-box.js
deleted file mode 100644
index 62daeceb..00000000
--- a/components/cycle-day/select-box.js
+++ /dev/null
@@ -1,25 +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 SelectBox extends Component {
- render () {
- const style = [styles.selectBox]
- const textStyle = []
- if (this.props.value) {
- style.push(styles.selectBoxActive)
- textStyle.push(styles.selectBoxTextActive)
- }
- return (
- <TouchableOpacity onPress={this.props.onPress}>
- <View style={style}>
- <AppText style={textStyle}>{this.props.children}</AppText>
- </View>
- </TouchableOpacity>
- )
- }
-}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js
index 248ef407..0019eb4b 100644
--- a/components/cycle-day/symptoms/sex.js
+++ b/components/cycle-day/symptoms/sex.js
@@ -11,7 +11,7 @@ import {
contraceptives as contraceptiveLabels
} from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
-import SelectBox from '../select-box'
+import SelectBoxGroup from '../select-box-group'
import { SymptomSectionHeader } from '../../app-text'
const sexBoxes = [{
@@ -40,6 +40,9 @@ const contraceptiveBoxes = [{
}, {
label: contraceptiveLabels.implant,
stateKey: 'implant'
+}, {
+ label: contraceptiveLabels.other,
+ stateKey: 'other'
}]
export default class Sex extends Component {
@@ -57,23 +60,12 @@ export default class Sex extends Component {
}
}
- makeSelectBoxes(boxes) {
- return boxes.map(({ label, stateKey }) => {
- return (
- <SelectBox
- value={this.state[stateKey]}
- onPress={() => this.toggleState(stateKey)}
- key={stateKey}
- >
- {label}
- </SelectBox>
- )
- })
- }
-
- toggleState(key) {
+ toggleState = (key) => {
const curr = this.state[key]
this.setState({[key]: !curr})
+ if (key === 'other' && !curr) {
+ this.setState({focusTextArea: true})
+ }
}
render() {
@@ -81,18 +73,17 @@ export default class Sex extends Component {
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
<SymptomSectionHeader>Activity</SymptomSectionHeader>
- {this.makeSelectBoxes(sexBoxes)}
+ <SelectBoxGroup
+ data={sexBoxes}
+ onSelect={this.toggleState}
+ optionsState={this.state}
+ />
<SymptomSectionHeader>Contraceptives</SymptomSectionHeader>
- {this.makeSelectBoxes(contraceptiveBoxes)}
- <SelectBox
- value={this.state.other}
- onPress={() => {
- this.toggleState('other')
- this.setState({ focusTextArea: true })
- }}
- >
- {contraceptiveLabels.other}
- </SelectBox>
+ <SelectBoxGroup
+ data={contraceptiveBoxes}
+ onSelect={this.toggleState}
+ optionsState={this.state}
+ />
{this.state.other &&
<TextInput
--
GitLab