diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx new file mode 100644 index 000000000000..fdb06828901e --- /dev/null +++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx @@ -0,0 +1,37 @@ +import React, {useRef, useState} from 'react'; +import {View} from 'react-native'; +import type {PopoverMenuItem} from '@components/PopoverMenu'; +import ThreeDotsMenu from '@components/ThreeDotsMenu'; +import CONST from '@src/CONST'; + +type SavedSearchItemThreeDotMenuProps = { + menuItems: PopoverMenuItem[]; +}; + +function SavedSearchItemThreeDotMenu({menuItems}: SavedSearchItemThreeDotMenuProps) { + const threeDotsMenuContainerRef = useRef(null); + const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0}); + + return ( + + { + threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => { + setThreeDotsMenuPosition({ + horizontal: x + width, + vertical: y, + }); + }); + }} + anchorPosition={threeDotsMenuPosition} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + /> + + ); +} + +export default SavedSearchItemThreeDotMenu; diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index ce30c0a8d782..8a7a989579f5 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -10,7 +10,6 @@ import {usePersonalDetails} from '@components/OnyxProvider'; import ScrollView from '@components/ScrollView'; import type {SearchQueryJSON} from '@components/Search/types'; import Text from '@components/Text'; -import ThreeDotsMenu from '@components/ThreeDotsMenu'; import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -29,6 +28,7 @@ import ROUTES from '@src/ROUTES'; import type {SaveSearchItem} from '@src/types/onyx/SaveSearch'; import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; import type IconAsset from '@src/types/utils/IconAsset'; +import SavedSearchItemThreeDotMenu from './SavedSearchItemThreeDotMenu'; import SearchTypeMenuNarrow from './SearchTypeMenuNarrow'; type SavedSearchMenuItem = MenuItemBaseProps & { @@ -102,6 +102,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { const jsonQuery = SearchUtils.buildSearchQueryJSON(item.query) ?? ({} as SearchQueryJSON); title = SearchUtils.getSearchHeaderTitle(jsonQuery, personalDetails, cardList, reports, taxRates); } + const baseMenuItem: SavedSearchMenuItem = { key, title, @@ -113,16 +114,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { SearchActions.clearAllFilters(); Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? ''})); }, - rightComponent: ( - - ), + rightComponent: , styles: [styles.alignItemsCenter], };