Merge pull request #38610 from lukemorawski/NewChatPage_list_refactor_2

New chat page list refactor 2

src/components/SelectionList/InviteMemberListItem.tsx

@@ -13,9 +13,9 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
-import type {InviteMemberListItemProps} from './types';
+import type {InviteMemberListItemProps, ListItem} from './types';
 
-function InviteMemberListItem({
+function InviteMemberListItem<TItem extends ListItem>({
     item,
     isFocused,
     showTooltip,
@@ -26,7 +26,7 @@ function InviteMemberListItem({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
-}: InviteMemberListItemProps) {
+}: InviteMemberListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();

src/components/SelectionList/RadioListItem.tsx

@@ -4,9 +4,9 @@ import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
-import type {RadioListItemProps} from './types';
+import type {ListItem, RadioListItemProps} from './types';
 
-function RadioListItem({
+function RadioListItem<TItem extends ListItem>({
     item,
     isFocused,
     showTooltip,
@@ -17,7 +17,7 @@ function RadioListItem({
     rightHandSideComponent,
     isMultilineSupported = false,
     onFocus,
-}: RadioListItemProps) {
+}: RadioListItemProps<TItem>) {
     const styles = useThemeStyles();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
     const indentsLength = (item.text?.length ?? 0) - (fullTitle?.length ?? 0);

src/components/SelectionList/TableListItem.tsx

@@ -10,9 +10,9 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
-import type {TableListItemProps} from './types';
+import type {ListItem, TableListItemProps} from './types';
 
-function TableListItem({
+function TableListItem<TItem extends ListItem>({
     item,
     isFocused,
     showTooltip,
@@ -24,7 +24,7 @@ function TableListItem({
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
     onFocus,
-}: TableListItemProps) {
+}: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();

src/components/SelectionList/UserListItem.tsx

@@ -14,9 +14,9 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
-import type {UserListItemProps} from './types';
+import type {ListItem, UserListItemProps} from './types';
 
-function UserListItem({
+function UserListItem<TItem extends ListItem>({
     item,
     isFocused,
     showTooltip,
@@ -27,7 +27,7 @@ function UserListItem({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
-}: UserListItemProps) {
+}: UserListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();

src/components/SelectionList/types.ts

@@ -12,7 +12,7 @@ import type RadioListItem from './RadioListItem';
 import type TableListItem from './TableListItem';
 import type UserListItem from './UserListItem';
 
-type CommonListItemProps<TItem> = {
+type CommonListItemProps<TItem extends ListItem> = {
     /** Whether this item is focused (for arrow key controls) */
     isFocused?: boolean;
 
@@ -122,9 +122,9 @@ type ListItem = {
     brickRoadIndicator?: BrickRoad | '' | null;
 };
 
-type ListItemProps = CommonListItemProps<ListItem> & {
+type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** The section list item */
-    item: ListItem;
+    item: TItem;
 
     /** Additional styles to apply to text */
     style?: StyleProp<TextStyle>;
@@ -146,10 +146,10 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     errors?: Errors | ReceiptErrors | null;
     pendingAction?: PendingAction | null;
     FooterComponent?: ReactElement;
-    children?: ReactElement<ListItemProps> | ((hovered: boolean) => ReactElement<ListItemProps>);
+    children?: ReactElement<ListItemProps<TItem>> | ((hovered: boolean) => ReactElement<ListItemProps<TItem>>);
 };
 
-type UserListItemProps = ListItemProps & {
+type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     /** Errors that this user may contain */
     errors?: Errors | ReceiptErrors | null;
 
@@ -160,11 +160,11 @@ type UserListItemProps = ListItemProps & {
     FooterComponent?: ReactElement;
 };
 
-type InviteMemberListItemProps = UserListItemProps;
+type InviteMemberListItemProps<TItem extends ListItem> = UserListItemProps<TItem>;
 
-type RadioListItemProps = ListItemProps;
+type RadioListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
 
-type TableListItemProps = ListItemProps;
+type TableListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
 
 type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem;
 
@@ -294,7 +294,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     shouldDelayFocus?: boolean;
 
     /** Component to display on the right side of each child */
-    rightHandSideComponent?: ((item: ListItem) => ReactElement<ListItem> | null) | ReactElement | null;
+    rightHandSideComponent?: ((item: TItem) => ReactElement<TItem> | null) | ReactElement | null;
 
     /** Whether to show the loading indicator for new options */
     isLoadingNewOptions?: boolean;

src/hooks/useStyledSafeAreaInsets.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line no-restricted-imports
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useStyleUtils from './useStyleUtils';
+
+/**
+ * Custom hook to get the styled safe area insets.
+ * This hook utilizes the `SafeAreaInsetsContext` to retrieve the current safe area insets
+ * and applies styling adjustments using the `useStyleUtils` hook.
+ *
+ * @returns  An object containing the styled safe area insets and additional styles.
+ * @returns  .paddingTop The top padding adjusted for safe area.
+ * @returns  .paddingBottom The bottom padding adjusted for safe area.
+ * @returns  .insets The safe area insets object or undefined if not available.
+ * @returns  .safeAreaPaddingBottomStyle An object containing the bottom padding style adjusted for safe area.
+ *
+ * @example
+ * // How to use this hook in a component
+ * function MyComponent() {
+ *     const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets();
+ *
+ *     // Use these values to style your component accordingly
+ * }
+ */
+function useStyledSafeAreaInsets() {
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    return {
+        paddingTop,
+        paddingBottom,
+        insets: insets ?? undefined,
+        safeAreaPaddingBottomStyle: {paddingBottom},
+    };
+}
+
+export default useStyledSafeAreaInsets;

src/libs/OptionsListUtils.ts

@@ -2220,6 +2220,18 @@ function formatSectionsFromSearchTerm(
     };
 }
 
+/**
+ * Helper method to get the `keyForList` for the first option in the OptionsList
+ */
+function getFirstKeyForList(data?: Option[] | null) {
+    if (!data?.length) {
+        return '';
+    }
+
+    const firstNonEmptyDataObj = data[0];
+
+    return firstNonEmptyDataObj.keyForList ? firstNonEmptyDataObj.keyForList : '';
+}
 /**
  * Filters options based on the search input value
  */
@@ -2341,6 +2353,7 @@ export {
     createOptionFromReport,
     getReportOption,
     getTaxRatesSection,
+    getFirstKeyForList,
 };
 
-export type {MemberForList, CategorySection, CategoryTreeSection, Options, OptionList, SearchOption, PayeePersonalDetails, Category, TaxRatesOption};
+export type {MemberForList, CategorySection, CategoryTreeSection, Options, OptionList, SearchOption, PayeePersonalDetails, Category, TaxRatesOption, Option};