Sofiya Tepikin
56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { StyleSheet, TouchableOpacity, View } from 'react-native'
|
|
|
|
import AppText from '../common/app-text'
|
|
|
|
import { Colors, Containers } from '../../styles'
|
|
|
|
const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
{Object.keys(labels).map((key) => {
|
|
const isActive = optionsState[key]
|
|
const boxStyle = [styles.box, isActive && styles.boxActive]
|
|
const textStyle = [styles.text, isActive && styles.textActive]
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={key}
|
|
onPress={() => onSelect(key)}
|
|
style={boxStyle}
|
|
>
|
|
<AppText style={textStyle}>{labels[key]}</AppText>
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
SelectBoxGroup.propTypes = {
|
|
labels: PropTypes.object.isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
optionsState: PropTypes.object.isRequired,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
box: {
|
|
...Containers.box,
|
|
},
|
|
boxActive: {
|
|
...Containers.boxActive,
|
|
},
|
|
container: {
|
|
...Containers.selectGroupContainer,
|
|
},
|
|
text: {
|
|
color: Colors.orange,
|
|
},
|
|
textActive: {
|
|
color: 'white',
|
|
},
|
|
})
|
|
|
|
export default SelectBoxGroup
|