Merge pull request Expensify#29692 from abdel-h66/fix-blank-space-for…

…-corrupt-files-preview fix: blank space for corrupt files preview
shawky · Oct 23, 2023 · 6c54369 · 6c54369
2 parents c50054a + 09a3b17
commit 6c54369
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 16 deletions.
diff --git a/assets/css/pdf.css b/assets/css/pdf.css
@@ -11,12 +11,7 @@
     border-image: url(../images/shadow.png) 9 9 repeat;
     background-color: rgba(255, 255, 255, 1);
 }
-.react-pdf__message {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
+
 .react-pdf__Page__annotations {
     height: 0;
 }

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -447,6 +447,7 @@ function AttachmentModal(props) {
                                 onToggleKeyboard={updateConfirmButtonVisibility}
                                 isWorkspaceAvatar={props.isWorkspaceAvatar}
                                 fallbackSource={props.fallbackSource}
+                                isUsedInAttachmentModal
                             />
                         )
                     )}

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
@@ -1,19 +1,19 @@
 import React, {memo} from 'react';
-import styles from '../../../../styles/styles';
 import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
 import PDFView from '../../../PDFView';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete}) {
+function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
     return (
         <PDFView
             onPress={onPress}
             isFocused={isFocused}
             sourceURL={encryptedSourceUrl}
             fileName={file.name}
-            style={styles.imageModalPDF}
+            style={style}
             onToggleKeyboard={onToggleKeyboard}
             onScaleChanged={onScaleChanged}
             onLoadComplete={onLoadComplete}
+            errorLabelStyles={errorLabelStyles}
         />
     );
 }

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
@@ -1,10 +1,9 @@
 import React, {memo, useCallback, useContext, useEffect} from 'react';
-import styles from '../../../../styles/styles';
 import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
 import PDFView from '../../../PDFView';
 import AttachmentCarouselPagerContext from '../../AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete}) {
+function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     useEffect(() => {
@@ -41,10 +40,11 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
             isFocused={isFocused}
             sourceURL={encryptedSourceUrl}
             fileName={file.name}
-            style={styles.imageModalPDF}
+            style={style}
             onToggleKeyboard={onToggleKeyboard}
             onScaleChanged={onScaleChanged}
             onLoadComplete={onLoadComplete}
+            errorLabelStyles={errorLabelStyles}
         />
     );
 }

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import * as AttachmentsPropTypes from '../../propTypes';
+import stylePropTypes from '../../../../styles/stylePropTypes';
 
 const attachmentViewPdfPropTypes = {
     /** File object maybe be instance of File or Object */
@@ -8,12 +9,20 @@ const attachmentViewPdfPropTypes = {
     encryptedSourceUrl: PropTypes.string.isRequired,
     onToggleKeyboard: PropTypes.func.isRequired,
     onLoadComplete: PropTypes.func.isRequired,
+
+    /** Additional style props */
+    style: stylePropTypes,
+
+    /** Styles for the error label */
+    errorLabelStyles: stylePropTypes,
 };
 
 const attachmentViewPdfDefaultProps = {
     file: {
         name: '',
     },
+    style: [],
+    errorLabelStyles: [],
 };
 
 export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps};
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
@@ -23,6 +23,7 @@ import DistanceEReceipt from '../../DistanceEReceipt';
 import useNetwork from '../../../hooks/useNetwork';
 import ONYXKEYS from '../../../ONYXKEYS';
 import EReceipt from '../../EReceipt';
+import cursor from '../../../styles/utilities/cursor';
 
 const propTypes = {
     ...attachmentViewPropTypes,
@@ -75,6 +76,7 @@ function AttachmentView({
     isWorkspaceAvatar,
     fallbackSource,
     transaction,
+    isUsedInAttachmentModal,
 }) {
     const [loadComplete, setLoadComplete] = useState(false);
     const [imageError, setImageError] = useState(false);
@@ -132,6 +134,8 @@ function AttachmentView({
                 onScaleChanged={onScaleChanged}
                 onToggleKeyboard={onToggleKeyboard}
                 onLoadComplete={() => !loadComplete && setLoadComplete(true)}
+                errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]}
+                style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
             />
         );
     }

diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js
@@ -22,6 +22,9 @@ const attachmentViewPropTypes = {
 
     /** Handles scale changed event */
     onScaleChanged: PropTypes.func,
+
+    /** Whether this AttachmentView is shown as part of an AttachmentModal */
+    isUsedInAttachmentModal: PropTypes.bool,
 };
 
 const attachmentViewDefaultProps = {
@@ -33,6 +36,7 @@ const attachmentViewDefaultProps = {
     isUsedInCarousel: false,
     onPress: undefined,
     onScaleChanged: () => {},
+    isUsedInAttachmentModal: false,
 };
 
 export {attachmentViewPropTypes, attachmentViewDefaultProps};
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
@@ -15,11 +15,11 @@ import PDFPasswordForm from './PDFPasswordForm';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import withLocalize from '../withLocalize';
-import Text from '../Text';
 import compose from '../../libs/compose';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import Log from '../../libs/Log';
 import ONYXKEYS from '../../ONYXKEYS';
+import Text from '../Text';
 
 /**
  * Each page has a default border. The app should take this size into account
@@ -283,7 +283,7 @@ class PDFView extends Component {
                     }) => this.setState({containerWidth: width, containerHeight: height})}
                 >
                     <Document
-                        error={<Text style={[styles.textLabel, styles.textLarge]}>{this.props.translate('attachmentView.failedToLoadPDF')}</Text>}
+                        error={<Text style={this.props.errorLabelStyles}>{this.props.translate('attachmentView.failedToLoadPDF')}</Text>}
                         loading={<FullScreenLoadingIndicator />}
                         file={this.props.sourceURL}
                         options={{

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
@@ -143,7 +143,7 @@ class PDFView extends Component {
             <View style={containerStyles}>
                 {this.state.failedToLoadPDF && (
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
-                        <Text style={[styles.textLabel, styles.textLarge]}>{this.props.translate('attachmentView.failedToLoadPDF')}</Text>
+                        <Text style={this.props.errorLabelStyles}>{this.props.translate('attachmentView.failedToLoadPDF')}</Text>
                     </View>
                 )}
                 {this.state.shouldAttemptPDFLoad && (

diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
@@ -27,6 +27,9 @@ const propTypes = {
     /** Should focus to the password input  */
     isFocused: PropTypes.bool,
 
+    /** Styles for the error label */
+    errorLabelStyles: stylePropTypes,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -39,6 +42,7 @@ const defaultProps = {
     onScaleChanged: () => {},
     onLoadComplete: () => {},
     isFocused: false,
+    errorLabelStyles: [],
 };
 
 export {propTypes, defaultProps};
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -2161,7 +2161,6 @@ const styles = (theme: ThemeDefault) =>
             // It's being used on Web/Desktop only to vertically center short PDFs,
             // while preventing the overflow of the top of long PDF files.
             ...display.dGrid,
-            backgroundColor: theme.modalBackground,
             width: '100%',
             height: '100%',
             justifyContent: 'center',