Skip to content

Commit e114e9a

Browse files
francoislfrancoisl
authored
Merge pull request Expensify#66586 from Expensify/francois-revert-65878
2 parents 8463088 + 5e3b018 commit e114e9a

9 files changed

Lines changed: 145 additions & 166 deletions

File tree

‎src/components/Search/index.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -519,18 +519,15 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
519519
const baseKey = isChat
520520
? `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(item as ReportActionListItemType).reportActionID}`
521521
: `${ONYXKEYS.COLLECTION.TRANSACTION}${(item as TransactionListItemType).transactionID}`;
522-
523522
// Check if the base key matches the newSearchResultKey (TransactionListItemType)
524523
const isBaseKeyMatch = baseKey === newSearchResultKey;
525-
526524
// Check if any transaction within the transactions array (TransactionGroupListItemType) matches the newSearchResultKey
527525
const isAnyTransactionMatch =
528526
!isChat &&
529527
(item as TransactionGroupListItemType)?.transactions?.some((transaction) => {
530528
const transactionKey = `${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`;
531529
return transactionKey === newSearchResultKey;
532530
});
533-
534531
// Determine if either the base key or any transaction key matches
535532
const shouldAnimateInHighlight = isBaseKeyMatch || isAnyTransactionMatch;
536533

‎src/components/SelectionList/Search/CardListItemHeader.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,17 @@ type CardListItemHeaderProps<TItem extends ListItem> = {
2828
/** Whether this section items disabled for selection */
2929
isDisabled?: boolean | null;
3030

31+
/** Whether the item is hovered */
32+
isHovered?: boolean;
33+
3134
/** Whether the item is focused */
3235
isFocused?: boolean;
3336

3437
/** Whether selecting multiple transactions at once is allowed */
3538
canSelectMultiple: boolean | undefined;
3639
};
3740

38-
function CardListItemHeader<TItem extends ListItem>({card: cardItem, onCheckboxPress, isDisabled, isFocused, canSelectMultiple}: CardListItemHeaderProps<TItem>) {
41+
function CardListItemHeader<TItem extends ListItem>({card: cardItem, onCheckboxPress, isDisabled, isHovered, isFocused, canSelectMultiple}: CardListItemHeaderProps<TItem>) {
3942
const theme = useTheme();
4043
const styles = useThemeStyles();
4144
const StyleUtils = useStyleUtils();
@@ -62,7 +65,8 @@ function CardListItemHeader<TItem extends ListItem>({card: cardItem, onCheckboxP
6265
}, [formattedDisplayName, illustrations, cardItem]);
6366

6467
const backgroundColor =
65-
StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
68+
StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
69+
theme.highlightBG;
6670

6771
// s77rt add total cell, action cell and collapse/expand button
6872

‎src/components/SelectionList/Search/ReportListItemHeader.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ type ReportListItemHeaderProps<TItem extends ListItem> = {
3434
/** Whether this section items disabled for selection */
3535
isDisabled?: boolean | null;
3636

37+
/** Whether the item is hovered */
38+
isHovered?: boolean;
39+
3740
/** Whether the item is focused */
3841
isFocused?: boolean;
3942

@@ -159,6 +162,7 @@ function ReportListItemHeader<TItem extends ListItem>({
159162
onSelectRow,
160163
onCheckboxPress,
161164
isDisabled,
165+
isHovered,
162166
isFocused,
163167
canSelectMultiple,
164168
}: ReportListItemHeaderProps<TItem>) {
@@ -171,7 +175,8 @@ function ReportListItemHeader<TItem extends ListItem>({
171175
const showUserInfo = (reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo) || (reportItem.type === CONST.REPORT.TYPE.EXPENSE && !!reportItem?.from);
172176

173177
const avatarBorderColor =
174-
StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;
178+
StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
179+
theme.highlightBG;
175180

176181
const handleOnButtonPress = () => {
177182
handleActionButtonPress(currentSearchHash, reportItem, () => onSelectRow(reportItem as unknown as TItem), shouldUseNarrowLayout && !!canSelectMultiple);

‎src/components/SelectionList/Search/TransactionGroupListItem.tsx‎

Lines changed: 61 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import React, {useCallback, useMemo, useRef} from 'react';
1+
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {ValueOf} from 'type-fest';
4-
import {getButtonRole} from '@components/Button/utils';
5-
import OfflineWithFeedback from '@components/OfflineWithFeedback';
6-
import {PressableWithFeedback} from '@components/Pressable';
74
import type {SearchGroupBy} from '@components/Search/types';
5+
import BaseListItem from '@components/SelectionList/BaseListItem';
86
import type {
97
ListItem,
108
TransactionCardGroupListItemType,
@@ -17,11 +15,8 @@ import type {
1715
import Text from '@components/Text';
1816
import TransactionItemRow from '@components/TransactionItemRow';
1917
import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
20-
import useHover from '@hooks/useHover';
2118
import useLocalize from '@hooks/useLocalize';
2219
import useResponsiveLayout from '@hooks/useResponsiveLayout';
23-
import useStyleUtils from '@hooks/useStyleUtils';
24-
import useSyncFocus from '@hooks/useSyncFocus';
2520
import useTheme from '@hooks/useTheme';
2621
import useThemeStyles from '@hooks/useThemeStyles';
2722
import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils';
@@ -76,7 +71,16 @@ function TransactionGroupListItem<TItem extends ListItem>({
7671
backgroundColor: theme.highlightBG,
7772
});
7873

79-
const pressableStyle = [styles.transactionGroupListItemStyle, item.isSelected && styles.activeComponentBG];
74+
const listItemPressableStyle = [
75+
styles.selectionListPressableItemWrapper,
76+
styles.pv2,
77+
styles.ph0,
78+
styles.overflowHidden,
79+
// Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
80+
styles.bgTransparent,
81+
item.isSelected && styles.activeComponentBG,
82+
styles.mh0,
83+
];
8084

8185
const openReportInRHP = (transactionItem: TransactionListItemType) => {
8286
const backTo = Navigation.getActiveRoute();
@@ -108,7 +112,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
108112
COLUMNS.ACTION,
109113
] satisfies Array<ValueOf<typeof COLUMNS>>;
110114

111-
const getHeader = useMemo(() => {
115+
const getHeader = (isHovered: boolean) => {
112116
const headers: Record<SearchGroupBy, React.JSX.Element> = {
113117
[CONST.SEARCH.GROUP_BY.REPORTS]: (
114118
<ReportListItemHeader
@@ -117,6 +121,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
117121
onSelectRow={onSelectRow}
118122
onCheckboxPress={onCheckboxPress}
119123
isDisabled={isDisabledOrEmpty}
124+
isHovered={isHovered}
120125
isFocused={isFocused}
121126
canSelectMultiple={canSelectMultiple}
122127
/>
@@ -134,6 +139,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
134139
card={groupItem as TransactionCardGroupListItemType}
135140
onCheckboxPress={onCheckboxPress}
136141
isDisabled={isDisabledOrEmpty}
142+
isHovered={isHovered}
137143
isFocused={isFocused}
138144
canSelectMultiple={canSelectMultiple}
139145
/>
@@ -145,46 +151,31 @@ function TransactionGroupListItem<TItem extends ListItem>({
145151
}
146152

147153
return headers[groupBy];
148-
}, [groupItem, policy, onSelectRow, onCheckboxPress, isDisabledOrEmpty, isFocused, canSelectMultiple, groupBy]);
149-
150-
const StyleUtils = useStyleUtils();
151-
const {hovered, bind} = useHover();
152-
const pressableRef = useRef<View>(null);
153-
154-
const onPress = useCallback(() => {
155-
onSelectRow(item);
156-
}, [item, onSelectRow]);
157-
158-
const onLongPress = useCallback(() => {
159-
onLongPressRow?.(item);
160-
}, [item, onLongPressRow]);
161-
162-
useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
154+
};
163155

164156
return (
165-
<OfflineWithFeedback pendingAction={item.pendingAction}>
166-
<PressableWithFeedback
167-
onMouseEnter={bind.onMouseEnter}
168-
onMouseLeave={bind.onMouseLeave}
169-
ref={pressableRef}
170-
onLongPress={onLongPress}
171-
onPress={onPress}
172-
disabled={isDisabled && !item.isSelected}
173-
accessibilityLabel={item.text ?? ''}
174-
role={getButtonRole(true)}
175-
isNested
176-
hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, item.isSelected && styles.activeComponentBG]}
177-
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}}
178-
id={item.keyForList ?? ''}
179-
style={[
180-
pressableStyle,
181-
isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
182-
]}
183-
onFocus={onFocus}
184-
wrapperStyle={[styles.mb2, styles.mh5, animatedHighlightStyle, styles.userSelectNone]}
185-
>
186-
<View style={styles.flex1}>
187-
{getHeader}
157+
<BaseListItem
158+
item={item}
159+
pressableStyle={listItemPressableStyle}
160+
wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
161+
containerStyle={[styles.mb2]}
162+
isFocused={isFocused}
163+
isDisabled={isDisabled}
164+
showTooltip={showTooltip}
165+
canSelectMultiple={canSelectMultiple}
166+
onSelectRow={onSelectRow}
167+
onLongPressRow={onLongPressRow}
168+
pendingAction={item.pendingAction}
169+
keyForList={item.keyForList}
170+
onFocus={onFocus}
171+
shouldShowBlueBorderOnFocus
172+
shouldSyncFocus={shouldSyncFocus}
173+
hoverStyle={item.isSelected && styles.activeComponentBG}
174+
pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
175+
>
176+
{(hovered) => (
177+
<View style={[styles.flex1]}>
178+
{getHeader(hovered)}
188179
{isEmpty ? (
189180
<View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.mnh13]}>
190181
<Text
@@ -196,31 +187,32 @@ function TransactionGroupListItem<TItem extends ListItem>({
196187
</View>
197188
) : (
198189
groupItem.transactions.map((transaction) => (
199-
<TransactionItemRow
200-
key={transaction.transactionID}
201-
transactionItem={transaction}
202-
isSelected={!!transaction.isSelected}
203-
dateColumnSize={dateColumnSize}
204-
amountColumnSize={amountColumnSize}
205-
taxAmountColumnSize={taxAmountColumnSize}
206-
shouldShowTooltip={showTooltip}
207-
shouldUseNarrowLayout={!isLargeScreenWidth}
208-
shouldShowCheckbox={!!canSelectMultiple}
209-
onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
210-
columns={columns}
211-
onButtonPress={() => {
212-
openReportInRHP(transaction);
213-
}}
214-
isParentHovered={hovered}
215-
columnWrapperStyles={[styles.ph3, styles.pv1Half]}
216-
isReportItemChild
217-
isInSingleTransactionReport={groupItem.transactions.length === 1}
218-
/>
190+
<View key={transaction.transactionID}>
191+
<TransactionItemRow
192+
transactionItem={transaction}
193+
isSelected={!!transaction.isSelected}
194+
dateColumnSize={dateColumnSize}
195+
amountColumnSize={amountColumnSize}
196+
taxAmountColumnSize={taxAmountColumnSize}
197+
shouldShowTooltip={showTooltip}
198+
shouldUseNarrowLayout={!isLargeScreenWidth}
199+
shouldShowCheckbox={!!canSelectMultiple}
200+
onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
201+
columns={columns}
202+
onButtonPress={() => {
203+
openReportInRHP(transaction);
204+
}}
205+
isParentHovered={hovered}
206+
columnWrapperStyles={[styles.ph3, styles.pv1Half]}
207+
isReportItemChild
208+
isInSingleTransactionReport={groupItem.transactions.length === 1}
209+
/>
210+
</View>
219211
))
220212
)}
221213
</View>
222-
</PressableWithFeedback>
223-
</OfflineWithFeedback>
214+
)}
215+
</BaseListItem>
224216
);
225217
}
226218

0 commit comments

Comments
 (0)