Merge pull request #48010 from bernhardoj/fix/47805-able-to-scroll-zo…

…omed-attachemnt Fix able to scroll attachment while zoomed
Expensify · Aug 27, 2024 · 6ca91cd · 6ca91cd
2 parents db1c4c2 + 5ea1d27
commit 6ca91cd
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 13 deletions.
diff --git 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
                 />
             </View>
 

diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -58,12 +58,11 @@ function AttachmentCarouselPager(
     {items, activeSource, initialPage, setShouldShowArrows, onPageSelected, onClose}: AttachmentCarouselPagerProps,
     ref: ForwardedRef<AttachmentCarouselPagerHandle>,
 ) {
-    const {handleTap, handleScaleChange} = useCarouselContextEvents(setShouldShowArrows);
+    const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
     const styles = useThemeStyles();
     const pagerRef = useRef<PagerView>(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
@@ -58,7 +58,7 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction<bo
         onRequestToggleArrows();
     }, [isScrollEnabled.value, onRequestToggleArrows]);
 
-    return {handleTap, handleScaleChange, scale};
+    return {handleTap, handleScaleChange, scale, isScrollEnabled};
 }
 
 export default useCarouselContextEvents;
diff --git 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,
@@ -40,11 +39,11 @@ function BaseAttachmentViewPdf({
             }
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
-            if (isUsedInCarousel && attachmentCarouselPagerContext) {
+            if (attachmentCarouselPagerContext?.pagerRef) {
                 attachmentCarouselPagerContext.onScaleChanged(newScale);
             }
         },
-        [attachmentCarouselPagerContext, isUsedInCarousel, onScaleChangedProp],
+        [attachmentCarouselPagerContext, onScaleChangedProp],
     );
 
     /**

diff --git 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<AttachmentViewProps, 'file' | 'onPress' | 'isUsedInCarousel' | 'isFocused' | 'onToggleKeyboard'> & {
+type AttachmentViewPdfProps = Pick<AttachmentViewProps, 'file' | 'onPress' | 'isFocused' | 'onToggleKeyboard'> & {
     encryptedSourceUrl: string;
     onLoadComplete: (path: string) => void;
 

diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
@@ -1,9 +1,10 @@
 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';
 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';
@@ -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 */
@@ -93,7 +91,6 @@ function AttachmentView({
     onToggleKeyboard,
     onPDFLoadError: onPDFLoadErrorProp = () => {},
     isFocused,
-    isUsedInCarousel,
     isUsedInAttachmentModal,
     isWorkspaceAvatar,
     maybeIcon,
@@ -107,13 +104,15 @@ function AttachmentView({
 }: AttachmentViewProps) {
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
+    const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [loadComplete, setLoadComplete] = useState(false);
     const [isHighResolution, setIsHighResolution] = useState<boolean>(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)) {