Introduces Header redesign along with some global styles changes
This commit is contained in:
mashazyu
@@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import { TouchableOpacity } from 'react-native'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Icon from 'react-native-vector-icons/AntDesign'
|
||||
|
||||
import styles, { iconStyles } from '../../styles'
|
||||
|
||||
export default function DeleteIcon({ handleDelete }) {
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={handleDelete}
|
||||
style={styles.headerDeleteButton}
|
||||
testID="deleteIcon"
|
||||
>
|
||||
<Icon
|
||||
name="delete"
|
||||
{...iconStyles.symptomHeaderIcons}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
DeleteIcon.propTypes = {
|
||||
handleDelete: PropTypes.func,
|
||||
}
|
||||
+69
-27
@@ -1,36 +1,78 @@
|
||||
import React from 'react'
|
||||
import { View } from 'react-native'
|
||||
import React, { Component } from 'react'
|
||||
import { StyleSheet, TouchableOpacity, View } from 'react-native'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Title from './title'
|
||||
import NavigationArrow from './navigation-arrow'
|
||||
import DeleteIcon from './delete-icon'
|
||||
import AppText from '../common/app-text'
|
||||
import SideMenu from './side-menu'
|
||||
|
||||
import styles from '../../styles'
|
||||
import { connect } from 'react-redux'
|
||||
import { navigate } from '../../slices/navigation'
|
||||
|
||||
export default function Header({
|
||||
handleBack,
|
||||
handleNext,
|
||||
handleDelete,
|
||||
title,
|
||||
subtitle,
|
||||
}) {
|
||||
import { Colors, Containers, Fonts, Sizes } from '../../styles/redesign'
|
||||
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
<View style={styles.accentCircle} />
|
||||
{ handleBack && <NavigationArrow handleBack={handleBack} /> }
|
||||
<Title title={title} subtitle={subtitle} />
|
||||
{ handleNext && <NavigationArrow handleNext={handleNext} /> }
|
||||
{ handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
|
||||
</View >
|
||||
class Header extends Component {
|
||||
|
||||
static propTypes = {
|
||||
navigate: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = { shouldShowMenu: false }
|
||||
}
|
||||
|
||||
toggleMenu = () => {
|
||||
this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { shouldShowMenu } = this.state
|
||||
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
<DripIcon navigate={this.props.navigate}/>
|
||||
<SideMenu
|
||||
shouldShowMenu={shouldShowMenu}
|
||||
onPress={this.toggleMenu}
|
||||
/>
|
||||
</View >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const DripIcon = ({ navigate }) => {
|
||||
return(
|
||||
<TouchableOpacity onPress={() => navigate('Home')}>
|
||||
<AppText style={styles.icon}>drip.</AppText>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
handleBack: PropTypes.func,
|
||||
handleDelete: PropTypes.func,
|
||||
handleNext: PropTypes.func,
|
||||
subtitle: PropTypes.string,
|
||||
title: PropTypes.string.isRequired
|
||||
DripIcon.propTypes = {
|
||||
navigate: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
backgroundColor: Colors.purple,
|
||||
padding: Sizes.base,
|
||||
...Containers.rowContainer
|
||||
},
|
||||
icon: {
|
||||
color: Colors.tourquiseDark,
|
||||
fontFamily: Fonts.bold,
|
||||
fontSize: Sizes.title
|
||||
}
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return({
|
||||
navigate: (page) => dispatch(navigate(page)),
|
||||
})
|
||||
}
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
mapDispatchToProps,
|
||||
)(Header)
|
||||
@@ -1,30 +0,0 @@
|
||||
import React from 'react'
|
||||
import { TouchableOpacity } from 'react-native'
|
||||
import PropTypes from 'prop-types'
|
||||
import Icon from 'react-native-vector-icons/Entypo'
|
||||
|
||||
import styles, { iconStyles } from '../../styles'
|
||||
|
||||
export default function NavigationArrow({ handleBack, handleNext }) {
|
||||
const navigationDirection = handleBack ? 'Left' : 'Right'
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.navigationArrow,
|
||||
styles[`navigationArrow${navigationDirection}`]
|
||||
]}
|
||||
onPress={ handleBack || handleNext }
|
||||
testID={ handleBack ? 'backButton' : 'nextButton'}
|
||||
>
|
||||
<Icon
|
||||
name={`chevron-thin-${navigationDirection.toLowerCase()}`}
|
||||
{...iconStyles.navigationArrow}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
NavigationArrow.propTypes = {
|
||||
handleBack: PropTypes.func,
|
||||
handleNext: PropTypes.func,
|
||||
}
|
||||
@@ -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)
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react'
|
||||
import { View, Text} from 'react-native'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import styles from '../../styles'
|
||||
|
||||
export default function Title({ title, subtitle }) {
|
||||
|
||||
if (subtitle !== undefined) {
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.dateHeader} testID='headerTitle'>
|
||||
{ // design wants everyhting lowercased, but we don't
|
||||
// have CSS pseudo properties
|
||||
title.toLowerCase()}
|
||||
</Text>
|
||||
{ subtitle &&
|
||||
<Text style={styles.cycleDayNumber} testID='headerSubtitle'>
|
||||
{subtitle.toLowerCase()}
|
||||
</Text>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Text testID='headerTitle' style={styles.headerText}>
|
||||
{title.toLowerCase()}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
Title.propTypes = {
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
}
|
||||
Reference in New Issue
Block a user