From 35ae16aab4ea862c12c96312e398c5cb4cc89249 Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Wed, 27 Sep 2023 17:53:43 +0300 Subject: [PATCH 1/6] #23546 - Wrong Image opens on HT Report in Safari --- src/components/Attachments/AttachmentCarousel/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 00b603cdd7d9..802d97f95fa6 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -25,6 +25,7 @@ const viewabilityConfig = { // To facilitate paging through the attachments, we want to consider an item "viewable" when it is // more than 95% visible. When that happens we update the page index in the state. itemVisiblePercentThreshold: 95, + minimumViewTime: 300, }; function AttachmentCarousel({report, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { @@ -189,7 +190,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl bounces={false} // Scroll only one image at a time no matter how fast the user swipes disableIntervalMomentum - pagingEnabled + pagingEnabled={false} snapToAlignment="start" snapToInterval={containerWidth} // Enable scrolling by swiping on mobile (touch) devices only @@ -198,7 +199,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl scrollEnabled={canUseTouchScreen} ref={scrollRef} initialScrollIndex={page} - initialNumToRender={3} + initialNumToRender={1} windowSize={5} maxToRenderPerBatch={3} data={attachments} From 3d4faa6f732983343e492357d769f266e146c130 Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Fri, 29 Sep 2023 11:01:23 +0300 Subject: [PATCH 2/6] pagingEnabled removed --- src/components/Attachments/AttachmentCarousel/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 802d97f95fa6..67b5afe2717c 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -190,7 +190,6 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl bounces={false} // Scroll only one image at a time no matter how fast the user swipes disableIntervalMomentum - pagingEnabled={false} snapToAlignment="start" snapToInterval={containerWidth} // Enable scrolling by swiping on mobile (touch) devices only From d1bf9190b7e50f2e88f590319dd8168e1964daad Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Fri, 13 Oct 2023 00:05:47 +0300 Subject: [PATCH 3/6] Updated approach --- src/components/Attachments/AttachmentCarousel/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 67b5afe2717c..b7f9b5075bfb 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -190,8 +190,11 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl bounces={false} // Scroll only one image at a time no matter how fast the user swipes disableIntervalMomentum + pagingEnabled snapToAlignment="start" - snapToInterval={containerWidth} + contentInset={{ top: 0, left: 0, bottom: 0, right: 0 }} + contentInsetAdjustmentBehavior="automatic" + snapToOffsets={attachments.map((_, index) => index * containerWidth)} // Enable scrolling by swiping on mobile (touch) devices only // disable scroll for desktop/browsers because they add their scrollbars // Enable scrolling FlatList only when PDF is not in a zoomed state @@ -199,8 +202,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl ref={scrollRef} initialScrollIndex={page} initialNumToRender={1} - windowSize={5} - maxToRenderPerBatch={3} + windowSize={1} data={attachments} CellRendererComponent={AttachmentCarouselCellRenderer} renderItem={renderItem} From d10f9fd7b2b1c857014f021e8257f1f21f34e9d4 Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Thu, 2 Nov 2023 16:12:05 +0200 Subject: [PATCH 4/6] Fixed lint error --- src/components/Attachments/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index b7f9b5075bfb..26a77454b1bd 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -194,7 +194,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl snapToAlignment="start" contentInset={{ top: 0, left: 0, bottom: 0, right: 0 }} contentInsetAdjustmentBehavior="automatic" - snapToOffsets={attachments.map((_, index) => index * containerWidth)} + snapToOffsets={_.map(attachments, (__, index) => index * containerWidth)} // Enable scrolling by swiping on mobile (touch) devices only // disable scroll for desktop/browsers because they add their scrollbars // Enable scrolling FlatList only when PDF is not in a zoomed state From 6f41ef587d7b9a74374a842ae14a1f814f88d5a7 Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Thu, 2 Nov 2023 17:09:43 +0200 Subject: [PATCH 5/6] Prettier fix --- src/components/Attachments/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 26a77454b1bd..4a7bd19229ed 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -192,7 +192,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl disableIntervalMomentum pagingEnabled snapToAlignment="start" - contentInset={{ top: 0, left: 0, bottom: 0, right: 0 }} + contentInset={{top: 0, left: 0, bottom: 0, right: 0}} contentInsetAdjustmentBehavior="automatic" snapToOffsets={_.map(attachments, (__, index) => index * containerWidth)} // Enable scrolling by swiping on mobile (touch) devices only From 5a19e1f62c7b081df3c97785b7bb4b5873c47e0d Mon Sep 17 00:00:00 2001 From: mikesmnx Date: Sat, 9 Dec 2023 21:19:35 +0200 Subject: [PATCH 6/6] Added comment on contentInset --- src/components/Attachments/AttachmentCarousel/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index d28581a5f930..b52631a5b856 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -196,6 +196,8 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source, disableIntervalMomentum pagingEnabled snapToAlignment="start" + // Without explicitly setting this value (despite it being the default), + // the view may appear slightly different (with a 1-2px padding) contentInset={{top: 0, left: 0, bottom: 0, right: 0}} contentInsetAdjustmentBehavior="automatic" snapToOffsets={_.map(attachments, (__, index) => index * containerWidth)}