diff --git a/src/CONST.js b/src/CONST.js index 44d5b29519ed..f786194b6168 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -81,6 +81,7 @@ const CONST = { MODAL_TYPE: { CONFIRM: 'confirm', CENTERED: 'centered', + CENTERED_UNSWIPEABLE: 'centered_unswipeable', BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index f42cddd6a57d..599456e55442 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -1,6 +1,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; +import Str from 'expensify-common/lib/str'; import {withOnyx} from 'react-native-onyx'; import CONST from '../CONST'; import Modal from './Modal'; @@ -97,10 +98,17 @@ class AttachmentModal extends PureComponent { const attachmentViewStyles = this.props.isSmallScreenWidth ? [styles.imageModalImageCenterContainer] : [styles.imageModalImageCenterContainer, styles.p5]; + + // If our attachment is a PDF, make the Modal unswipeable + const modalType = (this.state.sourceURL + && (Str.isPDF(this.state.sourceURL) || (this.state.file + && Str.isPDF(this.state.file.name || this.props.translate('attachmentView.unknownFilename'))))) + ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE + : CONST.MODAL.MODAL_TYPE.CENTERED; return ( <> this.setState({isModalOpen: false})} isVisible={this.state.isModalOpen} diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index 56604e48e119..faf5a4ecb65e 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -86,6 +86,7 @@ class BaseModal extends PureComponent { } this.props.onModalShow(); }} + propagateSwipe={this.props.propagateSwipe} onModalHide={this.hideModalAndRemoveEventListeners} onSwipeComplete={this.props.onClose} swipeDirection={swipeDirection} diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js index 8921167c1cb1..f3a03dd92ae7 100644 --- a/src/styles/getModalStyles.js +++ b/src/styles/getModalStyles.js @@ -85,6 +85,37 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => { animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut'; shouldAddTopSafeAreaPadding = true; break; + case CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE: + // A centered modal that cannot be dismissed with a swipe. + modalStyle = { + ...modalStyle, + ...{ + alignItems: 'center', + }, + }; + modalContainerStyle = { + // Shadow Styles + shadowColor: colors.black, + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0.1, + shadowRadius: 5, + + flex: 1, + marginTop: isSmallScreenWidth ? 0 : 20, + marginBottom: isSmallScreenWidth ? 0 : 20, + borderRadius: isSmallScreenWidth ? 0 : 12, + borderWidth: isSmallScreenWidth ? 1 : 0, + overflow: 'hidden', + width: isSmallScreenWidth ? '100%' : windowWidth - 40, + }; + swipeDirection = undefined; + animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn'; + animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut'; + shouldAddTopSafeAreaPadding = true; + break; case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED: modalStyle = { ...modalStyle,