Merge pull request Expensify#86760 from callstack-internal/feature/pdf-rotation-in-modal

Add rotation for PDF attachments

Author: lakchote

package-lock.json

@@ -153,7 +153,7 @@
     "react-content-loader": "^7.0.0",
     "react-dom": "19.2.0",
     "react-error-boundary": "^4.0.11",
-    "react-fast-pdf": "^1.0.32",
+    "react-fast-pdf": "^1.0.33",
     "react-is": "^18.3.1",
     "react-map-gl": "^7.1.3",
     "react-native": "0.83.1",

package.json

@@ -2,7 +2,7 @@ import React, {memo} from 'react';
 import PDFView from '@components/PDFView';
 import type AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, isUsedAsChatAttachment, onLoadError}: AttachmentViewPdfProps) {
+function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, isUsedAsChatAttachment, onLoadError, rotation}: AttachmentViewPdfProps) {
     return (
         <PDFView
             onPress={onPress}
@@ -14,6 +14,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onTogg
             onLoadComplete={onLoadComplete}
             isUsedAsChatAttachment={isUsedAsChatAttachment}
             onLoadError={onLoadError}
+            rotation={rotation}
         />
     );
 }

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx

@@ -1,3 +1,4 @@
+import type {RotationDegrees} from 'react-fast-pdf';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {AttachmentViewProps} from '..';
 
@@ -16,6 +17,9 @@ type AttachmentViewPdfProps = Pick<AttachmentViewProps, 'file' | 'onPress' | 'is
 
     /** Whether the PDF is used as a chat attachment */
     isUsedAsChatAttachment?: boolean;
+
+    /** Controlled rotation angle for the PDF */
+    rotation?: RotationDegrees;
 };
 
 export default AttachmentViewPdfProps;

src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts

@@ -1,5 +1,6 @@
 import {Str} from 'expensify-common';
 import React, {memo, useEffect, useState} from 'react';
+import type {RotationDegrees} from 'react-fast-pdf';
 import type {GestureResponderEvent, ImageURISource, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -94,6 +95,9 @@ type AttachmentViewProps = Attachment & {
 
     /** Transaction object. When provided, will be used instead of fetching from Onyx. */
     transaction?: OnyxEntry<OnyxTypes.Transaction>;
+
+    /** Controlled rotation angle for the PDF */
+    rotation?: RotationDegrees;
 };
 
 function checkIsFileImage(source: string | number | ImageURISource | ImageURISource[], fileName: string | undefined) {
@@ -131,6 +135,7 @@ function AttachmentView({
     isUploading = false,
     reportID,
     transaction: transactionProp,
+    rotation,
 }: AttachmentViewProps) {
     const icons = useMemoizedLazyExpensifyIcons(['ArrowCircleClockwise', 'Gallery']);
     const [transactionFromOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionID)}`);
@@ -255,6 +260,7 @@ function AttachmentView({
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
                     isUsedAsChatAttachment={isUsedAsChatAttachment}
                     onLoadError={onPDFLoadError}
+                    rotation={rotation}
                 />
             </View>
         );

src/components/Attachments/AttachmentView/index.tsx

@@ -22,7 +22,7 @@ import type {PDFViewProps} from './types';
 const LOADING_THUMBNAIL_HEIGHT = 250;
 const LOADING_THUMBNAIL_WIDTH = 250;
 
-function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, style, isUsedAsChatAttachment, onLoadError}: PDFViewProps) {
+function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, style, isUsedAsChatAttachment, onLoadError, rotation}: PDFViewProps) {
     const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -117,6 +117,7 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, sty
                     }
                     shouldShowErrorComponent={false}
                     onLoadError={onLoadError}
+                    rotation={rotation}
                     renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => (
                         <PDFPasswordForm
                             isFocused={!!isFocused}

src/components/PDFView/index.tsx

@@ -1,3 +1,4 @@
+import type {RotationDegrees} from 'react-fast-pdf';
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 
 type PDFViewProps = {
@@ -30,6 +31,9 @@ type PDFViewProps = {
 
     /** Whether the PDF is used as a chat attachment */
     isUsedAsChatAttachment?: boolean;
+
+    /** Controlled rotation angle for the PDF */
+    rotation?: RotationDegrees;
 };
 
 type PDFViewNativeProps = PDFViewProps & {

src/components/PDFView/types.ts

@@ -70,6 +70,7 @@ function AttachmentModalBaseContent({
     footerActionButtons,
     customAttachmentContent,
     attachmentViewContainerStyles,
+    pdfRotation,
 }: AttachmentModalBaseContentProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -259,6 +260,7 @@ function AttachmentModalBaseContent({
                             transaction={transaction}
                             isUploaded={!isEmptyObject(report)}
                             reportID={reportID ?? (!isEmptyObject(report) ? report.reportID : undefined)}
+                            rotation={pdfRotation}
                         />
                     </AttachmentCarouselPagerActionsContext.Provider>
                 </AttachmentCarouselPagerStateContext.Provider>
@@ -278,6 +280,7 @@ function AttachmentModalBaseContent({
         isWorkspaceAvatar,
         maybeIcon,
         onNavigate,
+        pdfRotation,
         report,
         reportID,
         setAttachmentError,

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx

@@ -1,4 +1,5 @@
 import type {RefObject} from 'react';
+import type {RotationDegrees} from 'react-fast-pdf';
 import type {StyleProp, View, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -142,6 +143,9 @@ type AttachmentModalBaseContentProps = {
 
     /** Extra styles to pass for the attachment view container */
     attachmentViewContainerStyles?: StyleProp<ViewStyle>;
+
+    /** Controlled rotation angle for the PDF */
+    pdfRotation?: RotationDegrees;
 };
 
 export type {

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts

@@ -1,5 +1,6 @@
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import type {RotationDegrees} from 'react-fast-pdf';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
@@ -155,11 +156,13 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
     const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
     const fileName = (isOdometerImage ? odometerFilename : receiptFilename) ?? '';
     const isImage = !!fileName && Str.isImage(fileName);
+    const isPDF = !!fileName && Str.isPDF(fileName);
     const fileType = isOdometerImage ? odometerFileType : (transaction?.receipt?.type ?? CONST.IMAGE_FILE_FORMAT.JPEG);
     const isTrackExpenseActionValue = isTrackExpenseAction(parentReportAction);
     const iouType = useMemo(() => iouTypeParam ?? (isTrackExpenseActionValue ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT), [isTrackExpenseActionValue, iouTypeParam]);
 
     const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
+    const [pdfRotation, setPdfRotation] = useState<RotationDegrees>(0);
     const [isRotating, setIsRotating] = useState(false);
     const [isCropping, setIsCropping] = useState(false);
     const [isCropSaving, setIsCropSaving] = useState(false);
@@ -531,6 +534,14 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         style={styles.transactionReceiptButton}
                     />
                 )}
+                {isPDF && !isNative && (
+                    <Button
+                        icon={expensifyIcons.Rotate}
+                        onPress={() => setPdfRotation((prev) => ((prev + 270) % 360) as RotationDegrees)}
+                        text={translate('common.rotate')}
+                        style={styles.transactionReceiptButton}
+                    />
+                )}
                 {(shouldShowReplaceReceiptButton || isOdometerImage) && (
                     <Button
                         icon={expensifyIcons.Camera}
@@ -569,6 +580,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         shouldShowRotateAndCropReceiptButton,
         shouldShowReplaceReceiptButton,
         isOdometerImage,
+        isPDF,
         styles.flexRow,
         styles.gap2,
         styles.ph5,
@@ -628,6 +640,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             shouldShowNotFoundPage,
             shouldShowCarousel: false,
             shouldShowRotateButton: false,
+            pdfRotation,
             onDownloadAttachment: allowDownload ? undefined : onDownloadAttachment,
             transaction,
             shouldMinimizeMenuButton: false,
@@ -648,6 +661,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             shouldShowNotFoundPage,
             allowDownload,
             onDownloadAttachment,
+            pdfRotation,
             footerActionButtons,
             customAttachmentContent,
             styles.pv5,