[TS migration] Migrate 'SelectionList' component to TypeScript

src/components/SectionList/index.tsx

@@ -1,16 +1,17 @@
 import React, {forwardRef} from 'react';
+import type {ForwardedRef} from 'react';
 import {SectionList as RNSectionList} from 'react-native';
-import type ForwardedSectionList from './types';
+import type {SectionListProps} from 'react-native';
 
 // eslint-disable-next-line react/function-component-definition
-const SectionList: ForwardedSectionList = (props, ref) => (
-    <RNSectionList
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-    />
-);
-
-SectionList.displayName = 'SectionList';
+function SectionList<ItemT, SectionT>(props: SectionListProps<ItemT, SectionT>, ref: ForwardedRef<RNSectionList<ItemT, SectionT>>) {
+    return (
+        <RNSectionList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
+}
 
 export default forwardRef(SectionList);

src/components/SectionList/types.ts

@@ -1,8 +1,8 @@
 import type {ForwardedRef} from 'react';
 import type {SectionList, SectionListProps} from 'react-native';
 
-type ForwardedSectionList = {
-    (props: SectionListProps<SectionList>, ref: ForwardedRef<SectionList>): React.ReactNode;
+type ForwardedSectionList<ItemT, SectionT> = {
+    (props: SectionListProps<ItemT, SectionT>, ref: ForwardedRef<SectionList<ItemT, SectionT>>): React.ReactNode;
     displayName: string;
 };
 

src/components/SelectionList/BaseListItem.js → src/components/SelectionList/BaseListItem.tsx

@@ -1,4 +1,3 @@
-import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -12,7 +11,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
-import {baseListItemPropTypes} from './selectionListPropTypes';
+import type {BaseListItemProps} from './types';
 import UserListItem from './UserListItem';
 
 function BaseListItem({
@@ -25,13 +24,12 @@ function BaseListItem({
     onSelectRow,
     onDismissError = () => {},
     keyForList,
-}) {
+}: BaseListItemProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
-    const ListItem = isUserItem ? UserListItem : RadioListItem;
+    const isUserItem = !item.rightElement === undefined;
 
     return (
         <OfflineWithFeedback
@@ -42,14 +40,14 @@ function BaseListItem({
         >
             <PressableWithFeedback
                 onPress={() => onSelectRow(item)}
-                disabled={isDisabled}
+                disabled={item.isDisabled}
                 accessibilityLabel={item.text}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
                 hoverStyle={styles.hoveredComponentBG}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
-                nativeID={keyForList}
+                testID={keyForList}
             >
                 <View
                     style={[
@@ -84,20 +82,38 @@ function BaseListItem({
                             </View>
                         </View>
                     )}
-                    <ListItem
-                        item={item}
-                        textStyles={[
-                            styles.optionDisplayName,
-                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                            isUserItem || item.isSelected || item.alternateText ? styles.sidebarLinkTextBold : null,
-                            styles.pre,
-                            item.alternateText ? styles.mb1 : null,
-                        ]}
-                        alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]}
-                        isDisabled={isDisabled}
-                        onSelectRow={onSelectRow}
-                        showTooltip={showTooltip}
-                    />
+
+                    {item.rightElement === undefined ? (
+                        <RadioListItem
+                            item={item}
+                            textStyles={[
+                                styles.optionDisplayName,
+                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                item.isSelected ?? item.alternateText ? styles.sidebarLinkTextBold : null,
+                                styles.pre,
+                                item.alternateText ? styles.mb1 : null,
+                            ]}
+                            alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]}
+                            isDisabled={isDisabled}
+                            onSelectRow={onSelectRow}
+                            showTooltip={showTooltip}
+                        />
+                    ) : (
+                        <UserListItem
+                            item={item}
+                            textStyles={[
+                                styles.optionDisplayName,
+                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                styles.sidebarLinkTextBold,
+                                styles.pre,
+                                item.alternateText ? styles.mb1 : null,
+                            ]}
+                            alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]}
+                            isDisabled={isDisabled}
+                            onSelectRow={onSelectRow}
+                            showTooltip={showTooltip}
+                        />
+                    )}
                     {!canSelectMultiple && item.isSelected && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
@@ -112,7 +128,7 @@ function BaseListItem({
                         </View>
                     )}
                 </View>
-                {Boolean(item.invitedSecondaryLogin) && (
+                {!!item.invitedSecondaryLogin && (
                     <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
                         {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
                     </Text>
@@ -123,6 +139,5 @@ function BaseListItem({
 }
 
 BaseListItem.displayName = 'BaseListItem';
-BaseListItem.propTypes = baseListItemPropTypes;
 
 export default BaseListItem;