From 48fd330af3cd5da556e3f6d23456b5880380805d Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 6 Nov 2024 12:25:11 +0800 Subject: [PATCH 1/5] fix flatlist isn't scrolled when message changes to edit composer --- src/components/FlatList/index.tsx | 13 ++++++++++--- src/pages/home/report/ReportActionItem.tsx | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index be0227375470..bcdc3fa32424 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -109,7 +109,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false } }, [getContentView, getScrollOffset, mvcpMinIndexForVisible, horizontal]); - const adjustForMaintainVisibleContentPosition = useCallback(() => { + const adjustForMaintainVisibleContentPosition = useCallback((animated = true) => { if (mvcpMinIndexForVisible == null) { return; } @@ -127,7 +127,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false prevFirstVisibleOffsetRef.current = firstVisibleViewOffset; scrollToOffset(scrollOffset + delta, false, true); if (mvcpAutoscrollToTopThresholdRef.current != null && scrollOffset <= mvcpAutoscrollToTopThresholdRef.current) { - scrollToOffset(0, true, false); + scrollToOffset(0, animated, false); } } }, [scrollToOffset, mvcpMinIndexForVisible, horizontal]); @@ -141,6 +141,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false mutationObserverRef.current?.disconnect(); const mutationObserver = new MutationObserver((mutations) => { + let isEditComposerAdded = false; // Check if the first visible view is removed and re-calculate it // if needed. mutations.forEach((mutation) => { @@ -150,6 +151,12 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false } firstVisibleViewRef.current = null; }); + mutation.addedNodes.forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.isEditing === "true") { + isEditComposerAdded = true; + return; + } + }); }); if (firstVisibleViewRef.current == null) { @@ -162,7 +169,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false return; } - adjustForMaintainVisibleContentPosition(); + adjustForMaintainVisibleContentPosition(!isEditComposerAdded); prepareForMaintainVisibleContentPosition(); }); mutationObserver.observe(contentView, { diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index a0e2f65a89a0..88db03279a70 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -964,7 +964,7 @@ function ReportActionItem({ shouldFreezeCapture={isPaymentMethodPopoverActive} > {(hovered) => ( - + {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && } {shouldDisplayContextMenu && ( Date: Wed, 6 Nov 2024 12:47:19 +0800 Subject: [PATCH 2/5] prettier --- src/components/FlatList/index.tsx | 43 ++++++++++++---------- src/pages/home/report/ReportActionItem.tsx | 5 ++- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index bcdc3fa32424..4f454fa58282 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -109,28 +109,31 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false } }, [getContentView, getScrollOffset, mvcpMinIndexForVisible, horizontal]); - const adjustForMaintainVisibleContentPosition = useCallback((animated = true) => { - if (mvcpMinIndexForVisible == null) { - return; - } + const adjustForMaintainVisibleContentPosition = useCallback( + (animated = true) => { + if (mvcpMinIndexForVisible == null) { + return; + } - const firstVisibleView = firstVisibleViewRef.current; - const prevFirstVisibleOffset = prevFirstVisibleOffsetRef.current; - if (firstVisibleView == null || !firstVisibleView.isConnected || prevFirstVisibleOffset == null) { - return; - } + const firstVisibleView = firstVisibleViewRef.current; + const prevFirstVisibleOffset = prevFirstVisibleOffsetRef.current; + if (firstVisibleView == null || !firstVisibleView.isConnected || prevFirstVisibleOffset == null) { + return; + } - const firstVisibleViewOffset = horizontal ? firstVisibleView.offsetLeft : firstVisibleView.offsetTop; - const delta = firstVisibleViewOffset - prevFirstVisibleOffset; - if (Math.abs(delta) > (IS_MOBILE_SAFARI ? 100 : 0.5)) { - const scrollOffset = lastScrollOffsetRef.current; - prevFirstVisibleOffsetRef.current = firstVisibleViewOffset; - scrollToOffset(scrollOffset + delta, false, true); - if (mvcpAutoscrollToTopThresholdRef.current != null && scrollOffset <= mvcpAutoscrollToTopThresholdRef.current) { - scrollToOffset(0, animated, false); + const firstVisibleViewOffset = horizontal ? firstVisibleView.offsetLeft : firstVisibleView.offsetTop; + const delta = firstVisibleViewOffset - prevFirstVisibleOffset; + if (Math.abs(delta) > (IS_MOBILE_SAFARI ? 100 : 0.5)) { + const scrollOffset = lastScrollOffsetRef.current; + prevFirstVisibleOffsetRef.current = firstVisibleViewOffset; + scrollToOffset(scrollOffset + delta, false, true); + if (mvcpAutoscrollToTopThresholdRef.current != null && scrollOffset <= mvcpAutoscrollToTopThresholdRef.current) { + scrollToOffset(0, animated, false); + } } - } - }, [scrollToOffset, mvcpMinIndexForVisible, horizontal]); + }, + [scrollToOffset, mvcpMinIndexForVisible, horizontal], + ); const setupMutationObserver = useCallback(() => { const contentView = getContentView(); @@ -152,7 +155,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false firstVisibleViewRef.current = null; }); mutation.addedNodes.forEach((node) => { - if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.isEditing === "true") { + if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.isEditing === 'true') { isEditComposerAdded = true; return; } diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 88db03279a70..2487fc095eb0 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -964,7 +964,10 @@ function ReportActionItem({ shouldFreezeCapture={isPaymentMethodPopoverActive} > {(hovered) => ( - + {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && } {shouldDisplayContextMenu && ( Date: Wed, 6 Nov 2024 12:53:20 +0800 Subject: [PATCH 3/5] lint --- src/components/FlatList/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index 4f454fa58282..0000429c6a77 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -155,10 +155,10 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false firstVisibleViewRef.current = null; }); mutation.addedNodes.forEach((node) => { - if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.isEditing === 'true') { - isEditComposerAdded = true; + if (node.nodeType !== Node.ELEMENT_NODE || (node as HTMLElement).dataset.isEditing !== 'true') { return; } + isEditComposerAdded = true; }); }); From 0bf59fb0b188a16c19140c1a1ce6bd6b939d7318 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 12 Nov 2024 12:24:03 +0800 Subject: [PATCH 4/5] check if the children has composer or not instead --- src/components/FlatList/index.tsx | 3 ++- src/pages/home/report/ReportActionItem.tsx | 5 +---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index 0000429c6a77..fb5abd254d77 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -154,8 +154,9 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false } firstVisibleViewRef.current = null; }); + console.log('mutation added', mutation.addedNodes) mutation.addedNodes.forEach((node) => { - if (node.nodeType !== Node.ELEMENT_NODE || (node as HTMLElement).dataset.isEditing !== 'true') { + if (node.nodeType !== Node.ELEMENT_NODE || !(node as HTMLElement).querySelector('#composer')) { return; } isEditComposerAdded = true; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index ce49757a1e60..2953036f6af7 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -957,10 +957,7 @@ function ReportActionItem({ shouldFreezeCapture={isPaymentMethodPopoverActive} > {(hovered) => ( - + {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && } {shouldDisplayContextMenu && ( Date: Tue, 12 Nov 2024 12:30:00 +0800 Subject: [PATCH 5/5] remove log --- src/components/FlatList/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index fb5abd254d77..52ccf50cd722 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -154,7 +154,6 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false } firstVisibleViewRef.current = null; }); - console.log('mutation added', mutation.addedNodes) mutation.addedNodes.forEach((node) => { if (node.nodeType !== Node.ELEMENT_NODE || !(node as HTMLElement).querySelector('#composer')) { return;