diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 48e732d4a182..fdaa0850f8eb 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -78,6 +78,7 @@ function BaseSelectionList({ shouldPreventDefaultFocusOnSelectRow = false, shouldShowTextInput = !!textInputOptions?.label, shouldHighlightSelectedItem = true, + shouldUseDefaultRightHandSideCheckmark, shouldDisableHoverStyle = false, setShouldDisableHoverStyle = () => {}, }: SelectionListProps) { @@ -330,6 +331,7 @@ function BaseSelectionList({ isDisabled={isItemDisabled} canSelectMultiple={canSelectMultiple} shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} + shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} isMultilineSupported={isRowMultilineSupported} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 3823399aad25..4dc16689a915 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -148,6 +148,9 @@ type SelectionListProps = Partial & { /** Whether to highlight the selected item */ shouldHighlightSelectedItem?: boolean; + /** Whether to show the default right hand side checkmark */ + shouldUseDefaultRightHandSideCheckmark?: boolean; + /** Whether hover style should be disabled */ shouldDisableHoverStyle?: boolean; setShouldDisableHoverStyle?: React.Dispatch>; diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx index 9e07c3fb7907..2e536cddd8b3 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx @@ -1,11 +1,12 @@ import {emailSelector} from '@selectors/Session'; -import React, {useCallback, useState} from 'react'; +import React, {useCallback, useMemo, useRef, useState} from 'react'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons'; -import SelectionList from '@components/SelectionListWithSections'; -import UserListItem from '@components/SelectionListWithSections/UserListItem'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/ListItem/UserListItem'; +import type {SelectionListHandle} from '@components/SelectionList/types'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -37,10 +38,11 @@ function SearchFiltersWorkspacePage() { const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const shouldShowLoadingIndicator = isLoadingApp && !isOffline; + const selectionListRef = useRef(null); const [selectedOptions, setSelectedOptions] = useState(() => (searchAdvancedFiltersForm?.policyID ? Array.from(searchAdvancedFiltersForm?.policyID) : [])); - const {sections, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({ + const {data, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({ policies, currentUserLogin, shouldShowPendingDeletePolicy: false, @@ -58,6 +60,10 @@ function SearchFiltersWorkspacePage() { if (optionIndex === -1 && option?.policyID) { setSelectedOptions([...selectedOptions, option.policyID]); + + requestAnimationFrame(() => { + selectionListRef.current?.scrollAndHighlightItem([option.keyForList]); + }); } else { const newSelectedOptions = [...selectedOptions.slice(0, optionIndex), ...selectedOptions.slice(optionIndex + 1)]; setSelectedOptions(newSelectedOptions); @@ -75,6 +81,16 @@ function SearchFiltersWorkspacePage() { setSelectedOptions([]); }, []); + const textInputOptions = useMemo( + () => ({ + label: shouldShowSearchInput ? translate('common.search') : undefined, + value: searchTerm, + onChangeText: setSearchTerm, + headerMessage: shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : '', + }), + [searchTerm, setSearchTerm, shouldShowNoResultsFoundMessage, shouldShowSearchInput, translate], + ); + return ( ) : ( + ref={selectionListRef} + data={data} ListItem={UserListItem} - sections={sections} + onSelectRow={selectWorkspace} + textInputOptions={textInputOptions} canSelectMultiple shouldUseDefaultRightHandSideCheckmark - textInputLabel={shouldShowSearchInput ? translate('common.search') : undefined} - textInputValue={searchTerm} - onChangeText={setSearchTerm} - onSelectRow={selectWorkspace} - headerMessage={shouldShowNoResultsFoundMessage ? translate('common.noResultsFound') : ''} showLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd} + disableMaintainingScrollPosition footerContent={