wunderfisch
107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native'
|
|
|
|
import AppText from '../common/app-text'
|
|
|
|
import { Colors, Containers } from '../../styles'
|
|
import labels from '../../i18n/en/settings'
|
|
|
|
export default function SelectTabGroup({
|
|
activeButton,
|
|
buttons,
|
|
onSelect,
|
|
disabled,
|
|
}) {
|
|
// TODO https://gitlab.com/bloodyhealth/drip/-/issues/707
|
|
const oneTimeTransformIntoNumber =
|
|
typeof activeButton === 'boolean' && Number(activeButton)
|
|
const isSecondarySymptomSwitch =
|
|
buttons[0]['label'] === labels.secondarySymptom.mucus
|
|
|
|
// Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution
|
|
const showDisabledAlert = (label) => {
|
|
if (label === 'cervix' || label === 'cervical mucus') {
|
|
Alert.alert(
|
|
labels.secondarySymptom.disabled.title,
|
|
labels.secondarySymptom.disabled.message
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{buttons.map(({ label, value }, i) => {
|
|
const isActive =
|
|
value === activeButton || value === oneTimeTransformIntoNumber
|
|
const boxStyle = [
|
|
styles.box,
|
|
isActive && styles.boxActive,
|
|
isSecondarySymptomSwitch && styles.purpleBox,
|
|
isSecondarySymptomSwitch && isActive && styles.activePurpleBox,
|
|
disabled && styles.disabledBox,
|
|
]
|
|
const textStyle = [
|
|
styles.text,
|
|
isSecondarySymptomSwitch && styles.purpleText,
|
|
isActive && styles.textActive,
|
|
disabled && styles.greyText,
|
|
]
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
!disabled ? onSelect(value) : showDisabledAlert(label)
|
|
}
|
|
key={i}
|
|
style={boxStyle}
|
|
>
|
|
<AppText style={textStyle}>{label}</AppText>
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
SelectTabGroup.propTypes = {
|
|
activeButton: PropTypes.number,
|
|
buttons: PropTypes.array.isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
disabled: PropTypes.bool,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
box: {
|
|
...Containers.box,
|
|
},
|
|
boxActive: {
|
|
...Containers.boxActive,
|
|
},
|
|
container: {
|
|
...Containers.selectGroupContainer,
|
|
},
|
|
text: {
|
|
color: Colors.orange,
|
|
},
|
|
textActive: {
|
|
color: 'white',
|
|
},
|
|
purpleBox: {
|
|
borderColor: Colors.purple,
|
|
},
|
|
activePurpleBox: {
|
|
backgroundColor: Colors.purple,
|
|
},
|
|
purpleText: {
|
|
color: Colors.purple,
|
|
},
|
|
greyText: {
|
|
color: Colors.grey,
|
|
},
|
|
disabledBox: {
|
|
borderColor: Colors.grey,
|
|
backgroundColor: Colors.turquoiseLight,
|
|
},
|
|
})
|