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

src/components/Icon/index.tsx

@@ -103,3 +103,4 @@ class Icon extends PureComponent<IconProps> {
 }
 
 export default withTheme(withThemeStyles(withStyleUtils(Icon)));
+export type {SrcProps};

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/components/Pressable/GenericPressable/types.ts

@@ -19,7 +19,7 @@ type RequiredAccessibilityLabel =
            * @example 'Search'
            * @example 'Close'
            */
-          accessibilityLabel: string;
+          accessibilityLabel?: string;
       }
     | {
           /**

src/languages/en.ts

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

src/languages/es.ts

@@ -95,6 +95,7 @@ export default {
         optional: 'Opcional',
         new: 'Nuevo',
         search: 'Buscar',
+        select: 'Seleccionar',
         next: 'Siguiente',
         previous: 'Anterior',
         goBack: 'Volver',

src/libs/ReportUtils.ts

@@ -10,6 +10,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';
@@ -312,14 +313,24 @@ type OptimisticIOUReport = Pick<
 >;
 type DisplayNameWithTooltips = Array<Pick<PersonalDetails, 'accountID' | 'pronouns' | 'displayName' | 'login' | 'avatar'>>;
 
+type CustomIcon = {
+    src: (props: SrcProps) => React.ReactNode;
+    color?: string;
+};
+
 type OptionData = {
     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;
@@ -1449,7 +1460,7 @@ function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = f
 }
 
 function getDisplayNamesWithTooltips(
-    personalDetailsList: PersonalDetails[] | PersonalDetailsList,
+    personalDetailsList: PersonalDetails[] | PersonalDetailsList | OptionData[],
     isMultipleParticipantReport: boolean,
     shouldFallbackToHidden = true,
 ): DisplayNameWithTooltips {

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