adding a native press event for pdfs

Expensify · Aug 13, 2022 · 91a5a05 · 91a5a05
1 parent 191d8d7
commit 91a5a05
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'lodash';
-import Str from 'expensify-common/lib/str';
 import Button from './Button';
 import * as Expensicons from './Icon/Expensicons';
 import styles from '../styles/styles';
@@ -39,6 +38,7 @@ class AttachmentCarousel extends React.Component {
         super(props);
 
         this.canUseTouchScreen = canUseTouchScreen();
+        this.onPressShowArrow = this.onPressShowArrow.bind(this);
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
         this.handleArrowPress = this.handleArrowPress.bind(this);
         this.onShowArrow = this.onShowArrow.bind(this);
@@ -97,6 +97,16 @@ class AttachmentCarousel extends React.Component {
         this.setState({showArrows});
     }
 
+    /**
+     * Helper to provide a check for touchscreens
+     */
+    onPressShowArrow() {
+        if (!this.canUseTouchScreen) {
+            return;
+        }
+        this.onShowArrow(!this.state.showArrows);
+    }
+
     /**
      * Helps to navigate between next/previous attachments
      * @param {Object} attachmentItem
@@ -154,7 +164,7 @@ class AttachmentCarousel extends React.Component {
                 onMouseEnter={() => this.onShowArrow(true)}
                 onMouseLeave={() => this.onShowArrow(false)}
             >
-                {(this.state.showArrows || Str.isPDF(this.state.sourceURL)) && (
+                {this.state.showArrows && (
                     <>
                         <Button
                             medium
@@ -183,7 +193,7 @@ class AttachmentCarousel extends React.Component {
                     onPress={() => this.canUseTouchScreen && this.onShowArrow(!this.state.showArrows)}
                     onSwipeHorizontal={this.cycleThroughAttachments}
                 >
-                    <AttachmentView sourceURL={this.state.sourceURL} file={this.state.file} />
+                    <AttachmentView onPDFPress={this.onPressShowArrow} sourceURL={this.state.sourceURL} file={this.state.file} />
                 </SwipeableView>
             </View>
 

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
@@ -28,6 +28,9 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
+    /** Function for native pdf to handle toggling arrows */
+    onPDFPress: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -37,6 +40,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
+    onPDFPress: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -46,6 +50,7 @@ const AttachmentView = (props) => {
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
         return (
             <PDFView
+                onPress={props.onPDFPress}
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
             />

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
@@ -15,12 +15,16 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
+    /** handles press events like toggling attachment arrows natively */
+    onPress: PropTypes.func,
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     sourceURL: '',
     style: {},
+    onPress: () => {},
 };
 
 /**
@@ -31,7 +35,7 @@ const defaultProps = {
  */
 
 const PDFView = props => (
-    <TouchableWithoutFeedback style={[styles.flex1, props.style]}>
+    <TouchableWithoutFeedback onPress={props.onPress} style={[styles.flex1, props.style]}>
         <PDF
             activityIndicator={<FullScreenLoadingIndicator />}
             source={{uri: props.sourceURL}}