From 6b3e753695a9c5846db6b31aa12106e08840bd63 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 26 Aug 2024 22:20:21 +0800 Subject: [PATCH 1/4] fix able to scroll while zoomed --- src/components/Attachments/AttachmentCarousel/Pager/index.tsx | 3 +-- .../AttachmentCarousel/useCarouselContextEvents.ts | 2 +- .../AttachmentViewPdf/BaseAttachmentViewPdf.tsx | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index 0b6b67b38110..773559c3c5fd 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -53,12 +53,11 @@ function AttachmentCarouselPager( {items, activeSource, initialPage, setShouldShowArrows, onPageSelected, onClose}: AttachmentCarouselPagerProps, ref: ForwardedRef, ) { - const {handleTap, handleScaleChange} = useCarouselContextEvents(setShouldShowArrows); + const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows); const styles = useThemeStyles(); const pagerRef = useRef(null); const isPagerScrolling = useSharedValue(false); - const isScrollEnabled = useSharedValue(true); const activePage = useSharedValue(initialPage); const [activePageIndex, setActivePageIndex] = useState(initialPage); diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts index cc2c3c5c8229..1c54d7841347 100644 --- a/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts +++ b/src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts @@ -58,7 +58,7 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction Date: Mon, 26 Aug 2024 22:24:30 +0800 Subject: [PATCH 2/4] remove isUsedInCarousel props and rely on the context instead --- .../Attachments/AttachmentCarousel/CarouselItem.tsx | 1 - .../AttachmentViewPdf/BaseAttachmentViewPdf.tsx | 1 - .../AttachmentView/AttachmentViewPdf/types.ts | 2 +- src/components/Attachments/AttachmentView/index.tsx | 9 ++++----- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx index a9b5dfb7feb6..7d78340d2b51 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx @@ -83,7 +83,6 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr isHovered={isModalHovered} isFocused={isFocused} duration={item.duration} - isUsedInCarousel /> diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx index 560c2836d7ac..deb571122c6c 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx @@ -8,7 +8,6 @@ function BaseAttachmentViewPdf({ file, encryptedSourceUrl, isFocused, - isUsedInCarousel, onPress: onPressProp, onScaleChanged: onScaleChangedProp, onToggleKeyboard, diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts index c20593449d58..dd5bae6e9e7b 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts @@ -1,7 +1,7 @@ import type {StyleProp, ViewStyle} from 'react-native'; import type {AttachmentViewProps} from '..'; -type AttachmentViewPdfProps = Pick & { +type AttachmentViewPdfProps = Pick & { encryptedSourceUrl: string; onLoadComplete: (path: string) => void; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 39c25706bbfe..f891c994fc5e 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -1,5 +1,5 @@ import {Str} from 'expensify-common'; -import React, {memo, useEffect, useState} from 'react'; +import React, {memo, useContext, useEffect, useState} from 'react'; import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -29,6 +29,7 @@ import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo'; import DefaultAttachmentView from './DefaultAttachmentView'; import HighResolutionInfo from './HighResolutionInfo'; +import AttachmentCarouselPagerContext from '../AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; type AttachmentViewOnyxProps = { transaction: OnyxEntry; @@ -42,9 +43,6 @@ type AttachmentViewProps = AttachmentViewOnyxProps & /** Function for handle on press */ onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void; - /** Whether this AttachmentView is shown as part of a AttachmentCarousel */ - isUsedInCarousel?: boolean; - isUsedInAttachmentModal?: boolean; /** Flag to show/hide download icon */ @@ -89,7 +87,6 @@ function AttachmentView({ containerStyles, onToggleKeyboard, isFocused, - isUsedInCarousel, isUsedInAttachmentModal, isWorkspaceAvatar, maybeIcon, @@ -103,6 +100,7 @@ function AttachmentView({ }: AttachmentViewProps) { const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); + const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -110,6 +108,7 @@ function AttachmentView({ const [isHighResolution, setIsHighResolution] = useState(false); const [hasPDFFailedToLoad, setHasPDFFailedToLoad] = useState(false); const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file?.name && Str.isVideo(file.name)); + const isUsedInCarousel = !!attachmentCarouselPagerContext?.pagerRef; useEffect(() => { if (!isFocused && !(file && isUsedInAttachmentModal)) { From a436119e75f29f2a3fbd927345d4ea9a95ccfade Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 27 Aug 2024 00:00:04 +0800 Subject: [PATCH 3/4] lint --- .../AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx | 2 +- src/components/Attachments/AttachmentView/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx index deb571122c6c..7c1d350fc307 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx @@ -39,7 +39,7 @@ function BaseAttachmentViewPdf({ } // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in - if (!!attachmentCarouselPagerContext?.pagerRef) { + if (attachmentCarouselPagerContext?.pagerRef) { attachmentCarouselPagerContext.onScaleChanged(newScale); } }, diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index f891c994fc5e..69734dafd9f9 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -24,12 +24,12 @@ 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 AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo'; import DefaultAttachmentView from './DefaultAttachmentView'; import HighResolutionInfo from './HighResolutionInfo'; -import AttachmentCarouselPagerContext from '../AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; type AttachmentViewOnyxProps = { transaction: OnyxEntry; From 5ea1d27c76acaab4d8484c3438dcd4422fafc8f4 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 27 Aug 2024 00:14:14 +0800 Subject: [PATCH 4/4] lint --- 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 69734dafd9f9..cd1b52b52248 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -4,6 +4,7 @@ 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 AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import type {Attachment, AttachmentSource} from '@components/Attachments/types'; import DistanceEReceipt from '@components/DistanceEReceipt'; import EReceipt from '@components/EReceipt'; @@ -24,7 +25,6 @@ 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 AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo';