Skip to content

Commit f8fddc9

Browse files
SzymczakJSzymczakJ
committed
fix PR comments
1 parent 79795df commit f8fddc9

22 files changed

Lines changed: 128 additions & 111 deletions

‎src/components/MoneyReportHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -880,9 +880,9 @@ function MoneyReportHeader({
880880
[connectedIntegrationName, styles.noWrap, styles.textStrong, translate],
881881
);
882882

883-
const selectionMode = useMobileSelectionMode();
883+
const isMobileSelectionModeEnabled = useMobileSelectionMode();
884884

885-
if (selectionMode) {
885+
if (isMobileSelectionModeEnabled) {
886886
return (
887887
<HeaderWithBackButton
888888
title={translate('common.selectMultiple')}

‎src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function MoneyRequestReportActionsList({
155155

156156
const {selectedTransactionIDs, setSelectedTransactions, clearSelectedTransactions} = useSearchContext();
157157

158-
const selectionMode = useMobileSelectionMode();
158+
const isMobileSelectionModeEnabled = useMobileSelectionMode();
159159
const {
160160
options: selectedTransactionsOptions,
161161
handleDeleteTransactions,
@@ -554,7 +554,7 @@ function MoneyRequestReportActionsList({
554554
style={[styles.flex1]}
555555
ref={wrapperViewRef}
556556
>
557-
{shouldUseNarrowLayout && !!selectionMode && (
557+
{shouldUseNarrowLayout && isMobileSelectionModeEnabled && (
558558
<>
559559
<ButtonWithDropdownMenu
560560
onPress={() => null}

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ function MoneyRequestReportTransactionList({
136136
const {isMouseDownOnInput, setMouseUp} = useMouseContext();
137137

138138
const {selectedTransactionIDs, setSelectedTransactions, clearSelectedTransactions} = useSearchContext();
139-
const selectionMode = useMobileSelectionMode();
139+
const isMobileSelectionModeEnabled = useMobileSelectionMode();
140140

141141
const toggleTransaction = useCallback(
142142
(transactionID: string) => {
@@ -273,7 +273,7 @@ function MoneyRequestReportTransactionList({
273273
return;
274274
}
275275

276-
if (selectionMode) {
276+
if (isMobileSelectionModeEnabled) {
277277
toggleTransaction(transaction.transactionID);
278278
return;
279279
}
@@ -295,7 +295,7 @@ function MoneyRequestReportTransactionList({
295295
if (!isSmallScreenWidth) {
296296
return;
297297
}
298-
if (selectionMode) {
298+
if (isMobileSelectionModeEnabled) {
299299
toggleTransaction(transaction.transactionID);
300300
return;
301301
}
@@ -312,7 +312,7 @@ function MoneyRequestReportTransactionList({
312312
taxAmountColumnSize={taxAmountColumnSize}
313313
shouldShowTooltip
314314
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
315-
shouldShowCheckbox={!!selectionMode || !isSmallScreenWidth}
315+
shouldShowCheckbox={isMobileSelectionModeEnabled || !isSmallScreenWidth}
316316
onCheckboxPress={toggleTransaction}
317317
columns={allReportColumns}
318318
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
@@ -355,7 +355,7 @@ function MoneyRequestReportTransactionList({
355355
title={translate('common.select')}
356356
icon={Expensicons.CheckSquare}
357357
onPress={() => {
358-
if (!selectionMode) {
358+
if (!isMobileSelectionModeEnabled) {
359359
turnOnMobileSelectionMode();
360360
}
361361
toggleTransaction(selectedTransactionID);

‎src/components/Search/SearchContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ function SearchContextProvider({children}: ChildrenProps) {
113113
if (searchHashOrClearIDsFlag === searchContextData.currentSearchHash) {
114114
return;
115115
}
116+
116117
if (searchContextData.selectedReports.length === 0 && isEmptyObject(searchContextData.selectedTransactions) && !searchContextData.shouldTurnOffSelectionMode) {
117118
return;
118119
}

‎src/components/Search/SearchList.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
2020
import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
2121
import useKeyboardState from '@hooks/useKeyboardState';
2222
import useLocalize from '@hooks/useLocalize';
23-
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
2423
import useOnyx from '@hooks/useOnyx';
2524
import useResponsiveLayout from '@hooks/useResponsiveLayout';
2625
import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
@@ -78,6 +77,13 @@ type SearchListProps = Pick<FlatListPropsWithLayout<SearchListItem>, 'onScroll'
7877

7978
/** Invoked on mount and layout changes */
8079
onLayout?: () => void;
80+
81+
/** Whether mobile selection mode is enabled */
82+
isMobileSelectionModeEnabled: boolean;
83+
};
84+
85+
const keyExtractor = (item: SearchListItem, index: number) => {
86+
return item.keyForList ?? `${index}`;
8187
};
8288

8389
const onScrollToIndexFailed = () => {};
@@ -102,6 +108,7 @@ function SearchList(
102108
queryJSON,
103109
onViewableItemsChanged,
104110
onLayout,
111+
isMobileSelectionModeEnabled,
105112
}: SearchListProps,
106113
ref: ForwardedRef<SearchListHandle>,
107114
) {
@@ -126,7 +133,6 @@ function SearchList(
126133
const {isSmallScreenWidth} = useResponsiveLayout();
127134

128135
const [isModalVisible, setIsModalVisible] = useState(false);
129-
const selectionMode = useMobileSelectionMode();
130136
const [longPressedItem, setLongPressedItem] = useState<SearchListItem>();
131137

132138
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {
@@ -145,14 +151,14 @@ function SearchList(
145151
if ('transactions' in item && item.transactions.length === 0) {
146152
return;
147153
}
148-
if (selectionMode) {
154+
if (isMobileSelectionModeEnabled) {
149155
onCheckboxPress(item);
150156
return;
151157
}
152158
setLongPressedItem(item);
153159
setIsModalVisible(true);
154160
},
155-
[isFocused, isSmallScreenWidth, onCheckboxPress, selectionMode, shouldPreventLongPressRow],
161+
[isFocused, isSmallScreenWidth, onCheckboxPress, isMobileSelectionModeEnabled, shouldPreventLongPressRow],
156162
);
157163

158164
const turnOnSelectionMode = useCallback(() => {
@@ -326,10 +332,6 @@ function SearchList(
326332
const selectAllButtonVisible = canSelectMultiple && !SearchTableHeader;
327333
const isSelectAllChecked = selectedItemsLength > 0 && selectedItemsLength === flattenedTransactionWithoutPendingDelete.length;
328334

329-
const keyExtractor = useCallback((item: SearchListItem, index: number) => {
330-
return item.keyForList ?? `${index}`;
331-
}, []);
332-
333335
return (
334336
<View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
335337
{tableHeaderVisible && (

‎src/components/Search/SearchPageHeader/SearchFiltersBar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,10 @@ import type {SearchHeaderOptionValue} from './SearchPageHeader';
4343
type SearchFiltersBarProps = {
4444
queryJSON: SearchQueryJSON;
4545
headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
46+
isMobileSelectionModeEnabled: boolean;
4647
};
4748

48-
function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarProps) {
49+
function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionModeEnabled}: SearchFiltersBarProps) {
4950
const scrollRef = useRef<RNScrollView>(null);
5051

5152
// type, groupBy and status values are not guaranteed to respect the ts type as they come from user input
@@ -69,15 +70,14 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarPro
6970
const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
7071
const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true});
7172
const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
72-
const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
7373
const [searchResultsErrors] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true, selector: (data) => data?.errors});
7474

7575
const taxRates = getAllTaxRates();
7676
const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
7777
const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
7878

7979
const hasErrors = Object.keys(searchResultsErrors ?? {}).length > 0 && !isOffline;
80-
const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || !!selectionMode);
80+
const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || isMobileSelectionModeEnabled);
8181

8282
const [typeOptions, type] = useMemo(() => {
8383
const options = getTypeOptions(allPolicies, email);

‎src/components/Search/SearchPageHeader/SearchPageHeader.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import {View} from 'react-native';
33
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
44
import {useSearchContext} from '@components/Search/SearchContext';
55
import type {SearchQueryJSON} from '@components/Search/types';
6-
import useOnyx from '@hooks/useOnyx';
76
import useResponsiveLayout from '@hooks/useResponsiveLayout';
87
import SearchSelectedNarrow from '@pages/Search/SearchSelectedNarrow';
98
import type CONST from '@src/CONST';
10-
import ONYXKEYS from '@src/ONYXKEYS';
119
import type DeepValueOf from '@src/types/utils/DeepValueOf';
1210
import SearchPageHeaderInput from './SearchPageHeaderInput';
1311

@@ -18,18 +16,26 @@ type SearchPageHeaderProps = {
1816
onSearchRouterFocus?: () => void;
1917
headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
2018
handleSearch: (value: string) => void;
19+
isMobileSelectionModeEnabled: boolean;
2120
};
2221

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

25-
function SearchPageHeader({queryJSON, searchRouterListVisible, hideSearchRouterList, onSearchRouterFocus, headerButtonsOptions, handleSearch}: SearchPageHeaderProps) {
24+
function SearchPageHeader({
25+
queryJSON,
26+
searchRouterListVisible,
27+
hideSearchRouterList,
28+
onSearchRouterFocus,
29+
headerButtonsOptions,
30+
handleSearch,
31+
isMobileSelectionModeEnabled,
32+
}: SearchPageHeaderProps) {
2633
const {shouldUseNarrowLayout} = useResponsiveLayout();
2734
const {selectedTransactions} = useSearchContext();
28-
const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
2935

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

32-
if (shouldUseNarrowLayout && !!selectionMode) {
38+
if (shouldUseNarrowLayout && isMobileSelectionModeEnabled) {
3339
return (
3440
<View>
3541
<SearchSelectedNarrow

‎src/components/Search/index.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
88
import type {ReportActionListItemType, SearchListItem, SelectionListHandle, TransactionGroupListItemType, TransactionListItemType} from '@components/SelectionList/types';
99
import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
1010
import useLocalize from '@hooks/useLocalize';
11-
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
1211
import useNetwork from '@hooks/useNetwork';
1312
import useOnyx from '@hooks/useOnyx';
1413
import usePrevious from '@hooks/usePrevious';
@@ -61,6 +60,7 @@ type SearchProps = {
6160
contentContainerStyle?: StyleProp<ViewStyle>;
6261
searchResults?: SearchResults;
6362
handleSearch: (value: SearchParams) => void;
63+
isMobileSelectionModeEnabled: boolean;
6464
};
6565

6666
function mapTransactionItemToSelectedEntry(item: TransactionListItemType, reportActions: ReportAction[]): [string, SelectedTransactionInfo] {
@@ -136,7 +136,7 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact
136136
};
137137
}
138138

139-
function Search({queryJSON, searchResults, onSearchListScroll, contentContainerStyle, handleSearch}: SearchProps) {
139+
function Search({queryJSON, searchResults, onSearchListScroll, contentContainerStyle, handleSearch, isMobileSelectionModeEnabled}: SearchProps) {
140140
const {isOffline} = useNetwork();
141141
const {shouldUseNarrowLayout} = useResponsiveLayout();
142142
const styles = useThemeStyles();
@@ -157,7 +157,6 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
157157
isExportMode,
158158
setExportMode,
159159
} = useSearchContext();
160-
const selectionMode = useMobileSelectionMode();
161160
const [offset, setOffset] = useState(0);
162161

163162
const {type, status, sortBy, sortOrder, hash, groupBy} = queryJSON;
@@ -191,29 +190,29 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
191190
}
192191

193192
const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
194-
if (selectedKeys.length === 0 && selectionMode && shouldTurnOffSelectionMode) {
193+
if (selectedKeys.length === 0 && isMobileSelectionModeEnabled && shouldTurnOffSelectionMode) {
195194
turnOffMobileSelectionMode();
196195
}
197196

198197
// We don't want to run the effect on isFocused change as we only need it to early return when it is false.
199198
// eslint-disable-next-line react-compiler/react-compiler
200199
// eslint-disable-next-line react-hooks/exhaustive-deps
201-
}, [selectedTransactions, selectionMode, shouldTurnOffSelectionMode]);
200+
}, [selectedTransactions, isMobileSelectionModeEnabled, shouldTurnOffSelectionMode]);
202201

203202
useEffect(() => {
204203
const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
205204
if (!isSmallScreenWidth) {
206-
if (selectedKeys.length === 0 && !!selectionMode) {
205+
if (selectedKeys.length === 0 && isMobileSelectionModeEnabled) {
207206
turnOffMobileSelectionMode();
208207
}
209208
return;
210209
}
211-
if (selectedKeys.length > 0 && !selectionMode && !isSearchResultsEmpty) {
210+
if (selectedKeys.length > 0 && !isMobileSelectionModeEnabled && !isSearchResultsEmpty) {
212211
turnOnMobileSelectionMode();
213212
}
214213
// eslint-disable-next-line react-compiler/react-compiler
215214
// eslint-disable-next-line react-hooks/exhaustive-deps
216-
}, [isSmallScreenWidth, selectedTransactions, selectionMode]);
215+
}, [isSmallScreenWidth, selectedTransactions, isMobileSelectionModeEnabled]);
217216

218217
useEffect(() => {
219218
if (isOffline) {
@@ -404,7 +403,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
404403

405404
const openReport = useCallback(
406405
(item: SearchListItem) => {
407-
if (selectionMode) {
406+
if (isMobileSelectionModeEnabled) {
408407
toggleTransaction(item);
409408
return;
410409
}
@@ -454,7 +453,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
454453

455454
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID, backTo}));
456455
},
457-
[hash, selectionMode, toggleTransaction],
456+
[hash, isMobileSelectionModeEnabled, toggleTransaction],
458457
);
459458

460459
const onViewableItemsChanged = useCallback(
@@ -476,7 +475,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
476475

477476
const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
478477
const isTask = type === CONST.SEARCH.DATA_TYPES.TASK;
479-
const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || selectionMode === true);
478+
const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || isMobileSelectionModeEnabled);
480479
const ListItem = getListItem(type, status, groupBy);
481480
const sortedSelectedData = useMemo(
482481
() =>
@@ -639,6 +638,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
639638
queryJSON={queryJSON}
640639
onViewableItemsChanged={onViewableItemsChanged}
641640
onLayout={onLayout}
641+
isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
642642
/>
643643
</SearchScopeProvider>
644644
);

‎src/components/SelectionListWithModal/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function SelectionListWithModal<TItem extends ListItem>(
4141
const {isSmallScreenWidth} = useResponsiveLayout();
4242
const isFocused = useIsFocused();
4343

44-
const selectionMode = useMobileSelectionMode();
44+
const isMobileSelectionModeEnabled = useMobileSelectionMode();
4545
// Check if selection should be on when the modal is opened
4646
const wasSelectionOnRef = useRef(false);
4747
// Keep track of the number of selected items to determine if we should turn off selection mode
@@ -60,7 +60,7 @@ function SelectionListWithModal<TItem extends ListItem>(
6060
selectionRef.current = selectedItems.length;
6161

6262
if (!isSmallScreenWidth) {
63-
if (selectedItems.length === 0 && selectionMode) {
63+
if (selectedItems.length === 0 && isMobileSelectionModeEnabled) {
6464
turnOffMobileSelectionMode();
6565
}
6666
return;
@@ -71,13 +71,13 @@ function SelectionListWithModal<TItem extends ListItem>(
7171
if (!wasSelectionOnRef.current && selectedItems.length > 0) {
7272
wasSelectionOnRef.current = true;
7373
}
74-
if (selectedItems.length > 0 && !selectionMode) {
74+
if (selectedItems.length > 0 && !isMobileSelectionModeEnabled) {
7575
turnOnMobileSelectionMode();
76-
} else if (selectedItems.length === 0 && selectionMode && !wasSelectionOnRef.current) {
76+
} else if (selectedItems.length === 0 && isMobileSelectionModeEnabled && !wasSelectionOnRef.current) {
7777
turnOffMobileSelectionMode();
7878
}
7979
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
80-
}, [sections, selectedItemsProp, selectionMode, isSmallScreenWidth, isSelected, isFocused]);
80+
}, [sections, selectedItemsProp, isMobileSelectionModeEnabled, isSmallScreenWidth, isSelected, isFocused]);
8181

8282
useEffect(
8383
() => () => {
@@ -94,7 +94,7 @@ function SelectionListWithModal<TItem extends ListItem>(
9494
if (!turnOnSelectionModeOnLongPress || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox || (!isFocused && !isScreenFocused)) {
9595
return;
9696
}
97-
if (isSmallScreenWidth && selectionMode) {
97+
if (isSmallScreenWidth && isMobileSelectionModeEnabled) {
9898
rest?.onCheckboxPress?.(item);
9999
return;
100100
}

‎src/hooks/useMobileSelectionMode.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
44
import useOnyx from './useOnyx';
55

66
export default function useMobileSelectionMode() {
7-
const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
8-
const initialSelectionModeValueRef = useRef(selectionMode);
7+
const [isSelectionModeEnabled] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true});
8+
const initialSelectionModeValueRef = useRef(isSelectionModeEnabled);
99

1010
useEffect(() => {
1111
// in case the selection mode is already off at the start, we don't need to turn it off again
@@ -15,5 +15,5 @@ export default function useMobileSelectionMode() {
1515
turnOffMobileSelectionMode();
1616
}, []);
1717

18-
return selectionMode;
18+
return !!isSelectionModeEnabled;
1919
}

0 commit comments

Comments
 (0)