From 98d132af35a3a814f8bf0092cc6f09a0a826fa1f Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Wed, 7 May 2025 11:39:40 +0200 Subject: [PATCH 1/4] Fix pay button overlapping avatar --- src/components/MoneyReportHeader.tsx | 41 ++++++++++--------- .../MoneyRequestReportTransactionList.tsx | 2 +- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 6a6b27eacdca..9f60a1453005 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -123,7 +123,7 @@ type MoneyReportHeaderProps = { function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, shouldDisplayBackButton = false, onBackButtonPress}: MoneyReportHeaderProps) { // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth - const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const route = useRoute(); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`, {canBeMissing: true}); @@ -699,7 +699,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea shouldShowBorderBottom={false} shouldEnableDetailPageNavigation > - {!shouldUseNarrowLayout && ( + {!(shouldUseNarrowLayout || isMediumScreenWidth) && ( {!!primaryAction && !shouldShowSelectedTransactionsButton && primaryActionsImplementation[primaryAction]} {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && ( @@ -712,7 +712,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea isSplitButton={false} /> )} - {shouldShowSelectedTransactionsButton && !shouldUseNarrowLayout && ( + {shouldShowSelectedTransactionsButton && ( null} @@ -726,26 +726,27 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea )} - {shouldUseNarrowLayout && ( - - {!!primaryAction && !shouldShowSelectedTransactionsButton && {primaryActionsImplementation[primaryAction]}} - {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && ( - {}} - shouldAlwaysShowDropdownMenu - customText={translate('common.more')} - options={applicableSecondaryActions} - isSplitButton={false} - wrapperStyle={[!primaryAction && styles.flex1]} - /> - )} - - )} + {shouldUseNarrowLayout || + (isMediumScreenWidth && ( + + {!!primaryAction && !shouldShowSelectedTransactionsButton && {primaryActionsImplementation[primaryAction]}} + {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('common.more')} + options={applicableSecondaryActions} + isSplitButton={false} + wrapperStyle={[!primaryAction && styles.flex1]} + /> + )} + + ))} {isMoreContentShown && ( - {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && ( + {shouldShowSelectedTransactionsButton && (shouldUseNarrowLayout || isMediumScreenWidth) && ( null} options={selectedTransactionsOptions} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 8191caea13d0..6180dbf52271 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -84,7 +84,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout(); - const displayNarrowVersion = isMediumScreenWidth || shouldUseNarrowLayout; + const displayNarrowVersion = shouldUseNarrowLayout; const [isModalVisible, setIsModalVisible] = useState(false); const [selectedTransactionID, setSelectedTransactionID] = useState(''); From 0a5fc9712fd6598c54fe875e7364834b079ded84 Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Wed, 7 May 2025 15:13:04 +0200 Subject: [PATCH 2/4] adjust table --- src/components/MoneyReportHeader.tsx | 44 +++++++++---------- .../MoneyRequestReportTransactionList.tsx | 41 +++++++++-------- src/components/TransactionItemRow/index.tsx | 6 +-- 3 files changed, 47 insertions(+), 44 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 9f60a1453005..f55d6b283676 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -124,6 +124,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); + const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth; const route = useRoute(); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`, {canBeMissing: true}); @@ -699,7 +700,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea shouldShowBorderBottom={false} shouldEnableDetailPageNavigation > - {!(shouldUseNarrowLayout || isMediumScreenWidth) && ( + {!shouldDisplayNarrowVersion && ( {!!primaryAction && !shouldShowSelectedTransactionsButton && primaryActionsImplementation[primaryAction]} {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && ( @@ -726,27 +727,26 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea )} - {shouldUseNarrowLayout || - (isMediumScreenWidth && ( - - {!!primaryAction && !shouldShowSelectedTransactionsButton && {primaryActionsImplementation[primaryAction]}} - {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && ( - {}} - shouldAlwaysShowDropdownMenu - customText={translate('common.more')} - options={applicableSecondaryActions} - isSplitButton={false} - wrapperStyle={[!primaryAction && styles.flex1]} - /> - )} - - ))} + {shouldDisplayNarrowVersion && !shouldShowSelectedTransactionsButton && ( + + {!!primaryAction && {primaryActionsImplementation[primaryAction]}} + {!!applicableSecondaryActions.length && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('common.more')} + options={applicableSecondaryActions} + isSplitButton={false} + wrapperStyle={[!primaryAction && styles.flex1]} + /> + )} + + )} {isMoreContentShown && ( - - {shouldShowSelectedTransactionsButton && (shouldUseNarrowLayout || isMediumScreenWidth) && ( + {shouldShowSelectedTransactionsButton && shouldDisplayNarrowVersion && ( + null} options={selectedTransactionsOptions} @@ -755,8 +755,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea shouldAlwaysShowDropdownMenu wrapperStyle={styles.w100} /> - )} - + + )} {shouldShowNextStep && } {!!statusBarProps && ( (''); @@ -178,9 +177,9 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, const listHorizontalPadding = styles.ph5; return !isEmpty(transactions) ? ( <> - {!displayNarrowVersion && ( - - + {!shouldUseNarrowLayout && ( + + { if (selectedTransactionsID.length === transactions.length) { @@ -193,20 +192,23 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, isIndeterminate={selectedTransactionsID.length > 0 && selectedTransactionsID.length !== transactions.length} isChecked={selectedTransactionsID.length === transactions.length} /> + {isMediumScreenWidth && {translate('workspace.people.selectAll')}} - { - if (!isSortableColumnName(selectedSortBy)) { - return; - } - - setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder})); - }} - /> + {!isMediumScreenWidth && ( + { + if (!isSortableColumnName(selectedSortBy)) { + return; + } + + setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder})); + }} + /> + )} )} @@ -236,7 +238,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, style={[pressableStyle]} onMouseLeave={handleMouseLeave} onLongPress={() => { - if (!displayNarrowVersion) { + if (!shouldUseNarrowLayout) { return; } if (selectionMode?.isEnabled) { @@ -252,7 +254,8 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions, isSelected={isTransactionSelected(transaction.transactionID)} dateColumnSize={dateColumnSize} shouldShowTooltip - shouldUseNarrowLayout={displayNarrowVersion} + shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth} + shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth} shouldShowChatBubbleComponent onCheckboxPress={toggleTransaction} /> diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 15bfb54791be..af2a28f995a3 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -8,7 +8,6 @@ import DateCell from '@components/SelectionList/Search/DateCell'; import Text from '@components/Text'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useHover from '@hooks/useHover'; -import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -27,6 +26,7 @@ import TransactionItemRowRBR from './TransactionItemRowRBR'; function TransactionItemRow({ transactionItem, shouldUseNarrowLayout, + shouldShowCheckbox, isSelected, shouldShowTooltip, dateColumnSize, @@ -35,6 +35,7 @@ function TransactionItemRow({ }: { transactionItem: TransactionWithOptionalHighlight; shouldUseNarrowLayout: boolean; + shouldShowCheckbox: boolean; isSelected: boolean; shouldShowTooltip: boolean; dateColumnSize: TableColumnSize; @@ -57,7 +58,6 @@ function TransactionItemRow({ backgroundColor: theme.highlightBG, }); - const {selectionMode} = useMobileSelectionMode(); const {hovered, bind: bindHover} = useHover(); const bgActiveStyles = useMemo(() => { if (isSelected) { @@ -79,7 +79,7 @@ function TransactionItemRow({ - {!!selectionMode?.isEnabled && ( + {shouldShowCheckbox && ( { From d6c9336542e79406e2bdf1dce2c1c8d02e188a23 Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Wed, 7 May 2025 15:30:57 +0200 Subject: [PATCH 3/4] fix TS --- src/stories/TransactionItemRow.stories.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/stories/TransactionItemRow.stories.tsx b/src/stories/TransactionItemRow.stories.tsx index 123617b85fed..792f1f4c6418 100644 --- a/src/stories/TransactionItemRow.stories.tsx +++ b/src/stories/TransactionItemRow.stories.tsx @@ -14,6 +14,7 @@ type TransactionItemRowProps = { shouldUseNarrowLayout: boolean; isSelected: boolean; shouldShowTooltip: boolean; + shouldShowCheckbox: boolean; }; const story: Meta = { @@ -38,13 +39,19 @@ const story: Meta = { shouldShowTooltip: { control: 'boolean', }, + shouldShowCheckbox: { + control: 'boolean', + }, }, parameters: { useLightTheme: true, }, }; -function Template({transactionItem, shouldUseNarrowLayout, isSelected, shouldShowTooltip}: TransactionItemRowProps, {parameters}: {parameters: {useLightTheme?: boolean}}) { +function Template( + {transactionItem, shouldUseNarrowLayout, isSelected, shouldShowTooltip, shouldShowCheckbox}: TransactionItemRowProps, + {parameters}: {parameters: {useLightTheme?: boolean}}, +) { const theme = parameters.useLightTheme ? CONST.THEME.LIGHT : CONST.THEME.DARK; return ( @@ -53,6 +60,7 @@ function Template({transactionItem, shouldUseNarrowLayout, isSelected, shouldSho Date: Wed, 7 May 2025 15:44:33 +0200 Subject: [PATCH 4/4] Fix storybook --- src/stories/TransactionItemRow.stories.tsx | 27 ++++++++++++---------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/stories/TransactionItemRow.stories.tsx b/src/stories/TransactionItemRow.stories.tsx index 792f1f4c6418..98bf6d767847 100644 --- a/src/stories/TransactionItemRow.stories.tsx +++ b/src/stories/TransactionItemRow.stories.tsx @@ -1,5 +1,6 @@ import type {Meta, StoryFn} from '@storybook/react'; import React from 'react'; +import ScreenWrapper from '@components/ScreenWrapper'; import ThemeProvider from '@components/ThemeProvider'; import ThemeStylesProvider from '@components/ThemeStylesProvider'; import TransactionItemRow from '@components/TransactionItemRow'; @@ -56,18 +57,20 @@ function Template( return ( - - {}} - /> - + + + {}} + /> + + ); }