Merge pull request #34733 from Expensify/revert-34008-@szymczak/Selec…

…tionList Revert "[TS migration] Migrate 'SelectionList' component to TypeScript"
Expensify · Jan 18, 2024 · 0b677c9 · 0b677c9
2 parents 5592cad + 4da5701
commit 0b677c9
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 505 deletions.
diff --git a/src/components/SectionList/index.android.tsx b/src/components/SectionList/index.android.tsx
@@ -1,22 +1,19 @@
 import React, {forwardRef} from 'react';
-import type {ForwardedRef} from 'react';
 import {SectionList as RNSectionList} from 'react-native';
-import type {SectionListProps} from 'react-native';
+import type ForwardedSectionList from './types';
 
 // eslint-disable-next-line react/function-component-definition
-function SectionListWithRef<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}
-            // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
-            // run out memory images stop loading and appear as grey circles
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            removeClippedSubviews
-        />
-    );
-}
+const SectionListWithRef: ForwardedSectionList = (props, ref) => (
+    <RNSectionList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+        // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
+        // run out memory images stop loading and appear as grey circles
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        removeClippedSubviews
+    />
+);
 
 SectionListWithRef.displayName = 'SectionListWithRef';
 

diff --git a/src/components/SectionList/index.tsx b/src/components/SectionList/index.tsx
@@ -1,17 +1,16 @@
 import React, {forwardRef} from 'react';
-import type {ForwardedRef} from 'react';
 import {SectionList as RNSectionList} from 'react-native';
-import type {SectionListProps} from 'react-native';
+import type ForwardedSectionList from './types';
 
 // eslint-disable-next-line react/function-component-definition
-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}
-        />
-    );
-}
+const SectionList: ForwardedSectionList = (props, ref) => (
+    <RNSectionList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+    />
+);
+
+SectionList.displayName = 'SectionList';
 
 export default forwardRef(SectionList);
diff --git a/src/components/SectionList/types.ts b/src/components/SectionList/types.ts
@@ -0,0 +1,9 @@
+import type {ForwardedRef} from 'react';
+import type {SectionList, SectionListProps} from 'react-native';
+
+type ForwardedSectionList = {
+    (props: SectionListProps<SectionList>, ref: ForwardedRef<SectionList>): React.ReactNode;
+    displayName: string;
+};
+
+export default ForwardedSectionList;
diff --git a/...components/SelectionList/BaseListItem.tsx → src/components/SelectionList/BaseListItem.js b/...components/SelectionList/BaseListItem.tsx → src/components/SelectionList/BaseListItem.js
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -11,10 +12,10 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
-import type {BaseListItemProps, RadioItem, User} from './types';
+import {baseListItemPropTypes} from './selectionListPropTypes';
 import UserListItem from './UserListItem';
 
-function BaseListItem<TItem extends User | RadioItem>({
+function BaseListItem({
     item,
     isFocused = false,
     isDisabled = false,
@@ -25,12 +26,13 @@ function BaseListItem<TItem extends User | RadioItem>({
     onDismissError = () => {},
     rightHandSideComponent,
     keyForList,
-}: BaseListItemProps<TItem>) {
+}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const isRadioItem = item.rightElement === undefined;
+    const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
+    const ListItem = isUserItem ? UserListItem : RadioListItem;
 
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {
@@ -68,7 +70,7 @@ function BaseListItem<TItem extends User | RadioItem>({
                         styles.justifyContentBetween,
                         styles.sidebarLinkInner,
                         styles.userSelectNone,
-                        isRadioItem ? styles.optionRow : styles.peopleRow,
+                        isUserItem ? styles.peopleRow : styles.optionRow,
                         isFocused && styles.sidebarLinkActive,
                     ]}
                 >
@@ -98,32 +100,20 @@ function BaseListItem<TItem extends User | RadioItem>({
                             </View>
                         </View>
                     )}
-
-                    {isRadioItem ? (
-                        <RadioListItem
-                            item={item}
-                            textStyles={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre, item.alternateText ? styles.mb1 : null]}
-                            alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
-                            isDisabled={isDisabled}
-                            onSelectRow={() => onSelectRow(item)}
-                            showTooltip={showTooltip}
-                        />
-                    ) : (
-                        <UserListItem
-                            item={item}
-                            textStyles={[
-                                styles.optionDisplayName,
-                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                styles.sidebarLinkTextBold,
-                                styles.pre,
-                                item.alternateText ? styles.mb1 : null,
-                            ]}
-                            alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
-                            isDisabled={isDisabled}
-                            onSelectRow={() => onSelectRow(item)}
-                            showTooltip={showTooltip}
-                        />
-                    )}
+                    <ListItem
+                        item={item}
+                        textStyles={[
+                            styles.optionDisplayName,
+                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                            styles.sidebarLinkTextBold,
+                            styles.pre,
+                            item.alternateText ? styles.mb1 : null,
+                        ]}
+                        alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                        isDisabled={isDisabled}
+                        onSelectRow={onSelectRow}
+                        showTooltip={showTooltip}
+                    />
                     {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
@@ -139,7 +129,7 @@ function BaseListItem<TItem extends User | RadioItem>({
                     )}
                     {rightHandSideComponentRender()}
                 </View>
-                {!!item.invitedSecondaryLogin && (
+                {Boolean(item.invitedSecondaryLogin) && (
                     <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
                         {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
                     </Text>
@@ -150,5 +140,6 @@ function BaseListItem<TItem extends User | RadioItem>({
 }
 
 BaseListItem.displayName = 'BaseListItem';
+BaseListItem.propTypes = baseListItemPropTypes;
 
 export default BaseListItem;