From 4d6f0db30ad64a438739d7a3ea501e07d08c2a3e Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Tue, 24 Mar 2020 12:26:15 +0100
Subject: [PATCH] Moves Segment stiles to local file, separates MenuItem
component.
---
components/common/segment.js | 9 ++--
components/settings/menu-item.js | 57 ++++++++++++++++++++
components/settings/settings-menu.js | 77 +++-------------------------
styles/containers.js | 9 ----
4 files changed, 71 insertions(+), 81 deletions(-)
create mode 100644 components/settings/menu-item.js
diff --git a/components/common/segment.js b/components/common/segment.js
index 5037c5b3..a0ad843d 100644
--- a/components/common/segment.js
+++ b/components/common/segment.js
@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
import AppText from './app-text'
-import { Containers, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../styles/redesign'
const Segment = ({ children, last, title }) => {
const containerStyle = last ? styles.containerLast : styles.container
@@ -30,8 +30,11 @@ const segmentContainer = {
const styles = StyleSheet.create({
container: {
- ...segmentContainer,
- ...Containers.bottomBorder
+ borderStyle: 'solid',
+ borderBottomWidth: 2,
+ borderBottomColor: Colors.grey,
+ paddingBottom: Spacing.base,
+ ...segmentContainer
},
containerLast: {
...segmentContainer
diff --git a/components/settings/menu-item.js b/components/settings/menu-item.js
new file mode 100644
index 00000000..b9336a19
--- /dev/null
+++ b/components/settings/menu-item.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import AppIcon from '../common/app-icon'
+import AppText from '../common/app-text'
+import Segment from '../common/segment'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Colors, Containers, Sizes } from '../../styles/redesign'
+
+const MenuItem = ({ item, last, navigate }) => {
+ return (
+ <Segment last={last}>
+ <TouchableOpacity
+ style={styles.container}
+ key={item.name}
+ onPress={() => navigate(item.component)}
+ >
+ <View>
+ <AppText style={styles.title}>{item.name}</AppText>
+ {item.text.length > 0 && <AppText>{item.text}</AppText>}
+ </View>
+ <AppIcon name={'chevron-right'} isCTA/>
+ </TouchableOpacity>
+ </Segment>
+ )
+}
+
+MenuItem.propTypes = {
+ item: PropTypes.object.isRequired,
+ last: PropTypes.bool.isRequired,
+ navigate: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+ container: {
+ ...Containers.rowContainer
+ },
+ title: {
+ color: Colors.purple,
+ fontSize: Sizes.subtitle
+ }
+})
+
+const mapDispatchToProps = (dispatch) => {
+ return({
+ navigate: (page) => dispatch(navigate(page)),
+ })
+}
+
+export default connect(
+ null,
+ mapDispatchToProps
+)(MenuItem)
\ No newline at end of file
diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js
index 0305aade..4436c155 100644
--- a/components/settings/settings-menu.js
+++ b/components/settings/settings-menu.js
@@ -1,15 +1,8 @@
import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import AppIcon from '../common/app-icon'
import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
+import MenuItem from './menu-item'
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
-import { Colors, Containers, Sizes, Spacing } from '../../styles/redesign'
import settingsLabels from '../../i18n/en/settings'
const { menuItems } = settingsLabels
@@ -20,71 +13,17 @@ const menu = [
{ ...menuItems.password, component: 'Password'}
]
-const SettingsMenu = ({ navigate }) => {
+const SettingsMenu = () => {
return (
<AppPage title={settingsLabels.title}>
- {menu.map((menuItem, i) =>
- <MenuItem item={menuItem} i={i} navigate={navigate} key={i}/>
+ {menu.map((menuItem, i) => {
+ const last = (menu.length === i + 1)
+
+ return <MenuItem item={menuItem} key={i} last={last}/>
+ }
)}
</AppPage>
)
}
-SettingsMenu.propTypes = {
- navigate: PropTypes.func.isRequired
-}
-
-const MenuItem = ({ i, item, navigate }) => {
- const isLast = (menu.length === i + 1)
- const containerStyle = isLast ? styles.containerLast : styles.container
-
- return (
- <TouchableOpacity
- style={containerStyle}
- key={item.name}
- onPress={() => navigate(item.component)}
- >
- <View>
- <AppText style={styles.title}>{item.name}</AppText>
- {item.text.length > 0 && <AppText>{item.text}</AppText>}
- </View>
- <AppIcon name={'chevron-right'} isCTA/>
- </TouchableOpacity>
- )
-}
-
-MenuItem.propTypes = {
- i: PropTypes.number.isRequired,
- item: PropTypes.object.isRequired,
- navigate: PropTypes.func.isRequired
-}
-
-const menuItemContainer = {
- margin: Spacing.base,
- ...Containers.rowContainer
-}
-
-const styles = StyleSheet.create({
- container: {
- ...menuItemContainer,
- ...Containers.bottomBorder
- },
- containerLast: {
- ...menuItemContainer
- },
- title: {
- color: Colors.purple,
- fontSize: Sizes.subtitle
- },
-})
-
-const mapDispatchToProps = (dispatch) => {
- return({
- navigate: (page) => dispatch(navigate(page)),
- })
-}
-
-export default connect(
- null,
- mapDispatchToProps
-)(SettingsMenu)
\ No newline at end of file
+export default SettingsMenu
\ No newline at end of file
diff --git a/styles/containers.js b/styles/containers.js
index 37af3276..257c7b49 100644
--- a/styles/containers.js
+++ b/styles/containers.js
@@ -1,13 +1,4 @@
-import Colors from './colors'
-import Spacing from './spacing'
-
export default {
- bottomBorder: {
- borderStyle: 'solid',
- borderBottomWidth: 2,
- borderBottomColor: Colors.grey,
- paddingBottom: Spacing.base
- },
centerItems: {
alignItems: 'center',
flex: 1,
--
GitLab