From 539cf49e5d10ef5eae65dcdf8d283e4ad4760260 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 9 Jun 2021 02:51:35 -0300 Subject: [PATCH 1/4] makes PDF attachment modals scrollable --- src/CONST.js | 1 + src/components/AttachmentModal.js | 7 +++++++ src/styles/getModalStyles.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 39 insertions(+) diff --git a/src/CONST.js b/src/CONST.js index 71a80cf4f0b7..ff97f6ec42ac 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -70,6 +70,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..2faceacd4928 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,6 +98,12 @@ 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 ( <> { 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, From 91f64226dc775d674c80acb5105e90df3af171e7 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 9 Jun 2021 03:29:27 -0300 Subject: [PATCH 2/4] uses the correct modal type --- src/components/AttachmentModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 2faceacd4928..74b883f6764b 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -107,7 +107,7 @@ class AttachmentModal extends PureComponent { return ( <> this.setState({isModalOpen: false})} isVisible={this.state.isModalOpen} From af7730248b991e8db609adf38256e5ca685b9a59 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 9 Jun 2021 13:44:10 -0300 Subject: [PATCH 3/4] correctly passes the propateSwipe prop --- src/components/Modal/BaseModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index f0b5fb6a1a7a..89036d1dd2ae 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -82,6 +82,7 @@ class BaseModal extends PureComponent { setModalVisibility(true); this.props.onModalShow(); }} + propagateSwipe={this.props.propagateSwipe} onModalHide={this.hideModalAndRemoveEventListeners} onSwipeComplete={this.props.onClose} swipeDirection={swipeDirection} From c574127a9e24e87cf2ac20370466df4b49e280b3 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 9 Jun 2021 15:05:08 -0300 Subject: [PATCH 4/4] fix style --- src/components/AttachmentModal.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 74b883f6764b..599456e55442 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -100,10 +100,11 @@ class AttachmentModal extends PureComponent { : [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 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 + : CONST.MODAL.MODAL_TYPE.CENTERED; return ( <>