From c8dddd74ffcfac5ae864b0debc4233a818f0f927 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Thu, 30 Jun 2022 21:36:18 -0700 Subject: [PATCH 01/15] Add new wrapper --- src/components/FormAlertWrapper.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/FormAlertWrapper.js diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js new file mode 100644 index 000000000000..8853b5437190 --- /dev/null +++ b/src/components/FormAlertWrapper.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import compose from '../libs/compose'; +import styles from '../styles/styles'; + +const propTypes = { + /** Styles for container element */ + containerStyles: PropTypes.arrayOf(PropTypes.object), +}; + +const defaultProps = { + containerStyles: [], +}; + +const FormAlertWrapper = (props) => { + return ( + + + ); +}; + +FormAlertWrapper.propTypes = propTypes; +FormAlertWrapper.defaultProps = defaultProps; +FormAlertWrapper.displayName = 'FormAlertWrapper'; + +export default compose( +)(FormAlertWrapper); From 16ac2c40918e067a7863206154321a5f2a9ae090 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Thu, 30 Jun 2022 23:25:27 -0700 Subject: [PATCH 02/15] Add isDisabled --- src/components/ButtonWithDropdown.js | 4 ++++ src/components/ButtonWithMenu.js | 1 + 2 files changed, 5 insertions(+) diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js index e4eb23502741..8e02a04350e5 100644 --- a/src/components/ButtonWithDropdown.js +++ b/src/components/ButtonWithDropdown.js @@ -17,6 +17,9 @@ const propTypes = { /** Callback to execute when the dropdown element is pressed */ onDropdownPress: PropTypes.func, + /** Should this button be disabled? */ + isDisabled: PropTypes.bool, + /** Whether we should show a loading state for the main button */ isLoading: PropTypes.bool, }; @@ -24,6 +27,7 @@ const propTypes = { const defaultProps = { onButtonPress: () => {}, onDropdownPress: () => {}, + isDisabled: false, isLoading: false, }; diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js index e9fafa75095e..e8c5e2590d31 100644 --- a/src/components/ButtonWithMenu.js +++ b/src/components/ButtonWithMenu.js @@ -59,6 +59,7 @@ class ButtonWithMenu extends PureComponent { {this.props.options.length > 1 ? ( this.props.onPress(event, this.state.selectedItem.value)} onDropdownPress={() => { From 9b64a6ba61dc51b36fb7935493e19bce56dc2ae9 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Thu, 30 Jun 2022 23:30:21 -0700 Subject: [PATCH 03/15] Add wrapper functionality --- src/components/FormAlertWrapper.js | 81 +++++++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 8853b5437190..4a683f4066f4 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -1,21 +1,96 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import _ from 'underscore'; import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {withNetwork} from './OnyxProvider'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import RenderHTML from './RenderHTML'; +import TextLink from './TextLink'; +import Text from './Text'; +import colors from '../styles/colors'; import compose from '../libs/compose'; +import networkPropTypes from './networkPropTypes'; import styles from '../styles/styles'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { + /** Children to wrap */ + children: PropTypes.node.isRequired, + /** Styles for container element */ containerStyles: PropTypes.arrayOf(PropTypes.object), + + /** Whether to show the alert text */ + isAlertVisible: PropTypes.bool.isRequired, + + /** Whether message is in html format */ + isMessageHtml: PropTypes.bool, + + /** Error message to display above button */ + message: PropTypes.string, + + /** Props to detect online status */ + network: networkPropTypes.isRequired, + + ...withLocalizePropTypes, }; const defaultProps = { containerStyles: [], + isMessageHtml: false, + message: '', }; const FormAlertWrapper = (props) => { + function getAlertPrompt() { + let error = ''; + + if (!_.isEmpty(props.message)) { + if (props.isMessageHtml) { + error = ( + ${props.message}`} /> + ); + } else { + error = ( + {props.message} + ); + } + } else { + error = ( + <> + + {`${props.translate('common.please')} `} + + + {props.translate('common.fixTheErrors')} + + + {` ${props.translate('common.inTheFormBeforeContinuing')}.`} + + + ); + } + + return ( + + {error} + + ); + } + return ( + {props.isAlertVisible && ( + + + {getAlertPrompt()} + + )} + {props.children(props.network.isOffline)} ); }; @@ -25,4 +100,6 @@ FormAlertWrapper.defaultProps = defaultProps; FormAlertWrapper.displayName = 'FormAlertWrapper'; export default compose( + withLocalize, + withNetwork(), )(FormAlertWrapper); From 2b56a4111fd29e94e4e12e07ce98bcf72a7f7ae8 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Thu, 30 Jun 2022 23:39:58 -0700 Subject: [PATCH 04/15] Add offline indicator --- src/components/FormAlertWrapper.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 4a683f4066f4..c10ff159ee8f 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -10,6 +10,7 @@ import TextLink from './TextLink'; import Text from './Text'; import colors from '../styles/colors'; import compose from '../libs/compose'; +import OfflineIndicator from './OfflineIndicator'; import networkPropTypes from './networkPropTypes'; import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -91,6 +92,7 @@ const FormAlertWrapper = (props) => { )} {props.children(props.network.isOffline)} + {props.network.isOffline && ()} ); }; From 6d31ea57c75b6fd624b24955437e2b2fbd7dfa4b Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Thu, 30 Jun 2022 23:40:19 -0700 Subject: [PATCH 05/15] Add it to Payment page for example --- .../settings/Payments/PaymentMethodList.js | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 9f1ddd25ea33..4374aa24f4ff 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -15,6 +15,7 @@ import CONST from '../../../CONST'; import * as Expensicons from '../../../components/Icon/Expensicons'; import bankAccountPropTypes from '../../../components/bankAccountPropTypes'; import * as PaymentUtils from '../../../libs/PaymentUtils'; +import FormAlertWrapper from '../../../components/FormAlertWrapper'; const MENU_ITEM = 'menuItem'; const BUTTON = 'button'; @@ -210,17 +211,23 @@ class PaymentMethodList extends Component { } if (item.type === BUTTON) { return ( -