Merge pull request Expensify#29315 from JKobrynski/migrateUseReportSc…

…rollManagerToTypeScript

[No QA] [TS Migration] Migrate useReportScrollManager and ReportScreenContext to TypeScript

src/hooks/useReportScrollManager/index.native.js → src/hooks/useReportScrollManager/index.native.ts

@@ -1,27 +1,26 @@
 import {useContext, useCallback} from 'react';
 import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import ReportScrollManagerData from './types';
 
-function useReportScrollManager() {
+function useReportScrollManager(): ReportScrollManagerData {
     const flatListRef = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
-     *
-     * @param {Object} index
      */
-    const scrollToIndex = (index) => {
-        if (!flatListRef.current) {
+    const scrollToIndex = (index: number) => {
+        if (!flatListRef?.current) {
             return;
         }
 
-        flatListRef.current.scrollToIndex(index);
+        flatListRef.current.scrollToIndex({index});
     };
 
     /**
      * Scroll to the bottom of the flatlist.
      */
     const scrollToBottom = useCallback(() => {
-        if (!flatListRef.current) {
+        if (!flatListRef?.current) {
             return;
         }
 

src/hooks/useReportScrollManager/index.js → src/hooks/useReportScrollManager/index.ts

@@ -1,29 +1,27 @@
 import {useContext, useCallback} from 'react';
 import {ActionListContext} from '../../pages/home/ReportScreenContext';
+import ReportScrollManagerData from './types';
 
-function useReportScrollManager() {
+function useReportScrollManager(): ReportScrollManagerData {
     const flatListRef = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
      * we are editing a comment.
-     *
-     * @param {Object} index
-     * @param {Boolean} isEditing
      */
-    const scrollToIndex = (index, isEditing) => {
-        if (!flatListRef.current || isEditing) {
+    const scrollToIndex = (index: number, isEditing?: boolean) => {
+        if (!flatListRef?.current || isEditing) {
             return;
         }
 
-        flatListRef.current.scrollToIndex(index);
+        flatListRef.current.scrollToIndex({index, animated: true});
     };
 
     /**
      * Scroll to the bottom of the flatlist.
      */
     const scrollToBottom = useCallback(() => {
-        if (!flatListRef.current) {
+        if (!flatListRef?.current) {
             return;
         }
 

src/hooks/useReportScrollManager/types.ts

@@ -0,0 +1,9 @@
+import {ActionListContextType} from '../../pages/home/ReportScreenContext';
+
+type ReportScrollManagerData = {
+    ref: ActionListContextType;
+    scrollToIndex: (index: number, isEditing?: boolean) => void;
+    scrollToBottom: () => void;
+};
+
+export default ReportScrollManagerData;

src/pages/home/ReportScreenContext.ts

@@ -0,0 +1,17 @@
+import {RefObject, createContext} from 'react';
+import {FlatList, GestureResponderEvent} from 'react-native';
+
+type ReactionListRef = {
+    showReactionList: (event: GestureResponderEvent | undefined, reactionListAnchor: Element, emojiName: string, reportActionID: string) => void;
+    hideReactionList: () => void;
+    isActiveReportAction: (actionID: number | string) => boolean;
+};
+
+type ActionListContextType = RefObject<FlatList<unknown>> | null;
+type ReactionListContextType = RefObject<ReactionListRef> | null;
+
+const ActionListContext = createContext<ActionListContextType>(null);
+const ReactionListContext = createContext<ReactionListContextType>(null);
+
+export {ActionListContext, ReactionListContext};
+export type {ReactionListRef, ActionListContextType, ReactionListContextType};

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -291,7 +291,7 @@ function ReportActionItemMessageEdit(props) {
         // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.
         if (props.index === 0) {
             const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-                reportScrollManager.scrollToIndex({animated: true, index: props.index}, false);
+                reportScrollManager.scrollToIndex(props.index, false);
                 keyboardDidHideListener.remove();
             });
         }
@@ -406,7 +406,7 @@ function ReportActionItemMessageEdit(props) {
                             style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
                             onFocus={() => {
                                 setIsFocused(true);
-                                reportScrollManager.scrollToIndex({animated: true, index: props.index}, true);
+                                reportScrollManager.scrollToIndex(props.index, true);
                                 setShouldShowComposeInputKeyboardAware(false);
 
                                 // Clear active report action when another action gets focused