Merge pull request #3487 from rdjuric/modalFix

Fix PDF Attachments not scrollable
Expensify · Jun 15, 2021 · a722ceb · a722ceb
2 parents 11b7815 + c574127
commit a722ceb
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git 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
@@ -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 (
             <>
                 <Modal
-                    type={CONST.MODAL.MODAL_TYPE.CENTERED}
+                    type={modalType}
                     onSubmit={this.submitAndClose}
                     onClose={() => this.setState({isModalOpen: false})}
                     isVisible={this.state.isModalOpen}

diff --git 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
@@ -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,