diff --git a/components/header/hamburger-menu.js b/components/header/hamburger-menu.js new file mode 100644 index 0000000..f93dc68 --- /dev/null +++ b/components/header/hamburger-menu.js @@ -0,0 +1,93 @@ +import React, { Component } from 'react' +import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native' + +import AppIcon from '../common/app-icon' +import MenuItem from './menu-item' + +import { Colors, Sizes } 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' }, +] + +export default class HamburgerMenu extends Component { + + constructor(props) { + super(props) + + this.state = { shouldShowMenu: false } + } + + toggleMenu = () => { + this.setState({ shouldShowMenu: !this.state.shouldShowMenu}) + } + + render() { + const { shouldShowMenu } = this.state + + return( + + {!shouldShowMenu && + + + + } + {shouldShowMenu && + + + + + + + + {settingsMenuItems.map(item => + + )} + + + } + + ) + } + +} + +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%' + } +}) diff --git a/components/header/index.js b/components/header/index.js index 5c6d321..9280d90 100644 --- a/components/header/index.js +++ b/components/header/index.js @@ -1,43 +1,24 @@ -import React, { Component } from 'react' +import React from 'react' import { StyleSheet, View } from 'react-native' import PropTypes from 'prop-types' import Logo from './logo' -import SideMenu from './side-menu' +import HamburgerMenu from './hamburger-menu' import { Colors, Containers, Sizes } from '../../styles/redesign' -export default class Header extends Component { - static propTypes = { - isSideMenuEnabled: PropTypes.bool - } +const Header = ({ isSideMenuEnabled }) => { - constructor(props) { - super(props) + return ( + + + {isSideMenuEnabled && } + + ) +} - this.state = { shouldShowMenu: false } - } - - toggleMenu = () => { - this.setState({ shouldShowMenu: !this.state.shouldShowMenu}) - } - - render() { - const { isSideMenuEnabled } = this.props - const { shouldShowMenu } = this.state - - return ( - - - {isSideMenuEnabled && - - } - - ) - } +Header.propTypes = { + isSideMenuEnabled: PropTypes.bool } Header.defaultProps = { @@ -50,4 +31,6 @@ const styles = StyleSheet.create({ padding: Sizes.base, ...Containers.rowContainer } -}) \ No newline at end of file +}) + +export default Header \ No newline at end of file diff --git a/components/header/side-menu.js b/components/header/side-menu.js deleted file mode 100644 index 5c960fc..0000000 --- a/components/header/side-menu.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react' -import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native' -import PropTypes from 'prop-types' - -import AppIcon from '../common/app-icon' -import MenuItem from './menu-item' - -import { Colors, Sizes } 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 = ({ shouldShowMenu, toggleMenu }) => { - return( - - {!shouldShowMenu && - - - - } - {shouldShowMenu && - - - - - - - - {settingsMenuItems.map(item => - - )} - - - } - - ) -} - -SideMenu.propTypes = { - shouldShowMenu: PropTypes.bool.isRequired, - toggleMenu: PropTypes.func -} - -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%' - } -}) - -export default SideMenu diff --git a/components/license.js b/components/license.js index 6406824..08384e9 100644 --- a/components/license.js +++ b/components/license.js @@ -22,14 +22,14 @@ export default function License({ setLicense }) { } return ( - - - {labels.text} + + + {labels.text} - - diff --git a/components/password-prompt.js b/components/password-prompt.js index 591a50a..0b9b908 100644 --- a/components/password-prompt.js +++ b/components/password-prompt.js @@ -64,7 +64,7 @@ export default class PasswordPrompt extends Component { shared.incorrectPasswordMessage, [{ text: shared.tryAgain, - onPress: this.setPassword(null) + onPress: () => this.setState({ password: null }) }] ) return @@ -72,10 +72,6 @@ export default class PasswordPrompt extends Component { this.props.enableShowApp() } - setPassword = (password) => { - this.setState({ password }) - } - unlockApp = () => { requestHash('check-pw', this.state.password) } diff --git a/components/stats.js b/components/stats.js index 213ae7d..daf1e05 100644 --- a/components/stats.js +++ b/components/stats.js @@ -16,25 +16,23 @@ const image = require('../assets/cycle-icon.png') const Stats = () => { const cycleLengths = cycleModule().getAllCycleLengths() - const atLeastOneCycle = cycleLengths.length >= 1 const numberOfCycles = cycleLengths.length - let cycleData - if (atLeastOneCycle) { - cycleData = getCycleInfo(cycleLengths) - } + const hasAtLeastOneCycle = numberOfCycles >= 1 + const cycleData = hasAtLeastOneCycle ? getCycleInfo(cycleLengths) + : { minimum: '—', maximum: '—', stdDeviation: '—' } const statsData = [ - [atLeastOneCycle ? cycleData.minimum : 0, labels.minLabel], - [atLeastOneCycle ? cycleData.maximum : 0, labels.maxLabel], - [atLeastOneCycle && cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel], + [cycleData.minimum, labels.minLabel], + [cycleData.maximum, labels.maxLabel], + [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel], [numberOfCycles, labels.basisOfStatsEnd] ] return ( {labels.cycleLengthExplainer} - {!atLeastOneCycle && {labels.emptyStats}} - {atLeastOneCycle && + {!hasAtLeastOneCycle && {labels.emptyStats}} + {hasAtLeastOneCycle &&