From cbec630893c76d5121449389f5b1be0cdbd22da2 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Tue, 28 Nov 2023 15:33:46 +0100 Subject: [PATCH] ref: removed proptypes files. Fix type issues --- .../AttachmentCarousel/CarouselButtons.tsx | 5 +- .../Pager/AttachmentCarouselPage.tsx | 54 ++++++++++--------- .../Pager/AttachmentCarouselPagerContext.tsx | 6 ++- .../Pager/ImageTransformer.tsx | 5 +- .../AttachmentCarousel/Pager/index.tsx | 35 +++++++----- .../attachmentCarouselPropTypes.js | 46 ---------------- .../AttachmentCarousel/index.native.tsx | 16 +++--- .../Attachments/AttachmentCarousel/index.tsx | 15 +++--- .../Attachments/AttachmentCarousel/types.ts | 17 +++--- .../AttachmentViewImage/index.native.tsx | 2 +- .../AttachmentViewImage/index.tsx | 3 +- .../AttachmentViewImage/propTypes.js | 19 ------- .../BaseAttachmentViewPdf.tsx | 7 +-- .../AttachmentViewPdf/index.android.tsx | 2 +- .../AttachmentViewPdf/propTypes.js | 28 ---------- .../Attachments/AttachmentView/index.tsx | 12 ++--- .../Attachments/AttachmentView/propTypes.js | 42 --------------- .../Attachments/AttachmentView/types.ts | 4 +- src/components/Attachments/propTypes.js | 21 -------- 19 files changed, 98 insertions(+), 241 deletions(-) delete mode 100644 src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js delete mode 100644 src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js delete mode 100644 src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js delete mode 100644 src/components/Attachments/AttachmentView/propTypes.js delete mode 100644 src/components/Attachments/propTypes.js diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx index 7875aae69adc..8d6bac6bf8b5 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx +++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx @@ -1,8 +1,5 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import _ from 'underscore'; -import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; import Tooltip from '@components/Tooltip'; @@ -45,6 +42,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward onPress={onBack} onPressIn={cancelAutoHideArrow} onPressOut={autoHideArrow} + text="" /> @@ -61,6 +59,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward onPress={onForward} onPressIn={cancelAutoHideArrow} onPressOut={autoHideArrow} + text="" /> diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx index 7a083d71b591..573a5c835495 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx @@ -1,14 +1,14 @@ -/* eslint-disable es/no-optional-chaining */ -import PropTypes from 'prop-types'; import React, {useContext, useEffect, useRef, useState} from 'react'; import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native'; -import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; import Image from '@components/Image'; import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext'; import ImageTransformer from './ImageTransformer'; import ImageWrapper from './ImageWrapper'; -function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) { +type CanvasDimensions = {canvasWidth: number; canvasHeight: number; imageWidth: number; imageHeight: number}; +type OnLoadEvent = {nativeEvent: {width: number; height: number}}; + +function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}: CanvasDimensions) { const imageScaleX = canvasWidth / imageWidth; const imageScaleY = canvasHeight / imageHeight; @@ -17,22 +17,14 @@ function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) const cachedDimensions = new Map(); -const pagePropTypes = { - /** Whether source url requires authentication */ - isAuthTokenRequired: PropTypes.bool, - - /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */ - source: AttachmentsPropTypes.attachmentSourcePropType.isRequired, - - isActive: PropTypes.bool.isRequired, -}; - -const defaultProps = { - isAuthTokenRequired: false, +type AttachmentCarouselPageProps = { + isAuthTokenRequired?: boolean; + source: string; + isActive: boolean; }; -function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialIsActive}) { - const {canvasWidth, canvasHeight} = useContext(AttachmentCarouselPagerContext); +function AttachmentCarouselPage({source, isAuthTokenRequired = false, isActive: initialIsActive}: AttachmentCarouselPageProps) { + const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const dimensions = cachedDimensions.get(source); @@ -49,7 +41,7 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI }, [initialIsActive]); const [initialActivePageLoad, setInitialActivePageLoad] = useState(isActive); - const isImageLoaded = useRef(null); + const isImageLoaded = useRef(null); const [isImageLoading, setIsImageLoading] = useState(false); const [isFallbackLoading, setIsFallbackLoading] = useState(false); const [showFallback, setShowFallback] = useState(true); @@ -88,13 +80,20 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI onLoadEnd={() => { setShowFallback(false); setIsImageLoading(false); - isImageLoaded.current = true; + if (isImageLoaded.current) { + isImageLoaded.current = true; + } }} - onLoad={(evt) => { + onLoad={(evt: OnLoadEvent) => { const imageWidth = (evt.nativeEvent?.width || 0) / PixelRatio.get(); const imageHeight = (evt.nativeEvent?.height || 0) / PixelRatio.get(); - const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}); + const {imageScaleX, imageScaleY} = getCanvasFitScale({ + canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0, + canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0, + imageWidth, + imageHeight, + }); // Don't update the dimensions if they are already set if ( @@ -145,11 +144,16 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI } setIsFallbackLoading(false); }} - onLoad={(evt) => { + onLoad={(evt: OnLoadEvent) => { const imageWidth = evt.nativeEvent.width; const imageHeight = evt.nativeEvent.height; - const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}); + const {imageScaleX, imageScaleY} = getCanvasFitScale({ + canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0, + canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0, + imageWidth, + imageHeight, + }); const minImageScale = Math.min(imageScaleX, imageScaleY); const scaledImageWidth = imageWidth * minImageScale; @@ -182,8 +186,6 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI ); } -AttachmentCarouselPage.propTypes = pagePropTypes; -AttachmentCarouselPage.defaultProps = defaultProps; AttachmentCarouselPage.displayName = 'AttachmentCarouselPage'; export default AttachmentCarouselPage; diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx index 891a3fa73a23..87cc21f4718d 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx @@ -1,11 +1,12 @@ -import {ComponentType, createContext, RefObject} from 'react'; +import {createContext, RefObject} from 'react'; +import PagerView from 'react-native-pager-view'; import {SharedValue} from 'react-native-reanimated'; type AttachmentCarouselPagerContextValue = { canvasWidth: number; canvasHeight: number; isScrolling: SharedValue; - pagerRef: RefObject; + pagerRef: RefObject; shouldPagerScroll: SharedValue; onPinchGestureChange: (value?: boolean) => void; onTap: () => void; @@ -17,3 +18,4 @@ type AttachmentCarouselPagerContextValue = { const AttachmentCarouselContextPager = createContext(null); export default AttachmentCarouselContextPager; +export type {AttachmentCarouselPagerContextValue}; diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx index 0b6a2e863962..5c2faeb453d0 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx @@ -1,4 +1,4 @@ -import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; +import React, {ComponentType, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Animated, { @@ -45,6 +45,7 @@ type ImageTransformerProps = ChildrenProps & { imageScaleY?: number; scaledImageWidth?: number; scaledImageHeight?: number; + minImageScale?: number; isActive: boolean; }; @@ -342,7 +343,7 @@ function ImageTransformer({imageWidth = 0, imageHeight = 0, imageScaleX = 1, ima }; } }) - .simultaneousWithExternalGesture(attachmentCarouselPagerContext?.pagerRef ?? {current: undefined}, doubleTap, singleTap) + .simultaneousWithExternalGesture((attachmentCarouselPagerContext?.pagerRef as unknown as RefObject) ?? {current: undefined}, doubleTap, singleTap) .onBegin(() => { stopAnimation(); }) diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index cde8d3a79e4a..199462628792 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -1,25 +1,31 @@ -import React, {ForwardedRef, ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {ComponentType, ForwardedRef, ReactNode, RefObject, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {createNativeWrapper, GestureHandlerRootView} from 'react-native-gesture-handler'; -import PagerView from 'react-native-pager-view'; +import PagerView, {PagerViewOnPageScrollEventData} from 'react-native-pager-view'; +import {OnPageSelectedEventData} from 'react-native-pager-view/lib/typescript/PagerViewNativeComponent'; import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated'; import {DependencyList} from 'react-native-reanimated/lib/typescript/reanimated2/hook'; +import {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes'; import {Attachment} from '@components/Attachments/AttachmentCarousel/types'; import useThemeStyles from '@styles/useThemeStyles'; -import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext'; +import AttachmentCarouselPagerContext, {AttachmentCarouselPagerContextValue} from './AttachmentCarouselPagerContext'; + +type PagerScrollEvent = PagerViewOnPageScrollEventData & { + eventName?: string; +}; const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView)); -function usePageScrollHandler(handlers: {onPageScroll: (e) => void}, dependencies: DependencyList) { +function usePageScrollHandler>(handlers: {onPageScroll: (event: PagerScrollEvent, context: TContext) => void}, dependencies: DependencyList) { const {context, doDependenciesDiffer} = useHandler(handlers, dependencies); const subscribeForEvents = ['onPageScroll']; - return useEvent( + return useEvent( (event) => { 'worklet'; const {onPageScroll} = handlers; - if (onPageScroll && event.eventName.endsWith('onPageScroll')) { + if (onPageScroll && event.eventName?.endsWith('onPageScroll')) { onPageScroll(event, context); } }, @@ -38,12 +44,12 @@ type PagerProps = { items: Attachment[]; renderItem: (props: {item: Attachment; isActive: boolean; index: number}) => ReactNode; initialIndex?: number; - onPageSelected?: () => void; + onPageSelected: DirectEventHandler; onTap?: () => void; onSwipe?: () => void; onSwipeSuccess?: () => void; onSwipeDown?: () => void; - onPinchGestureChange?: () => void; + onPinchGestureChange?: (value?: boolean) => void; containerWidth: number; containerHeight: number; }; @@ -66,7 +72,7 @@ function AttachmentCarouselPager( ) { const styles = useThemeStyles(); const shouldPagerScroll = useSharedValue(true); - const pagerRef = useRef(null); + const pagerRef = useRef(null); const isScrolling = useSharedValue(false); const activeIndex = useSharedValue(initialIndex); @@ -100,9 +106,10 @@ function AttachmentCarouselPager( useImperativeHandle( ref, - () => ({ - setPage: (...props) => pagerRef.current.setPage(...props), - }), + () => + ({ + setPage: (...props) => pagerRef?.current?.setPage(...props), + } as PagerView), [], ); @@ -110,7 +117,7 @@ function AttachmentCarouselPager( scrollEnabled: shouldPagerScroll.value, })); - const contextValue = useMemo( + const contextValue: AttachmentCarouselPagerContextValue = useMemo( () => ({ canvasWidth: containerWidth, canvasHeight: containerHeight, @@ -135,7 +142,7 @@ function AttachmentCarouselPager( onPageScroll={pageScrollHandler} animatedProps={animatedProps} onPageSelected={onPageSelected} - ref={pagerRef} + ref={pagerRef as unknown as RefObject>} style={styles.flex1} initialPage={initialIndex} > diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js deleted file mode 100644 index 7543e8d9c099..000000000000 --- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js +++ /dev/null @@ -1,46 +0,0 @@ -import PropTypes from 'prop-types'; -import transactionPropTypes from '@components/transactionPropTypes'; -import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import reportPropTypes from '@pages/reportPropTypes'; - -const propTypes = { - /** source is used to determine the starting index in the array of attachments */ - source: PropTypes.string, - - /** Callback to update the parent modal's state with a source and name from the attachments array */ - onNavigate: PropTypes.func, - - /** Callback to close carousel when user swipes down (on native) */ - onClose: PropTypes.func, - - /** Function to change the download button Visibility */ - setDownloadButtonVisibility: PropTypes.func, - - /** Object of report actions for this report */ - reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), - - /** The report currently being looked at */ - report: reportPropTypes.isRequired, - - /** The parent of `report` */ - parentReport: reportPropTypes, - - /** The report actions of the parent report */ - parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), - - /** The transaction attached to the parent report action */ - transaction: transactionPropTypes, -}; - -const defaultProps = { - source: '', - reportActions: {}, - parentReport: {}, - parentReportActions: {}, - transaction: {}, - onNavigate: () => {}, - onClose: () => {}, - setDownloadButtonVisibility: () => {}, -}; - -export {propTypes, defaultProps}; diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx index 33f983c0508e..b5dce94a49b9 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx @@ -9,12 +9,13 @@ import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import CarouselButtons from './CarouselButtons'; import CarouselItem, {Attachment} from './CarouselItem'; import extractAttachmentsFromReport from './extractAttachmentsFromReport'; import AttachmentCarouselPager from './Pager'; -import AttachmentCarouselProps, {AttachmentCarouselOnyxProps} from './types'; +import AttachmentCarouselProps, {AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps} from './types'; import useCarouselArrows from './useCarouselArrows'; function AttachmentCarousel(props: AttachmentCarouselProps) { @@ -146,8 +147,8 @@ function AttachmentCarousel(props: AttachmentCarouselProps) { renderItem={renderItem} initialIndex={page} onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)} - onPinchGestureChange={(newIsPinchGestureRunning) => { - setIsPinchGestureRunning(newIsPinchGestureRunning); + onPinchGestureChange={(newIsPinchGestureRunning?: boolean) => { + setIsPinchGestureRunning(newIsPinchGestureRunning ?? false); if (!newIsPinchGestureRunning && !shouldShowArrows) { setShouldShowArrows(true); } @@ -181,14 +182,15 @@ export default compose( canEvict: false, }, }), + withLocalize, // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file - withOnyx({ + withOnyx({ transaction: { key: ({report, parentReportActions}) => { - const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]); - return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`; + const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? '']; + const originalMessage = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction?.originalMessage : null; + return `${ONYXKEYS.COLLECTION.TRANSACTION}${originalMessage?.IOUTransactionID ?? 0}`; }, }, }), - withLocalize, )(AttachmentCarousel); diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx index e344cc7756ac..35e1c339d6e3 100644 --- a/src/components/Attachments/AttachmentCarousel/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.tsx @@ -18,7 +18,7 @@ import CarouselActions from './CarouselActions'; import CarouselButtons from './CarouselButtons'; import CarouselItem from './CarouselItem'; import extractAttachmentsFromReport from './extractAttachmentsFromReport'; -import AttachmentCarouselProps, {Attachment, AttachmentCarouselOnyxProps, ImageSource} from './types'; +import AttachmentCarouselProps, {Attachment, AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps} from './types'; import useCarouselArrows from './useCarouselArrows'; const viewabilityConfig = { @@ -37,7 +37,7 @@ function AttachmentCarousel(props: AttachmentCarouselProps & WindowDimensionsPro const [containerWidth, setContainerWidth] = useState(0); const [page, setPage] = useState(0); const [attachments, setAttachments] = useState([]); - const [activeSource, setActiveSource] = useState(source); + const [activeSource, setActiveSource] = useState(source); const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows(); const [isReceipt, setIsReceipt] = useState(false); @@ -105,7 +105,7 @@ function AttachmentCarousel(props: AttachmentCarouselProps & WindowDimensionsPro */ const cycleThroughAttachments = useCallback( (deltaSlide: number) => { - const nextIndex = page + deltaSlide; + const nextIndex = (page ?? 0) + deltaSlide; const nextItem = attachments[nextIndex]; if (!nextItem || !scrollRef.current) { @@ -225,15 +225,16 @@ export default compose( canEvict: false, }, }), + withWindowDimensions, // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file - withOnyx({ + withOnyx({ transaction: { key: ({report, parentReportActions}) => { - const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]); - return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`; + const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? '']; + const originalMessage = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction?.originalMessage : null; + return `${ONYXKEYS.COLLECTION.TRANSACTION}${originalMessage?.IOUTransactionID ?? 0}`; }, }, }), withLocalize, - withWindowDimensions, )(AttachmentCarousel); diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts index 522c16048f26..e173ee406697 100644 --- a/src/components/Attachments/AttachmentCarousel/types.ts +++ b/src/components/Attachments/AttachmentCarousel/types.ts @@ -1,13 +1,11 @@ -import {ImageSourcePropType} from 'react-native'; import {OnyxEntry} from 'react-native-onyx'; import {WithLocalizeProps} from '@components/withLocalize'; +import {WindowDimensionsContextData} from '@components/withWindowDimensions/types'; import {Report, ReportActions, Transaction} from '@src/types/onyx'; -type ImageSource = string | ImageSourcePropType; - type Attachment = { reportActionID?: string; - source: ImageSource; + source: string; isAuthTokenRequired: boolean; file: {name: string}; isReceipt: boolean; @@ -19,17 +17,22 @@ type AttachmentCarouselOnyxProps = { reportActions: OnyxEntry; parentReportActions: OnyxEntry; parentReport: OnyxEntry; +}; + +type TransactionAttachmentCarouselOnyxProps = { transaction: OnyxEntry; }; type AttachmentCarouselProps = { report: Report; - source: ImageSource; + source: string; onNavigate: (attachment: Attachment) => void; setDownloadButtonVisibility: (isVisible: boolean) => void; onClose: () => void; } & AttachmentCarouselOnyxProps & - WithLocalizeProps; + TransactionAttachmentCarouselOnyxProps & + WithLocalizeProps & + WindowDimensionsContextData; export default AttachmentCarouselProps; -export type {Attachment, AttachmentCarouselOnyxProps, ImageSource}; +export type {Attachment, AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps}; diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx index 0fd6222182bc..c79c6d3293bd 100755 --- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx @@ -25,7 +25,7 @@ function AttachmentViewImage({ ) : ( diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx index 1316e872d753..4a8d2138d0f1 100755 --- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx @@ -10,10 +10,9 @@ import AttachmentViewImageProps from './types'; function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, onError}: AttachmentViewImageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const children = ( {})} url={source} fileName={file.name} isAuthTokenRequired={isImage && isAuthTokenRequired} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js deleted file mode 100644 index 184d3ae1a367..000000000000 --- a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js +++ /dev/null @@ -1,19 +0,0 @@ -import PropTypes from 'prop-types'; -import {attachmentViewDefaultProps, attachmentViewPropTypes} from '@components/Attachments/AttachmentView/propTypes'; - -const attachmentViewImagePropTypes = { - ...attachmentViewPropTypes, - - loadComplete: PropTypes.bool.isRequired, - - isImage: PropTypes.bool.isRequired, -}; - -const attachmentViewImageDefaultProps = { - ...attachmentViewDefaultProps, - - loadComplete: false, - isImage: false, -}; - -export {attachmentViewImagePropTypes, attachmentViewImageDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx index 0ed6d5837a57..714c01b99a2f 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx @@ -27,7 +27,7 @@ function BaseAttachmentViewPdf({ const onScaleChanged = useCallback( (scale: number) => { - onScaleChangedProp(scale); + onScaleChangedProp?.(scale); // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in if (isUsedInCarousel) { @@ -38,8 +38,9 @@ function BaseAttachmentViewPdf({ if (attachmentCarouselPagerContext?.shouldPagerScroll.value === shouldPagerScroll) { return; } - - attachmentCarouselPagerContext?.shouldPagerScroll.value = shouldPagerScroll; + if (attachmentCarouselPagerContext) { + attachmentCarouselPagerContext.shouldPagerScroll.value = shouldPagerScroll; + } } }, [attachmentCarouselPagerContext, isUsedInCarousel, onScaleChangedProp], diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx index 0a9a8cda1182..074ad3545d3b 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx @@ -54,7 +54,7 @@ function AttachmentViewPdf({onScaleChanged, ...props}: AttachmentViewPdfProps) { {...props} onScaleChanged={(scale) => { updateScale(scale ?? 0); - onScaleChanged(); + onScaleChanged?.(); }} /> diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js deleted file mode 100644 index a34010f0ba8b..000000000000 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types'; -import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; -import stylePropTypes from '@styles/stylePropTypes'; - -const attachmentViewPdfPropTypes = { - /** File object maybe be instance of File or Object */ - file: AttachmentsPropTypes.attachmentFilePropType.isRequired, - - encryptedSourceUrl: PropTypes.string.isRequired, - onToggleKeyboard: PropTypes.func.isRequired, - onLoadComplete: PropTypes.func.isRequired, - - /** Additional style props */ - style: stylePropTypes, - - /** Styles for the error label */ - errorLabelStyles: stylePropTypes, -}; - -const attachmentViewPdfDefaultProps = { - file: { - name: '', - }, - style: [], - errorLabelStyles: [], -}; - -export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index c9574f0a84cb..fd5b38c9bf88 100755 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -1,16 +1,14 @@ import Str from 'expensify-common/lib/str'; -import PropTypes from 'prop-types'; import React, {memo, useState} from 'react'; -import {ActivityIndicator, ImageSourcePropType, ScrollView, StyleProp, View, ViewStyle} from 'react-native'; +import {ActivityIndicator, ScrollView, StyleProp, View, ViewStyle} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; +import {ImageSource} from '@components/Attachments/AttachmentCarousel/types'; 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 withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; @@ -53,7 +51,7 @@ type AttachmentViewProps = { // eslint-disable-next-line react/no-unused-prop-types transactionID?: string; - fallbackSource?: string | ImageSourcePropType; + fallbackSource?: string; } & AttachmentProps & AttachmentViewOnyxProps; @@ -155,7 +153,7 @@ function AttachmentView({ if (isImage || (file && Str.isImage(file.name))) { return ( - {file && file.name} + {file?.name} {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js deleted file mode 100644 index 0c7c8814267f..000000000000 --- a/src/components/Attachments/AttachmentView/propTypes.js +++ /dev/null @@ -1,42 +0,0 @@ -import PropTypes from 'prop-types'; -import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; - -const attachmentViewPropTypes = { - /** Whether source url requires authentication */ - isAuthTokenRequired: PropTypes.bool, - - /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */ - source: AttachmentsPropTypes.attachmentSourcePropType.isRequired, - - /** File object can be an instance of File or Object */ - file: AttachmentsPropTypes.attachmentFilePropType, - - /** Whether this view is the active screen */ - isFocused: PropTypes.bool, - - /** Whether this AttachmentView is shown as part of a AttachmentCarousel */ - isUsedInCarousel: PropTypes.bool, - - /** Function for handle on press */ - onPress: PropTypes.func, - - /** Handles scale changed event */ - onScaleChanged: PropTypes.func, - - /** Whether this AttachmentView is shown as part of an AttachmentModal */ - isUsedInAttachmentModal: PropTypes.bool, -}; - -const attachmentViewDefaultProps = { - isAuthTokenRequired: false, - file: { - name: '', - }, - isFocused: false, - isUsedInCarousel: false, - onPress: undefined, - onScaleChanged: () => {}, - isUsedInAttachmentModal: false, -}; - -export {attachmentViewPropTypes, attachmentViewDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/types.ts b/src/components/Attachments/AttachmentView/types.ts index 523d0b264182..3272948979c8 100644 --- a/src/components/Attachments/AttachmentView/types.ts +++ b/src/components/Attachments/AttachmentView/types.ts @@ -1,7 +1,5 @@ -import {ImageSourcePropType} from 'react-native'; - type AttachmentProps = { - source: string | ImageSourcePropType; + source: string; file: {name: string}; isAuthTokenRequired?: boolean; isFocused?: boolean; diff --git a/src/components/Attachments/propTypes.js b/src/components/Attachments/propTypes.js deleted file mode 100644 index 698a41de9648..000000000000 --- a/src/components/Attachments/propTypes.js +++ /dev/null @@ -1,21 +0,0 @@ -import PropTypes from 'prop-types'; - -const attachmentSourcePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]); -const attachmentFilePropType = PropTypes.shape({ - name: PropTypes.string, -}); - -const attachmentPropType = PropTypes.shape({ - /** Whether source url requires authentication */ - isAuthTokenRequired: PropTypes.bool, - - /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */ - source: attachmentSourcePropType.isRequired, - - /** File object can be an instance of File or Object */ - file: attachmentFilePropType, -}); - -const attachmentsPropType = PropTypes.arrayOf(attachmentPropType); - -export {attachmentSourcePropType, attachmentFilePropType, attachmentPropType, attachmentsPropType};