From 328c12f826b93556bff07f06f18989e44951b04d Mon Sep 17 00:00:00 2001 From: sahil Date: Thu, 10 Feb 2022 23:18:31 +0530 Subject: [PATCH 1/5] use PopoverMenu --- src/components/AddPaymentMethodMenu.js | 55 +++++++++++--------------- 1 file changed, 23 insertions(+), 32 deletions(-) diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js index 03b470771b29..1727cc719a19 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/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 => ( - - - props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT)} - wrapperStyle={styles.pr15} - /> - {Permissions.canUseWallet(props.betas) && ( - props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD)} - wrapperStyle={styles.pr15} - /> - )} - {props.shouldShowPaypal && !props.payPalMeUsername && ( - props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL)} - wrapperStyle={styles.pr15} - /> - )} - - + 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; From 245cb5137dd10f3789f1476a0a44ba699264681e Mon Sep 17 00:00:00 2001 From: sahil Date: Fri, 25 Feb 2022 04:22:12 +0530 Subject: [PATCH 2/5] add PopoverMenu to stories --- src/stories/PopoverMenu.stories.js | 65 ++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/stories/PopoverMenu.stories.js diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js new file mode 100644 index 000000000000..c9a159a74f0f --- /dev/null +++ b/src/stories/PopoverMenu.stories.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PopoverMenu from '../components/PopoverMenu'; +import * as Expensicons from '../components/Icon/Expensicons'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +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 ( + <> + + + + + + ); +}; + +// 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: { + menuItems: [ + { + text: 'Bank account', + icon: Expensicons.Bank, + }, + { + text: 'Debit card', + icon: Expensicons.CreditCard, + }, + { + text: 'PayPal.me', + icon: Expensicons.PayPal, + }, + ], + anchorPosition: { + top: 80, + left: 20, + }, + }, + menuItem: { + title: 'Add payment Methods', + icon: Expensicons.Plus, + }, +}; + +export default story; +export { + Default, +}; \ No newline at end of file From 2f6c1b4623a4d9709b41f91701f13178100c58b4 Mon Sep 17 00:00:00 2001 From: sahil Date: Fri, 25 Feb 2022 14:19:46 +0530 Subject: [PATCH 3/5] fix lint errors --- src/stories/PopoverMenu.stories.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js index c9a159a74f0f..f90dc57d0ca4 100644 --- a/src/stories/PopoverMenu.stories.js +++ b/src/stories/PopoverMenu.stories.js @@ -1,7 +1,7 @@ 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 { SafeAreaProvider } from 'react-native-safe-area-context'; import MenuItem from '../components/MenuItem'; import colors from '../styles/colors'; @@ -21,9 +21,20 @@ const Template = (args) => { const toggleVisibility = () => setIsVisible(!isVisible); return ( <> - + + - + ); @@ -62,4 +73,4 @@ Default.args = { export default story; export { Default, -}; \ No newline at end of file +}; From 78eabbc67f037d2c7a38d82998e126680ae39b68 Mon Sep 17 00:00:00 2001 From: sahil Date: Fri, 25 Feb 2022 14:48:51 +0530 Subject: [PATCH 4/5] remove extra line --- src/stories/PopoverMenu.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js index f90dc57d0ca4..30e1a0936a4d 100644 --- a/src/stories/PopoverMenu.stories.js +++ b/src/stories/PopoverMenu.stories.js @@ -21,7 +21,6 @@ const Template = (args) => { const toggleVisibility = () => setIsVisible(!isVisible); return ( <> - Date: Tue, 1 Mar 2022 22:28:34 +0530 Subject: [PATCH 5/5] pass required props --- src/stories/PopoverMenu.stories.js | 32 +++++++++++++++++------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js index 30e1a0936a4d..299ce3fb2d70 100644 --- a/src/stories/PopoverMenu.stories.js +++ b/src/stories/PopoverMenu.stories.js @@ -33,6 +33,24 @@ const Template = (args) => { {...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, + }, + ]} /> @@ -44,20 +62,6 @@ const Template = (args) => { const Default = Template.bind({}); Default.args = { popoverMenu: { - menuItems: [ - { - text: 'Bank account', - icon: Expensicons.Bank, - }, - { - text: 'Debit card', - icon: Expensicons.CreditCard, - }, - { - text: 'PayPal.me', - icon: Expensicons.PayPal, - }, - ], anchorPosition: { top: 80, left: 20,