Convert radio button group to select tab group

2018-09-01 19:11:44 +02:00
parent 1d0b2497b4
commit 71af282d9b
7 changed files with 77 additions and 65 deletions
@@ -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>
+    )
+  }
+}