Sofiya Tepikin
52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { StyleSheet, Text, TouchableOpacity } from 'react-native'
|
|
|
|
import Icon from '../common/menu-icon'
|
|
|
|
import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
|
|
|
|
const MenuItem = ({ isActive, icon, label, onPress }) => {
|
|
const textStyle = isActive ? styles.menuTextActive : styles.menuText
|
|
const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.button} onPress={onPress}>
|
|
<Icon name={icon} isActive={isActive} />
|
|
<Text testID={testID} style={textStyle}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
MenuItem.propTypes = {
|
|
isActive: PropTypes.bool.isRequired,
|
|
icon: PropTypes.string.isRequired,
|
|
label: PropTypes.string.isRequired,
|
|
onPress: PropTypes.func.isRequired,
|
|
}
|
|
|
|
const text = {
|
|
fontFamily: Fonts.bold,
|
|
fontSize: Sizes.small,
|
|
textTransform: 'uppercase',
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
padding: Spacing.base,
|
|
...Containers.centerItems,
|
|
},
|
|
menuText: {
|
|
color: Colors.grey,
|
|
...text,
|
|
},
|
|
menuTextActive: {
|
|
color: Colors.orange,
|
|
...text,
|
|
},
|
|
})
|
|
|
|
export default MenuItem
|