diff --git a/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx new file mode 100644 index 000000000000..c7b554c98e83 --- /dev/null +++ b/src/components/SelectionListWithSections/SingleSelectWithAvatarListItem.tsx @@ -0,0 +1,100 @@ +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 variables from '@styles/variables'; +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 CIRCULAR_BORDER_RADIUS = 999; + + 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.optionRow, styles.pv0, styles.pv3, styles.w100], + }; + }, [icon, item, wrapperStyle, styles.optionRowCompact, styles.optionRow, styles.pv0, styles.pv3, styles.w100]); + + return ( + + ); +} + +export default SingleSelectWithAvatarListItem; diff --git a/src/pages/domain/Admins/DomainAddAdminPage.tsx b/src/pages/domain/Admins/DomainAddAdminPage.tsx index a31d802e2f46..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 InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem'; 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'; @@ -150,7 +150,8 @@ function DomainAddAdminPage({route}: DomainAddAdminProps) { />