From 16db5342a9a6d9b5313aa4bd51a63fc6ee61e8ac Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Wed, 19 Nov 2025 11:54:04 +0100 Subject: [PATCH 1/3] Make AssigneeStep use new SelectionList --- .../companyCards/assignCard/AssigneeStep.tsx | 54 +++++++++---------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index 72b90defe924..47cd641cec65 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -2,15 +2,15 @@ import React, {useMemo, useState} from 'react'; import {Keyboard} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; -import * as Expensicons from '@components/Icon/Expensicons'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; -import SelectionList from '@components/SelectionListWithSections'; -import type {ListItem} from '@components/SelectionListWithSections/types'; -import UserListItem from '@components/SelectionListWithSections/UserListItem'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/ListItem/UserListItem'; +import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; import useCardFeeds from '@hooks/useCardFeeds'; import useCardsList from '@hooks/useCardsList'; import useDebouncedState from '@hooks/useDebouncedState'; +import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; @@ -47,6 +47,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { const [list] = useCardsList(policy?.id, feed); const [cardFeeds] = useCardFeeds(policy?.id); const filteredCardList = getFilteredCardList(list, cardFeeds?.settings?.oAuthAccountDetails?.[feed], workspaceCardFeeds); + const icons = useMemoizedLazyExpensifyIcons(['FallbackAvatar'] as const); const isEditing = assignCard?.isEditing; @@ -107,7 +108,6 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { }; const shouldShowSearchInput = policy?.employeeList && Object.keys(policy.employeeList).length >= MINIMUM_MEMBER_TO_SHOW_SEARCH; - const textInputLabel = shouldShowSearchInput ? translate('workspace.card.issueNewCard.findMember') : undefined; const membersDetails = useMemo(() => { let membersList: ListItem[] = []; @@ -130,7 +130,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { isSelected: selectedMember === email, icons: [ { - source: personalDetail?.avatar ?? Expensicons.FallbackAvatar, + source: personalDetail?.avatar ?? icons.FallbackAvatar, name: formatPhoneNumber(email), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, @@ -142,35 +142,34 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { membersList = sortAlphabetically(membersList, 'text', localeCompare); return membersList; - }, [isOffline, policy?.employeeList, selectedMember, formatPhoneNumber, localeCompare]); + }, [policy?.employeeList, localeCompare, isOffline, selectedMember, icons.FallbackAvatar, formatPhoneNumber]); - const sections = useMemo(() => { + const asignees = useMemo(() => { if (!debouncedSearchTerm) { - return [ - { - data: membersDetails, - shouldShow: true, - }, - ]; + return membersDetails; } const searchValue = getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode).toLowerCase(); const filteredOptions = tokenizedSearch(membersDetails, searchValue, (option) => [option.text ?? '', option.alternateText ?? '']); - return [ - { - title: undefined, - data: filteredOptions, - shouldShow: true, - }, - ]; + return filteredOptions; }, [membersDetails, debouncedSearchTerm, countryCode]); const headerMessage = useMemo(() => { const searchValue = debouncedSearchTerm.trim().toLowerCase(); - return getHeaderMessage(sections[0].data.length !== 0, false, searchValue, countryCode, false); - }, [debouncedSearchTerm, sections, countryCode]); + return getHeaderMessage(asignees.length !== 0, false, searchValue, countryCode, false); + }, [debouncedSearchTerm, asignees, countryCode]); + + const textInputOptions = useMemo( + () => ({ + textInputLabel: shouldShowSearchInput ? translate('workspace.card.issueNewCard.findMember') : undefined, + textInputValue: searchTerm, + onChangeText: setSearchTerm, + headerMessage, + }), + [headerMessage, searchTerm, setSearchTerm, shouldShowSearchInput, translate], + ); return ( {translate('workspace.companyCards.whoNeedsCardAssigned')} Date: Wed, 19 Nov 2025 13:37:35 +0100 Subject: [PATCH 2/3] Fix spelling --- .../workspace/companyCards/assignCard/AssigneeStep.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index 47cd641cec65..77fd48ac9686 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -144,7 +144,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { return membersList; }, [policy?.employeeList, localeCompare, isOffline, selectedMember, icons.FallbackAvatar, formatPhoneNumber]); - const asignees = useMemo(() => { + const assignees = useMemo(() => { if (!debouncedSearchTerm) { return membersDetails; } @@ -158,8 +158,8 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { const headerMessage = useMemo(() => { const searchValue = debouncedSearchTerm.trim().toLowerCase(); - return getHeaderMessage(asignees.length !== 0, false, searchValue, countryCode, false); - }, [debouncedSearchTerm, asignees, countryCode]); + return getHeaderMessage(assignees.length !== 0, false, searchValue, countryCode, false); + }, [debouncedSearchTerm, assignees, countryCode]); const textInputOptions = useMemo( () => ({ @@ -182,7 +182,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { > {translate('workspace.companyCards.whoNeedsCardAssigned')} Date: Wed, 19 Nov 2025 17:54:12 +0100 Subject: [PATCH 3/3] Fix input --- src/components/SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/types.ts | 3 +++ src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx | 5 +++-- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 80c7e0bf78f0..b583f8ef36cf 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -65,6 +65,7 @@ function BaseSelectionList({ showScrollIndicator = true, canSelectMultiple = false, disableKeyboardShortcuts = false, + disableMaintainingScrollPosition = false, shouldUseUserSkeletonView, shouldShowTooltips = true, shouldIgnoreFocus = false, @@ -410,6 +411,7 @@ function BaseSelectionList({ style={style?.listStyle as ViewStyle} initialScrollIndex={initialFocusedIndex} onScrollBeginDrag={onScrollBeginDrag} + maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}} ListHeaderComponent={ <> {customListHeaderContent} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index fddf503cdf2a..2ec3636c8cdb 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -111,6 +111,9 @@ type SelectionListProps = { /** Whether keyboard shortcuts should be disabled */ disableKeyboardShortcuts?: boolean; + /** Whether scroll position should change when focused item changes */ + disableMaintainingScrollPosition?: boolean; + /** Whether to use the user skeleton view */ shouldUseUserSkeletonView?: boolean; diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index 77fd48ac9686..7540f23c43a8 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -163,8 +163,8 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { const textInputOptions = useMemo( () => ({ - textInputLabel: shouldShowSearchInput ? translate('workspace.card.issueNewCard.findMember') : undefined, - textInputValue: searchTerm, + label: shouldShowSearchInput ? translate('workspace.card.issueNewCard.findMember') : undefined, + text: searchTerm, onChangeText: setSearchTerm, headerMessage, }), @@ -189,6 +189,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { initiallyFocusedItemKey={selectedMember} shouldUpdateFocusedIndex addBottomSafeAreaPadding + disableMaintainingScrollPosition footerContent={