Skip to content

Commit 87eef76

Browse files
nyomanjyotisanyomanjyotisa
committed
extract shouldPopoverUseScrollView into shared utility
1 parent af8f179 commit 87eef76

5 files changed

Lines changed: 22 additions & 16 deletions

File tree

‎src/components/MoneyReportHeader.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ import {
9797
rejectMoneyRequestReason,
9898
shouldBlockSubmitDueToStrictPolicyRules,
9999
} from '@libs/ReportUtils';
100+
import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
100101
import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
101102
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
102103
import {
@@ -1932,9 +1933,7 @@ function MoneyReportHeader({
19321933
}, [originalSelectedTransactionsOptions, showDeleteModal, dismissedRejectUseExplanation, isDelegateAccessRestricted, showDelegateNoAccessModal]);
19331934

19341935
const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length && !transactionThreadReportID;
1935-
const shouldPopoverUseScrollView =
1936-
selectedTransactionsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD ||
1937-
selectedTransactionsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
1936+
const popoverUseScrollView = shouldPopoverUseScrollView(selectedTransactionsOptions);
19381937

19391938
if (isMobileSelectionModeEnabled && shouldUseNarrowLayout) {
19401939
// If mobile selection mode is enabled but only one or no transactions remain, turn it off
@@ -2026,7 +2025,7 @@ function MoneyReportHeader({
20262025
})}
20272026
isSplitButton={false}
20282027
shouldAlwaysShowDropdownMenu
2029-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
2028+
shouldPopoverUseScrollView={popoverUseScrollView}
20302029
wrapperStyle={styles.w100}
20312030
/>
20322031
</View>
@@ -2045,7 +2044,7 @@ function MoneyReportHeader({
20452044
})}
20462045
isSplitButton={false}
20472046
shouldAlwaysShowDropdownMenu
2048-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
2047+
shouldPopoverUseScrollView={popoverUseScrollView}
20492048
wrapperStyle={styles.w100}
20502049
/>
20512050
</View>

‎src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import {
5959
wasMessageReceivedWhileOffline,
6060
} from '@libs/ReportActionsUtils';
6161
import {canUserPerformWriteAction, chatIncludesChronosWithID, getOriginalReportID, getReportLastVisibleActionCreated, isHarvestCreatedExpenseReport, isUnread} from '@libs/ReportUtils';
62+
import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
6263
import markOpenReportEnd from '@libs/telemetry/markOpenReportEnd';
6364
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
6465
import {isTransactionPendingDelete} from '@libs/TransactionUtils';
@@ -306,9 +307,7 @@ function MoneyRequestReportActionsList({
306307
});
307308
}, [originalSelectedTransactionsOptions, dismissedRejectUseExplanation, isDelegateAccessRestricted, showDelegateNoAccessModal]);
308309

309-
const shouldPopoverUseScrollView =
310-
selectedTransactionsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD ||
311-
selectedTransactionsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
310+
const popoverUseScrollView = shouldPopoverUseScrollView(selectedTransactionsOptions);
312311

313312
const dismissRejectModalBasedOnAction = useCallback(() => {
314313
if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK) {
@@ -804,7 +803,7 @@ function MoneyRequestReportActionsList({
804803
customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
805804
isSplitButton={false}
806805
shouldAlwaysShowDropdownMenu
807-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
806+
shouldPopoverUseScrollView={popoverUseScrollView}
808807
wrapperStyle={[styles.w100, styles.ph5]}
809808
/>
810809
<View style={[styles.alignItemsCenter, styles.userSelectNone, styles.flexRow, styles.pt6, styles.ph8, styles.pb3]}>

‎src/components/Search/SearchBulkActionsButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
2020
import {handleBulkPayItemSelected} from '@libs/actions/Search';
2121
import Navigation from '@libs/Navigation/Navigation';
2222
import {isExpenseReport} from '@libs/ReportUtils';
23+
import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
2324
import CONST from '@src/CONST';
2425
import ONYXKEYS from '@src/ONYXKEYS';
2526
import ROUTES from '@src/ROUTES';
@@ -76,8 +77,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
7677
const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
7778
const isExpenseReportType = queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
7879

79-
const shouldPopoverUseScrollView =
80-
headerButtonsOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || headerButtonsOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
80+
const popoverUseScrollView = shouldPopoverUseScrollView(headerButtonsOptions);
8181

8282
const selectedItemsCount = useMemo(() => {
8383
if (!selectedTransactions) {
@@ -123,7 +123,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
123123
shouldAlwaysShowDropdownMenu
124124
isDisabled={headerButtonsOptions.length === 0}
125125
onPress={() => null}
126-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
126+
shouldPopoverUseScrollView={popoverUseScrollView}
127127
onSubItemSelected={(subItem) =>
128128
handleBulkPayItemSelected({
129129
item: subItem,
@@ -163,7 +163,7 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
163163
buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
164164
customText={selectionButtonText}
165165
options={headerButtonsOptions}
166-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
166+
shouldPopoverUseScrollView={popoverUseScrollView}
167167
onSubItemSelected={(subItem) =>
168168
handleBulkPayItemSelected({
169169
item: subItem,

‎src/components/SettlementButton/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
isIOUReport,
3939
} from '@libs/ReportUtils';
4040
import {handleUnvalidatedUserNavigation, useSettlementButtonPaymentMethods} from '@libs/SettlementButtonUtils';
41+
import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
4142
import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
4243
import {setPersonalBankAccountContinueKYCOnSuccess} from '@userActions/BankAccounts';
4344
import {approveMoneyRequest} from '@userActions/IOU';
@@ -577,8 +578,7 @@ function SettlementButton({
577578

578579
const shouldUseSplitButton = hasPreferredPaymentMethod || !!lastPaymentPolicy || ((isExpenseReport || isInvoiceReport) && hasIntentToPay);
579580
const shouldLimitWidth = shouldUseShortForm && shouldUseSplitButton && !paymentButtonOptions.length;
580-
const shouldPopoverUseScrollView =
581-
paymentButtonOptions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || paymentButtonOptions.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
581+
const popoverUseScrollView = shouldPopoverUseScrollView(paymentButtonOptions);
582582

583583
return (
584584
<KYCWall
@@ -623,7 +623,7 @@ function SettlementButton({
623623
}}
624624
style={style}
625625
shouldUseShortForm={shouldUseShortForm}
626-
shouldPopoverUseScrollView={shouldPopoverUseScrollView}
626+
shouldPopoverUseScrollView={popoverUseScrollView}
627627
containerStyles={paymentButtonOptions.length > 5 ? styles.settlementButtonListContainer : {}}
628628
wrapperStyle={[wrapperStyle, shouldLimitWidth ? styles.settlementButtonShortFormWidth : {}]}
629629
disabledStyle={disabledStyle}

‎src/libs/shouldPopoverUseScrollView.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
2+
import CONST from '@src/CONST';
3+
4+
function shouldPopoverUseScrollView<T>(options: Array<DropdownOption<T>>): boolean {
5+
return options.length >= CONST.DROPDOWN_SCROLL_THRESHOLD || options.some((option) => (option.subMenuItems?.length ?? 0) >= CONST.DROPDOWN_SCROLL_THRESHOLD);
6+
}
7+
8+
export default shouldPopoverUseScrollView;

0 commit comments

Comments
 (0)