diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx index 756b7f4330b0..d0cb8db184b3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo} from 'react'; +import React from 'react'; import {View} from 'react-native'; import Checkbox from '@components/Checkbox'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; @@ -6,6 +6,7 @@ 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'; @@ -13,8 +14,6 @@ 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; @@ -65,6 +64,7 @@ function MoneyRequestReportGroupHeader({ }: MoneyRequestReportGroupHeaderProps) { const {convertToDisplayString} = useCurrencyListActions(); const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP(); const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook; @@ -75,18 +75,27 @@ function MoneyRequestReportGroupHeader({ const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout; - const textStyle = useMemo( - () => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}), - [shouldUseNarrowLayout], - ); + const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong]; - const handleToggleSelection = useCallback(() => { + const handleToggleSelection = () => { onToggleSelection?.(groupKey); - }, [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]; return ( - + {shouldShowCheckbox && ( )} {displayName} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx index 53dc2cd5be3c..6c5c82aac0c1 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx @@ -16,8 +16,19 @@ type SearchTableHeaderProps = { taxAmountColumnSize: TableColumnSize; shouldShowSorting: boolean; columns: SearchColumnType[]; + shouldRemoveTotalColumnFlex?: boolean; }; -function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) { +function MoneyRequestReportTableHeader({ + sortBy, + sortOrder, + onSortPress, + dateColumnSize, + shouldShowSorting, + columns, + amountColumnSize, + taxAmountColumnSize, + shouldRemoveTotalColumnFlex, +}: SearchTableHeaderProps) { const styles = useThemeStyles(); const columnConfig = useMemo( @@ -77,6 +88,7 @@ function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColu sortBy={sortBy} sortOrder={sortOrder} onSortPress={onSortPress} + shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex} /> ); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 858ffba9006a..5c6fa5954ed6 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -10,6 +10,7 @@ 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'; @@ -70,7 +71,7 @@ type MoneyRequestReportTransactionItemProps = { /** List of cards for the user */ nonPersonalAndWorkspaceCards: CardList; - /** Whether this is the last item in the list (used to skip border-bottom on narrow) */ + /** Whether this is the last item in the list */ isLastItem?: boolean; }; @@ -95,6 +96,7 @@ 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(); @@ -117,7 +119,7 @@ function MoneyRequestReportTransactionItem({ }, [scrollToNewTransaction, shouldBeHighlighted]); const animatedHighlightStyle = useAnimatedHighlightStyle({ - borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius, + borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0, shouldHighlight: shouldBeHighlighted, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, @@ -125,7 +127,10 @@ function MoneyRequestReportTransactionItem({ }); return ( - + { @@ -136,7 +141,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]} + style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -164,13 +169,14 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]} + style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]} 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 ba63ce4122a4..2384f9bcfbc3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -27,6 +27,7 @@ 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'; @@ -151,6 +152,7 @@ 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); @@ -554,11 +556,36 @@ function MoneyRequestReportTransactionList({ [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode], ); + const isDesktopTableLayout = !shouldUseNarrowLayout; + const lastTransactionID = useMemo(() => { const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions; - const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t)); - return nonDeletedTransactions.at(-1)?.transactionID; - }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]); + const visibleTransactions = allTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t)); + return visibleTransactions.at(-1)?.transactionID; + }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]); + + const renderTransactionItem = (transaction: TransactionWithOptionalHighlight) => ( + + ); const transactionItems = shouldShowGroupedTransactions ? groupedTransactions.map((group) => { @@ -568,12 +595,8 @@ function MoneyRequestReportTransactionList({ isDisabled: false, pendingAction: undefined, }; - return ( - + - {group.transactions.map((transaction) => { - const isLastItem = transaction.transactionID === lastTransactionID; - return ( - - ); - })} + {group.transactions.map((transaction) => renderTransactionItem(transaction))} ); }) - : resolvedTransactions.map((transaction) => { - const isLastItem = transaction.transactionID === lastTransactionID; - return ( - - ); - }); + : resolvedTransactions.map((transaction) => renderTransactionItem(transaction)); const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined; const transactionListContent = ( {narrowListWrapper ? {transactionItems} : transactionItems} @@ -664,8 +639,27 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - - + + { if (selectedTransactionIDs.length !== 0) { @@ -677,8 +671,10 @@ 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 ba4fa52823f9..099308bf7c8e 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -147,6 +147,7 @@ type TransactionItemRowProps = { policyForMovingExpenses?: Policy; nonPersonalAndWorkspaceCards?: CardList; isActionColumnWide?: boolean; + shouldRemoveTotalColumnFlex?: boolean; }; const EMPTY_ACTIVE_STYLE: StyleProp = []; @@ -202,6 +203,7 @@ function TransactionItemRow({ isLargeScreenWidth: isLargeScreenWidthProp, policyForMovingExpenses, isActionColumnWide: isActionColumnWideProp, + shouldRemoveTotalColumnFlex, }: TransactionItemRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -547,7 +549,7 @@ function TransactionItemRow({ return ( {shouldShowAttendees && (