[TS migration] Migrate 'OptionRow.js' component to TypeScript

src/components/OfflineWithFeedback.tsx

@@ -18,13 +18,13 @@ import MessagesRow from './MessagesRow';
 
 type OfflineWithFeedbackProps = ChildrenProps & {
     /** The type of action that's pending  */
-    pendingAction: OnyxCommon.PendingAction;
+    pendingAction?: OnyxCommon.PendingAction;
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
 
     /** The errors to display  */
-    errors?: OnyxCommon.Errors;
+    errors?: OnyxCommon.Errors | null;
 
     /** Whether we should show the error messages */
     shouldShowErrorMessages?: boolean;
@@ -56,7 +56,7 @@ type OfflineWithFeedbackProps = ChildrenProps & {
 
 type StrikethroughProps = Partial<ChildrenProps> & {style: Array<ViewStyle | TextStyle | ImageStyle>};
 
-function omitBy<T>(obj: Record<string, T> | undefined, predicate: (value: T) => boolean) {
+function omitBy<T>(obj: Record<string, T> | undefined | null, predicate: (value: T) => boolean) {
     // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
     return Object.fromEntries(Object.entries(obj ?? {}).filter(([_, value]) => !predicate(value)));
 }

src/languages/en.ts

@@ -114,6 +114,7 @@ export default {
         add: 'Add',
         resend: 'Resend',
         save: 'Save',
+        select: 'Select',
         saveChanges: 'Save changes',
         submit: 'Submit',
         rotate: 'Rotate',

src/languages/es.ts

@@ -98,6 +98,7 @@ export default {
         new: 'Nuevo',
         search: 'Buscar',
         searchWithThreeDots: 'Buscar...',
+        select: 'Seleccionar',
         next: 'Siguiente',
         previous: 'Anterior',
         goBack: 'Volver',

src/libs/ReportUtils.ts

@@ -9,6 +9,7 @@ import React from 'react';
 import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import type {SrcProps} from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import CONST from '@src/CONST';
@@ -316,14 +317,25 @@ type OptimisticIOUReport = Pick<
 >;
 type DisplayNameWithTooltips = Array<Pick<PersonalDetails, 'accountID' | 'pronouns' | 'displayName' | 'login' | 'avatar'>>;
 
+type CustomIcon = {
+    src: (props: SrcProps) => React.ReactNode;
+    color?: string;
+};
+
 type OptionData = {
+    text: string;
     alternateText?: string | null;
     allReportErrors?: Errors | null;
     brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | '' | null;
     tooltipText?: string | null;
+    alternateTextMaxLines?: number;
+    boldStyle?: boolean;
+    customIcon?: CustomIcon;
+    descriptiveText?: string;
     subtitle?: string | null;
     login?: string | null;
     accountID?: number | null;
+    pronouns?: string;
     status?: string | null;
     phoneNumber?: string | null;
     isUnread?: boolean | null;
@@ -1435,7 +1447,7 @@ function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = f
 }
 
 function getDisplayNamesWithTooltips(
-    personalDetailsList: PersonalDetails[] | PersonalDetailsList,
+    personalDetailsList: PersonalDetails[] | PersonalDetailsList | OptionData[],
     isMultipleParticipantReport: boolean,
     shouldFallbackToHidden = true,
 ): DisplayNameWithTooltips {

src/libs/SidebarUtils.ts

@@ -245,6 +245,7 @@ function getOptionData(
     }
 
     const result: ReportUtils.OptionData = {
+        text: '',
         alternateText: null,
         allReportErrors: null,
         brickRoadIndicator: null,

src/styles/utils/index.ts

@@ -383,7 +383,7 @@ function getWidthStyle(width: number): ViewStyle {
 /**
  * Returns a style with backgroundColor and borderColor set to the same color
  */
-function getBackgroundAndBorderStyle(backgroundColor: string): ViewStyle {
+function getBackgroundAndBorderStyle(backgroundColor: string | undefined): ViewStyle {
     return {
         backgroundColor,
         borderColor: backgroundColor,

src/types/onyx/Report.ts

@@ -153,8 +153,7 @@ type Report = {
     nonReimbursableTotal?: number;
     isHidden?: boolean;
     isChatRoom?: boolean;
-    participantsList?: Array<Partial<PersonalDetails>>;
-    text?: string;
+    participantsList?: PersonalDetails[];
     privateNotes?: Record<number, Note>;
     isLoadingPrivateNotes?: boolean;