From ca8764aa4b2992350c8898cb4d54618b088e4a98 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 31 Aug 2018 20:11:30 +0200
Subject: [PATCH] Add dot when active
---
components/cycle-day/radio-button-group.js | 9 +++++----
styles/index.js | 16 ++++++++++------
2 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/components/cycle-day/radio-button-group.js b/components/cycle-day/radio-button-group.js
index 4ef83588..0881809f 100644
--- a/components/cycle-day/radio-button-group.js
+++ b/components/cycle-day/radio-button-group.js
@@ -12,10 +12,8 @@ export default class RadioButton extends Component {
<View style={styles.radioButtonGroup}>
{
this.props.buttons.map(({ label, value }) => {
+ const isActive = value === this.props.active
const circleStyle = [styles.radioButton]
- if (value === this.props.active) {
- circleStyle.push(styles.radioButtonActive)
- }
return (
<TouchableOpacity
onPress={() => this.props.onSelect(value)}
@@ -23,7 +21,10 @@ export default class RadioButton extends Component {
activeOpacity={1}
>
<View style={styles.radioButtonTextGroup}>
- <View style={circleStyle} />
+ <View style={circleStyle}>
+ {isActive ?
+ <View style={styles.radioButtonActiveDot}/> : null}
+ </View>
<Text>{label}</Text>
</View>
</TouchableOpacity>
diff --git a/styles/index.js b/styles/index.js
index 7cc0c14e..9a1e6a97 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -209,17 +209,21 @@ export default StyleSheet.create({
marginVertical: 10,
},
radioButton: {
- width: 30,
- height: 30,
+ width: 20,
+ height: 20,
borderRadius: 100,
borderStyle: 'solid',
borderWidth: 2,
borderColor: secondaryColor,
- marginBottom: 5
+ marginBottom: 5,
+ alignItems: 'center',
+ justifyContent: 'center'
},
- radioButtonActive: {
- backgroundColor: secondaryColor,
- color: fontOnPrimaryColor
+ radioButtonActiveDot: {
+ width: 10,
+ height: 10,
+ borderRadius: 100,
+ backgroundColor: secondaryColor
},
radioButtonGroup: {
flexDirection: 'row',
--
GitLab