diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js index 7af2eb6d1d3e..6981fd451309 100644 --- a/src/components/ConfirmContent.js +++ b/src/components/ConfirmContent.js @@ -5,7 +5,8 @@ import PropTypes from 'prop-types'; import Header from './Header'; import styles from '../styles/styles'; import Button from './Button'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import useLocalize from '../hooks/useLocalize'; +import useNetwork from '../hooks/useNetwork'; import Text from './Text'; const propTypes = { @@ -33,14 +34,15 @@ const propTypes = { /** Whether we should use the danger button color. Use if the action is destructive */ danger: PropTypes.bool, + /** Whether we should disable the confirm button when offline */ + shouldDisableConfirmButtonWhenOffline: PropTypes.bool, + /** Whether we should show the cancel button */ shouldShowCancelButton: PropTypes.bool, /** Styles for view */ // eslint-disable-next-line react/forbid-prop-types contentStyles: PropTypes.arrayOf(PropTypes.object), - - ...withLocalizePropTypes, }; const defaultProps = { @@ -50,11 +52,15 @@ const defaultProps = { success: true, danger: false, onCancel: () => {}, + shouldDisableConfirmButtonWhenOffline: false, shouldShowCancelButton: true, contentStyles: [], }; function ConfirmContent(props) { + const {translate} = useLocalize(); + const {isOffline} = useNetwork(); + return ( @@ -69,13 +75,14 @@ function ConfirmContent(props) { style={[styles.mt4]} onPress={props.onConfirm} pressOnEnter - text={props.confirmText || props.translate('common.yes')} + text={props.confirmText || translate('common.yes')} + isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline} /> {props.shouldShowCancelButton && (