diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx index d0cb8db184b3..756b7f4330b0 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import Checkbox from '@components/Checkbox'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; @@ -6,7 +6,6 @@ import Text from '@components/Text'; import {useCurrencyListActions} from '@hooks/useCurrencyList'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils'; import variables from '@styles/variables'; @@ -14,6 +13,8 @@ import CONST from '@src/CONST'; import type {GroupedTransactions} from '@src/types/onyx'; import type {PendingAction} from '@src/types/onyx/OnyxCommon'; +const DESKTOP_HEIGHT = 28; + type MoneyRequestReportGroupHeaderProps = { /** The grouped transaction data */ group: GroupedTransactions; @@ -64,7 +65,6 @@ function MoneyRequestReportGroupHeader({ }: MoneyRequestReportGroupHeaderProps) { const {convertToDisplayString} = useCurrencyListActions(); const styles = useThemeStyles(); - const theme = useTheme(); const {translate} = useLocalize(); const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP(); const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook; @@ -75,27 +75,18 @@ function MoneyRequestReportGroupHeader({ const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout; - const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong]; + const textStyle = useMemo( + () => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}), + [shouldUseNarrowLayout], + ); - const handleToggleSelection = () => { + const handleToggleSelection = useCallback(() => { onToggleSelection?.(groupKey); - }; - - const groupHeaderStyle = !shouldUseNarrowLayout - ? [ - {minHeight: variables.tableGroupRowHeight}, - styles.justifyContentCenter, - styles.highlightBG, - styles.pv2, - styles.ph3, - styles.borderBottom, - isSelected && {borderColor: theme.buttonHoveredBG}, - ] - : [styles.ph4, styles.pv3, styles.borderBottom]; + }, [onToggleSelection, groupKey]); return ( - + {shouldShowCheckbox && ( )} {displayName} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx index 6c5c82aac0c1..53dc2cd5be3c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx @@ -16,19 +16,8 @@ type SearchTableHeaderProps = { taxAmountColumnSize: TableColumnSize; shouldShowSorting: boolean; columns: SearchColumnType[]; - shouldRemoveTotalColumnFlex?: boolean; }; -function MoneyRequestReportTableHeader({ - sortBy, - sortOrder, - onSortPress, - dateColumnSize, - shouldShowSorting, - columns, - amountColumnSize, - taxAmountColumnSize, - shouldRemoveTotalColumnFlex, -}: SearchTableHeaderProps) { +function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) { const styles = useThemeStyles(); const columnConfig = useMemo( @@ -88,7 +77,6 @@ function MoneyRequestReportTableHeader({ sortBy={sortBy} sortOrder={sortOrder} onSortPress={onSortPress} - shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex} /> ); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 5c6fa5954ed6..858ffba9006a 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -10,7 +10,6 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; -import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionViolations from '@hooks/useTransactionViolations'; @@ -71,7 +70,7 @@ type MoneyRequestReportTransactionItemProps = { /** List of cards for the user */ nonPersonalAndWorkspaceCards: CardList; - /** Whether this is the last item in the list */ + /** Whether this is the last item in the list (used to skip border-bottom on narrow) */ isLastItem?: boolean; }; @@ -96,7 +95,6 @@ function MoneyRequestReportTransactionItem({ }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); @@ -119,7 +117,7 @@ function MoneyRequestReportTransactionItem({ }, [scrollToNewTransaction, shouldBeHighlighted]); const animatedHighlightStyle = useAnimatedHighlightStyle({ - borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0, + borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius, shouldHighlight: shouldBeHighlighted, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, @@ -127,10 +125,7 @@ function MoneyRequestReportTransactionItem({ }); return ( - + { @@ -141,7 +136,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]} + style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -169,14 +164,13 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]} + style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]} onButtonPress={() => { handleOnPress(transaction.transactionID); }} onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards} - shouldRemoveTotalColumnFlex /> )} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 082c7ed010da..6827aa7a3d13 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -28,7 +28,6 @@ import useHandleSelectionMode from '@hooks/useHandleSelectionMode'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; -import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useReportIsArchived from '@hooks/useReportIsArchived'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -155,7 +154,6 @@ function MoneyRequestReportTransactionList({ const [isModalVisible, setIsModalVisible] = useState(false); const [selectedTransactionID, setSelectedTransactionID] = useState(''); const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report); - const {isOffline} = useNetwork(); const isTaxEnabled = isPolicyTaxEnabled(policy); const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report); @@ -565,36 +563,11 @@ function MoneyRequestReportTransactionList({ [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode], ); - const isDesktopTableLayout = !shouldUseNarrowLayout; - const lastTransactionID = useMemo(() => { const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions; - const visibleTransactions = allTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t)); - return visibleTransactions.at(-1)?.transactionID; - }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]); - - const renderTransactionItem = (transaction: TransactionWithOptionalHighlight) => ( - - ); + const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t)); + return nonDeletedTransactions.at(-1)?.transactionID; + }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]); const transactionItems = shouldShowGroupedTransactions ? groupedTransactions.map((group) => { @@ -604,8 +577,12 @@ function MoneyRequestReportTransactionList({ isDisabled: false, pendingAction: undefined, }; + return ( - + - {group.transactions.map((transaction) => renderTransactionItem(transaction))} + {group.transactions.map((transaction) => { + const isLastItem = transaction.transactionID === lastTransactionID; + return ( + + ); + })} ); }) - : resolvedTransactions.map((transaction) => renderTransactionItem(transaction)); + : resolvedTransactions.map((transaction) => { + const isLastItem = transaction.transactionID === lastTransactionID; + return ( + + ); + }); const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined; const transactionListContent = ( {narrowListWrapper ? {transactionItems} : transactionItems} @@ -648,27 +673,8 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - - + + { if (selectedTransactionIDs.length !== 0) { @@ -680,10 +686,8 @@ function MoneyRequestReportTransactionList({ accessibilityLabel={translate('accessibilityHints.selectAllTransactions')} isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length} isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length} - containerStyle={isDesktopTableLayout && styles.m0} - style={isDesktopTableLayout && styles.mr3} /> - {isMediumScreenWidth && !shouldScrollHorizontally && {translate('workspace.people.selectAll')}} + {isMediumScreenWidth && !shouldScrollHorizontally && {translate('workspace.people.selectAll')}} {(!isMediumScreenWidth || shouldScrollHorizontally) && ( { if (!isSortableColumnName(selectedSortBy)) { return; diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 47499a5a7c03..43c9e1553ce7 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -148,7 +148,6 @@ type TransactionItemRowProps = { policyForMovingExpenses?: Policy; nonPersonalAndWorkspaceCards?: CardList; isActionColumnWide?: boolean; - shouldRemoveTotalColumnFlex?: boolean; }; const EMPTY_ACTIVE_STYLE: StyleProp = []; @@ -204,7 +203,6 @@ function TransactionItemRow({ isLargeScreenWidth: isLargeScreenWidthProp, policyForMovingExpenses, isActionColumnWide: isActionColumnWideProp, - shouldRemoveTotalColumnFlex, }: TransactionItemRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -550,7 +548,7 @@ function TransactionItemRow({ return ( {shouldShowAttendees && (