From ffb21f156543aa780d9ab15585952a916aea2c9d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 9 Mar 2024 03:25:09 +0530 Subject: [PATCH 01/42] add POC for fallingback to default attachment view when pdf fails to load --- .../BaseAttachmentViewPdf.js | 4 + .../DefaultAttachmentView.tsx | 59 +++++++++++++ .../AttachmentView/AttachmentViewPdf/index.js | 3 +- .../AttachmentViewPdf/propTypes.js | 8 ++ .../Attachments/AttachmentView/index.js | 86 ++++++++++++------- .../InvertedFlatList/BaseInvertedFlatList.tsx | 2 +- src/components/PDFView/WebPDFDocument.js | 4 +- src/components/PDFView/index.js | 1 + src/components/PDFView/index.native.js | 59 ++++++++++--- src/styles/index.ts | 14 +++ 10 files changed, 192 insertions(+), 48 deletions(-) create mode 100644 src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js index 2f16b63aacc6..3f3b995c02ba 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js @@ -28,6 +28,8 @@ function BaseAttachmentViewPdf({ onLoadComplete, errorLabelStyles, style, + isUsedAsChatAttachment, + onError, }) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled; @@ -89,6 +91,8 @@ function BaseAttachmentViewPdf({ onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} errorLabelStyles={errorLabelStyles} + isUsedAsChatAttachment={isUsedAsChatAttachment} + onError={onError} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx new file mode 100644 index 000000000000..ad102fd5caad --- /dev/null +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import {ActivityIndicator, View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; +import _ from 'underscore'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import Text from '@components/Text'; +import Tooltip from '@components/Tooltip'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; + +type DefaultAttachmentViewProps = { + file: File; + shouldShowLoadingSpinnerIcon: boolean; + shouldShowDownloadIcon: boolean; + containerStyles: StyleProp[]; +}; + +function DefaultAttachmentView({file, shouldShowLoadingSpinnerIcon, shouldShowDownloadIcon, containerStyles}: DefaultAttachmentViewProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + + {file && file.name} + {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( + + + + + + )} + {shouldShowLoadingSpinnerIcon && ( + + + + + + )} + + ); +} + +export default DefaultAttachmentView; diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index d6a402613c34..de740f4fdd1f 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -2,7 +2,7 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, isUsedAsChatAttachment, onError}) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index a34010f0ba8b..bcb0fabde352 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -15,6 +15,12 @@ const attachmentViewPdfPropTypes = { /** Styles for the error label */ errorLabelStyles: stylePropTypes, + + /** Callback when the pdf fails to load */ + onError: PropTypes.func, + + /** Whether the attachment is used as a chat attachment */ + isUsedAsChatAttachment: PropTypes.bool, }; const attachmentViewPdfDefaultProps = { @@ -23,6 +29,8 @@ const attachmentViewPdfDefaultProps = { }, style: [], errorLabelStyles: [], + onError: () => {}, + isUsedAsChatAttachment: false, }; export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index f6a56dc73088..76e546be8930 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -1,16 +1,13 @@ import Str from 'expensify-common/lib/str'; import PropTypes from 'prop-types'; import React, {memo, useEffect, useState} from 'react'; -import {ActivityIndicator, ScrollView, View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; import DistanceEReceipt from '@components/DistanceEReceipt'; import EReceipt from '@components/EReceipt'; import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -25,6 +22,7 @@ import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; +import DefaultAttachmentView from './AttachmentViewPdf/DefaultAttachmentView'; import AttachmentViewVideo from './AttachmentViewVideo'; import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes'; @@ -107,6 +105,7 @@ function AttachmentView({ const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); + const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false); useEffect(() => { if (!isFocused && !(file && isUsedInAttachmentModal)) { @@ -169,6 +168,17 @@ function AttachmentView({ } }; + if (isPdfFailedToLoad) { + return ( + + ); + } + // We need the following View component on android native // So that the event will propagate properly and // the Password protected preview will be shown for pdf attachement we are about to send. @@ -186,6 +196,10 @@ function AttachmentView({ errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} + isUsedAsChatAttachment={!(isUsedInAttachmentModal || isUsedInCarousel)} + onError={() => { + setIsPdfFailedToLoad(true); + }} /> ); @@ -229,36 +243,42 @@ function AttachmentView({ } return ( - - - - + + // + // + // + // - {file && file.name} - {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( - - - - - - )} - {shouldShowLoadingSpinnerIcon && ( - - - - - - )} - + // {file && file.name} + // {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( + // + // + // + // + // + // )} + // {shouldShowLoadingSpinnerIcon && ( + // + // + // + // + // + // )} + // ); } diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList.tsx index e28400505280..d0a4322300c3 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.tsx +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.tsx @@ -4,7 +4,7 @@ import type {FlatListProps} from 'react-native'; import FlatList from '@components/FlatList'; const WINDOW_SIZE = 15; -const AUTOSCROLL_TO_TOP_THRESHOLD = 128; +const AUTOSCROLL_TO_TOP_THRESHOLD = 250; function BaseInvertedFlatList(props: FlatListProps, ref: ForwardedRef) { return ( diff --git a/src/components/PDFView/WebPDFDocument.js b/src/components/PDFView/WebPDFDocument.js index dd9d1e066b19..d2e93e3ba506 100644 --- a/src/components/PDFView/WebPDFDocument.js +++ b/src/components/PDFView/WebPDFDocument.js @@ -48,6 +48,8 @@ const propTypes = { * - `undefined` if password isn't needed to view the PDF file * - `null` if the password is required but hasn't been provided yet */ password: PropTypes.string, + /** Callback invoked when the PDF document fails to load */ + onError: PropTypes.func.isRequired, }; const defaultProps = { @@ -95,7 +97,7 @@ const WebPDFDocument = memo( return ( } - error={{translate('attachmentView.failedToLoadPDF')}} + onLoadError={onError} file={sourceURL} options={{ cMapUrl: 'cmaps/', diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 9706f8e06cc1..2e39594fc210 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -270,6 +270,7 @@ class PDFView extends Component { pageWidth={pageWidth} password={this.state.password} initiatePasswordChallenge={this.initiatePasswordChallenge} + onError={this.props.onError} /> {(this.state.password === PDFViewConstants.REQUIRED_PASSWORD_MISSING || this.state.isCheckingPassword) && ( diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 558f6636a325..6c0f5acd1081 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -2,17 +2,22 @@ import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; +import Text from '@components/Text'; const propTypes = { ...pdfViewPropTypes, @@ -33,7 +38,10 @@ const propTypes = { * is (temporarily) rendered. */ -function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles}) { +const THUMBNAIL_HEIGHT = 250; +const THUMBNAIL_WIDTH = 250; + +function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles, onError, isUsedAsChatAttachment}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -46,6 +54,8 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused const themeStyles = useThemeStyles(); const {isKeyboardShown} = useKeyboardState(); const StyleUtils = useStyleUtils(); + const {isOffline} = useNetwork(); + const theme = useTheme(); useEffect(() => { onToggleKeyboard(isKeyboardShown); @@ -84,6 +94,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setShouldShowLoadingIndicator(false); setShouldRequestPassword(false); setShouldAttemptPDFLoad(false); + onError(error); }; /** @@ -113,9 +124,33 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setSuccessToLoadPDF(true); onLoadComplete(path); }; + const rendeFailedToLoadPDF = () => { + if (!isUsedAsChatAttachment) { + return ( + + {translate('attachmentView.failedToLoadPDF')} + + ); + } + + return ( + + + + + + ); + }; function renderPDFView() { - const pdfStyles = [themeStyles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; + const pdfHeight = isUsedAsChatAttachment ? THUMBNAIL_HEIGHT : windowHeight; + const pdfWeight = isUsedAsChatAttachment ? THUMBNAIL_WIDTH : windowWidth; + const pdfStyles = [StyleUtils.getWidthAndHeightStyle(pdfWeight, pdfHeight), themeStyles.imageModalPDF]; // If we haven't yet successfully validated the password and loaded the PDF, // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm @@ -124,22 +159,18 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused if (shouldRequestPassword) { pdfStyles.push(themeStyles.invisible); } - - const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + const containerStyles = + (shouldRequestPassword && isSmallScreenWidth) || isUsedAsChatAttachment ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)] : []; return ( - {failedToLoadPDF && ( - - {translate('attachmentView.failedToLoadPDF')} - - )} {shouldAttemptPDFLoad && ( } - source={{uri: sourceURL, cache: true, expiration: 864000}} + renderActivityIndicator={() => } + source={{uri: sourceURL}} style={pdfStyles} onError={handleFailureToLoadPDF} password={password} @@ -162,6 +193,10 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused ); } + // // uncomment this code to see failedToLoadPDF + // if (failedToLoadPDF) { + // return rendeFailedToLoadPDF(); + // } return onPress && !successToLoadPDF ? ( borderRadius: variables.buttonBorderRadius, }, + componentBorderRadiusNormal: { + borderRadius: variables.componentBorderRadiusNormal, + }, + bottomTabBarContainer: { flexDirection: 'row', height: variables.bottomTabHeight, @@ -2111,6 +2115,16 @@ const styles = (theme: ThemeColors) => width: 200, }, + chatItemPDFAttachmentLoading: { + backgroundColor: 'transparent', + borderColor: theme.border, + borderWidth: 1, + borderRadius: variables.componentBorderRadiusNormal, + textAlign: 'center', + verticalAlign: 'middle', + opacity: 1, + }, + sidebarVisible: { borderRightWidth: 1, }, From bde48faf072512f5d79d29ce293ae83b44241171 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 9 Mar 2024 03:26:09 +0530 Subject: [PATCH 02/42] adds chnages for attachement view --- .../Attachments/AttachmentView/index.js | 45 +------------------ 1 file changed, 1 insertion(+), 44 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 76e546be8930..f15b235144cb 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -12,7 +12,6 @@ import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContex import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; @@ -100,7 +99,6 @@ function AttachmentView({ optionalVideoDuration, }) { const {updateCurrentlyPlayingURL} = usePlaybackContext(); - const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); @@ -155,7 +153,7 @@ function AttachmentView({ // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob - if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { + if (!isPdfFailedToLoad && ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename'))))) { const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source; const onPDFLoadComplete = (path) => { @@ -168,17 +166,6 @@ function AttachmentView({ } }; - if (isPdfFailedToLoad) { - return ( - - ); - } - // We need the following View component on android native // So that the event will propagate properly and // the Password protected preview will be shown for pdf attachement we are about to send. @@ -249,36 +236,6 @@ function AttachmentView({ shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon} containerStyles={containerStyles} /> - // - // - // - // - - // {file && file.name} - // {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( - // - // - // - // - // - // )} - // {shouldShowLoadingSpinnerIcon && ( - // - // - // - // - // - // )} - // ); } From 757661bf2c41ad8f7bc0abeed6102202890c7679 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 9 Mar 2024 03:32:34 +0530 Subject: [PATCH 03/42] formatting --- src/components/PDFView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 6c0f5acd1081..492a12e1dc66 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -6,6 +6,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -17,7 +18,6 @@ import variables from '@styles/variables'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; -import Text from '@components/Text'; const propTypes = { ...pdfViewPropTypes, From 26c1f13c9fd6b7ede36ecf38c1d17e0ebb69fd7b Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 9 Mar 2024 03:41:08 +0530 Subject: [PATCH 04/42] fixes conflicts --- .../Attachments/AttachmentView/index.js | 435 ++++++++++-------- 1 file changed, 247 insertions(+), 188 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 492a12e1dc66..461548f0d2b1 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -1,219 +1,278 @@ -import React, {useCallback, useEffect, useState} from 'react'; -import {View} from 'react-native'; -import PDF from 'react-native-pdf'; -import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import Str from 'expensify-common/lib/str'; +import PropTypes from 'prop-types'; +import React, {memo, useEffect, useState} from 'react'; +import {ActivityIndicator, View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; +import DistanceEReceipt from '@components/DistanceEReceipt'; +import EReceipt from '@components/EReceipt'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; -import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; -import useKeyboardState from '@hooks/useKeyboardState'; -import useLocalize from '@hooks/useLocalize'; +import Tooltip from '@components/Tooltip'; +import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; +import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths'; +import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; +import compose from '@libs/compose'; +import * as TransactionUtils from '@libs/TransactionUtils'; import variables from '@styles/variables'; -import CONST from '@src/CONST'; -import PDFPasswordForm from './PDFPasswordForm'; -import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; +import ONYXKEYS from '@src/ONYXKEYS'; +import AttachmentViewImage from './AttachmentViewImage'; +import AttachmentViewPdf from './AttachmentViewPdf'; +import AttachmentViewVideo from './AttachmentViewVideo'; +import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes'; const propTypes = { - ...pdfViewPropTypes, + ...attachmentViewPropTypes, + ...withLocalizePropTypes, + + /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */ + source: AttachmentsPropTypes.attachmentSourcePropType.isRequired, + + /** Flag to show/hide download icon */ + shouldShowDownloadIcon: PropTypes.bool, + + /** Flag to show the loading indicator */ + shouldShowLoadingSpinnerIcon: PropTypes.bool, + + /** Notify parent that the UI should be modified to accommodate keyboard */ + onToggleKeyboard: PropTypes.func, + + /** Extra styles to pass to View wrapper */ + // eslint-disable-next-line react/forbid-prop-types + containerStyles: PropTypes.arrayOf(PropTypes.object), + + /** Denotes whether it is a workspace avatar or not */ + isWorkspaceAvatar: PropTypes.bool, + + /** Denotes whether it is an icon (ex: SVG) */ + maybeIcon: PropTypes.bool, + + /** The id of the transaction related to the attachment */ + // eslint-disable-next-line react/no-unused-prop-types + transactionID: PropTypes.string, + + /** The id of the report action related to the attachment */ + reportActionID: PropTypes.string, + + isHovered: PropTypes.bool, + + optionalVideoDuration: PropTypes.number, }; -/** - * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is - * password-protected we render a PDFPasswordForm to request a password - * from the user. - * - * In order to render things nicely during a password challenge we need - * to keep track of additional state. In particular, the - * react-native-pdf/PDF component is both conditionally rendered and hidden - * depending upon the situation. It needs to be rerendered on each password - * submission because it doesn't dynamically handle updates to its - * password property. And we need to hide it during password challenges - * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF - * is (temporarily) rendered. - */ - -const THUMBNAIL_HEIGHT = 250; -const THUMBNAIL_WIDTH = 250; - -function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles, onError, isUsedAsChatAttachment}) { - const [shouldRequestPassword, setShouldRequestPassword] = useState(false); - const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); - const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); - const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); - const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); - const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); - const [password, setPassword] = useState(''); - const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const {translate} = useLocalize(); - const themeStyles = useThemeStyles(); - const {isKeyboardShown} = useKeyboardState(); - const StyleUtils = useStyleUtils(); - const {isOffline} = useNetwork(); +const defaultProps = { + ...attachmentViewDefaultProps, + shouldShowDownloadIcon: false, + shouldShowLoadingSpinnerIcon: false, + onToggleKeyboard: () => {}, + containerStyles: [], + isWorkspaceAvatar: false, + maybeIcon: false, + transactionID: '', + reportActionID: '', + isHovered: false, + optionalVideoDuration: 0, +}; + +function AttachmentView({ + source, + file, + isAuthTokenRequired, + onPress, + shouldShowLoadingSpinnerIcon, + shouldShowDownloadIcon, + containerStyles, + onToggleKeyboard, + translate, + isFocused, + isUsedInCarousel, + isUsedInAttachmentModal, + isWorkspaceAvatar, + maybeIcon, + fallbackSource, + transaction, + reportActionID, + isHovered, + optionalVideoDuration, +}) { + const {updateCurrentlyPlayingURL} = usePlaybackContext(); const theme = useTheme(); + const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const [loadComplete, setLoadComplete] = useState(false); + const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); useEffect(() => { - onToggleKeyboard(isKeyboardShown); - }); - - /** - * Initiate password challenge if message received from react-native-pdf/PDF - * indicates that a password is required or invalid. - * - * For a password challenge the message is "Password required or incorrect password." - * Note that the message doesn't specify whether the password is simply empty or - * invalid. - */ - - const initiatePasswordChallenge = useCallback(() => { - setShouldShowLoadingIndicator(false); - - // Render password form, and don't render PDF and loading indicator. - setShouldRequestPassword(true); - setShouldAttemptPDFLoad(false); - - // The message provided by react-native-pdf doesn't indicate whether this - // is an initial password request or if the password is invalid. So we just assume - // that if a password was already entered then it's an invalid password error. - if (password) { - setIsPasswordInvalid(true); - } - }, [password]); - - const handleFailureToLoadPDF = (error) => { - if (error.message.match(/password/i)) { - initiatePasswordChallenge(); + if (!isFocused && !(file && isUsedInAttachmentModal)) { return; } - setFailedToLoadPDF(true); - setShouldShowLoadingIndicator(false); - setShouldRequestPassword(false); - setShouldAttemptPDFLoad(false); - onError(error); - }; - - /** - * When the password is submitted via PDFPasswordForm, save the password - * in state and attempt to load the PDF. Also show the loading indicator - * since react-native-pdf/PDF will need to reload the PDF. - * - * @param {String} pdfPassword Password submitted via PDFPasswordForm - */ - const attemptPDFLoadWithPassword = (pdfPassword) => { - // Render react-native-pdf/PDF so that it can validate the password. - // Note that at this point in the password challenge, shouldRequestPassword is true. - // Thus react-native-pdf/PDF will be rendered - but not visible. - setPassword(pdfPassword); - setShouldAttemptPDFLoad(true); - setShouldShowLoadingIndicator(true); - }; - /** - * After the PDF is successfully loaded hide PDFPasswordForm and the loading - * indicator. - * @param {Number} numberOfPages - * @param {Number} path - Path to cache location - */ - const finishPDFLoad = (numberOfPages, path) => { - setShouldRequestPassword(false); - setShouldShowLoadingIndicator(false); - setSuccessToLoadPDF(true); - onLoadComplete(path); - }; - const rendeFailedToLoadPDF = () => { - if (!isUsedAsChatAttachment) { - return ( - - {translate('attachmentView.failedToLoadPDF')} - - ); + updateCurrentlyPlayingURL(isVideo ? source : null); + }, [isFocused, isVideo, source, updateCurrentlyPlayingURL, file, isUsedInAttachmentModal]); + + const [imageError, setImageError] = useState(false); + + useNetwork({onReconnect: () => setImageError(false)}); + + // Handles case where source is a component (ex: SVG) or a number + // Number may represent a SVG or an image + if ((maybeIcon && typeof source === 'number') || _.isFunction(source)) { + let iconFillColor = ''; + let additionalStyles = []; + if (isWorkspaceAvatar) { + const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name); + iconFillColor = defaultWorkspaceAvatarColor.fill; + additionalStyles = [defaultWorkspaceAvatarColor]; } return ( - - - - + + ); + } + + if (TransactionUtils.hasEReceipt(transaction)) { + return ( + + + + ); - }; - - function renderPDFView() { - const pdfHeight = isUsedAsChatAttachment ? THUMBNAIL_HEIGHT : windowHeight; - const pdfWeight = isUsedAsChatAttachment ? THUMBNAIL_WIDTH : windowWidth; - const pdfStyles = [StyleUtils.getWidthAndHeightStyle(pdfWeight, pdfHeight), themeStyles.imageModalPDF]; - - // If we haven't yet successfully validated the password and loaded the PDF, - // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm - // is positioned nicely. We're specifically hiding it because we still need to render - // the PDF component so that it can validate the password. - if (shouldRequestPassword) { - pdfStyles.push(themeStyles.invisible); - } - const containerStyles = - (shouldRequestPassword && isSmallScreenWidth) || isUsedAsChatAttachment ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; - const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)] : []; + } + + // Check both source and file.name since PDFs dragged into the text field + // will appear with a source that is a blob + if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { + const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source; + + const onPDFLoadComplete = (path) => { + const id = (transaction && transaction.transactionID) || reportActionID; + if (path && id) { + CachedPDFPaths.add(id, path); + } + if (!loadComplete) { + setLoadComplete(true); + } + }; + // We need the following View component on android native + // So that the event will propagate properly and + // the Password protected preview will be shown for pdf attachement we are about to send. return ( - - {shouldAttemptPDFLoad && ( - } - source={{uri: sourceURL}} - style={pdfStyles} - onError={handleFailureToLoadPDF} - password={password} - onLoadComplete={finishPDFLoad} - onPageSingleTap={onPress} - onScaleChanged={onScaleChanged} - /> - )} - {shouldRequestPassword && ( - - setIsPasswordInvalid(false)} - isPasswordInvalid={isPasswordInvalid} - shouldShowLoadingIndicator={shouldShowLoadingIndicator} - /> - - )} + + ); } - // // uncomment this code to see failedToLoadPDF - // if (failedToLoadPDF) { - // return rendeFailedToLoadPDF(); - // } - - return onPress && !successToLoadPDF ? ( - - {renderPDFView()} - - ) : ( - renderPDFView() + + if (TransactionUtils.isDistanceRequest(transaction)) { + return ; + } + + // For this check we use both source and file.name since temporary file source is a blob + // both PDFs and images will appear as images when pasted into the text field. + // We also check for numeric source since this is how static images (used for preview) are represented in RN. + const isImage = typeof source === 'number' || Str.isImage(source); + if (isImage || (file && Str.isImage(file.name))) { + return ( + { + setImageError(true); + }} + /> + ); + } + + if (isVideo) { + return ( + + ); + } + + return ( + + + + + + {file && file.name} + {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( + + + + + + )} + {shouldShowLoadingSpinnerIcon && ( + + + + + + )} + ); } -PDFView.displayName = 'PDFView'; -PDFView.propTypes = propTypes; -PDFView.defaultProps = defaultProps; +AttachmentView.propTypes = propTypes; +AttachmentView.defaultProps = defaultProps; +AttachmentView.displayName = 'AttachmentView'; -export default PDFView; +export default compose( + memo, + withLocalize, + withOnyx({ + transaction: { + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + }, + }), +)(AttachmentView); From 36b581464aa1c9f6fbbb08dbc70f939b55017756 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 9 Mar 2024 03:57:23 +0530 Subject: [PATCH 05/42] fix conflict after merge --- .../DefaultAttachmentView.tsx | 59 ------------------- .../Attachments/AttachmentView/index.js | 7 ++- src/components/PDFView/index.native.js | 1 + 3 files changed, 7 insertions(+), 60 deletions(-) delete mode 100644 src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx deleted file mode 100644 index ad102fd5caad..000000000000 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/DefaultAttachmentView.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import {ActivityIndicator, View} from 'react-native'; -import type {StyleProp, ViewStyle} from 'react-native'; -import _ from 'underscore'; -import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; -import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; - -type DefaultAttachmentViewProps = { - file: File; - shouldShowLoadingSpinnerIcon: boolean; - shouldShowDownloadIcon: boolean; - containerStyles: StyleProp[]; -}; - -function DefaultAttachmentView({file, shouldShowLoadingSpinnerIcon, shouldShowDownloadIcon, containerStyles}: DefaultAttachmentViewProps) { - const theme = useTheme(); - const styles = useThemeStyles(); - const {translate} = useLocalize(); - - return ( - - - - - - {file && file.name} - {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( - - - - - - )} - {shouldShowLoadingSpinnerIcon && ( - - - - - - )} - - ); -} - -export default DefaultAttachmentView; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 461548f0d2b1..fc11ccfd8fac 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -107,6 +107,7 @@ function AttachmentView({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); + const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); useEffect(() => { @@ -157,7 +158,7 @@ function AttachmentView({ // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob - if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { + if (!isPdfFailedToLoad && ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename'))))) { const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source; const onPDFLoadComplete = (path) => { @@ -187,6 +188,10 @@ function AttachmentView({ errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} + isUsedAsChatAttachment={!(isUsedInAttachmentModal || isUsedInCarousel)} + onError={() => { + setIsPdfFailedToLoad(true); + }} /> ); diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 492a12e1dc66..f7901b035d8b 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -124,6 +124,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setSuccessToLoadPDF(true); onLoadComplete(path); }; + // eslint-disable-next-line no-unused-vars const rendeFailedToLoadPDF = () => { if (!isUsedAsChatAttachment) { return ( From 75a733c60b7f82a3221bb24a10b744da622978db Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 14 Mar 2024 01:32:31 +0530 Subject: [PATCH 06/42] clean up and lint fix --- .../AttachmentViewPdf/BaseAttachmentViewPdf.js | 2 -- .../AttachmentView/AttachmentViewPdf/index.js | 4 ++-- .../AttachmentView/AttachmentViewPdf/propTypes.js | 3 --- src/components/Attachments/AttachmentView/index.js | 6 +----- src/components/PDFView/index.native.js | 11 +++++------ 5 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js index 3f3b995c02ba..289909a66dab 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js @@ -29,7 +29,6 @@ function BaseAttachmentViewPdf({ errorLabelStyles, style, isUsedAsChatAttachment, - onError, }) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled; @@ -92,7 +91,6 @@ function BaseAttachmentViewPdf({ onLoadComplete={onLoadComplete} errorLabelStyles={errorLabelStyles} isUsedAsChatAttachment={isUsedAsChatAttachment} - onError={onError} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index de740f4fdd1f..af665d73a3ba 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -2,7 +2,7 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, isUsedAsChatAttachment, onError}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, isUsedAsChatAttachment}) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index bcb0fabde352..b6ad86124f63 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -16,9 +16,6 @@ const attachmentViewPdfPropTypes = { /** Styles for the error label */ errorLabelStyles: stylePropTypes, - /** Callback when the pdf fails to load */ - onError: PropTypes.func, - /** Whether the attachment is used as a chat attachment */ isUsedAsChatAttachment: PropTypes.bool, }; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index fc11ccfd8fac..6ba3035afc86 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -107,7 +107,6 @@ function AttachmentView({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); - const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); useEffect(() => { @@ -158,7 +157,7 @@ function AttachmentView({ // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob - if (!isPdfFailedToLoad && ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename'))))) { + if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source; const onPDFLoadComplete = (path) => { @@ -189,9 +188,6 @@ function AttachmentView({ style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} isUsedAsChatAttachment={!(isUsedInAttachmentModal || isUsedInCarousel)} - onError={() => { - setIsPdfFailedToLoad(true); - }} /> ); diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index f7901b035d8b..addbcec9b3bf 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -41,7 +41,7 @@ const propTypes = { const THUMBNAIL_HEIGHT = 250; const THUMBNAIL_WIDTH = 250; -function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles, onError, isUsedAsChatAttachment}) { +function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles, isUsedAsChatAttachment}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -94,7 +94,6 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setShouldShowLoadingIndicator(false); setShouldRequestPassword(false); setShouldAttemptPDFLoad(false); - onError(error); }; /** @@ -194,10 +193,10 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused ); } - // // uncomment this code to see failedToLoadPDF - // if (failedToLoadPDF) { - // return rendeFailedToLoadPDF(); - // } + + if (failedToLoadPDF) { + return rendeFailedToLoadPDF(); + } return onPress && !successToLoadPDF ? ( Date: Sat, 9 Mar 2024 03:25:09 +0530 Subject: [PATCH 07/42] add POC for fallingback to default attachment view when pdf fails to load --- .../BaseAttachmentViewPdf.js | 2 + .../AttachmentView/AttachmentViewPdf/index.js | 4 +- .../AttachmentViewPdf/propTypes.js | 3 ++ .../Attachments/AttachmentView/index.js | 16 ++++++++ src/components/PDFView/index.native.js | 38 +------------------ 5 files changed, 25 insertions(+), 38 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js index 289909a66dab..3f3b995c02ba 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js @@ -29,6 +29,7 @@ function BaseAttachmentViewPdf({ errorLabelStyles, style, isUsedAsChatAttachment, + onError, }) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled; @@ -91,6 +92,7 @@ function BaseAttachmentViewPdf({ onLoadComplete={onLoadComplete} errorLabelStyles={errorLabelStyles} isUsedAsChatAttachment={isUsedAsChatAttachment} + onError={onError} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index af665d73a3ba..6377bc6e585a 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -2,7 +2,7 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, isUsedAsChatAttachment}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, onError}) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index b6ad86124f63..bcb0fabde352 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -16,6 +16,9 @@ const attachmentViewPdfPropTypes = { /** Styles for the error label */ errorLabelStyles: stylePropTypes, + /** Callback when the pdf fails to load */ + onError: PropTypes.func, + /** Whether the attachment is used as a chat attachment */ isUsedAsChatAttachment: PropTypes.bool, }; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 6ba3035afc86..863f37733972 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -26,6 +26,7 @@ import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; +import DefaultAttachmentView from './AttachmentViewPdf/DefaultAttachmentView'; import AttachmentViewVideo from './AttachmentViewVideo'; import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes'; @@ -108,6 +109,7 @@ function AttachmentView({ const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); + const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false); useEffect(() => { if (!isFocused && !(file && isUsedInAttachmentModal)) { @@ -170,6 +172,17 @@ function AttachmentView({ } }; + if (isPdfFailedToLoad) { + return ( + + ); + } + // We need the following View component on android native // So that the event will propagate properly and // the Password protected preview will be shown for pdf attachement we are about to send. @@ -188,6 +201,9 @@ function AttachmentView({ style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} isUsedAsChatAttachment={!(isUsedInAttachmentModal || isUsedInCarousel)} + onError={() => { + setIsPdfFailedToLoad(true); + }} /> ); diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index addbcec9b3bf..2f9bb1a40573 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -2,19 +2,13 @@ import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; -import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; -import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; @@ -41,7 +35,7 @@ const propTypes = { const THUMBNAIL_HEIGHT = 250; const THUMBNAIL_WIDTH = 250; -function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles, isUsedAsChatAttachment}) { +function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -54,8 +48,6 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused const themeStyles = useThemeStyles(); const {isKeyboardShown} = useKeyboardState(); const StyleUtils = useStyleUtils(); - const {isOffline} = useNetwork(); - const theme = useTheme(); useEffect(() => { onToggleKeyboard(isKeyboardShown); @@ -94,6 +86,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setShouldShowLoadingIndicator(false); setShouldRequestPassword(false); setShouldAttemptPDFLoad(false); + onError(error); }; /** @@ -123,29 +116,6 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused setSuccessToLoadPDF(true); onLoadComplete(path); }; - // eslint-disable-next-line no-unused-vars - const rendeFailedToLoadPDF = () => { - if (!isUsedAsChatAttachment) { - return ( - - {translate('attachmentView.failedToLoadPDF')} - - ); - } - - return ( - - - - - - ); - }; function renderPDFView() { const pdfHeight = isUsedAsChatAttachment ? THUMBNAIL_HEIGHT : windowHeight; @@ -194,10 +164,6 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused ); } - if (failedToLoadPDF) { - return rendeFailedToLoadPDF(); - } - return onPress && !successToLoadPDF ? ( Date: Sat, 16 Mar 2024 03:17:27 +0530 Subject: [PATCH 08/42] fixes missing prop --- .../Attachments/AttachmentView/AttachmentViewPdf/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index 6377bc6e585a..f151bf84b7a8 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -2,7 +2,7 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, onError}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, onError, isUsedAsChatAttachment}) { return ( ); } From b4ac9a1cb3518627a16a401654a80ef47ef6625d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 16 Mar 2024 03:20:24 +0530 Subject: [PATCH 09/42] remove unused import --- src/components/Attachments/AttachmentView/index.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 863f37733972..56ebad34e963 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -26,7 +26,6 @@ import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; -import DefaultAttachmentView from './AttachmentViewPdf/DefaultAttachmentView'; import AttachmentViewVideo from './AttachmentViewVideo'; import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes'; @@ -159,7 +158,7 @@ function AttachmentView({ // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob - if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { + if (!isPdfFailedToLoad && ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename'))))) { const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source; const onPDFLoadComplete = (path) => { @@ -172,17 +171,6 @@ function AttachmentView({ } }; - if (isPdfFailedToLoad) { - return ( - - ); - } - // We need the following View component on android native // So that the event will propagate properly and // the Password protected preview will be shown for pdf attachement we are about to send. From 03726012f10ad31c29f082ba614a9175d0110b62 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 16 Mar 2024 03:23:31 +0530 Subject: [PATCH 10/42] change variable name --- src/components/PDFView/index.native.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 2f9bb1a40573..c0f36f310346 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -32,8 +32,8 @@ const propTypes = { * is (temporarily) rendered. */ -const THUMBNAIL_HEIGHT = 250; -const THUMBNAIL_WIDTH = 250; +const LOADING_THUMBNAIL_HEIGHT = 250; +const LOADING_THUMBNAIL_WIDTH = 250; function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); @@ -118,8 +118,8 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused }; function renderPDFView() { - const pdfHeight = isUsedAsChatAttachment ? THUMBNAIL_HEIGHT : windowHeight; - const pdfWeight = isUsedAsChatAttachment ? THUMBNAIL_WIDTH : windowWidth; + const pdfHeight = isUsedAsChatAttachment ? LOADING_THUMBNAIL_HEIGHT : windowHeight; + const pdfWeight = isUsedAsChatAttachment ? LOADING_THUMBNAIL_WIDTH : windowWidth; const pdfStyles = [StyleUtils.getWidthAndHeightStyle(pdfWeight, pdfHeight), themeStyles.imageModalPDF]; // If we haven't yet successfully validated the password and loaded the PDF, @@ -131,7 +131,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused } const containerStyles = (shouldRequestPassword && isSmallScreenWidth) || isUsedAsChatAttachment ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; - const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)] : []; + const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] : []; return ( From a20811ae16bab37acca9005f8b481a52f5be6d31 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 16 Mar 2024 03:57:40 +0530 Subject: [PATCH 11/42] fixes lint --- .../AttachmentCarousel/CarouselItem.js | 1 + .../Attachments/AttachmentView/index.js | 2 +- src/components/PDFView/WebPDFDocument.js | 9 +-------- src/components/PDFView/index.native.js | 18 +++++++++--------- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js index b2c9fed64467..e924cb8c13e9 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js @@ -109,6 +109,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) { isHovered={isModalHovered} isFocused={isFocused} optionalVideoDuration={item.duration} + isUsedInCarousel /> diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 56ebad34e963..4a167ba35c5d 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -188,7 +188,7 @@ function AttachmentView({ errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} - isUsedAsChatAttachment={!(isUsedInAttachmentModal || isUsedInCarousel)} + isUsedAsChatAttachment={!isUsedInAttachmentModal && !isUsedInCarousel} onError={() => { setIsPdfFailedToLoad(true); }} diff --git a/src/components/PDFView/WebPDFDocument.js b/src/components/PDFView/WebPDFDocument.js index d2e93e3ba506..3b1b3ba7c765 100644 --- a/src/components/PDFView/WebPDFDocument.js +++ b/src/components/PDFView/WebPDFDocument.js @@ -5,16 +5,11 @@ import {Document} from 'react-pdf'; import {VariableSizeList as List} from 'react-window'; import _ from 'underscore'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; -import Text from '@components/Text'; import stylePropTypes from '@styles/stylePropTypes'; import CONST from '@src/CONST'; import PageRenderer from './WebPDFPageRenderer'; const propTypes = { - /** Index of the PDF page to be displayed passed by VariableSizeList */ - errorLabelStyles: stylePropTypes, - /** Returns translated string for given locale and phrase */ - translate: PropTypes.func.isRequired, /** The source URL from which to load PDF file to be displayed */ sourceURL: PropTypes.string.isRequired, /** Callback invoked when the PDF document is loaded successfully */ @@ -53,7 +48,6 @@ const propTypes = { }; const defaultProps = { - errorLabelStyles: [], numPages: null, listStyle: undefined, password: undefined, @@ -61,8 +55,6 @@ const defaultProps = { const WebPDFDocument = memo( ({ - errorLabelStyles, - translate, sourceURL, onDocumentLoadSuccess, pageViewportsLength, @@ -78,6 +70,7 @@ const WebPDFDocument = memo( listStyle, initiatePasswordChallenge, password, + onError, }) => { const onPassword = useCallback( (callback, reason) => { diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index c0f36f310346..87262a566bc7 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,5 +1,5 @@ -import React, {useCallback, useEffect, useState} from 'react'; -import {View} from 'react-native'; +import React, { useCallback, useEffect, useState } from 'react'; +import { View } from 'react-native'; import PDF from 'react-native-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -11,7 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; -import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; +import { defaultProps, propTypes as pdfViewPropTypes } from './pdfViewPropTypes'; const propTypes = { ...pdfViewPropTypes, @@ -35,7 +35,7 @@ const propTypes = { const LOADING_THUMBNAIL_HEIGHT = 250; const LOADING_THUMBNAIL_WIDTH = 250; -function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment}) { +function PDFView({ onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment }) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -43,10 +43,10 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); const [password, setPassword] = useState(''); - const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const {translate} = useLocalize(); + const { windowWidth, windowHeight, isSmallScreenWidth } = useWindowDimensions(); + const { translate } = useLocalize(); const themeStyles = useThemeStyles(); - const {isKeyboardShown} = useKeyboardState(); + const { isKeyboardShown } = useKeyboardState(); const StyleUtils = useStyleUtils(); useEffect(() => { @@ -130,7 +130,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused pdfStyles.push(themeStyles.invisible); } const containerStyles = - (shouldRequestPassword && isSmallScreenWidth) || isUsedAsChatAttachment ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] : []; return ( @@ -140,7 +140,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused fitPolicy={0} trustAllCerts={false} renderActivityIndicator={() => } - source={{uri: sourceURL}} + source={{ uri: sourceURL, cache: true, expiration: 864000 }} style={pdfStyles} onError={handleFailureToLoadPDF} password={password} From 3ace4d305de71b924bd53a82d9e54f864fc07461 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 16 Mar 2024 04:00:16 +0530 Subject: [PATCH 12/42] use correct conditional and use js docs for props --- .../BaseAnchorForAttachmentsOnly.tsx | 1 + src/components/Attachments/AttachmentView/index.js | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index d389ac4b92f0..3e7189ce0304 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -64,6 +64,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow file={{name: displayName}} shouldShowDownloadIcon={!isOffline} shouldShowLoadingSpinnerIcon={isDownloading} + isUsedAsChatAttachment /> )} diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 4a167ba35c5d..0d25de1bd799 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -62,9 +62,14 @@ const propTypes = { /** The id of the report action related to the attachment */ reportActionID: PropTypes.string, + /** Whether the attachment is currently being hovered over */ isHovered: PropTypes.bool, + /** The duration of the video */ optionalVideoDuration: PropTypes.number, + + /** Whether the attachment is being used as a chat attachment */ + isUsedAsChatAttachment: PropTypes.bool, }; const defaultProps = { @@ -79,6 +84,7 @@ const defaultProps = { reportActionID: '', isHovered: false, optionalVideoDuration: 0, + isUsedAsChatAttachment: false, }; function AttachmentView({ @@ -101,6 +107,7 @@ function AttachmentView({ reportActionID, isHovered, optionalVideoDuration, + isUsedAsChatAttachment, }) { const {updateCurrentlyPlayingURL} = usePlaybackContext(); const theme = useTheme(); @@ -188,7 +195,7 @@ function AttachmentView({ errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} - isUsedAsChatAttachment={!isUsedInAttachmentModal && !isUsedInCarousel} + isUsedAsChatAttachment={isUsedAsChatAttachment} onError={() => { setIsPdfFailedToLoad(true); }} From 830a392f5097a91c9d3689c7f500bb54ec0c28e2 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 16 Mar 2024 04:06:08 +0530 Subject: [PATCH 13/42] prettier diffs --- src/components/PDFView/index.native.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 87262a566bc7..1c3cd02308fb 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,5 +1,5 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { View } from 'react-native'; +import React, {useCallback, useEffect, useState} from 'react'; +import {View} from 'react-native'; import PDF from 'react-native-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -11,7 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; -import { defaultProps, propTypes as pdfViewPropTypes } from './pdfViewPropTypes'; +import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; const propTypes = { ...pdfViewPropTypes, @@ -35,7 +35,7 @@ const propTypes = { const LOADING_THUMBNAIL_HEIGHT = 250; const LOADING_THUMBNAIL_WIDTH = 250; -function PDFView({ onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment }) { +function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -43,10 +43,10 @@ function PDFView({ onToggleKeyboard, onLoadComplete, fileName, onPress, isFocuse const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); const [password, setPassword] = useState(''); - const { windowWidth, windowHeight, isSmallScreenWidth } = useWindowDimensions(); - const { translate } = useLocalize(); + const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); + const {translate} = useLocalize(); const themeStyles = useThemeStyles(); - const { isKeyboardShown } = useKeyboardState(); + const {isKeyboardShown} = useKeyboardState(); const StyleUtils = useStyleUtils(); useEffect(() => { @@ -131,7 +131,9 @@ function PDFView({ onToggleKeyboard, onLoadComplete, fileName, onPress, isFocuse } const containerStyles = isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; - const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] : []; + const loadingIndicatorStyles = isUsedAsChatAttachment + ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] + : []; return ( @@ -140,7 +142,7 @@ function PDFView({ onToggleKeyboard, onLoadComplete, fileName, onPress, isFocuse fitPolicy={0} trustAllCerts={false} renderActivityIndicator={() => } - source={{ uri: sourceURL, cache: true, expiration: 864000 }} + source={{uri: sourceURL, cache: true, expiration: 864000}} style={pdfStyles} onError={handleFailureToLoadPDF} password={password} From 3813026c23140b62b6b566ec587f4d1da9bdc15c Mon Sep 17 00:00:00 2001 From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com> Date: Sat, 16 Mar 2024 04:10:54 +0530 Subject: [PATCH 14/42] Update src/components/Attachments/AttachmentCarousel/CarouselItem.js --- src/components/Attachments/AttachmentCarousel/CarouselItem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js index e924cb8c13e9..b2c9fed64467 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js @@ -109,7 +109,6 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) { isHovered={isModalHovered} isFocused={isFocused} optionalVideoDuration={item.duration} - isUsedInCarousel /> From a8cfafea38386727c62d8cdb4081fae9d0b0d62a Mon Sep 17 00:00:00 2001 From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com> Date: Sat, 16 Mar 2024 04:21:58 +0530 Subject: [PATCH 15/42] remove unused styles --- src/styles/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index ffd05b97473d..2efb29a95ea5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -516,10 +516,6 @@ const styles = (theme: ThemeColors) => borderRadius: variables.buttonBorderRadius, }, - componentBorderRadiusNormal: { - borderRadius: variables.componentBorderRadiusNormal, - }, - bottomTabBarContainer: { flexDirection: 'row', height: variables.bottomTabHeight, From a45f6f0ba20490a03bbc5c74d77097eb30a3cd1b Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 19 Mar 2024 13:37:32 +0530 Subject: [PATCH 16/42] remove error label styles --- .../AttachmentViewPdf/BaseAttachmentViewPdf.js | 2 -- .../Attachments/AttachmentView/AttachmentViewPdf/index.js | 3 +-- .../AttachmentView/AttachmentViewPdf/propTypes.js | 4 ---- src/components/Attachments/AttachmentView/index.js | 1 - src/components/PDFView/index.js | 1 - src/components/PDFView/pdfViewPropTypes.js | 8 +++++--- 6 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js index 3f3b995c02ba..8ae5a483c9fa 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js @@ -26,7 +26,6 @@ function BaseAttachmentViewPdf({ onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, - errorLabelStyles, style, isUsedAsChatAttachment, onError, @@ -90,7 +89,6 @@ function BaseAttachmentViewPdf({ onToggleKeyboard={onToggleKeyboard} onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} - errorLabelStyles={errorLabelStyles} isUsedAsChatAttachment={isUsedAsChatAttachment} onError={onError} /> diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index f151bf84b7a8..1d5ffbccf40c 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -2,7 +2,7 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, onError, isUsedAsChatAttachment}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, onError, isUsedAsChatAttachment}) { return ( diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index bcb0fabde352..75984e6ac031 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -13,9 +13,6 @@ const attachmentViewPdfPropTypes = { /** Additional style props */ style: stylePropTypes, - /** Styles for the error label */ - errorLabelStyles: stylePropTypes, - /** Callback when the pdf fails to load */ onError: PropTypes.func, @@ -28,7 +25,6 @@ const attachmentViewPdfDefaultProps = { name: '', }, style: [], - errorLabelStyles: [], onError: () => {}, isUsedAsChatAttachment: false, }; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 0d25de1bd799..701f6343eb25 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -192,7 +192,6 @@ function AttachmentView({ onPress={onPress} onToggleKeyboard={onToggleKeyboard} onLoadComplete={onPDFLoadComplete} - errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedInCarousel={isUsedInCarousel} isUsedAsChatAttachment={isUsedAsChatAttachment} diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 2e39594fc210..838fd843b089 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -254,7 +254,6 @@ class PDFView extends Component { > {}, onLoadComplete: () => {}, isFocused: false, - errorLabelStyles: [], }; export {propTypes, defaultProps}; From 32f350390c152890ab3caa67a47fc2bae9833e8b Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 29 Mar 2024 02:03:33 +0530 Subject: [PATCH 17/42] fix conflicts --- .../Attachments/AttachmentView/AttachmentViewPdf/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts index f1f141a625db..da48480e8479 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts @@ -13,6 +13,10 @@ type AttachmentViewPdfProps = Pick void; + + onError?: () => void; + + isUsedAsChatAttachment?: boolean; }; export default AttachmentViewPdfProps; From 1c814c51a14085a59de008c08db62912a7fe9476 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 29 Mar 2024 02:09:57 +0530 Subject: [PATCH 18/42] fix lint --- .../Attachments/AttachmentView/AttachmentViewPdf/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index d38ffcf7abab..78265c3a9a6a 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -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, onError, isUsedAsChatAttachment} : AttachmentViewPdfProps) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, onError, isUsedAsChatAttachment}: AttachmentViewPdfProps) { return ( Date: Fri, 29 Mar 2024 03:38:54 +0530 Subject: [PATCH 19/42] fallback to defaultview component --- .../AttachmentViewPdf/index.tsx | 13 +++- .../AttachmentView/AttachmentViewPdf/types.ts | 5 ++ .../DefaultAttachmentView/index.tsx | 58 ++++++++++++++++ .../Attachments/AttachmentView/index.tsx | 68 ++++++------------- src/components/PDFView/index.js | 3 +- 5 files changed, 96 insertions(+), 51 deletions(-) create mode 100644 src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index 78265c3a9a6a..10bcf28e7797 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -2,7 +2,17 @@ import React, {memo} from 'react'; import PDFView from '@components/PDFView'; import type AttachmentViewPdfProps from './types'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, onError, isUsedAsChatAttachment}: AttachmentViewPdfProps) { +function AttachmentViewPdf({ + file, + encryptedSourceUrl, + isFocused, + onPress, + onToggleKeyboard, + onLoadComplete, + style, + renderFallbackAttachmentView, + isUsedAsChatAttachment, +}: AttachmentViewPdfProps) { return ( ); diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts index da48480e8479..ecc6e5016446 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts @@ -14,9 +14,14 @@ type AttachmentViewPdfProps = Pick void; + /** Triggered when the PDF fails to load */ onError?: () => void; + /** Whether the PDF is used as a chat attachment */ isUsedAsChatAttachment?: boolean; + + /** Render a fallback view when the PDF fails to load */ + renderFallbackAttachmentView?: () => JSX.Element; }; export default AttachmentViewPdfProps; diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx new file mode 100644 index 000000000000..7360144bf09c --- /dev/null +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; +import {ActivityIndicator, View} from 'react-native'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import Text from '@components/Text'; +import Tooltip from '@components/Tooltip'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; + +type DefaultAttachmentViewProps = { + fileName: string; + shouldShowDownloadIcon?: boolean; + shouldShowLoadingSpinnerIcon?: boolean; + containerStyles?: StyleProp; +}; + +function DefaultAttachmentView({fileName, shouldShowDownloadIcon, shouldShowLoadingSpinnerIcon, containerStyles}: DefaultAttachmentViewProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + + {fileName} + {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( + + + + + + )} + {shouldShowLoadingSpinnerIcon && ( + + + + + + )} + + ); +} + +export default DefaultAttachmentView; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index e3b609852e5e..1621d8d9509d 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -1,18 +1,15 @@ import Str from 'expensify-common/lib/str'; -import React, {memo, useEffect, useState} from 'react'; -import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; -import {ActivityIndicator, View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; -import type {Attachment, AttachmentSource} from '@components/Attachments/types'; +import React, { memo, useEffect, useState } from 'react'; +import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'; +import { View } from 'react-native'; +import type { OnyxEntry } from 'react-native-onyx'; +import { withOnyx } from 'react-native-onyx'; +import type { Attachment, AttachmentSource } from '@components/Attachments/types'; import DistanceEReceipt from '@components/DistanceEReceipt'; import EReceipt from '@components/EReceipt'; import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; import ScrollView from '@components/ScrollView'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; -import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; +import { usePlaybackContext } from '@components/VideoPlayerContexts/PlaybackContext'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -21,13 +18,14 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; import * as TransactionUtils from '@libs/TransactionUtils'; -import type {ColorValue} from '@styles/utils/types'; +import type { ColorValue } from '@styles/utils/types'; import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Transaction} from '@src/types/onyx'; +import type { Transaction } from '@src/types/onyx'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo'; +import DefaultAttachmentView from './DefaultAttachmentView'; type AttachmentViewOnyxProps = { transaction: OnyxEntry; @@ -95,8 +93,8 @@ function AttachmentView({ duration, isUsedAsChatAttachment, }: AttachmentViewProps) { - const {translate} = useLocalize(); - const {updateCurrentlyPlayingURL} = usePlaybackContext(); + const { translate } = useLocalize(); + const { updateCurrentlyPlayingURL } = usePlaybackContext(); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -113,7 +111,7 @@ function AttachmentView({ const [imageError, setImageError] = useState(false); - useNetwork({onReconnect: () => setImageError(false)}); + useNetwork({ onReconnect: () => setImageError(false) }); // Handles case where source is a component (ex: SVG) or a number // Number may represent a SVG or an image @@ -239,36 +237,12 @@ function AttachmentView({ } return ( - - - - - - {file?.name} - {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( - - - - - - )} - {shouldShowLoadingSpinnerIcon && ( - - - - - - )} - + ); } @@ -277,9 +251,9 @@ AttachmentView.displayName = 'AttachmentView'; export default memo( withOnyx({ transaction: { - key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + key: ({ transactionID }) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, }, })(AttachmentView), ); -export type {AttachmentViewProps}; +export type { AttachmentViewProps }; diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index e69b52b74e95..bd4f9a584378 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -6,7 +6,6 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import Text from '@components/Text'; import withLocalize from '@components/withLocalize'; import withThemeStyles from '@components/withThemeStyles'; import withWindowDimensions from '@components/withWindowDimensions'; @@ -94,7 +93,7 @@ class PDFView extends Component { maxCanvasHeight={this.props.maxCanvasHeight} maxCanvasArea={this.props.maxCanvasArea} LoadingComponent={} - ErrorComponent={{this.props.translate('attachmentView.failedToLoadPDF')}} + ErrorComponent={this.props.renderFallbackAttachmentView} renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( Date: Fri, 29 Mar 2024 04:38:22 +0530 Subject: [PATCH 20/42] fix prop pass --- .../Attachments/AttachmentView/AttachmentViewPdf/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index 10bcf28e7797..3afb02db5068 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -24,6 +24,7 @@ function AttachmentViewPdf({ onToggleKeyboard={onToggleKeyboard} onLoadComplete={onLoadComplete} isUsedAsChatAttachment={isUsedAsChatAttachment} + renderFallbackAttachmentView={renderFallbackAttachmentView} /> ); } From 7d5d22a60c27c70622f097ae0ebd92c0e8dcf03e Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 29 Mar 2024 05:01:20 +0530 Subject: [PATCH 21/42] prettier diffs --- .../Attachments/AttachmentView/index.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 1621d8d9509d..d08f10582c52 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -1,15 +1,15 @@ import Str from 'expensify-common/lib/str'; -import React, { memo, useEffect, useState } from 'react'; -import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'; -import { View } from 'react-native'; -import type { OnyxEntry } from 'react-native-onyx'; -import { withOnyx } from 'react-native-onyx'; -import type { Attachment, AttachmentSource } from '@components/Attachments/types'; +import React, {memo, useEffect, useState} from 'react'; +import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; +import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import type {Attachment, AttachmentSource} from '@components/Attachments/types'; import DistanceEReceipt from '@components/DistanceEReceipt'; import EReceipt from '@components/EReceipt'; import Icon from '@components/Icon'; import ScrollView from '@components/ScrollView'; -import { usePlaybackContext } from '@components/VideoPlayerContexts/PlaybackContext'; +import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -18,10 +18,10 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; import * as TransactionUtils from '@libs/TransactionUtils'; -import type { ColorValue } from '@styles/utils/types'; +import type {ColorValue} from '@styles/utils/types'; import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; -import type { Transaction } from '@src/types/onyx'; +import type {Transaction} from '@src/types/onyx'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo'; @@ -93,8 +93,8 @@ function AttachmentView({ duration, isUsedAsChatAttachment, }: AttachmentViewProps) { - const { translate } = useLocalize(); - const { updateCurrentlyPlayingURL } = usePlaybackContext(); + const {translate} = useLocalize(); + const {updateCurrentlyPlayingURL} = usePlaybackContext(); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -111,7 +111,7 @@ function AttachmentView({ const [imageError, setImageError] = useState(false); - useNetwork({ onReconnect: () => setImageError(false) }); + useNetwork({onReconnect: () => setImageError(false)}); // Handles case where source is a component (ex: SVG) or a number // Number may represent a SVG or an image @@ -251,9 +251,9 @@ AttachmentView.displayName = 'AttachmentView'; export default memo( withOnyx({ transaction: { - key: ({ transactionID }) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, }, })(AttachmentView), ); -export type { AttachmentViewProps }; +export type {AttachmentViewProps}; From 0af56c671213f1b2ade9f045259edcf27db8a7ef Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 30 Mar 2024 01:50:13 +0530 Subject: [PATCH 22/42] remove renderfallbackview prop --- .../AttachmentViewPdf/BaseAttachmentViewPdf.tsx | 4 ++-- .../AttachmentView/AttachmentViewPdf/index.tsx | 14 ++------------ .../AttachmentView/AttachmentViewPdf/types.ts | 9 +++------ .../AttachmentView/DefaultAttachmentView/index.tsx | 4 ++-- .../Attachments/AttachmentView/index.tsx | 6 +++--- src/components/PDFView/index.js | 9 ++++++++- src/components/PDFView/index.native.js | 4 ++-- src/components/PDFView/pdfViewPropTypes.js | 5 ++++- 8 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx index 9971c2d03820..eb22535d1d5f 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx @@ -15,7 +15,7 @@ function BaseAttachmentViewPdf({ onLoadComplete, style, isUsedAsChatAttachment, - onError, + onLoadError, }: AttachmentViewPdfProps) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled; @@ -78,7 +78,7 @@ function BaseAttachmentViewPdf({ onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} isUsedAsChatAttachment={isUsedAsChatAttachment} - onError={onError} + onLoadError={onLoadError} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index 3afb02db5068..c1ded9782a7a 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -2,17 +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, - renderFallbackAttachmentView, - isUsedAsChatAttachment, -}: AttachmentViewPdfProps) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, isUsedAsChatAttachment, containerStyles}: AttachmentViewPdfProps) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts index ecc6e5016446..1c3cd8adfba4 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts @@ -8,20 +8,17 @@ type AttachmentViewPdfProps = Pick; - /** Styles for the error label */ - errorLabelStyles?: StyleProp; - /** Triggered when the PDF's onScaleChanged event is triggered */ onScaleChanged?: (scale: number) => void; /** Triggered when the PDF fails to load */ - onError?: () => void; + onLoadError?: () => void; /** Whether the PDF is used as a chat attachment */ isUsedAsChatAttachment?: boolean; - /** Render a fallback view when the PDF fails to load */ - renderFallbackAttachmentView?: () => JSX.Element; + /** Additional container styles */ + containerStyles?: StyleProp; }; export default AttachmentViewPdfProps; diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 7360144bf09c..23d39ec096b5 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -10,13 +10,13 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; type DefaultAttachmentViewProps = { - fileName: string; + fileName?: string; shouldShowDownloadIcon?: boolean; shouldShowLoadingSpinnerIcon?: boolean; containerStyles?: StyleProp; }; -function DefaultAttachmentView({fileName, shouldShowDownloadIcon, shouldShowLoadingSpinnerIcon, containerStyles}: DefaultAttachmentViewProps) { +function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles}: DefaultAttachmentViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index d08f10582c52..5e9a1b2bf4f6 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -176,9 +176,9 @@ function AttachmentView({ onToggleKeyboard={onToggleKeyboard} onLoadComplete={onPDFLoadComplete} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} - isUsedInCarousel={isUsedInCarousel} isUsedAsChatAttachment={isUsedAsChatAttachment} - onError={() => { + containerStyles={containerStyles} + onLoadError={() => { setIsPdfFailedToLoad(true); }} /> @@ -238,7 +238,7 @@ function AttachmentView({ return ( } - ErrorComponent={this.props.renderFallbackAttachmentView} + ErrorComponent={ + + } renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( Date: Sat, 30 Mar 2024 01:57:32 +0530 Subject: [PATCH 23/42] fix the comment for the prop --- src/components/Attachments/AttachmentView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 5e9a1b2bf4f6..f32265bdc01f 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -68,7 +68,7 @@ type AttachmentViewProps = AttachmentViewOnyxProps & /* Whether it is hovered or not */ isHovered?: boolean; - /** Duration of the video */ + /** Whether the attachment is used as a chat attachment */ isUsedAsChatAttachment?: boolean; }; From 6436ddbef5f2928851b20ba4448489fbb2c74b8b Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 30 Mar 2024 02:32:19 +0530 Subject: [PATCH 24/42] fixes loading for pdf on web --- src/components/FullscreenLoadingIndicator.tsx | 5 +++-- src/components/PDFView/index.js | 9 ++++++++- src/components/PDFView/pdfViewPropTypes.js | 3 +++ 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx index bd3082db5fa4..57c2d7dc955e 100644 --- a/src/components/FullscreenLoadingIndicator.tsx +++ b/src/components/FullscreenLoadingIndicator.tsx @@ -6,13 +6,14 @@ import useThemeStyles from '@hooks/useThemeStyles'; type FullScreenLoadingIndicatorProps = { style?: StyleProp; + isFullScreen?: boolean; }; -function FullScreenLoadingIndicator({style}: FullScreenLoadingIndicatorProps) { +function FullScreenLoadingIndicator({style, isFullScreen = true}: FullScreenLoadingIndicatorProps) { const theme = useTheme(); const styles = useThemeStyles(); return ( - + } + LoadingComponent={} ErrorComponent={ Date: Sat, 30 Mar 2024 02:40:55 +0530 Subject: [PATCH 25/42] fixes proptype warning --- src/components/PDFView/index.js | 30 +++++++++++++++++----- src/components/PDFView/pdfViewPropTypes.js | 3 --- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 64904fc84b3e..d2ee3d448718 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -8,8 +8,8 @@ import DefaultAttachmentView from '@components/Attachments/AttachmentView/Defaul import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import withLocalize from '@components/withLocalize'; +import withStyleUtils, {withStyleUtilsPropTypes} from '@components/withStyleUtils'; import withThemeStyles from '@components/withThemeStyles'; -import withStyleUtils from '@components/withStyleUtils'; import withWindowDimensions from '@components/withWindowDimensions'; import compose from '@libs/compose'; import variables from '@styles/variables'; @@ -17,10 +17,16 @@ import * as CanvasSize from '@userActions/CanvasSize'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import PDFPasswordForm from './PDFPasswordForm'; -import * as pdfViewPropTypes from './pdfViewPropTypes'; +import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes'; const LOADING_THUMBNAIL_HEIGHT = 250; const LOADING_THUMBNAIL_WIDTH = 250; + +const PDFViewPropTypes = { + ...pdfViewPropTypes, + ...withStyleUtilsPropTypes, +}; + class PDFView extends Component { constructor(props) { super(props); @@ -83,8 +89,13 @@ class PDFView extends Component { const styles = this.props.themeStyles; const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]; const loadingIndicatorStyles = this.props.isUsedAsChatAttachment - ? [this.props.themeStyles.chatItemPDFAttachmentLoading, this.props.StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT), styles.justifyContentCenter, styles.alignItemsCenter] - : []; + ? [ + this.props.themeStyles.chatItemPDFAttachmentLoading, + this.props.StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT), + styles.justifyContentCenter, + styles.alignItemsCenter, + ] + : []; return ( } + LoadingComponent={ + + } ErrorComponent={ Date: Sat, 30 Mar 2024 02:47:58 +0530 Subject: [PATCH 26/42] prettier diffs --- src/components/PDFView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index d2ee3d448718..5051e75266cb 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -17,7 +17,7 @@ import * as CanvasSize from '@userActions/CanvasSize'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import PDFPasswordForm from './PDFPasswordForm'; -import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes'; +import {defaultProps as pdfViewDefaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; const LOADING_THUMBNAIL_HEIGHT = 250; const LOADING_THUMBNAIL_WIDTH = 250; From 9bd4c96250b25ac591c8904fa9709510dbcfda50 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 2 Apr 2024 23:32:51 +0530 Subject: [PATCH 27/42] adds onError prop in react-fast-pdf --- package-lock.json | 246 +++++++----------- package.json | 4 +- .../AttachmentViewPdf/index.tsx | 3 +- .../DefaultAttachmentView/index.tsx | 6 + src/components/FullscreenLoadingIndicator.tsx | 5 +- src/components/PDFView/index.js | 48 ++-- 6 files changed, 130 insertions(+), 182 deletions(-) diff --git a/package-lock.json b/package-lock.json index 809b4bd5c4df..7fc027a16e9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "react-content-loader": "^7.0.0", "react-dom": "18.1.0", "react-error-boundary": "^4.0.11", - "react-fast-pdf": "^1.0.6", + "react-fast-pdf": "https://github.com/ishpaul777/react-fast-pdf/tree/fix-blankArea-after-loading-pdf", "react-map-gl": "^7.1.3", "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", @@ -3098,8 +3098,10 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.35", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.35.tgz", - "integrity": "sha512-W0FFIiU/sT+AwIrIOUHiNAHYjODAkEdYsf75tfBbkA6v2byHPxUlbzaJrZEQc0HgbvtAfTf9iQQqGWjNqe4pog==", + "license": "MIT", + "workspaces": [ + "example" + ], "engines": { "node": ">= 18.0.0" }, @@ -6402,8 +6404,6 @@ }, "node_modules/@jest/types": { "version": "29.6.3", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz", - "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==", "dev": true, "license": "MIT", "optional": true, @@ -6795,8 +6795,9 @@ "license": "BSD-3-Clause" }, "node_modules/@mapbox/node-pre-gyp": { - "version": "1.0.10", - "license": "BSD-3-Clause", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz", + "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==", "optional": true, "dependencies": { "detect-libc": "^2.0.0", @@ -6815,7 +6816,8 @@ }, "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir": { "version": "3.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", "optional": true, "dependencies": { "semver": "^6.0.0" @@ -6829,26 +6831,13 @@ }, "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir/node_modules/semver": { "version": "6.3.1", - "license": "ISC", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "optional": true, "bin": { "semver": "bin/semver.js" } }, - "node_modules/@mapbox/node-pre-gyp/node_modules/nopt": { - "version": "5.0.0", - "license": "ISC", - "optional": true, - "dependencies": { - "abbrev": "1" - }, - "bin": { - "nopt": "bin/nopt.js" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/@mapbox/point-geometry": { "version": "0.1.0", "license": "ISC" @@ -8187,8 +8176,7 @@ }, "node_modules/@react-native-community/cli-doctor/node_modules/ip": { "version": "1.1.9", - "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz", - "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==" + "license": "MIT" }, "node_modules/@react-native-community/cli-doctor/node_modules/strip-ansi": { "version": "5.2.0", @@ -8271,8 +8259,7 @@ }, "node_modules/@react-native-community/cli-hermes/node_modules/ip": { "version": "1.1.9", - "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz", - "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==" + "license": "MIT" }, "node_modules/@react-native-community/cli-hermes/node_modules/supports-color": { "version": "7.2.0", @@ -8445,8 +8432,7 @@ }, "node_modules/@react-native-community/cli-server-api/node_modules/@jest/types": { "version": "26.6.2", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", - "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==", + "license": "MIT", "dependencies": { "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", @@ -8460,8 +8446,7 @@ }, "node_modules/@react-native-community/cli-server-api/node_modules/@types/yargs": { "version": "15.0.19", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz", - "integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==", + "license": "MIT", "dependencies": { "@types/yargs-parser": "*" } @@ -8488,8 +8473,7 @@ }, "node_modules/@react-native-community/cli-server-api/node_modules/chalk": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -8517,8 +8501,7 @@ }, "node_modules/@react-native-community/cli-server-api/node_modules/has-flag": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", "engines": { "node": ">=8" } @@ -8542,8 +8525,7 @@ }, "node_modules/@react-native-community/cli-server-api/node_modules/supports-color": { "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", "dependencies": { "has-flag": "^4.0.0" }, @@ -19039,8 +19021,6 @@ }, "node_modules/@types/yargs": { "version": "17.0.32", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz", - "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==", "dev": true, "license": "MIT", "optional": true, @@ -19051,8 +19031,6 @@ }, "node_modules/@types/yargs-parser": { "version": "21.0.3", - "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz", - "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==", "license": "MIT" }, "node_modules/@types/yauzl": { @@ -19991,8 +19969,6 @@ }, "node_modules/@yarnpkg/lockfile": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", - "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", "dev": true, "license": "BSD-2-Clause" }, @@ -20007,7 +19983,8 @@ }, "node_modules/abbrev": { "version": "1.1.1", - "license": "ISC", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "node_modules/abort-controller": { @@ -20934,8 +20911,6 @@ }, "node_modules/async": { "version": "3.2.4", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", - "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==", "dev": true, "license": "MIT" }, @@ -22399,9 +22374,8 @@ }, "node_modules/bs-logger": { "version": "0.2.6", - "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz", - "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==", "dev": true, + "license": "MIT", "dependencies": { "fast-json-stable-stringify": "2.x" }, @@ -22920,8 +22894,9 @@ }, "node_modules/canvas": { "version": "2.11.2", + "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz", + "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==", "hasInstallScript": true, - "license": "MIT", "optional": true, "dependencies": { "@mapbox/node-pre-gyp": "^1.0.0", @@ -23334,8 +23309,7 @@ }, "node_modules/cliui": { "version": "8.0.1", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", - "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "license": "ISC", "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", @@ -23661,9 +23635,8 @@ }, "node_modules/concurrently": { "version": "8.2.2", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz", - "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==", "dev": true, + "license": "MIT", "dependencies": { "chalk": "^4.1.2", "date-fns": "^2.30.0", @@ -23688,9 +23661,8 @@ }, "node_modules/concurrently/node_modules/ansi-styles": { "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, + "license": "MIT", "dependencies": { "color-convert": "^2.0.1" }, @@ -23703,9 +23675,8 @@ }, "node_modules/concurrently/node_modules/chalk": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, + "license": "MIT", "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -23719,9 +23690,8 @@ }, "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, + "license": "MIT", "dependencies": { "has-flag": "^4.0.0" }, @@ -23731,9 +23701,8 @@ }, "node_modules/concurrently/node_modules/color-convert": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "license": "MIT", "dependencies": { "color-name": "~1.1.4" }, @@ -23743,24 +23712,21 @@ }, "node_modules/concurrently/node_modules/color-name": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/concurrently/node_modules/has-flag": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=8" } }, "node_modules/concurrently/node_modules/supports-color": { "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, + "license": "MIT", "dependencies": { "has-flag": "^4.0.0" }, @@ -25335,8 +25301,9 @@ } }, "node_modules/detect-libc": { - "version": "2.0.1", - "license": "Apache-2.0", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", "optional": true, "engines": { "node": ">=8" @@ -25671,8 +25638,6 @@ }, "node_modules/duplexer": { "version": "0.1.2", - "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", - "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", "dev": true, "license": "MIT" }, @@ -27640,8 +27605,7 @@ }, "node_modules/expo-image": { "version": "1.11.0", - "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-1.11.0.tgz", - "integrity": "sha512-CfkSGWIGidxxqzErke16bCS9aefS04qvgjk+T9Nc34LAb3ysBAqCv5hoCnvylHOvi/7jTCC/ouLm5oLLqkDSRQ==", + "license": "MIT", "dependencies": { "@react-native/assets-registry": "~0.73.1" }, @@ -27651,16 +27615,14 @@ }, "node_modules/expo-image-loader": { "version": "4.6.0", - "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.6.0.tgz", - "integrity": "sha512-RHQTDak7/KyhWUxikn2yNzXL7i2cs16cMp6gEAgkHOjVhoCJQoOJ0Ljrt4cKQ3IowxgCuOrAgSUzGkqs7omj8Q==", + "license": "MIT", "peerDependencies": { "expo": "*" } }, "node_modules/expo-image-manipulator": { "version": "11.8.0", - "resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-11.8.0.tgz", - "integrity": "sha512-ZWVrHnYmwJq6h7auk+ropsxcNi+LyZcPFKQc8oy+JA0SaJosfShvkCm7RADWAunHmfPCmjHrhwPGEu/rs7WG/A==", + "license": "MIT", "dependencies": { "expo-image-loader": "~4.6.0" }, @@ -29657,8 +29619,6 @@ }, "node_modules/html-entities": { "version": "2.5.2", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz", - "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==", "funding": [ { "type": "github", @@ -29668,7 +29628,8 @@ "type": "patreon", "url": "https://patreon.com/mdevils" } - ] + ], + "license": "MIT" }, "node_modules/html-escaper": { "version": "2.0.2", @@ -30573,9 +30534,8 @@ }, "node_modules/ip": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", - "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/ip-regex": { "version": "2.1.0", @@ -34355,8 +34315,6 @@ }, "node_modules/klaw-sync": { "version": "6.0.0", - "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz", - "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==", "dev": true, "license": "MIT", "dependencies": { @@ -34676,9 +34634,8 @@ }, "node_modules/lodash.memoize": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/lodash.merge": { "version": "4.6.2", @@ -36710,6 +36667,21 @@ "url": "https://github.com/sponsors/antelle" } }, + "node_modules/nopt": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", + "optional": true, + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/normalize-package-data": { "version": "2.5.0", "license": "BSD-2-Clause", @@ -37624,8 +37596,6 @@ }, "node_modules/patch-package": { "version": "8.0.0", - "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz", - "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==", "dev": true, "license": "MIT", "dependencies": { @@ -37655,8 +37625,6 @@ }, "node_modules/patch-package/node_modules/ansi-styles": { "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "license": "MIT", "dependencies": { @@ -37671,8 +37639,6 @@ }, "node_modules/patch-package/node_modules/chalk": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "license": "MIT", "dependencies": { @@ -37688,8 +37654,6 @@ }, "node_modules/patch-package/node_modules/color-convert": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "license": "MIT", "dependencies": { @@ -37701,15 +37665,11 @@ }, "node_modules/patch-package/node_modules/color-name": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true, "license": "MIT" }, "node_modules/patch-package/node_modules/has-flag": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, "license": "MIT", "engines": { @@ -37718,8 +37678,6 @@ }, "node_modules/patch-package/node_modules/open": { "version": "7.4.2", - "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", - "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", "dev": true, "license": "MIT", "dependencies": { @@ -37735,8 +37693,6 @@ }, "node_modules/patch-package/node_modules/rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", - "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "dev": true, "license": "ISC", "dependencies": { @@ -37748,8 +37704,6 @@ }, "node_modules/patch-package/node_modules/slash": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", - "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", "dev": true, "license": "MIT", "engines": { @@ -37758,8 +37712,6 @@ }, "node_modules/patch-package/node_modules/supports-color": { "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "license": "MIT", "dependencies": { @@ -37771,8 +37723,6 @@ }, "node_modules/patch-package/node_modules/tmp": { "version": "0.0.33", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", - "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", "dev": true, "license": "MIT", "dependencies": { @@ -38956,8 +38906,7 @@ }, "node_modules/react-content-loader": { "version": "7.0.0", - "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-7.0.0.tgz", - "integrity": "sha512-xaBwpO7eiJyEc4ndym+g6wcruV9W2y3DKqbw4U48QFBsv0IeAVZO+aCUb8GptlDLWM8n5zi2HcFSGlj5r+53Tg==", + "license": "MIT", "engines": { "node": ">=10" }, @@ -39051,8 +39000,8 @@ }, "node_modules/react-fast-pdf": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/react-fast-pdf/-/react-fast-pdf-1.0.6.tgz", - "integrity": "sha512-CdAnBSZaLCGLSEuiqWLzzXhV9Wvdf1VRixaXCrb3NFrXyeltahF7PY+u7eU6ynrWZGmNI6g0cMLPv0DQhJEeew==", + "resolved": "git+ssh://git@github.com/ishpaul777/react-fast-pdf.git#0a8a073ad5f0d376c1827a2dacfafd197500bf3b", + "license": "MIT", "dependencies": { "react-pdf": "^7.7.0", "react-window": "^1.8.10" @@ -39109,14 +39058,6 @@ } } }, - "node_modules/react-fast-pdf/node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/react-freeze": { "version": "1.0.3", "license": "MIT", @@ -39407,6 +39348,7 @@ "node_modules/react-native-image-size": { "version": "1.1.3", "resolved": "git+ssh://git@github.com/Expensify/react-native-image-size.git#bf3ad41a61c4f6f80ed4d497599ef5247a2dd002", + "integrity": "sha512-uIZLaqqjSivO+iBGx3VpZRSn/cYy18ct6S1H35gK8n74eJFb/Ds6qUJ+jGw5PUt0KEzw+aXLgPq6gHDXT5Q29A==", "license": "MIT" }, "node_modules/react-native-key-command": { @@ -39836,8 +39778,7 @@ }, "node_modules/react-native/node_modules/@jest/types": { "version": "26.6.2", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", - "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==", + "license": "MIT", "dependencies": { "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", @@ -39851,8 +39792,7 @@ }, "node_modules/react-native/node_modules/@types/yargs": { "version": "15.0.19", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz", - "integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==", + "license": "MIT", "dependencies": { "@types/yargs-parser": "*" } @@ -39879,8 +39819,7 @@ }, "node_modules/react-native/node_modules/chalk": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -39920,8 +39859,7 @@ }, "node_modules/react-native/node_modules/has-flag": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", "engines": { "node": ">=8" } @@ -39976,8 +39914,7 @@ }, "node_modules/react-native/node_modules/supports-color": { "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", "dependencies": { "has-flag": "^4.0.0" }, @@ -40593,8 +40530,7 @@ }, "node_modules/react-window": { "version": "1.8.10", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", - "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.0.0", "memoize-one": ">=3.1.1 <6" @@ -41551,9 +41487,8 @@ }, "node_modules/rxjs": { "version": "7.8.1", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", - "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", "dev": true, + "license": "Apache-2.0", "dependencies": { "tslib": "^2.1.0" } @@ -42048,6 +41983,8 @@ }, "node_modules/simple-concat": { "version": "1.0.1", + "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", + "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==", "funding": [ { "type": "github", @@ -42062,12 +41999,12 @@ "url": "https://feross.org/support" } ], - "license": "MIT", "optional": true }, "node_modules/simple-get": { "version": "3.1.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz", + "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==", "optional": true, "dependencies": { "decompress-response": "^4.2.0", @@ -42077,7 +42014,8 @@ }, "node_modules/simple-get/node_modules/decompress-response": { "version": "4.2.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", + "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", "optional": true, "dependencies": { "mimic-response": "^2.0.0" @@ -42088,7 +42026,8 @@ }, "node_modules/simple-get/node_modules/mimic-response": { "version": "2.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", + "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", "optional": true, "engines": { "node": ">=8" @@ -42537,8 +42476,6 @@ }, "node_modules/spawn-command": { "version": "0.0.2", - "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz", - "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", "dev": true }, "node_modules/spdx-correct": { @@ -44234,9 +44171,8 @@ }, "node_modules/ts-jest": { "version": "29.1.2", - "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.2.tgz", - "integrity": "sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==", "dev": true, + "license": "MIT", "dependencies": { "bs-logger": "0.x", "fast-json-stable-stringify": "2.x", @@ -44277,9 +44213,8 @@ }, "node_modules/ts-jest/node_modules/yargs-parser": { "version": "21.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", - "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true, + "license": "ISC", "engines": { "node": ">=12" } @@ -45340,6 +45275,14 @@ "version": "0.1.1", "license": "MIT" }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "license": "MIT", @@ -46625,8 +46568,7 @@ }, "node_modules/yargs": { "version": "17.7.2", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", - "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "license": "MIT", "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", @@ -46650,16 +46592,14 @@ }, "node_modules/yargs/node_modules/y18n": { "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "license": "ISC", "engines": { "node": ">=10" } }, "node_modules/yargs/node_modules/yargs-parser": { "version": "21.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", - "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "license": "ISC", "engines": { "node": ">=12" } diff --git a/package.json b/package.json index 9f1fbc894e1f..3b770debe4f0 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "react-content-loader": "^7.0.0", "react-dom": "18.1.0", "react-error-boundary": "^4.0.11", - "react-fast-pdf": "^1.0.6", + "react-fast-pdf": "https://github.com/ishpaul777/react-fast-pdf/tree/fix-blankArea-after-loading-pdf", "react-map-gl": "^7.1.3", "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", @@ -248,8 +248,8 @@ "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^10.1.0", "concurrently": "^8.2.2", + "copy-webpack-plugin": "^10.1.0", "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index c1ded9782a7a..500d14082be7 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -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, containerStyles}: AttachmentViewPdfProps) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, style, isUsedAsChatAttachment, containerStyles, onLoadError}: AttachmentViewPdfProps) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 23d39ec096b5..6130aeed866c 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -10,9 +10,13 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; type DefaultAttachmentViewProps = { + /** The name of the file */ fileName?: string; + /** Should show the download icon */ shouldShowDownloadIcon?: boolean; + /** Should show the loading spinner icon */ shouldShowLoadingSpinnerIcon?: boolean; + /** Additional styles for the container */ containerStyles?: StyleProp; }; @@ -55,4 +59,6 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa ); } +DefaultAttachmentView.displayName = 'DefaultAttachmentView'; + export default DefaultAttachmentView; diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx index 57c2d7dc955e..bd3082db5fa4 100644 --- a/src/components/FullscreenLoadingIndicator.tsx +++ b/src/components/FullscreenLoadingIndicator.tsx @@ -6,14 +6,13 @@ import useThemeStyles from '@hooks/useThemeStyles'; type FullScreenLoadingIndicatorProps = { style?: StyleProp; - isFullScreen?: boolean; }; -function FullScreenLoadingIndicator({style, isFullScreen = true}: FullScreenLoadingIndicatorProps) { +function FullScreenLoadingIndicator({style}: FullScreenLoadingIndicatorProps) { const theme = useTheme(); const styles = useThemeStyles(); return ( - + + + + ); + } + + return ; + } + renderPDFView() { const styles = this.props.themeStyles; const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]; - const loadingIndicatorStyles = this.props.isUsedAsChatAttachment - ? [ - this.props.themeStyles.chatItemPDFAttachmentLoading, - this.props.StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT), - styles.justifyContentCenter, - styles.alignItemsCenter, - ] - : []; return ( - } - ErrorComponent={ - - } + LoadingComponent={this.renderLoadingIndicator()} + shouldShowErrorComponent={false} + onLoadError={this.props.onLoadError} renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( Date: Sun, 7 Apr 2024 01:51:43 +0530 Subject: [PATCH 28/42] resolve conflicts --- src/components/PDFView/index.tsx | 48 +++++++++++++++++++++++--------- src/components/PDFView/types.ts | 9 ++++-- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index ff28a8f88849..df6543290b96 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -1,30 +1,36 @@ import 'core-js/features/array/at'; // eslint-disable-next-line no-restricted-imports -import type {CSSProperties} from 'react'; -import React, {memo, useCallback, useEffect, useState} from 'react'; -import {PDFPreviewer} from 'react-fast-pdf'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import type { CSSProperties } from 'react'; +import React, { memo, useCallback, useEffect, useState } from 'react'; +import { PDFPreviewer } from 'react-fast-pdf'; +import { ActivityIndicator, View } from 'react-native'; +import { withOnyx } from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useStyleUtils from '@hooks/useStyleUtils'; import useWindowDimensions from '@hooks/useWindowDimensions'; import variables from '@styles/variables'; import * as CanvasSize from '@userActions/CanvasSize'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import PDFPasswordForm from './PDFPasswordForm'; -import type {PDFViewOnyxProps, PDFViewProps} from './types'; +import type { PDFViewOnyxProps, PDFViewProps } from './types'; -function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, errorLabelStyles, maxCanvasArea, maxCanvasHeight, maxCanvasWidth, style}: PDFViewProps) { +const LOADING_THUMBNAIL_HEIGHT = 250; +const LOADING_THUMBNAIL_WIDTH = 250; + +function PDFView({ onToggleKeyboard, fileName, onPress, isFocused, sourceURL, maxCanvasArea, maxCanvasHeight, maxCanvasWidth, style, isUsedAsChatAttachment, onLoadError }: PDFViewProps) { const [isKeyboardOpen, setIsKeyboardOpen] = useState(false); const styles = useThemeStyles(); - const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); + const StyleUtils = useStyleUtils(); + const theme = useTheme(); + const { windowHeight, isSmallScreenWidth } = useWindowDimensions(); const prevWindowHeight = usePrevious(windowHeight); - const {translate} = useLocalize(); + const { translate } = useLocalize(); /** * On small screens notify parent that the keyboard has opened or closed. @@ -79,6 +85,21 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, err } }, [isKeyboardOpen, prevWindowHeight, toggleKeyboardOnSmallScreens, windowHeight]); + const renderLoadingIndicator = () => { + if (isUsedAsChatAttachment) { + return ( + + + + ); + } + + return ; + } + const renderPDFView = () => { const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]; @@ -95,9 +116,10 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, err maxCanvasWidth={maxCanvasWidth} maxCanvasHeight={maxCanvasHeight} maxCanvasArea={maxCanvasArea} - LoadingComponent={} - ErrorComponent={{translate('attachmentView.failedToLoadPDF')}} - renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( + LoadingComponent={renderLoadingIndicator()} + shouldShowErrorComponent={false} + onLoadError={onLoadError} + renderPasswordForm={({ isPasswordInvalid, onSubmit, onPasswordChange }) => ( ; + /** Callback to call when the PDF fails to load */ + onLoadError?: () => void; + + /** Whether the PDF is used as a chat attachment */ + isUsedAsChatAttachment?: boolean; }; type PDFViewOnyxProps = { From 15eea966597d1465650cfe61dd3dec2face0d9f5 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 01:52:50 +0530 Subject: [PATCH 29/42] code formatting --- .../AttachmentViewPdf/index.tsx | 13 ++++++- src/components/PDFView/index.native.tsx | 5 +-- src/components/PDFView/index.tsx | 35 +++++++++++-------- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index 9984779557eb..ba108092ab8f 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -2,7 +2,18 @@ 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, containerStyles, onLoadError}: AttachmentViewPdfProps) { +function AttachmentViewPdf({ + file, + encryptedSourceUrl, + isFocused, + onPress, + onToggleKeyboard, + onLoadComplete, + style, + isUsedAsChatAttachment, + containerStyles, + onLoadError, +}: AttachmentViewPdfProps) { return ( { if (isUsedAsChatAttachment) { return ( - + ; - } + }; const renderPDFView = () => { const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]; @@ -119,7 +126,7 @@ function PDFView({ onToggleKeyboard, fileName, onPress, isFocused, sourceURL, ma LoadingComponent={renderLoadingIndicator()} shouldShowErrorComponent={false} onLoadError={onLoadError} - renderPasswordForm={({ isPasswordInvalid, onSubmit, onPasswordChange }) => ( + renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( Date: Sun, 7 Apr 2024 02:16:30 +0530 Subject: [PATCH 30/42] remove unnecessary change --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 79f0a58cc10d..5e00815f1e3e 100644 --- a/package.json +++ b/package.json @@ -248,8 +248,8 @@ "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^4.0.0", - "concurrently": "^8.2.2", "copy-webpack-plugin": "^10.1.0", + "concurrently": "^8.2.2", "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", From 69129794b08fe9d66175d41bb0c35d9083965562 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 02:21:23 +0530 Subject: [PATCH 31/42] fix type checks --- .../Attachments/AttachmentView/AttachmentViewPdf/index.tsx | 2 -- .../Attachments/AttachmentView/AttachmentViewPdf/types.ts | 3 --- src/components/Attachments/AttachmentView/index.tsx | 1 - 3 files changed, 6 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index ba108092ab8f..3cae1ee45f1b 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -11,7 +11,6 @@ function AttachmentViewPdf({ onLoadComplete, style, isUsedAsChatAttachment, - containerStyles, onLoadError, }: AttachmentViewPdfProps) { return ( @@ -24,7 +23,6 @@ function AttachmentViewPdf({ onToggleKeyboard={onToggleKeyboard} onLoadComplete={onLoadComplete} isUsedAsChatAttachment={isUsedAsChatAttachment} - containerStyles={containerStyles} onLoadError={onLoadError} /> ); diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts index 1c3cd8adfba4..c20593449d58 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts @@ -16,9 +16,6 @@ type AttachmentViewPdfProps = Pick; }; export default AttachmentViewPdfProps; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index f32265bdc01f..bc8f7476b4d5 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -177,7 +177,6 @@ function AttachmentView({ onLoadComplete={onPDFLoadComplete} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedAsChatAttachment={isUsedAsChatAttachment} - containerStyles={containerStyles} onLoadError={() => { setIsPdfFailedToLoad(true); }} From 917095c5f6f29feb6c5b9d1bc29d56acd2cc9c06 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 02:23:07 +0530 Subject: [PATCH 32/42] lint code --- src/components/Attachments/AttachmentView/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index bc8f7476b4d5..1743a1904ad3 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -163,6 +163,10 @@ function AttachmentView({ } }; + const onPDFLoadError = () => { + setIsPdfFailedToLoad(true); + } + // We need the following View component on android native // So that the event will propagate properly and // the Password protected preview will be shown for pdf attachement we are about to send. @@ -177,9 +181,7 @@ function AttachmentView({ onLoadComplete={onPDFLoadComplete} style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} isUsedAsChatAttachment={isUsedAsChatAttachment} - onLoadError={() => { - setIsPdfFailedToLoad(true); - }} + onLoadError={onPDFLoadError} /> ); From c9681471de4445131308598d7c644f8ffd9c7b1d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 02:24:22 +0530 Subject: [PATCH 33/42] prettier diffs --- .../AttachmentView/AttachmentViewPdf/index.tsx | 12 +----------- src/components/Attachments/AttachmentView/index.tsx | 2 +- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx index 3cae1ee45f1b..e8f6568f98c0 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx @@ -2,17 +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}: AttachmentViewPdfProps) { return ( { setIsPdfFailedToLoad(true); - } + }; // We need the following View component on android native // So that the event will propagate properly and From cadf1f1dee2058299d5ed4e792b75ebb7fbaac6d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 02:32:19 +0530 Subject: [PATCH 34/42] resolve lint failure --- src/components/PDFView/index.native.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.tsx b/src/components/PDFView/index.native.tsx index 0fb063f57e8b..db76c005b37a 100644 --- a/src/components/PDFView/index.native.tsx +++ b/src/components/PDFView/index.native.tsx @@ -127,9 +127,9 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused if (shouldRequestPassword) { pdfStyles.push(themeStyles.invisible); } - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const containerStyles = - isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + (isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth)) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] : []; From 54eb29517e53a484d21a7a9a5a37d2bfdf91f05c Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sun, 7 Apr 2024 02:39:32 +0530 Subject: [PATCH 35/42] prettier diffs --- src/components/PDFView/index.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.tsx b/src/components/PDFView/index.native.tsx index db76c005b37a..7d523ef13805 100644 --- a/src/components/PDFView/index.native.tsx +++ b/src/components/PDFView/index.native.tsx @@ -129,7 +129,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused } const containerStyles = // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - (isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth)) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; const loadingIndicatorStyles = isUsedAsChatAttachment ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)] : []; From 9c1527be8952d96dbc1d758b08717b346833eb8d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 11 Apr 2024 22:34:06 +0530 Subject: [PATCH 36/42] remove unnecessary styles --- src/components/PDFView/index.tsx | 2 -- src/styles/index.ts | 5 ++--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index 2725e3c2a6aa..e63a4b5ac4c1 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -92,8 +92,6 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max style={[ styles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT), - styles.alignItemsCenter, - styles.justifyContentCenter, ]} > borderColor: theme.border, borderWidth: 1, borderRadius: variables.componentBorderRadiusNormal, - textAlign: 'center', - verticalAlign: 'middle', - opacity: 1, + ...flex.alignItemsCenter, + ...flex.justifyContentCenter, }, sidebarVisible: { From 838e465576452695cf5fac5033fe19a4f1dbb40f Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 3 May 2024 16:57:47 +0530 Subject: [PATCH 37/42] prettier diffs --- src/components/PDFView/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index e63a4b5ac4c1..52f883113234 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -88,12 +88,7 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max const renderLoadingIndicator = () => { if (isUsedAsChatAttachment) { return ( - + Date: Tue, 14 May 2024 03:07:10 +0530 Subject: [PATCH 38/42] fixes preview not centered in carousel --- src/components/Attachments/AttachmentCarousel/CarouselItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx index ec2687d634bb..2ec1883fd7de 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx @@ -71,7 +71,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr return ( - + Date: Tue, 14 May 2024 03:25:43 +0530 Subject: [PATCH 39/42] fix loading component --- src/components/PDFView/index.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index 52f883113234..bb30817fb9ef 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -85,21 +85,6 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max } }, [isKeyboardOpen, prevWindowHeight, toggleKeyboardOnSmallScreens, windowHeight]); - const renderLoadingIndicator = () => { - if (isUsedAsChatAttachment) { - return ( - - - - ); - } - - return ; - }; - const renderPDFView = () => { const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]; @@ -116,7 +101,7 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max maxCanvasWidth={maxCanvasWidth} maxCanvasHeight={maxCanvasHeight} maxCanvasArea={maxCanvasArea} - LoadingComponent={renderLoadingIndicator()} + LoadingComponent={} shouldShowErrorComponent={false} onLoadError={onLoadError} renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( From c134239c57c20a2f90d66322aaab115b729484f5 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 14 May 2024 03:40:00 +0530 Subject: [PATCH 40/42] prettier --- src/components/PDFView/index.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx index bb30817fb9ef..76daba9ce0f6 100644 --- a/src/components/PDFView/index.tsx +++ b/src/components/PDFView/index.tsx @@ -3,14 +3,13 @@ import 'core-js/features/array/at'; import type {CSSProperties} from 'react'; import React, {memo, useCallback, useEffect, useState} from 'react'; import {PDFPreviewer} from 'react-fast-pdf'; -import {ActivityIndicator, View} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import variables from '@styles/variables'; @@ -27,7 +26,6 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max const [isKeyboardOpen, setIsKeyboardOpen] = useState(false); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const theme = useTheme(); const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); const prevWindowHeight = usePrevious(windowHeight); const {translate} = useLocalize(); @@ -101,7 +99,17 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max maxCanvasWidth={maxCanvasWidth} maxCanvasHeight={maxCanvasHeight} maxCanvasArea={maxCanvasArea} - LoadingComponent={} + LoadingComponent={ + + } shouldShowErrorComponent={false} onLoadError={onLoadError} renderPasswordForm={({isPasswordInvalid, onSubmit, onPasswordChange}) => ( From e1d69f64b0251b15c58e320cf99ab275f13aebcf Mon Sep 17 00:00:00 2001 From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com> Date: Thu, 16 May 2024 01:51:44 +0530 Subject: [PATCH 41/42] Add-empty-newlines Co-authored-by: Yuwen Memon --- .../Attachments/AttachmentView/DefaultAttachmentView/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 6130aeed866c..06d53027b97a 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -12,10 +12,13 @@ import useThemeStyles from '@hooks/useThemeStyles'; type DefaultAttachmentViewProps = { /** The name of the file */ fileName?: string; + /** Should show the download icon */ shouldShowDownloadIcon?: boolean; + /** Should show the loading spinner icon */ shouldShowLoadingSpinnerIcon?: boolean; + /** Additional styles for the container */ containerStyles?: StyleProp; }; From 569b7c121e14e74fb197cbbcbf283f2fa6f39bb7 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 16 May 2024 01:58:06 +0530 Subject: [PATCH 42/42] adds requested changes --- .../AttachmentView/DefaultAttachmentView/index.tsx | 2 +- src/components/Attachments/AttachmentView/index.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 06d53027b97a..e06ea3064150 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -12,7 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; type DefaultAttachmentViewProps = { /** The name of the file */ fileName?: string; - + /** Should show the download icon */ shouldShowDownloadIcon?: boolean; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index cdec6f633ade..cee2264894a7 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -99,7 +99,7 @@ function AttachmentView({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); - const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false); + const [hasPDFFailedToLoad, setHasPDFFailedToLoad] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file?.name && Str.isVideo(file.name)); useEffect(() => { @@ -150,7 +150,9 @@ function AttachmentView({ // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob - if (!isPdfFailedToLoad && ((typeof source === 'string' && Str.isPDF(source)) || (file && Str.isPDF(file.name ?? translate('attachmentView.unknownFilename'))))) { + const isSourcePDF = typeof source === 'string' && Str.isPDF(source); + const isFilePDF = file && Str.isPDF(file.name ?? translate('attachmentView.unknownFilename')); + if (!hasPDFFailedToLoad && (isSourcePDF || isFilePDF)) { const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source as string) : (source as string); const onPDFLoadComplete = (path: string) => { @@ -164,7 +166,7 @@ function AttachmentView({ }; const onPDFLoadError = () => { - setIsPdfFailedToLoad(true); + setHasPDFFailedToLoad(true); }; // We need the following View component on android native