Skip to content

Commit

Permalink
Merge pull request #56053 from Expensify/revert-55078-@szymczak/add-s…
Browse files Browse the repository at this point in the history 
…earch-input-to-mobile-search-page

(cherry picked from commit 649c720)

(CP triggered by mountiny)
  • Loading branch information
@mountiny @OSBotify
mountiny authored and OSBotify committed Jan 30, 2025
1 parent b473984 commit cedf153
Show file tree
Hide file tree
Showing 24 changed files with 673 additions and 687 deletions.
20 changes: 0 additions & 20 deletions patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch
View file

This file was deleted.

193 changes: 97 additions & 96 deletions ...rch/SearchPageHeader/SearchPageHeader.tsx → src/components/Search/SearchPageHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback, useMemo, useState} from 'react';
import {InteractionManager, View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
Expand All @@ -9,8 +10,6 @@ import DecisionModal from '@components/DecisionModal';
import * as Expensicons from '@components/Icon/Expensicons';
import {usePersonalDetails} from '@components/OnyxProvider';
import {useProductTrainingContext} from '@components/ProductTrainingContext';
import {useSearchContext} from '@components/Search/SearchContext';
import type {PaymentData, SearchQueryJSON} from '@components/Search/types';
import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
import useActiveWorkspace from '@hooks/useActiveWorkspace';
import useLocalize from '@hooks/useLocalize';
Expand All @@ -29,20 +28,22 @@ import {
import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
import Navigation from '@libs/Navigation/Navigation';
import {getAllTaxRates, hasVBBA} from '@libs/PolicyUtils';
import {buildFilterFormValuesFromQuery} from '@libs/SearchQueryUtils';
import {buildFilterFormValuesFromQuery, isCannedSearchQuery} from '@libs/SearchQueryUtils';
import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type DeepValueOf from '@src/types/utils/DeepValueOf';
import {useSearchContext} from './SearchContext';
import SearchPageHeaderInput from './SearchPageHeaderInput';
import type {PaymentData, SearchQueryJSON} from './types';

type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; searchRouterListVisible?: boolean; onSearchRouterFocus?: () => void};
type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};

type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;

function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFocus}: SearchPageHeaderProps) {
function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
const {translate} = useLocalize();
const theme = useTheme();
const styles = useThemeStyles();
Expand All @@ -67,12 +68,24 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);

const [isScreenFocused, setIsScreenFocused] = useState(false);

const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
isScreenFocused,
);

const {status, hash} = queryJSON;

useFocusEffect(
useCallback(() => {
setIsScreenFocused(true);
return () => {
setIsScreenFocused(false);
};
}, []),
);

const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});

const handleDeleteExpenses = () => {
Expand Down Expand Up @@ -302,106 +315,94 @@ function SearchPageHeader({queryJSON, searchRouterListVisible, onSearchRouterFoc
styles.textWrap,
]);

const onFiltersButtonPress = useCallback(() => {
if (shouldUseNarrowLayout) {
if (selectionMode?.isEnabled) {
return (
<View>
<SearchSelectedNarrow
options={headerButtonsOptions}
itemsLength={selectedTransactionsKeys.length}
/>
<ConfirmModal
isVisible={isDeleteExpensesConfirmModalVisible}
onConfirm={handleDeleteExpenses}
onCancel={() => {
setIsDeleteExpensesConfirmModalVisible(false);
}}
title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
<DecisionModal
title={translate('common.youAppearToBeOffline')}
prompt={translate('common.offlinePrompt')}
isSmallScreenWidth={isSmallScreenWidth}
onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
secondOptionText={translate('common.buttonConfirm')}
isVisible={isOfflineModalVisible}
onClose={() => setIsOfflineModalVisible(false)}
/>
<DecisionModal
title={translate('common.downloadFailedTitle')}
prompt={translate('common.downloadFailedDescription')}
isSmallScreenWidth={isSmallScreenWidth}
onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
secondOptionText={translate('common.buttonConfirm')}
isVisible={isDownloadErrorModalVisible}
onClose={() => setIsDownloadErrorModalVisible(false)}
/>
</View>
);
}
return null;
}

const onFiltersButtonPress = () => {
hideProductTrainingTooltip();
const filterFormValues = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, reports, taxRates);
updateAdvancedFilters(filterFormValues);

Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
}, [allCards, currencyList, hideProductTrainingTooltip, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);

const InputRightComponent = useMemo(() => {
return headerButtonsOptions.length > 0 ? (
<ButtonWithDropdownMenu
onPress={() => null}
shouldAlwaysShowDropdownMenu
buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
options={headerButtonsOptions}
isSplitButton={false}
shouldUseStyleUtilityForAnchorPosition
/>
) : (
<EducationalTooltip
shouldRender={shouldShowProductTrainingTooltip}
anchorAlignment={{
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
}}
shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
wrapperStyle={styles.productTrainingTooltipWrapper}
renderTooltipContent={renderProductTrainingTooltip}
onTooltipPress={onFiltersButtonPress}
>
<Button
innerStyles={[styles.searchRouterInputResults, styles.borderNone, styles.bgTransparent]}
icon={Expensicons.Filters}
onPress={onFiltersButtonPress}
/>
</EducationalTooltip>
);
}, [
headerButtonsOptions,
onFiltersButtonPress,
renderProductTrainingTooltip,
selectedTransactionsKeys.length,
shouldShowProductTrainingTooltip,
styles.bgTransparent,
styles.borderNone,
styles.productTrainingTooltipWrapper,
styles.searchRouterInputResults,
translate,
]);
};

if (shouldUseNarrowLayout && selectionMode?.isEnabled) {
return (
<View>
<SearchSelectedNarrow
options={headerButtonsOptions}
itemsLength={selectedTransactionsKeys.length}
/>
<ConfirmModal
isVisible={isDeleteExpensesConfirmModalVisible}
onConfirm={handleDeleteExpenses}
onCancel={() => {
setIsDeleteExpensesConfirmModalVisible(false);
}}
title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
<DecisionModal
title={translate('common.youAppearToBeOffline')}
prompt={translate('common.offlinePrompt')}
isSmallScreenWidth={isSmallScreenWidth}
onSecondOptionSubmit={() => setIsOfflineModalVisible(false)}
secondOptionText={translate('common.buttonConfirm')}
isVisible={isOfflineModalVisible}
onClose={() => setIsOfflineModalVisible(false)}
/>
<DecisionModal
title={translate('common.downloadFailedTitle')}
prompt={translate('common.downloadFailedDescription')}
isSmallScreenWidth={isSmallScreenWidth}
onSecondOptionSubmit={() => setIsDownloadErrorModalVisible(false)}
secondOptionText={translate('common.buttonConfirm')}
isVisible={isDownloadErrorModalVisible}
onClose={() => setIsDownloadErrorModalVisible(false)}
/>
</View>
);
}
const isCannedQuery = isCannedSearchQuery(queryJSON);

return (
<>
<SearchPageHeaderInput
searchRouterListVisible={searchRouterListVisible}
onSearchRouterFocus={onSearchRouterFocus}
queryJSON={queryJSON}
inputRightComponent={InputRightComponent}
/>
<SearchPageHeaderInput queryJSON={queryJSON}>
{headerButtonsOptions.length > 0 ? (
<ButtonWithDropdownMenu
onPress={() => null}
shouldAlwaysShowDropdownMenu
buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
customText={translate('workspace.common.selected', {count: selectedTransactionsKeys.length})}
options={headerButtonsOptions}
isSplitButton={false}
shouldUseStyleUtilityForAnchorPosition
/>
) : (
<EducationalTooltip
shouldRender={shouldShowProductTrainingTooltip}
anchorAlignment={{
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
}}
shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
wrapperStyle={styles.productTrainingTooltipWrapper}
renderTooltipContent={renderProductTrainingTooltip}
onTooltipPress={onFiltersButtonPress}
>
<Button
innerStyles={!isCannedQuery && [styles.searchRouterInputResults, styles.borderNone]}
text={translate('search.filtersHeader')}
icon={Expensicons.Filters}
onPress={onFiltersButtonPress}
/>
</EducationalTooltip>
)}
</SearchPageHeaderInput>
<ConfirmModal
isVisible={isDeleteExpensesConfirmModalVisible}
onConfirm={handleDeleteExpenses}
Expand Down
Loading

0 comments on commit cedf153

Please sign in to comment.