From ecc596020d1a04a4939c9c20da3f053018468915 Mon Sep 17 00:00:00 2001 From: Eric Han Date: Thu, 29 Feb 2024 22:50:35 +0800 Subject: [PATCH] fix pointer style for not clickable thumbnail and address PR comments --- ...oraryForRefactorRequestConfirmationList.js | 9 +++--- src/components/PDFThumbnail/index.css | 4 +++ src/components/PDFThumbnail/index.tsx | 29 +++++++++++-------- src/components/PDFThumbnail/types.ts | 5 +++- src/languages/en.ts | 4 +-- src/languages/es.ts | 4 +-- 6 files changed, 34 insertions(+), 21 deletions(-) create mode 100644 src/components/PDFThumbnail/index.css diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 8ccf33c07ef9..3c059372a4a3 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -303,7 +303,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); - const hideRecieptModal = () => { + const navigateBack = () => { Navigation.goBack(ROUTES.MONEY_REQUEST_CREATE_TAB_SCAN.getRoute(iouType, transaction.transactionID, reportID)); }; @@ -868,6 +868,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ // We don't support scaning password protected PDF receipt enabled={!isAttachmentInvalid} onPassword={() => setIsAttachmentInvalid(true)} + isClickable={false} /> ) : ( diff --git a/src/components/PDFThumbnail/index.css b/src/components/PDFThumbnail/index.css new file mode 100644 index 000000000000..91228b2e4929 --- /dev/null +++ b/src/components/PDFThumbnail/index.css @@ -0,0 +1,4 @@ +/* These style overrides are necessary so that the PDF thumbnail shows default pointer when it's not clickable */ +.react-pdf__Thumbnail--notClickable { + cursor: default; +} diff --git a/src/components/PDFThumbnail/index.tsx b/src/components/PDFThumbnail/index.tsx index 3cf0cbda8a84..59397118c274 100644 --- a/src/components/PDFThumbnail/index.tsx +++ b/src/components/PDFThumbnail/index.tsx @@ -1,22 +1,24 @@ -import React, {useMemo} from 'react'; +// @ts-expect-error - We use the same method as PDFView to import the worker +import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker'; +import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import {Document, pdfjs, Thumbnail} from 'react-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useThemeStyles from '@hooks/useThemeStyles'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; +import './index.css'; import type PDFThumbnailProps from './types'; -if (!pdfjs.GlobalWorkerOptions.workerSrc) { - pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/legacy/build/pdf.worker.min.js', - // @ts-expect-error - It is a recommended step for import worker - https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md#import-worker-recommended - import.meta.url, - ).toString(); -} - -function PDFThumbnail({previewSourceURL, style, isAuthTokenRequired = false, enabled = true, onPassword = () => {}}: PDFThumbnailProps) { +function PDFThumbnail({previewSourceURL, style, isAuthTokenRequired = false, enabled = true, onPassword = () => {}, isClickable = true}: PDFThumbnailProps) { const styles = useThemeStyles(); + useEffect(() => { + const workerURL = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'})); + if (pdfjs.GlobalWorkerOptions.workerSrc !== workerURL) { + pdfjs.GlobalWorkerOptions.workerSrc = workerURL; + } + }, []); + const thumbnail = useMemo( () => ( - + ), - [isAuthTokenRequired, previewSourceURL, onPassword], + [isAuthTokenRequired, previewSourceURL, onPassword, isClickable], ); return ( diff --git a/src/components/PDFThumbnail/types.ts b/src/components/PDFThumbnail/types.ts index 8e9be8e96efb..8c46c145887d 100644 --- a/src/components/PDFThumbnail/types.ts +++ b/src/components/PDFThumbnail/types.ts @@ -7,7 +7,7 @@ type PDFThumbnailProps = { /** Any additional styles to apply */ style?: StyleProp; - /** Whether the image requires an authToken */ + /** Whether the PDF thumbnail requires an authToken */ isAuthTokenRequired?: boolean; /** Whether the PDF thumbnail can be loaded */ @@ -15,6 +15,9 @@ type PDFThumbnailProps = { /** Callback to call if PDF is password protected */ onPassword?: () => void; + + /** Whether the PDF thumbnail is clickable */ + isClickable?: boolean; }; export default PDFThumbnailProps; diff --git a/src/languages/en.ts b/src/languages/en.ts index c287418553d4..abb866b409a7 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -338,8 +338,9 @@ export default { attachmentTooSmall: 'Attachment too small', sizeNotMet: 'Attachment size must be greater than 240 bytes.', wrongFileType: 'Invalid file type', - notAllowedExtension: 'This file type is not allowed.', + notAllowedExtension: 'This file type is not allowed', folderNotAllowedMessage: 'Uploading a folder is not allowed. Try a different file.', + protectedPDFNotSupported: 'Password-protected PDF is not supported', }, avatarCropModal: { title: 'Edit photo', @@ -572,7 +573,6 @@ export default { deleteReceipt: 'Delete receipt', deleteConfirmation: 'Are you sure you want to delete this receipt?', addReceipt: 'Add receipt', - protectedPDFNotSupportedError: 'Password-protected PDF is not supported.', }, iou: { amount: 'Amount', diff --git a/src/languages/es.ts b/src/languages/es.ts index a6672c65a8b3..138f96f596a3 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -328,8 +328,9 @@ export default { attachmentTooSmall: 'Archivo adjunto demasiado pequeño', sizeNotMet: 'El archivo adjunto debe ser más grande que 240 bytes.', wrongFileType: 'Tipo de archivo inválido', - notAllowedExtension: 'Este tipo de archivo no es compatible.', + notAllowedExtension: 'Este tipo de archivo no es compatible', folderNotAllowedMessage: 'Subir una carpeta no está permitido. Prueba con otro archivo.', + protectedPDFNotSupported: 'Los PDFs con password no son compatibles', }, avatarCropModal: { title: 'Editar foto', @@ -565,7 +566,6 @@ export default { deleteReceipt: 'Eliminar recibo', deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?', addReceipt: 'Añadir recibo', - protectedPDFNotSupportedError: 'Los PDFs con password no son compatibles.', }, iou: { amount: 'Importe',