Introduces Header redesign along with some global styles changes

2020-03-23 22:20:17 +01:00
parent e101ecb8d1
commit ce92b0af33
10 changed files with 210 additions and 132 deletions
@@ -0,0 +1,114 @@
+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)