Merge pull request #21714 from hoangzinh/df/20867

Fix unable to scroll PDF files in preview
Expensify · Jul 13, 2023 · 1cf6b0f · 1cf6b0f
2 parents 7e78792 + 01d73e0
commit 1cf6b0f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 16 deletions.
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
@@ -88,30 +88,18 @@ function AttachmentView(props) {
     // will appear with a source that is a blob
     if (Str.isPDF(props.source) || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
         const sourceURL = props.isAuthTokenRequired ? addEncryptedAuthTokenToURL(props.source) : props.source;
-        const children = (
+        return (
             <PDFView
                 onPress={props.onPress}
                 isFocused={props.isFocused}
                 sourceURL={sourceURL}
+                fileName={props.file.name}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}
                 onScaleChanged={props.onScaleChanged}
                 onLoadComplete={() => !loadComplete && setLoadComplete(true)}
             />
         );
-        return props.onPress ? (
-            <PressableWithoutFeedback
-                onPress={props.onPress}
-                disabled={loadComplete}
-                style={containerStyles}
-                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                accessibilityLabel={props.file.name || props.translate('attachmentView.unknownFilename')}
-            >
-                {children}
-            </PressableWithoutFeedback>
-        ) : (
-            children
-        );
     }
 
     // For this check we use both source and file.name since temporary file source is a blob

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
@@ -13,6 +13,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import withLocalize from '../withLocalize';
 import Text from '../Text';
 import compose from '../../libs/compose';
+import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 
 class PDFView extends Component {
     constructor(props) {
@@ -105,7 +106,7 @@ class PDFView extends Component {
         this.props.onToggleKeyboard(isKeyboardOpen);
     }
 
-    render() {
+    renderPDFView() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = pdfContainerWidth <= variables.pdfPageMaxWidth ? pdfContainerWidth : variables.pdfPageMaxWidth;
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth : pageWidthOnLargeScreen;
@@ -160,6 +161,21 @@ class PDFView extends Component {
             </View>
         );
     }
+
+    render() {
+        return this.props.onPress ? (
+            <PressableWithoutFeedback
+                onPress={this.props.onPress}
+                style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                accessibilityLabel={this.props.fileName || this.props.translate('attachmentView.unknownFilename')}
+            >
+                {this.renderPDFView()}
+            </PressableWithoutFeedback>
+        ) : (
+            this.renderPDFView()
+        );
+    }
 }
 
 PDFView.propTypes = pdfViewPropTypes.propTypes;

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
@@ -7,11 +7,13 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import Text from '../Text';
 import PDFPasswordForm from './PDFPasswordForm';
+import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import {propTypes as pdfViewPropTypes, defaultProps} from './pdfViewPropTypes';
 import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
 import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState';
 import withLocalize from '../withLocalize';
+import CONST from '../../CONST';
 
 const propTypes = {
     ...pdfViewPropTypes,
@@ -41,6 +43,7 @@ class PDFView extends Component {
             shouldShowLoadingIndicator: true,
             isPasswordInvalid: false,
             failedToLoadPDF: false,
+            successToLoadPDF: false,
             password: '',
         };
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
@@ -118,11 +121,12 @@ class PDFView extends Component {
         this.setState({
             shouldRequestPassword: false,
             shouldShowLoadingIndicator: false,
+            successToLoadPDF: true,
         });
         this.props.onLoadComplete();
     }
 
-    render() {
+    renderPDFView() {
         const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight)];
 
         // If we haven't yet successfully validated the password and loaded the PDF,
@@ -169,6 +173,21 @@ class PDFView extends Component {
             </View>
         );
     }
+
+    render() {
+        return this.props.onPress && !this.state.successToLoadPDF ? (
+            <PressableWithoutFeedback
+                onPress={this.props.onPress}
+                style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                accessibilityLabel={this.props.fileName || this.props.translate('attachmentView.unknownFilename')}
+            >
+                {this.renderPDFView()}
+            </PressableWithoutFeedback>
+        ) : (
+            this.renderPDFView()
+        );
+    }
 }
 
 PDFView.propTypes = propTypes;

diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
@@ -6,6 +6,9 @@ const propTypes = {
     /** URL to full-sized image */
     sourceURL: PropTypes.string,
 
+    /** PDF file name */
+    fileName: PropTypes.string,
+
     /** Additional style props */
     style: stylePropTypes,
 
@@ -29,6 +32,7 @@ const propTypes = {
 
 const defaultProps = {
     sourceURL: '',
+    fileName: '',
     style: {},
     onPress: () => {},
     onToggleKeyboard: () => {},