use PopoverMenu

src/components/AddPaymentMethodMenu.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Popover from './Popover';
-import MenuItem from './MenuItem';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
-import * as StyleUtils from '../styles/StyleUtils';
 import withWindowDimensions from './withWindowDimensions';
 import Permissions from '../libs/Permissions';
-import styles from '../styles/styles';
+import PopoverMenu from './PopoverMenu';
 
 const propTypes = {
     isVisible: PropTypes.bool.isRequired,
@@ -42,36 +38,31 @@ const defaultProps = {
 };
 
 const AddPaymentMethodMenu = props => (
-    <Popover
+    <PopoverMenu
         isVisible={props.isVisible}
         onClose={props.onClose}
         anchorPosition={props.anchorPosition}
-    >
-        <View style={StyleUtils.getPaymentMethodMenuWidth(props.isSmallScreenSize)}>
-            <MenuItem
-                title={props.translate('common.bankAccount')}
-                icon={Expensicons.Bank}
-                onPress={() => props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT)}
-                wrapperStyle={styles.pr15}
-            />
-            {Permissions.canUseWallet(props.betas) && (
-                <MenuItem
-                    title={props.translate('common.debitCard')}
-                    icon={Expensicons.CreditCard}
-                    onPress={() => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD)}
-                    wrapperStyle={styles.pr15}
-                />
-            )}
-            {props.shouldShowPaypal && !props.payPalMeUsername && (
-                <MenuItem
-                    title={props.translate('common.payPalMe')}
-                    icon={Expensicons.PayPal}
-                    onPress={() => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL)}
-                    wrapperStyle={styles.pr15}
-                />
-            )}
-        </View>
-    </Popover>
+        onItemSelected={() => props.onClose()}
+        menuItems={[
+            {
+                text: props.translate('common.bankAccount'),
+                icon: Expensicons.Bank,
+                onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT),
+            },
+            ...(Permissions.canUseWallet(props.betas) ? [{
+                text: props.translate('common.debitCard'),
+                icon: Expensicons.CreditCard,
+                onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+            },
+            ] : []),
+            ...(props.shouldShowPaypal && !props.payPalMeUsername ? [{
+                text: props.translate('common.payPalMe'),
+                icon: Expensicons.PayPal,
+                onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL),
+            },
+            ] : []),
+        ]}
+    />
 );
 
 AddPaymentMethodMenu.propTypes = propTypes;

src/stories/PopoverMenu.stories.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import PopoverMenu from '../components/PopoverMenu';
+import * as Expensicons from '../components/Icon/Expensicons';
+import MenuItem from '../components/MenuItem';
+import colors from '../styles/colors';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/PopoverMenu',
+    component: PopoverMenu,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = (args) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const toggleVisibility = () => setIsVisible(!isVisible);
+    return (
+        <>
+            <MenuItem
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...args.menuItem}
+                onPress={toggleVisibility}
+                wrapperStyle={isVisible ? [{backgroundColor: colors.gray2}] : []}
+            />
+            <SafeAreaProvider>
+                <PopoverMenu
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...args.popoverMenu}
+                    isVisible={isVisible}
+                    onClose={toggleVisibility}
+                    onItemSelected={toggleVisibility}
+                    menuItems={[
+                        {
+                            text: 'Bank account',
+                            icon: Expensicons.Bank,
+                            onSelected: toggleVisibility,
+                        },
+                        {
+                            text: 'Debit card',
+                            icon: Expensicons.CreditCard,
+                            onSelected: toggleVisibility,
+                        },
+                        {
+                            text: 'PayPal.me',
+                            icon: Expensicons.PayPal,
+                            onSelected: toggleVisibility,
+                        },
+                    ]}
+                />
+            </SafeAreaProvider>
+        </>
+    );
+};
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    popoverMenu: {
+        anchorPosition: {
+            top: 80,
+            left: 20,
+        },
+    },
+    menuItem: {
+        title: 'Add payment Methods',
+        icon: Expensicons.Plus,
+    },
+};
+
+export default story;
+export {
+    Default,
+};