fixed up some issues with pdf

JediWattson · Jul 31, 2022 · 0366275 · 0366275
1 parent 199a8b1
commit 0366275
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import {Pressable} from 'react-native';
+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';
@@ -37,6 +38,11 @@ class AttachmentCarousel extends React.Component {
     constructor(props) {
         super(props);
 
+        this.canUseTouchScreen = canUseTouchScreen();
+        this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
+        this.handleArrowPress = this.handleArrowPress.bind(this);
+        this.onShowArrow = this.onShowArrow.bind(this);
+
         let page;
         const actionsArr = _.values(props.reportActions);
         const attachments = _.reduce(actionsArr, (attachmentsAccumulator, reportAction) => {
@@ -63,25 +69,21 @@ class AttachmentCarousel extends React.Component {
             attachments,
             sourceURL,
             file,
-            showArrows: canUseTouchScreen(),
+            showArrows: this.canUseTouchScreen,
             isBackDisabled: page === 0,
             isForwardDisabled: page === attachments.length - 1,
         };
-
-        this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
-        this.handleArrowPress = this.handleArrowPress.bind(this);
-        this.onShowArrow = this.onShowArrow.bind(this);
     }
 
     componentDidMount() {
-        if (canUseTouchScreen()) {
+        if (this.canUseTouchScreen) {
             return;
         }
         document.addEventListener('keydown', this.handleArrowPress);
     }
 
     componentWillUnmount() {
-        if (canUseTouchScreen()) {
+        if (this.canUseTouchScreen) {
             return;
         }
         document.removeEventListener('keydown', this.handleArrowPress);
@@ -147,12 +149,12 @@ class AttachmentCarousel extends React.Component {
 
     render() {
         return (
-            <Pressable
+            <View
                 style={[styles.attachmentModalArrowsContainer]}
                 onMouseEnter={() => this.onShowArrow(true)}
                 onMouseLeave={() => this.onShowArrow(false)}
             >
-                {this.state.showArrows && (
+                {(this.state.showArrows || Str.isPDF(this.state.sourceURL)) && (
                     <>
                         <Button
                             medium
@@ -178,12 +180,12 @@ class AttachmentCarousel extends React.Component {
                     isAnimated
                     canSwipeLeft={!this.state.isBackDisabled}
                     canSwipeRight={!this.state.isForwardDisabled}
-                    onPress={() => canUseTouchScreen() && this.onShowArrow(!this.state.showArrows)}
+                    onPress={() => this.canUseTouchScreen && this.onShowArrow(!this.state.showArrows)}
                     onSwipeHorizontal={this.cycleThroughAttachments}
                 >
                     <AttachmentView sourceURL={this.state.sourceURL} file={this.state.file} />
                 </SwipeableView>
-            </Pressable>
+            </View>
 
         );
     }

diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
@@ -55,9 +55,9 @@ class ImageView extends PureComponent {
         this.state.interactionPromise = InteractionManager.runAfterInteractions(() => this.calculateImageSize());
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         // This resizes the images on cycling
-        if (!this.state.containerHeight || this.state.isLoading) {
+        if (!this.state.containerHeight || this.state.isLoading || prevProps.url === this.props.url) {
             return;
         }
         this.calculateImageSize();

diff --git a/src/components/SwipeableView/index.native.js b/src/components/SwipeableView/index.native.js
@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 
+import styles from '../../styles/styles';
 import CONST from '../../CONST';
 
 const propTypes = {
@@ -68,7 +69,7 @@ class SwipeableView extends Component {
                 }
 
                 const deltaSlide = gestureState.dx > 0 ? -1 : 1;
-                if (Math.abs(gestureState.vx) < 1.8 || (deltaSlide === -1 && !this.props.canSwipeLeft) || (deltaSlide === 1 && !this.props.canSwipeRight)) {
+                if (Math.abs(gestureState.vx) < 1.6 || (deltaSlide === -1 && !this.props.canSwipeLeft) || (deltaSlide === 1 && !this.props.canSwipeRight)) {
                     return Animated.spring(this.pan, {useNativeDriver: false, toValue: 0}).start();
                 }
 
@@ -90,9 +91,11 @@ class SwipeableView extends Component {
         if (this.props.isAnimated) {
             return (
                 <Animated.View
-                    style={{
-                        transform: [{translateX: this.pan}],
-                    }}
+                    style={[
+                        styles.w100,
+                        styles.h100,
+                        {transform: [{translateX: this.pan}]},
+                    ]}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this.panResponder.panHandlers}
                 >