Skip to content

Commit

Permalink
Merge pull request #50575 from Expensify/revert-49510-fix/49084
Browse files Browse the repository at this point in the history
[CP Staging] Revert "fix: search header flickering on selection mode"
  • Loading branch information
mjasikowski authored Oct 10, 2024
2 parents 36c45f4 + f030433 commit 9d86f30
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 40 deletions.
8 changes: 1 addition & 7 deletions src/components/Search/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
const {selectionMode} = useMobileSelectionMode(false);
const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading} = useSearchContext();
const {selectionMode} = useMobileSelectionMode();
const [offset, setOffset] = useState(0);

const {type, status, sortBy, sortOrder, hash} = queryJSON;
Expand Down Expand Up @@ -379,11 +379,6 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
onTurnOnSelectionMode={(item) => item && toggleTransaction(item)}
onCheckboxPress={toggleTransaction}
onSelectAll={toggleAllTransactions}
isSelected={(item) =>
status !== CONST.SEARCH.STATUS.EXPENSE.ALL && SearchUtils.isReportListItemType(item)
? item.transactions.some((transaction) => selectedTransactions[transaction.keyForList]?.isSelected)
: !!item.isSelected
}
customListHeader={
!isLargeScreenWidth ? null : (
<SearchTableHeader
Expand All @@ -397,7 +392,6 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr
/>
)
}
shouldAutoTurnOff={false}
onScroll={onSearchListScroll}
canSelectMultiple={type !== CONST.SEARCH.DATA_TYPES.CHAT && canSelectMultiple}
customListHeaderHeight={searchHeaderHeight}
Expand Down
38 changes: 5 additions & 33 deletions src/components/SelectionListWithModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {ForwardedRef} from 'react';
import React, {forwardRef, useEffect, useRef, useState} from 'react';
import React, {forwardRef, useEffect, useState} from 'react';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import Modal from '@components/Modal';
Expand All @@ -14,12 +14,10 @@ import CONST from '@src/CONST';
type SelectionListWithModalProps<TItem extends ListItem> = BaseSelectionListProps<TItem> & {
turnOnSelectionModeOnLongPress?: boolean;
onTurnOnSelectionMode?: (item: TItem | null) => void;
shouldAutoTurnOff?: boolean;
isSelected?: (item: TItem) => boolean;
};

function SelectionListWithModal<TItem extends ListItem>(
{turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, shouldAutoTurnOff, isSelected, ...rest}: SelectionListWithModalProps<TItem>,
{turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, sections, ...rest}: SelectionListWithModalProps<TItem>,
ref: ForwardedRef<SelectionListHandle>,
) {
const [isModalVisible, setIsModalVisible] = useState(false);
Expand All @@ -28,47 +26,21 @@ function SelectionListWithModal<TItem extends ListItem>(
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component
// See https://github.com/Expensify/App/issues/48675 for more details
const {isSmallScreenWidth} = useResponsiveLayout();
const {selectionMode} = useMobileSelectionMode(shouldAutoTurnOff);
// Check if selection should be on when the modal is opened
const wasSelectionOnRef = useRef(false);
// Keep track of the number of selected items to determine if we should turn off selection mode
const selectionRef = useRef(0);
const {selectionMode} = useMobileSelectionMode(true);

useEffect(() => {
// We can access 0 index safely as we are not displaying multiple sections in table view
const selectedItems = sections[0].data.filter((item) => {
if (isSelected) {
return isSelected(item);
}
return !!item.isSelected;
});
selectionRef.current = selectedItems.length;

const selectedItems = sections[0].data.filter((item) => item.isSelected);
if (!isSmallScreenWidth) {
if (selectedItems.length === 0) {
turnOffMobileSelectionMode();
}
return;
}
if (!wasSelectionOnRef.current && selectedItems.length > 0) {
wasSelectionOnRef.current = true;
}
if (selectedItems.length > 0 && !selectionMode?.isEnabled) {
turnOnMobileSelectionMode();
} else if (selectedItems.length === 0 && selectionMode?.isEnabled && !wasSelectionOnRef.current) {
turnOffMobileSelectionMode();
}
}, [sections, selectionMode, isSmallScreenWidth, isSelected]);

useEffect(
() => () => {
if (selectionRef.current !== 0) {
return;
}
turnOffMobileSelectionMode();
},
[],
);
}, [sections, selectionMode, isSmallScreenWidth]);

const handleLongPressRow = (item: TItem) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
Expand Down

0 comments on commit 9d86f30

Please sign in to comment.