diff --git a/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx b/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx index 1e97b286df3a..6d97c9475b2a 100644 --- a/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx +++ b/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx @@ -1,6 +1,7 @@ -import React, {useMemo} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import * as Expensicons from '@components/Icon/Expensicons'; +import SearchBar from '@components/SearchBar'; import SelectionList from '@components/SelectionList'; import type {ListItem} from '@components/SelectionList/ListItem/types'; import UserListItem from '@components/SelectionList/ListItem/UserListItem'; @@ -8,10 +9,12 @@ import Text from '@components/Text'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import useSearchResults from '@hooks/useSearchResults'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import {getActivePoliciesWithExpenseChatAndPerDiemEnabled, getPerDiemCustomUnit, getPolicy, sortWorkspacesBySelected} from '@libs/PolicyUtils'; import {getDefaultWorkspaceAvatar, getPolicyExpenseChat} from '@libs/ReportUtils'; +import tokenizedSearch from '@libs/tokenizedSearch'; import {setCustomUnitID, setMoneyRequestCategory, setMoneyRequestParticipants} from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -70,6 +73,20 @@ function IOURequestStepPerDiemWorkspace({ })); }, [allPolicies, currentUserLogin, selectedWorkspace, localeCompare]); + const filterWorkspace = useCallback((workspaceOption: WorkspaceListItem, searchInput: string) => { + const results = tokenizedSearch([workspaceOption], searchInput, (option) => [option.text ?? '']); + return results.length > 0; + }, []); + + const sortWorkspaces = useCallback( + (data: WorkspaceListItem[]) => { + return data.sort((a, b) => localeCompare(a.text ?? '', b?.text ?? '')); + }, + [localeCompare], + ); + + const [inputValue, setInputValue, filteredWorkspaceOptions] = useSearchResults(workspaceOptions, filterWorkspace, sortWorkspaces); + const selectWorkspace = (item: WorkspaceListItem) => { const policyExpenseReportID = getPolicyExpenseChat(accountID, item.value)?.reportID; if (!policyExpenseReportID) { @@ -95,12 +112,21 @@ function IOURequestStepPerDiemWorkspace({ return ( <> - - {translate('iou.chooseWorkspace')} - + {workspaceOptions.length > CONST.SEARCH_ITEM_LIMIT ? ( + 0 && filteredWorkspaceOptions.length === 0} + /> + ) : ( + + {translate('iou.chooseWorkspace')} + + )}