Skip to content

Commit e47bec3

Browse files
dukenv0307dukenv0307
committed
Add a tooltip on hover of the Paid report label
1 parent 76bc375 commit e47bec3

15 files changed

Lines changed: 83 additions & 5 deletions

File tree

‎src/components/Search/SearchList/ListItem/StatusCell.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import StatusBadge from '@components/StatusBadge';
44
import useLocalize from '@hooks/useLocalize';
55
import useTheme from '@hooks/useTheme';
66
import useThemeStyles from '@hooks/useThemeStyles';
7-
import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
7+
import {getReportStatusColorStyle, getReportStatusTooltipTranslation, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
88

99
type StatusCellProps = {
1010
/** The stateNum of the report */
@@ -36,13 +36,15 @@ function StatusCell({stateNum, statusNum, isPending, isDeleted, isSelected}: Sta
3636
}
3737

3838
const backgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, isDeleted, isSelected);
39+
const tooltipText = getReportStatusTooltipTranslation({stateNum, statusNum, isDeleted, translate});
3940

4041
return (
4142
<View style={[styles.w100, styles.justifyContentCenter, isPending && styles.offlineFeedbackPending]}>
4243
<StatusBadge
4344
text={statusText}
4445
backgroundColor={backgroundColor}
4546
textColor={reportStatusColorStyle.textColor}
47+
tooltipText={tooltipText}
4648
/>
4749
</View>
4850
);

‎src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import StatusBadge from '@components/StatusBadge';
99
import useLocalize from '@hooks/useLocalize';
1010
import useTheme from '@hooks/useTheme';
1111
import useThemeStyles from '@hooks/useThemeStyles';
12-
import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
12+
import {getReportStatusColorStyle, getReportStatusTooltipTranslation, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
1313
import CONST from '@src/CONST';
1414
import type {ExpenseReportListItemType, TransactionListItemType, TransactionReportGroupListItemType} from './types';
1515
import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
@@ -35,6 +35,7 @@ function UserInfoAndActionButtonRow({
3535
const statusText = getReportStatusTranslation({stateNum, statusNum, translate});
3636
const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum);
3737
const badgeBackgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, undefined, isSelected);
38+
const tooltipText = getReportStatusTooltipTranslation({stateNum, statusNum, translate});
3839
const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? '';
3940
return (
4041
<View style={[styles.pt0, styles.flexRow, styles.alignItemsCenter, shouldShowUserInfo ? styles.justifyContentBetween : styles.justifyContentEnd, styles.gap2, containerStyles]}>
@@ -58,6 +59,7 @@ function UserInfoAndActionButtonRow({
5859
text={statusText}
5960
backgroundColor={badgeBackgroundColor}
6061
textColor={reportStatusColorStyle.textColor}
62+
tooltipText={tooltipText}
6163
/>
6264
)}
6365
</View>

‎src/components/Search/SearchStaticList.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import useTheme from '@hooks/useTheme';
3030
import useThemeStyles from '@hooks/useThemeStyles';
3131
import {hasDeferredWrite} from '@libs/deferredLayoutWrite';
3232
import Navigation from '@libs/Navigation/Navigation';
33-
import {getReportStatusColorStyle, getReportStatusTranslation, isOneTransactionReport} from '@libs/ReportUtils';
33+
import {getReportStatusColorStyle, getReportStatusTooltipTranslation, getReportStatusTranslation, isOneTransactionReport} from '@libs/ReportUtils';
3434
import {createAndOpenSearchTransactionThread, getSections, getSortedSections, getValidGroupBy} from '@libs/SearchUIUtils';
3535
import CONST from '@src/CONST';
3636
import ONYXKEYS from '@src/ONYXKEYS';
@@ -178,6 +178,7 @@ function SearchStaticList({
178178
const statusNum = item.report?.statusNum;
179179
const statusText = getReportStatusTranslation({stateNum, statusNum, translate});
180180
const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum);
181+
const statusTooltipText = getReportStatusTooltipTranslation({stateNum, statusNum, translate});
181182

182183
return (
183184
<PressableWithoutFeedback
@@ -219,6 +220,7 @@ function SearchStaticList({
219220
text={statusText}
220221
backgroundColor={reportStatusColorStyle.backgroundColor}
221222
textColor={reportStatusColorStyle.textColor}
223+
tooltipText={statusTooltipText}
222224
/>
223225
)}
224226
</View>

‎src/components/StatusBadge.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2+
import {View} from 'react-native';
23
import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
34
import useStyleUtils from '@hooks/useStyleUtils';
45
import useTheme from '@hooks/useTheme';
56
import useThemeStyles from '@hooks/useThemeStyles';
67
import Badge from './Badge';
8+
import Tooltip from './Tooltip';
79

810
type StatusBadgeProps = {
911
/** Status text to display */
@@ -17,24 +19,41 @@ type StatusBadgeProps = {
1719

1820
/** Additional badge styles */
1921
badgeStyles?: StyleProp<ViewStyle>;
22+
23+
/** Text to display in a tooltip shown on hover of the badge. The tooltip is omitted when empty. */
24+
tooltipText?: string;
2025
};
2126

22-
function StatusBadge({text, backgroundColor, textColor, badgeStyles}: StatusBadgeProps) {
27+
function StatusBadge({text, backgroundColor, textColor, badgeStyles, tooltipText}: StatusBadgeProps) {
2328
const styles = useThemeStyles();
2429
const theme = useTheme();
2530
const StyleUtils = useStyleUtils();
2631

2732
const bgColor = (backgroundColor ?? theme.transparent) as string;
2833
const txtColor = (textColor ?? theme.text) as string;
2934

30-
return (
35+
const badge = (
3136
<Badge
3237
text={text}
3338
isCondensed
3439
badgeStyles={[styles.ml0, styles.borderNone, StyleUtils.getBackgroundColorStyle(bgColor), badgeStyles]}
3540
textStyles={StyleUtils.getColorStyle(txtColor)}
3641
/>
3742
);
43+
44+
if (!tooltipText) {
45+
return badge;
46+
}
47+
48+
// Badge does not forward a ref, so it is wrapped in a View for the tooltip's BoundsObserver to anchor to.
49+
return (
50+
<Tooltip
51+
text={tooltipText}
52+
shiftVertical={-4}
53+
>
54+
<View>{badge}</View>
55+
</Tooltip>
56+
);
3857
}
3958

4059
export default StatusBadge;

‎src/languages/de.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1341,6 +1341,9 @@ const translations: TranslationDeepObject<typeof en> = {
13411341
other: 'Möchten Sie diese Berichte wirklich löschen?',
13421342
}),
13431343
settledExpensify: 'Bezahlt',
1344+
paidStatusMarkedAsPaid: 'Als bezahlt markiert',
1345+
paidStatusWithdrawing: 'Wird abgebucht',
1346+
paidStatusConfirmed: 'Bestätigt',
13441347
done: 'Fertig',
13451348
settledElsewhere: 'Anderswo bezahlt',
13461349
individual: 'Einzelperson',

‎src/languages/en.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1401,6 +1401,9 @@ const translations = {
14011401
other: 'Are you sure that you want to delete these reports?',
14021402
}),
14031403
settledExpensify: 'Paid',
1404+
paidStatusMarkedAsPaid: 'Marked as paid',
1405+
paidStatusWithdrawing: 'Withdrawing',
1406+
paidStatusConfirmed: 'Confirmed',
14041407
done: 'Done',
14051408
deleted: 'Deleted',
14061409
settledElsewhere: 'Paid elsewhere',

‎src/languages/es.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1302,6 +1302,9 @@ const translations: TranslationDeepObject<typeof en> = {
13021302
other: '¿Estás seguro de que quieres eliminar estos informes?',
13031303
}),
13041304
settledExpensify: 'Pagado',
1305+
paidStatusMarkedAsPaid: 'Marcado como pagado',
1306+
paidStatusWithdrawing: 'Retirando',
1307+
paidStatusConfirmed: 'Confirmado',
13051308
done: 'Listo',
13061309
deleted: 'Eliminado',
13071310
settledElsewhere: 'Pagado de otra forma',

‎src/languages/fr.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1346,6 +1346,9 @@ const translations: TranslationDeepObject<typeof en> = {
13461346
other: 'Êtes-vous sûr de vouloir supprimer ces rapports ?',
13471347
}),
13481348
settledExpensify: 'Payé',
1349+
paidStatusMarkedAsPaid: 'Marqué comme payé',
1350+
paidStatusWithdrawing: 'Prélèvement en cours',
1351+
paidStatusConfirmed: 'Confirmé',
13491352
done: 'Terminé',
13501353
settledElsewhere: 'Payé ailleurs',
13511354
individual: 'Individuel',

‎src/languages/it.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1341,6 +1341,9 @@ const translations: TranslationDeepObject<typeof en> = {
13411341
other: 'Sei sicuro di voler eliminare questi report?',
13421342
}),
13431343
settledExpensify: 'Pagato',
1344+
paidStatusMarkedAsPaid: 'Contrassegnato come pagato',
1345+
paidStatusWithdrawing: 'Prelievo in corso',
1346+
paidStatusConfirmed: 'Confermato',
13441347
done: 'Fatto',
13451348
settledElsewhere: 'Pagato altrove',
13461349
individual: 'Personale',

‎src/languages/ja.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1327,6 +1327,9 @@ const translations: TranslationDeepObject<typeof en> = {
13271327
other: 'これらのレポートを削除してもよろしいですか？',
13281328
}),
13291329
settledExpensify: '支払い済み',
1330+
paidStatusMarkedAsPaid: '支払い済みとしてマーク',
1331+
paidStatusWithdrawing: '引き落とし中',
1332+
paidStatusConfirmed: '確認済み',
13301333
done: '完了',
13311334
settledElsewhere: '他で支払い済み',
13321335
individual: '個人',

0 commit comments

Comments
 (0)