mashazyu
115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import AppIcon from '../common/app-icon'
|
|
import AppText from '../common/app-text'
|
|
|
|
import { connect } from 'react-redux'
|
|
import { navigate } from '../../slices/navigation'
|
|
|
|
import { Sizes, Typography } from '../../styles/redesign'
|
|
import settingsLabels from '../../i18n/en/settings'
|
|
|
|
const { menuItems } = settingsLabels
|
|
|
|
const settingsMenuItems = [
|
|
{name: menuItems.settings, component: 'SettingsMenu'},
|
|
{name: menuItems.about, component: 'About'},
|
|
{name: menuItems.license, component: 'License'},
|
|
]
|
|
|
|
const SideMenu = ({ navigate, onPress, shouldShowMenu }) => {
|
|
const navigateMenuItem = (page) => {
|
|
onPress()
|
|
navigate(page)
|
|
}
|
|
|
|
return(
|
|
<React.Fragment>
|
|
{!shouldShowMenu &&
|
|
<TouchableOpacity onPress={onPress}>
|
|
<AppIcon name={'dots-three-vertical'} isCTA/>
|
|
</TouchableOpacity>
|
|
}
|
|
{shouldShowMenu &&
|
|
<Modal
|
|
animationType='fade'
|
|
onRequestClose={onPress}
|
|
transparent={true}
|
|
visible={shouldShowMenu}
|
|
>
|
|
<View style={styles.blackBackground}></View>
|
|
<View style={styles.menu}>
|
|
<TouchableOpacity onPress={onPress} style={styles.iconContainer}>
|
|
<AppIcon name={'cross'}/>
|
|
</TouchableOpacity>
|
|
{settingsMenuItems.map(item =>
|
|
<MenuItem
|
|
item={item}
|
|
key={item.name}
|
|
navigate={navigateMenuItem}
|
|
/>
|
|
)}
|
|
</View>
|
|
</Modal>
|
|
}
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
|
|
SideMenu.propTypes = {
|
|
navigate: PropTypes.func.isRequired,
|
|
onPress: PropTypes.func,
|
|
shouldShowMenu: PropTypes.bool.isRequired
|
|
}
|
|
|
|
const MenuItem = ({ item, navigate }) => {
|
|
return(
|
|
<View style={styles.menuItem}>
|
|
<TouchableOpacity onPress={() => navigate(item.component)}>
|
|
<AppText style={styles.text}>{item.name}</AppText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
MenuItem.propTypes = {
|
|
item: PropTypes.object.isRequired,
|
|
navigate: PropTypes.func.isRequired,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
blackBackground: {
|
|
backgroundColor: 'black',
|
|
flex: 1,
|
|
opacity: 0.65,
|
|
},
|
|
iconContainer: {
|
|
alignSelf: 'flex-end',
|
|
marginBottom: Sizes.base
|
|
},
|
|
menu: {
|
|
alignSelf: 'flex-end',
|
|
backgroundColor: 'white',
|
|
height: '100%',
|
|
padding: Sizes.base,
|
|
position: 'absolute',
|
|
width: '60%'
|
|
},
|
|
text: {
|
|
...Typography.subtitle
|
|
}
|
|
})
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return({
|
|
navigate: (page) => dispatch(navigate(page)),
|
|
})
|
|
}
|
|
|
|
export default connect(
|
|
null,
|
|
mapDispatchToProps,
|
|
)(SideMenu)
|