Merge pull request #1672 from Maftalion/matt-settings-menu

[User Settings] Implement Settings Menu Selectors

src/ROUTES.js

@@ -4,6 +4,10 @@
 export default {
     HOME: '/home',
     SETTINGS: '/settings',
+    SETTINGS_PROFILE: '/settings/profile',
+    SETTINGS_PREFERENCES: '/settings/preferences',
+    SETTINGS_PASSWORD: '/settings/password',
+    SETTINGS_PAYMENTS: '/settings/payments',
     NEW_GROUP: '/new/group',
     NEW_CHAT: '/new/chat',
     IOU_REQUEST: '/iou/request',

src/components/CreateMenu.js

@@ -1,16 +1,12 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {
-    View, Text, Pressable,
-} from 'react-native';
 import Popover from './Popover';
 import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import Icon from './Icon';
 import {ChatBubble, Users} from './Icon/Expensicons';
 import {redirect} from '../libs/actions/App';
 import ROUTES from '../ROUTES';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import MenuItem from './MenuItem';
 
 const propTypes = {
     // Callback to fire on request to modal close
@@ -82,23 +78,12 @@ class CreateMenu extends PureComponent {
                 anchorPosition={styles.createMenuPosition}
             >
                 {menuItemData.map(({icon, text, onPress}) => (
-                    <Pressable
+                    <MenuItem
                         key={text}
+                        icon={icon}
+                        title={text}
                         onPress={onPress}
-                        style={({hovered}) => ([
-                            styles.createMenuItem,
-                            hovered && {backgroundColor: themeColors.buttonHoveredBG},
-                        ])}
-                    >
-                        <View style={styles.createMenuIcon}>
-                            <Icon src={icon} />
-                        </View>
-                        <View style={styles.justifyContentCenter}>
-                            <Text style={[styles.createMenuText, styles.ml3]}>
-                                {text}
-                            </Text>
-                        </View>
-                    </Pressable>
+                    />
                 ))}
             </Popover>
         );

src/components/HeaderWithCloseButton.js

@@ -6,7 +6,7 @@ import {
 import styles from '../styles/styles';
 import Header from './Header';
 import Icon from './Icon';
-import {Close, Download} from './Icon/Expensicons';
+import {Close, Download, BackArrow} from './Icon/Expensicons';
 
 const propTypes = {
     /** Title of the Header */
@@ -18,6 +18,12 @@ const propTypes = {
     /** Method to trigger when pressing close button of the header */
     onCloseButtonPress: PropTypes.func,
 
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress: PropTypes.func,
+
+    /** Whether we should show a back icon */
+    shouldShowBackButton: PropTypes.bool,
+
     /** Fontsize for the text in the Header */
     textSize: PropTypes.oneOf(['default', 'large']),
 
@@ -29,6 +35,8 @@ const defaultProps = {
     title: '',
     onDownloadButtonPress: () => {},
     onCloseButtonPress: () => {},
+    onBackButtonPress: () => {},
+    shouldShowBackButton: false,
     textSize: 'default',
     shouldShowBorderBottom: true,
 };
@@ -44,6 +52,14 @@ const HeaderWithCloseButton = props => (
             styles.overflowHidden,
         ]}
         >
+            {props.shouldShowBackButton && (
+            <TouchableOpacity
+                onPress={props.onBackButtonPress}
+                style={[styles.touchableButtonImage]}
+            >
+                <Icon src={BackArrow} />
+            </TouchableOpacity>
+            )}
             <Header title={props.title} textSize={props.textSize} />
             <View style={[styles.reportOptions, styles.flexRow]}>
                 {

src/components/Icon/Expensicons.js

@@ -12,6 +12,11 @@ import Users from '../../../assets/images/users.svg';
 import Checkmark from '../../../assets/images/checkmark.svg';
 import Download from '../../../assets/images/download.svg';
 import DownArrow from '../../../assets/images/down.svg';
+import Profile from '../../../assets/images/profile.svg';
+import Gear from '../../../assets/images/gear.svg';
+import Wallet from '../../../assets/images/wallet.svg';
+import Lock from '../../../assets/images/lock.svg';
+import ArrowRight from '../../../assets/images/arrow-right.svg';
 
 export {
     BackArrow,
@@ -28,4 +33,9 @@ export {
     Users,
     Checkmark,
     Download,
+    Profile,
+    Gear,
+    Wallet,
+    Lock,
+    ArrowRight,
 };

src/components/MenuItem.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+    View, Text, Pressable,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import Icon from './Icon';
+import {ArrowRight} from './Icon/Expensicons';
+
+const propTypes = {
+    // Function to fire when component is pressed
+    onPress: PropTypes.func.isRequired,
+
+    // Icon to display on the left side of component
+    icon: PropTypes.func.isRequired,
+
+    // Text to display for the item
+    title: PropTypes.string.isRequired,
+
+    // Boolean whether to display the ArrowRight icon
+    shouldShowRightArrow: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldShowRightArrow: false,
+};
+
+const MenuItem = ({
+    onPress,
+    icon,
+    title,
+    shouldShowRightArrow,
+}) => (
+    <Pressable
+        onPress={onPress}
+        style={({hovered}) => ([
+            styles.createMenuItem,
+            hovered && {backgroundColor: themeColors.buttonHoveredBG},
+        ])}
+    >
+        <View style={styles.flexRow}>
+            <View style={styles.createMenuIcon}>
+                <Icon src={icon} />
+            </View>
+            <View style={styles.justifyContentCenter}>
+                <Text style={[styles.createMenuText, styles.ml3]}>
+                    {title}
+                </Text>
+            </View>
+        </View>
+        {shouldShowRightArrow && (
+            <View style={styles.createMenuIcon}>
+                <Icon src={ArrowRight} />
+            </View>
+        )}
+    </Pressable>
+);
+
+MenuItem.propTypes = propTypes;
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = 'MenuItem';
+
+export default MenuItem;

src/components/RightDockedModal.js

@@ -29,16 +29,22 @@ const defaultProps = {
 
 const RightDockedModal = memo(({
     route, children, currentURL,
-}) => (
-    <Modal
-        type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
-        onClose={redirectToLastReport}
-        isVisible={currentURL.includes(route)}
-        backgroundColor={themeColors.componentBG}
-    >
-        {children}
-    </Modal>
-));
+}) => {
+    // Using includes allows for subroutes to work.
+    // All /settings/:route subroutes would go to the SettingsPage and
+    // that page will render the right components for the subroute.
+    const isVisible = currentURL.includes(route);
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            onClose={redirectToLastReport}
+            isVisible={isVisible}
+            backgroundColor={themeColors.componentBG}
+        >
+            {children}
+        </Modal>
+    );
+});
 
 RightDockedModal.propTypes = propTypes;
 RightDockedModal.defaultProps = defaultProps;