Skip to content

Commit 729ee1b

Browse files
mountinymountiny
authored
Merge pull request #61677 from software-mansion-labs/kicu/61557-fix-ui
Add several UI fixes to MoneyRequestTransaction list
2 parents e7cb5a5 + 7e1e0e7 commit 729ee1b

File tree

6 files changed

+28
-21
lines changed

6 files changed

+28
-21
lines changed

‎src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
437437
useLayoutEffect(parseFSAttributes, []);
438438

439439
return (
440-
<View style={[styles.flex1, styles.pv4]}>
440+
<View style={[styles.flex1]}>
441441
{shouldUseNarrowLayout && !!selectionMode?.isEnabled && (
442442
<>
443443
<ButtonWithDropdownMenu
@@ -448,7 +448,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
448448
shouldAlwaysShowDropdownMenu
449449
wrapperStyle={[styles.w100, styles.ph5]}
450450
/>
451-
<View style={[styles.searchListHeaderContainerStyle, styles.pt6, styles.ph8, styles.pb3]}>
451+
<View style={[styles.alignItemsCenter, styles.userSelectNone, styles.flexRow, styles.pt6, styles.ph8]}>
452452
<Checkbox
453453
accessibilityLabel={translate('workspace.people.selectAll')}
454454
isChecked={selectedTransactionsID.length === transactions.length}
@@ -491,7 +491,7 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
491491
/>
492492
</>
493493
)}
494-
<View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pb4]}>
494+
<View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pv4]}>
495495
<FloatingMessageCounter
496496
isActive={isFloatingMessageCounterVisible}
497497
onClick={scrollToBottomAndMarkReportAsRead}

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,6 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
269269
shouldShowTooltip
270270
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
271271
shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}
272-
shouldShowChatBubbleComponent
273272
onCheckboxPress={toggleTransaction}
274273
/>
275274
</PressableWithFeedback>

‎src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
3+
import type {ViewStyle} from 'react-native';
34
import {useOnyx} from 'react-native-onyx';
45
import Icon from '@components/Icon';
56
import {ChatBubbleCounter} from '@components/Icon/Expensicons';
@@ -18,15 +19,18 @@ import type Transaction from '@src/types/onyx/Transaction';
1819
const isReportUnread = ({lastReadTime = '', lastVisibleActionCreated = '', lastMentionedTime = ''}: Report): boolean =>
1920
lastReadTime < lastVisibleActionCreated || lastReadTime < (lastMentionedTime ?? '');
2021

21-
function ChatBubbleCell({transaction}: {transaction: Transaction}) {
22+
function ChatBubbleCell({transaction, containerStyles}: {transaction: Transaction; containerStyles?: ViewStyle[]}) {
2223
const theme = useTheme();
2324
const styles = useThemeStyles();
2425
const {shouldUseNarrowLayout} = useResponsiveLayout();
2526
const [iouReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transaction.reportID}`, {
2627
selector: (reportActions) => getIOUActionForTransactionID(Object.values(reportActions ?? {}), transaction.transactionID),
28+
canBeMissing: false,
2729
});
2830

29-
const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`);
31+
const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`, {
32+
canBeMissing: false,
33+
});
3034

3135
const threadMessages = useMemo(
3236
() => ({
@@ -38,18 +42,18 @@ function ChatBubbleCell({transaction}: {transaction: Transaction}) {
3842

3943
const StyleUtils = useStyleUtils();
4044

41-
const elementSize = shouldUseNarrowLayout ? variables.iconSizeSmall : variables.iconSizeNormal;
45+
const iconSize = shouldUseNarrowLayout ? variables.iconSizeSmall : variables.iconSizeNormal;
4246
const fontSize = shouldUseNarrowLayout ? variables.fontSizeXXSmall : variables.fontSizeExtraSmall;
4347

4448
return (
4549
threadMessages.count > 0 && (
46-
<View style={[styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, styles.textAlignCenter, StyleUtils.getWidthAndHeightStyle(elementSize)]}>
50+
<View style={[styles.dFlex, styles.alignItemsCenter, styles.justifyContentCenter, styles.textAlignCenter, StyleUtils.getWidthAndHeightStyle(iconSize), containerStyles]}>
4751
<Icon
4852
src={ChatBubbleCounter}
4953
additionalStyles={[styles.pAbsolute]}
5054
fill={threadMessages.isUnread ? theme.iconMenu : theme.icon}
51-
width={elementSize}
52-
height={elementSize}
55+
width={iconSize}
56+
height={iconSize}
5357
/>
5458
<Text
5559
style={[

‎src/components/TransactionItemRow/index.tsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ function TransactionItemRow({
2929
isSelected,
3030
shouldShowTooltip,
3131
dateColumnSize,
32-
shouldShowChatBubbleComponent = false,
3332
onCheckboxPress,
3433
shouldShowCheckbox = false,
3534
}: {
@@ -38,7 +37,6 @@ function TransactionItemRow({
3837
isSelected: boolean;
3938
shouldShowTooltip: boolean;
4039
dateColumnSize: TableColumnSize;
41-
shouldShowChatBubbleComponent?: boolean;
4240
onCheckboxPress: (transactionID: string) => void;
4341
shouldShowCheckbox: boolean;
4442
}) {
@@ -80,8 +78,8 @@ function TransactionItemRow({
8078
>
8179
{shouldUseNarrowLayout ? (
8280
<Animated.View style={[animatedHighlightStyle]}>
83-
<View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.gap3, bgActiveStyles]}>
84-
<View style={[styles.flexRow, styles.mt3, styles.mr3, styles.ml3]}>
81+
<View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.p3, bgActiveStyles]}>
82+
<View style={[styles.flexRow]}>
8583
{shouldShowCheckbox && (
8684
<View style={[styles.mr3, styles.justifyContentCenter]}>
8785
<Checkbox
@@ -138,10 +136,10 @@ function TransactionItemRow({
138136
)}
139137
</View>
140138
</View>
141-
<View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.mb3]}>
142-
<View style={[styles.flexColumn, styles.gap2]}>
139+
<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
140+
<View style={[styles.flexColumn]}>
143141
{hasCategoryOrTag && (
144-
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
142+
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.mt3]}>
145143
<CategoryCell
146144
transactionItem={transactionItem}
147145
shouldShowTooltip={shouldShowTooltip}
@@ -154,9 +152,15 @@ function TransactionItemRow({
154152
/>
155153
</View>
156154
)}
157-
<TransactionItemRowRBR transaction={transactionItem} />
155+
<TransactionItemRowRBR
156+
transaction={transactionItem}
157+
containerStyles={[styles.mt3]}
158+
/>
158159
</View>
159-
{shouldShowChatBubbleComponent && <ChatBubbleCell transaction={transactionItem} />}
160+
<ChatBubbleCell
161+
transaction={transactionItem}
162+
containerStyles={[styles.mt3]}
163+
/>
160164
</View>
161165
</View>
162166
</Animated.View>
@@ -215,7 +219,7 @@ function TransactionItemRow({
215219
/>
216220
</View>
217221
<View style={[StyleUtils.getReportTableColumnStyles(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS)]}>
218-
{shouldShowChatBubbleComponent && <ChatBubbleCell transaction={transactionItem} />}
222+
<ChatBubbleCell transaction={transactionItem} />
219223
</View>
220224
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT)]}>
221225
<TotalCell

‎src/pages/Search/SearchMoneyRequestReportPage.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ function SearchMoneyRequestReportPage({route}: SearchMoneyRequestPageProps) {
129129
breadcrumbLabel={translate('common.reports')}
130130
shouldDisplaySearch={false}
131131
shouldShowLoadingBar={false}
132+
shouldDisplayHelpButton={false}
132133
/>
133134
<SearchTypeMenu queryJSON={undefined} />
134135
</View>

‎src/stories/TransactionItemRow.stories.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ function Template(
6565
shouldUseNarrowLayout={shouldUseNarrowLayout}
6666
isSelected={isSelected}
6767
shouldShowTooltip={shouldShowTooltip}
68-
shouldShowChatBubbleComponent
6968
dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
7069
onCheckboxPress={() => {}}
7170
shouldShowCheckbox={shouldShowCheckbox}

0 commit comments

Comments
 (0)