From 44dd4e9ae67b89ebac67a9ed8bbd5e836401c7d2 Mon Sep 17 00:00:00 2001 From: Piyush Date: Mon, 9 Feb 2026 09:41:31 +0530 Subject: [PATCH 1/6] Replace InviteMemberListItem with SingleSelectWithAvatarListItem in DomainAddAdminPage --- .../SingleSelectWithAvatarListItem.tsx | 97 +++++++++++++++++++ .../domain/Admins/DomainAddAdminPage.tsx | 5 +- 2 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx diff --git a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx new file mode 100644 index 000000000000..c2b4005016fb --- /dev/null +++ b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx @@ -0,0 +1,97 @@ +import React, {useCallback, useMemo} from 'react'; +import {View} from 'react-native'; +import Avatar from '@components/Avatar'; +import Checkbox from '@components/Checkbox'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import RadioListItem from './RadioListItem'; +import type {ListItem, SingleSelectListItemProps} from './types'; + +/** + * SingleSelectListItem mirrors the behavior of a default RadioListItem, but adds support + * for the new style of single selection lists. + */ +function SingleSelectWithAvatarListItem({ + item, + isFocused, + showTooltip, + isDisabled, + onSelectRow, + onDismissError, + shouldPreventEnterKeySubmit, + isMultilineSupported = false, + isAlternateTextMultilineSupported = false, + alternateTextNumberOfLines = 2, + onFocus, + shouldSyncFocus, + wrapperStyle, + titleStyles, + shouldHighlightSelectedItem = true, +}: SingleSelectListItemProps) { + const styles = useThemeStyles(); + const isSelected = item.isSelected; + const icon = item.icons?.at(0); + + const radioCheckboxComponent = useCallback(() => { + return ( + onSelectRow(item)} + /> + ); + }, [isSelected, item, onSelectRow]); + + const {itemWithAvatar, computedWrapperStyle} = useMemo(() => { + if (!icon) { + return { + itemWithAvatar: item, + computedWrapperStyle: [wrapperStyle, styles.optionRowCompact], + }; + } + + const avatarElement = ( + + + + ); + + return { + itemWithAvatar: {...item, leftElement: avatarElement}, + computedWrapperStyle: [wrapperStyle, styles.pv0, styles.mnh13], + }; + }, [icon, item, wrapperStyle, styles.mentionSuggestionsAvatarContainer, styles.mr5, styles.optionRowCompact, styles.pv0, styles.mnh13]); + + return ( + + ); +} + +export default SingleSelectWithAvatarListItem; diff --git a/src/pages/domain/Admins/DomainAddAdminPage.tsx b/src/pages/domain/Admins/DomainAddAdminPage.tsx index 41ec876e863b..0bc90483d29c 100644 --- a/src/pages/domain/Admins/DomainAddAdminPage.tsx +++ b/src/pages/domain/Admins/DomainAddAdminPage.tsx @@ -7,7 +7,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; // eslint-disable-next-line no-restricted-imports import SelectionList from '@components/SelectionListWithSections'; -import InviteMemberListItem from '@components/SelectionListWithSections/InviteMemberListItem'; +import SingleSelectWithAvatarListItem from '@components/SelectionListWithSections/SingleSelectWithAvatarListItem'; import type {Section} from '@components/SelectionListWithSections/types'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; @@ -145,7 +145,8 @@ function DomainAddAdminPage({route}: DomainAddAdminProps) { setSearchTerm(value)} From 97abea54376bd3f239ebf3eb2146edf95e5ecbc2 Mon Sep 17 00:00:00 2001 From: Piyush Date: Tue, 10 Feb 2026 09:57:58 +0530 Subject: [PATCH 2/6] Fix avatar size width && height ie. 40x40 --- .../SingleSelectWithAvatarListItem.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx index c2b4005016fb..c758528c5f42 100644 --- a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx +++ b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import Avatar from '@components/Avatar'; import Checkbox from '@components/Checkbox'; import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import RadioListItem from './RadioListItem'; import type {ListItem, SingleSelectListItemProps} from './types'; @@ -53,7 +54,7 @@ function SingleSelectWithAvatarListItem({ } const avatarElement = ( - + ({ avatarID={icon.id} type={icon.type ?? CONST.ICON_TYPE_AVATAR} fallbackIcon={icon.fallbackIcon} + iconAdditionalStyles={[{width: variables.avatarSizeNormal, height: variables.avatarSizeNormal}]} /> ); @@ -69,7 +71,7 @@ function SingleSelectWithAvatarListItem({ itemWithAvatar: {...item, leftElement: avatarElement}, computedWrapperStyle: [wrapperStyle, styles.pv0, styles.mnh13], }; - }, [icon, item, wrapperStyle, styles.mentionSuggestionsAvatarContainer, styles.mr5, styles.optionRowCompact, styles.pv0, styles.mnh13]); + }, [icon, item, wrapperStyle, styles.mr3, styles.optionRowCompact, styles.pv0, styles.mnh13]); return ( Date: Thu, 12 Feb 2026 11:19:48 +0530 Subject: [PATCH 3/6] fix vertical padding && minHeight --- .../SingleSelectWithAvatarListItem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx index c758528c5f42..b4c828f8bc3f 100644 --- a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx +++ b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx @@ -54,7 +54,7 @@ function SingleSelectWithAvatarListItem({ } const avatarElement = ( - + ({ avatarID={icon.id} type={icon.type ?? CONST.ICON_TYPE_AVATAR} fallbackIcon={icon.fallbackIcon} - iconAdditionalStyles={[{width: variables.avatarSizeNormal, height: variables.avatarSizeNormal}]} + iconAdditionalStyles={[{width: variables.avatarSizeNormal, height: variables.avatarSizeNormal}, styles.mr3]} /> ); return { itemWithAvatar: {...item, leftElement: avatarElement}, - computedWrapperStyle: [wrapperStyle, styles.pv0, styles.mnh13], + computedWrapperStyle: [wrapperStyle, styles.optionRow, styles.pv0, styles.pv3, styles.w100], }; - }, [icon, item, wrapperStyle, styles.mr3, styles.optionRowCompact, styles.pv0, styles.mnh13]); + }, [icon, item, wrapperStyle, styles.optionRowCompact, styles.optionRow, styles.pv0, styles.pv3, styles.w100]); return ( Date: Thu, 19 Feb 2026 11:04:04 +0530 Subject: [PATCH 4/6] Fix merge-conflicts --- src/pages/domain/Admins/DomainAddAdminPage.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/pages/domain/Admins/DomainAddAdminPage.tsx b/src/pages/domain/Admins/DomainAddAdminPage.tsx index 19755c4ca4e1..97b44e1d849f 100644 --- a/src/pages/domain/Admins/DomainAddAdminPage.tsx +++ b/src/pages/domain/Admins/DomainAddAdminPage.tsx @@ -4,10 +4,9 @@ import React, {useEffect, useRef, useState} from 'react'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -// eslint-disable-next-line no-restricted-imports -import SelectionList from '@components/SelectionListWithSections'; import SingleSelectWithAvatarListItem from '@components/SelectionListWithSections/SingleSelectWithAvatarListItem'; -import type {Section} from '@components/SelectionListWithSections/types'; +import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections'; +import type {Section} from '@components/SelectionList/SelectionListWithSections/types'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useSearchSelector from '@hooks/useSearchSelector'; @@ -153,15 +152,13 @@ function DomainAddAdminPage({route}: DomainAddAdminProps) { /> setSearchTerm(value)} - onSelectRow={(option: OptionData) => toggleSelection(option)} - onConfirm={inviteUser} - showScrollIndicator + onSelectRow={toggleSelection} + textInputOptions={textInputOptions} + confirmButtonOptions={{ + onConfirm: inviteUser, + }} showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd} shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} footerContent={footerContent} From 5dbc41f595a41e43c3e03c61d594c194f93f31ba Mon Sep 17 00:00:00 2001 From: Piyush Date: Tue, 24 Feb 2026 06:10:48 +0530 Subject: [PATCH 5/6] added named constant for circular border radius --- .../SingleSelectWithAvatarListItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx index b4c828f8bc3f..c7b554c98e83 100644 --- a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx +++ b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx @@ -32,12 +32,13 @@ function SingleSelectWithAvatarListItem({ const styles = useThemeStyles(); const isSelected = item.isSelected; const icon = item.icons?.at(0); + const CIRCULAR_BORDER_RADIUS = 999; const radioCheckboxComponent = useCallback(() => { return ( onSelectRow(item)} From bdd2df260f5b114eaca251092bb2d8b43d17cd6a Mon Sep 17 00:00:00 2001 From: Piyush Date: Tue, 24 Feb 2026 17:08:52 +0530 Subject: [PATCH 6/6] Fix prettier check --- src/pages/domain/Admins/DomainAddAdminPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/domain/Admins/DomainAddAdminPage.tsx b/src/pages/domain/Admins/DomainAddAdminPage.tsx index ee17c6df9fa1..e82394f717b7 100644 --- a/src/pages/domain/Admins/DomainAddAdminPage.tsx +++ b/src/pages/domain/Admins/DomainAddAdminPage.tsx @@ -4,9 +4,9 @@ import React, {useEffect, useRef, useState} from 'react'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import SingleSelectWithAvatarListItem from '@components/SelectionListWithSections/SingleSelectWithAvatarListItem'; import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections'; import type {Section} from '@components/SelectionList/SelectionListWithSections/types'; +import SingleSelectWithAvatarListItem from '@components/SelectionListWithSections/SingleSelectWithAvatarListItem'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useSearchSelector from '@hooks/useSearchSelector';