From faf7dbac95c82edbb4fbb74e6cb91dfcd433c64e Mon Sep 17 00:00:00 2001
From: Sofiya Tepikin <sofiya.tepikin@gmail.com>
Date: Thu, 17 Jan 2019 21:48:02 +0100
Subject: [PATCH] Fixes settings item menu in footer missing active state
---
components/app.js | 46 +++++++++++----------
components/menu.js | 101 ++++++++++++++++++++++++++++++---------------
2 files changed, 92 insertions(+), 55 deletions(-)
diff --git a/components/app.js b/components/app.js
index 73403d6e..26405af5 100644
--- a/components/app.js
+++ b/components/app.js
@@ -20,10 +20,6 @@ const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
acc[curr] = headerTitles[curr].toLowerCase()
return acc
}, {})
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
- acc[curr] = menuTitles[curr].toLowerCase()
- return acc
-}, {})
const isSymptomView = name => Object.keys(symptomViews).includes(name)
const isSettingsView = name => Object.keys(settingsViews).includes(name)
@@ -87,47 +83,55 @@ export default class App extends Component {
}
render() {
- const page = {
- Home, Calendar, CycleDay, Chart, InfoSymptom,
- SettingsMenu, ...settingsViews, Stats, ...symptomViews
- }[this.state.currentPage]
+ const { currentPage, currentProps } = this.state
+ const pages = {
+ Home,
+ Calendar,
+ CycleDay,
+ Chart,
+ InfoSymptom,
+ SettingsMenu,
+ ...settingsViews,
+ Stats,
+ ...symptomViews
+ }
+ const page = pages[currentPage]
return (
<View style={{flex: 1}}>
{this.isDefaultView() &&
<Header
- title={headerTitlesLowerCase[this.state.currentPage]}
+ title={headerTitlesLowerCase[currentPage]}
/>
}
- {this.state.currentPage === 'InfoSymptom' &&
+ {currentPage === 'InfoSymptom' &&
<Header
- title={headerTitlesLowerCase[this.state.currentPage]}
+ title={headerTitlesLowerCase[currentPage]}
goBack={this.handleBackButtonPress}
/>
}
- {isSymptomView(this.state.currentPage) &&
+ {isSymptomView(currentPage) &&
<Header
- title={headerTitlesLowerCase[this.state.currentPage]}
+ title={headerTitlesLowerCase[currentPage]}
isSymptomView={true}
goBack={this.handleBackButtonPress}
- date={this.state.currentProps.date}
+ date={currentProps.date}
goToSymptomInfo={() => this.navigate('InfoSymptom', {
- date: this.state.currentProps.date,
- symptomView: this.state.currentPage,
- cycleDay: this.state.currentProps.cycleDay
+ date: currentProps.date,
+ symptomView: currentPage,
+ cycleDay: currentProps.cycleDay
})}
/>}
{React.createElement(page, {
navigate: this.navigate,
- ...this.state.currentProps
+ ...currentProps
})}
- {!isSymptomView(this.state.currentPage) &&
+ {!isSymptomView(currentPage) &&
<Menu
navigate={this.navigate}
- titles={menuTitlesLowerCase}
- currentPage={this.state.currentPage}
+ currentPage={currentPage}
/>
}
</View>
diff --git a/components/menu.js b/components/menu.js
index 7a692e03..e91466e0 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -1,46 +1,79 @@
-import React, { Component } from 'react'
+import React from 'react'
import {
View,
Text,
TouchableOpacity
} from 'react-native'
+
+import { menuTitles } from '../i18n/en/labels'
+
import styles, { iconStyles, secondaryColor } from '../styles'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-export default class Menu extends Component {
- makeMenuItem = ({ title, icon, onPress}, i) => {
- const styleActive = (this.props.currentPage.toLowerCase() === title) ?
- {color: secondaryColor} : {}
- return (
- <TouchableOpacity
- onPress={onPress}
- style={styles.menuItem}
- key={i.toString()}
- >
- <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
- <Text style={[styles.menuText, styleActive]}>
- {title}
- </Text>
- </TouchableOpacity>
- )
- }
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
+ acc[curr] = menuTitles[curr].toLowerCase()
+ return acc
+}, {})
- goTo(componentName) {
- this.props.navigate(componentName)
+const menuItems = [
+ {
+ labelKey: 'Home',
+ icon: 'home',
+ component: 'Home'
+ },
+ {
+ labelKey: 'Calendar',
+ icon: 'calendar-range',
+ component: 'Calendar',
+ },
+ {
+ labelKey: 'Chart',
+ icon: 'chart-line',
+ component: 'Chart'
+ },
+ {
+ labelKey: 'Stats',
+ icon: 'chart-pie',
+ component: 'Stats',
+ },
+ {
+ labelKey: 'Settings',
+ icon: 'settings',
+ component: 'SettingsMenu',
}
+]
- render() {
- const t = this.props.titles
- return (
- <View style={styles.menu}>
- {[
- { title: t.Home, icon: 'home', onPress: () => this.goTo('Home') },
- { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
- { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
- { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
- { title: t.Settings, icon: 'settings', onPress: () => this.goTo('SettingsMenu') },
- ].map(this.makeMenuItem)}
- </View >
- )
- }
+const MenuItem = ({ icon, labelKey, active, onPress }) => {
+ const styleActive = active ? { color: secondaryColor } : null
+ return (
+ <TouchableOpacity
+ style={styles.menuItem}
+ onPress={onPress}
+ >
+ <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
+ <Text style={[styles.menuText, styleActive]}>
+ {menuTitlesLowerCase[labelKey]}
+ </Text>
+ </TouchableOpacity>
+ )
}
+
+const Menu = ({ currentPage, navigate }) => {
+ return (
+ <View style={styles.menu}>
+ { menuItems.map(({ icon, labelKey, component }) => {
+ return (
+ <MenuItem
+ key={labelKey}
+ labelKey={labelKey}
+ icon={icon}
+ active={component === currentPage}
+ onPress={() => navigate(component)}
+ />
+ )}
+ )}
+ </View >
+ )
+}
+
+export default Menu
\ No newline at end of file
--
GitLab