[WIP] feat: Open report with linked/unread report actions in the middle of the chat

cspell.json

@@ -941,7 +941,8 @@
         "Gclid",
         "autocorrection",
         "BambooHr",
-        "HiBob"
+        "HiBob",
+        "overscan"
     ],
     "ignorePaths": [
         ".gitignore",

src/components/FlashList/InvertedFlashList/index.tsx

@@ -1,64 +1,33 @@
 import type {FlashListProps} from '@shopify/flash-list';
 import React from 'react';
-import useFlashListScrollKey from '@components/FlashList/useFlashListScrollKey';
-import type {FlatListRefType} from '@pages/inbox/ReportScreenContext';
+import type {FlashListRefType, FlatListRefType} from '@pages/inbox/ReportScreenContext';
 import FlashList from '..';
 import CellRendererComponent from './CellRendererComponent';
 
 type InvertedFlashListProps<T> = FlashListProps<T> & {
-    /** Key of the item to initially scroll to when the list first renders. */
-    initialScrollKey?: string | null;
-
     /** The array of items to render in the list. */
     data: T[];
 
-    /** Function that extracts a unique key for each item in the list. */
-    keyExtractor: (item: T, index: number) => string;
+    /** Key of the item to initially scroll to when the list first renders. */
+    initialScrollKey?: string | null;
 
     /** Ref to the underlying list instance. */
-    ref: FlatListRefType;
-
-    /** Whether the list should handle `maintainVisibleContentPosition` */
-    shouldMaintainVisibleContentPosition?: boolean;
+    ref: FlashListRefType<T> | FlatListRefType<T> | null;
 };
 
-function InvertedFlashList<T>({
-    data,
-    keyExtractor,
-    initialScrollKey,
-    onStartReached: onStartReachedProp,
-    maintainVisibleContentPosition: maintainVisibleContentPositionProp,
-    shouldMaintainVisibleContentPosition,
-    ...restProps
-}: InvertedFlashListProps<T>) {
-    const {
-        displayedData,
-        onStartReached,
-        maintainVisibleContentPosition: maintainVisibleContentPositionForScrollKey,
-    } = useFlashListScrollKey<T>({
-        data,
-        keyExtractor,
-        initialScrollKey,
-        onStartReached: onStartReachedProp,
-        shouldMaintainVisibleContentPosition,
-    });
-
-    const maintainVisibleContentPosition = maintainVisibleContentPositionProp
-        ? {
-              ...maintainVisibleContentPositionForScrollKey,
-              ...maintainVisibleContentPositionProp,
-          }
-        : maintainVisibleContentPositionForScrollKey;
+function InvertedFlashList<T>({data, keyExtractor, initialScrollKey, initialScrollIndex: initialScrollIndexProp, ...restProps}: InvertedFlashListProps<T>) {
+    const targetIndex = initialScrollKey == null ? -1 : data.findIndex((item, index) => keyExtractor?.(item, index) === initialScrollKey);
+    const initialScrollIndexForKey = targetIndex < 0 ? undefined : targetIndex;
+    const initialScrollIndex = initialScrollIndexProp ?? initialScrollIndexForKey;
 
     return (
         <FlashList<T>
             {...restProps}
             inverted
-            onStartReached={onStartReached}
-            data={displayedData}
+            data={data}
             keyExtractor={keyExtractor}
+            initialScrollIndex={initialScrollIndex}
             CellRendererComponent={CellRendererComponent}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
         />
     );
 }

src/hooks/useReportScrollManager/types.ts

@@ -1,7 +1,8 @@
 import type {FlatListRefType} from '@pages/inbox/ReportScreenContext';
+import type * as OnyxTypes from '@src/types/onyx';
 
 type ReportScrollManagerData = {
-    ref: FlatListRefType;
+    ref: FlatListRefType<OnyxTypes.ReportAction>;
     scrollToIndex: (index: number, isEditing?: boolean) => void;
     scrollToBottom: () => void;
     scrollToEnd: () => void;

src/pages/inbox/ReportScreenContext.ts

@@ -1,7 +1,9 @@
+import type {FlashListRef} from '@shopify/flash-list';
 import type {RefObject, SyntheticEvent} from 'react';
 import {createContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {FlatList, GestureResponderEvent, Text, View} from 'react-native';
+import type * as OnyxTypes from '@src/types/onyx';
 
 type ReactionListAnchor = View | Text | HTMLDivElement | null;
 
@@ -13,12 +15,13 @@ type ReactionListContextType = {
     isActiveReportAction: (reportActionID: number | string) => boolean;
 };
 
-type FlatListRefType = RefObject<FlatList<unknown> | null> | null;
+type FlatListRefType<T = unknown> = RefObject<FlatList<T> | null> | null;
 
+type FlashListRefType<T = unknown> = RefObject<FlashListRef<T> | null> | null;
 type ScrollPosition = {offset?: number};
 
 type ActionListContextType = {
-    flatListRef: FlatListRefType;
+    flatListRef: FlatListRefType<OnyxTypes.ReportAction>;
     scrollPositionRef: RefObject<ScrollPosition>;
     scrollOffsetRef: RefObject<number>;
 };
@@ -31,4 +34,4 @@ const ReactionListContext = createContext<ReactionListContextType>({
 });
 
 export {ActionListContext, ReactionListContext};
-export type {ReactionListContextType, ActionListContextType, FlatListRefType, ReactionListAnchor, ReactionListEvent, ScrollPosition};
+export type {ReactionListContextType, ActionListContextType, FlatListRefType, FlashListRefType, ReactionListAnchor, ReactionListEvent, ScrollPosition};

src/pages/inbox/report/InitialViewportUtils.ts

@@ -0,0 +1,108 @@
+import CONST from '@src/CONST';
+
+const INITIAL_TARGET_REPORT_ACTION_ESTIMATED_HEIGHT = CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT;
+const INITIAL_VIEWPORT_OVERSCAN_ITEMS = 2;
+
+type InitialViewportRange = {
+    first: number;
+    last: number;
+    requiredMountedItems: number;
+};
+
+type InitialViewportResetSession = {
+    listID: string;
+    reportID: string;
+    linkedReportActionID: string | undefined;
+    initialScrollKey: string | undefined;
+};
+
+type MeasuredLinkedRowScrollPosition = {
+    viewOffset?: number;
+    viewPosition?: number;
+};
+
+function isUnreadMarkerOnlyInitialScrollKeyChange(
+    previousSession: InitialViewportResetSession | undefined,
+    listID: string,
+    reportID: string,
+    linkedReportActionID: string | undefined,
+    initialScrollKey: string | undefined,
+) {
+    if (!previousSession || linkedReportActionID) {
+        return false;
+    }
+
+    const didUnreadMarkerChange = previousSession.initialScrollKey !== initialScrollKey;
+    const isSameListSession = previousSession.listID === listID && previousSession.reportID === reportID && previousSession.linkedReportActionID === linkedReportActionID;
+
+    return didUnreadMarkerChange && isSameListSession;
+}
+
+function isInitialViewportCovered(mountedIndices: Set<number>, range: InitialViewportRange, initialScrollIndex: number) {
+    if (mountedIndices.size < range.requiredMountedItems) {
+        return false;
+    }
+
+    const mountedIndexList = Array.from(mountedIndices);
+    const hasItemBeforeInitialTarget = range.first >= initialScrollIndex || mountedIndexList.some((index) => index < initialScrollIndex);
+    const hasItemAfterInitialTarget = range.last <= initialScrollIndex || mountedIndexList.some((index) => index > initialScrollIndex);
+
+    return hasItemBeforeInitialTarget && hasItemAfterInitialTarget;
+}
+
+/**
+ * Inverted FlashList `scrollToIndex` with `-listHeight / 2` places the row's bottom edge at mid-viewport.
+ * Adjust from that baseline to land either the row's top edge or vertical center on mid-viewport.
+ */
+function getMeasuredLinkedRowScrollViewOffset(listHeight: number, layoutHeight: number) {
+    const midViewportOffset = -listHeight / 2;
+
+    if (layoutHeight > listHeight) {
+        return midViewportOffset + layoutHeight;
+    }
+
+    return midViewportOffset + layoutHeight / 2;
+}
+
+function getMeasuredLinkedRowScrollPosition(listHeight: number, layoutHeight: number): MeasuredLinkedRowScrollPosition {
+    if (layoutHeight > listHeight) {
+        return {viewOffset: getMeasuredLinkedRowScrollViewOffset(listHeight, layoutHeight)};
+    }
+
+    return {viewPosition: 0.5};
+}
+
+function computeInitialViewportRange(listHeight: number, initialScrollIndex: number, visibleActionCount: number): InitialViewportRange | undefined {
+    if (listHeight <= 0 || initialScrollIndex < 0) {
+        return undefined;
+    }
+
+    const estimatedVisibleReportActions = Math.max(1, Math.ceil(listHeight / INITIAL_TARGET_REPORT_ACTION_ESTIMATED_HEIGHT));
+    const radius = Math.ceil(estimatedVisibleReportActions / 2) + INITIAL_VIEWPORT_OVERSCAN_ITEMS;
+    const first = Math.max(initialScrollIndex - radius, 0);
+    const last = Math.min(initialScrollIndex + radius, visibleActionCount - 1);
+
+    return {
+        first,
+        last,
+        requiredMountedItems: Math.min(estimatedVisibleReportActions, last - first + 1),
+    };
+}
+
+function findInitialScrollIndex<T>(sortedVisibleReportActions: T[], keyExtractor: (item: T) => string, initialScrollKey: string | undefined) {
+    if (!initialScrollKey) {
+        return -1;
+    }
+
+    return sortedVisibleReportActions.findIndex((item) => keyExtractor(item) === initialScrollKey);
+}
+
+export type {InitialViewportRange, InitialViewportResetSession, MeasuredLinkedRowScrollPosition};
+export {
+    computeInitialViewportRange,
+    findInitialScrollIndex,
+    getMeasuredLinkedRowScrollPosition,
+    getMeasuredLinkedRowScrollViewOffset,
+    isInitialViewportCovered,
+    isUnreadMarkerOnlyInitialScrollKeyChange,
+};