Skip to content

Commit 07a5a05

Browse files
mountinymountiny
authored
Merge pull request Expensify#63441 from software-mansion-labs/korytko/fix-link-in-header
[Better Expense Report View] Improve the link interactivity in the sub-header line of report card inside Reports, RHP & Report view
2 parents cdab13e + 42b04d6 commit 07a5a05

1 file changed

Lines changed: 63 additions & 50 deletions

File tree

‎src/components/ParentNavigationSubtitle.tsx‎

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import {useRoute} from '@react-navigation/native';
22
import React from 'react';
3-
import type {StyleProp, ViewStyle} from 'react-native';
3+
import type {StyleProp, TextStyle} from 'react-native';
44
import {useOnyx} from 'react-native-onyx';
5+
import useHover from '@hooks/useHover';
56
import useLocalize from '@hooks/useLocalize';
67
import useRootNavigationState from '@hooks/useRootNavigationState';
8+
import useStyleUtils from '@hooks/useStyleUtils';
9+
import useTheme from '@hooks/useTheme';
710
import useThemeStyles from '@hooks/useThemeStyles';
811
import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
912
import Navigation from '@libs/Navigation/Navigation';
@@ -16,8 +19,8 @@ import NAVIGATORS from '@src/NAVIGATORS';
1619
import ONYXKEYS from '@src/ONYXKEYS';
1720
import ROUTES from '@src/ROUTES';
1821
import SCREENS from '@src/SCREENS';
19-
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
2022
import Text from './Text';
23+
import TextLink from './TextLink';
2124

2225
type ParentNavigationSubtitleProps = {
2326
parentNavigationSubtitleData: ParentNavigationSummaryParams;
@@ -29,7 +32,7 @@ type ParentNavigationSubtitleProps = {
2932
parentReportActionID?: string;
3033

3134
/** PressableWithoutFeedback additional styles */
32-
pressableStyles?: StyleProp<ViewStyle>;
35+
pressableStyles?: StyleProp<TextStyle>;
3336

3437
/** Whether to open the parent report link in the current tab if possible */
3538
openParentReportInCurrentTab?: boolean;
@@ -44,6 +47,13 @@ function ParentNavigationSubtitle({
4447
}: ParentNavigationSubtitleProps) {
4548
const currentRoute = useRoute();
4649
const styles = useThemeStyles();
50+
const theme = useTheme();
51+
const StyleUtils = useStyleUtils();
52+
const {
53+
hovered,
54+
bind: {onMouseEnter, onMouseLeave},
55+
} = useHover();
56+
4757
const {workspaceName, reportName} = parentNavigationSubtitleData;
4858
const {translate} = useLocalize();
4959
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`, {canBeMissing: false});
@@ -56,61 +66,64 @@ function ParentNavigationSubtitle({
5666
return;
5767
}
5868

59-
return (
60-
<PressableWithoutFeedback
61-
onPress={() => {
62-
const parentAction = getReportAction(parentReportID, parentReportActionID);
63-
const isVisibleAction = shouldReportActionBeVisible(parentAction, parentAction?.reportActionID ?? CONST.DEFAULT_NUMBER_ID, canUserPerformWriteAction);
64-
65-
if (openParentReportInCurrentTab && isReportInRHP) {
66-
// If the report is displayed in RHP in Reports tab, we want to stay in the current tab after opening the parent report
67-
if (currentFullScreenRoute?.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR) {
68-
const lastRoute = currentFullScreenRoute?.state?.routes.at(-1);
69-
if (lastRoute?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT) {
70-
const moneyRequestReportID = (lastRoute?.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT])?.reportID;
71-
// If the parent report is already displayed underneath RHP, simply dismiss the modal
72-
if (moneyRequestReportID === parentReportID) {
73-
Navigation.dismissModal();
74-
return;
75-
}
76-
}
77-
78-
Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: parentReportID}));
79-
return;
80-
}
69+
const onPress = () => {
70+
const parentAction = getReportAction(parentReportID, parentReportActionID);
71+
const isVisibleAction = shouldReportActionBeVisible(parentAction, parentAction?.reportActionID ?? CONST.DEFAULT_NUMBER_ID, canUserPerformWriteAction);
8172

73+
if (openParentReportInCurrentTab && isReportInRHP) {
74+
// If the report is displayed in RHP in Reports tab, we want to stay in the current tab after opening the parent report
75+
if (currentFullScreenRoute?.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR) {
76+
const lastRoute = currentFullScreenRoute?.state?.routes.at(-1);
77+
if (lastRoute?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT) {
78+
const moneyRequestReportID = (lastRoute?.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.MONEY_REQUEST_REPORT])?.reportID;
8279
// If the parent report is already displayed underneath RHP, simply dismiss the modal
83-
if (Navigation.getTopmostReportId() === parentReportID) {
80+
if (moneyRequestReportID === parentReportID) {
8481
Navigation.dismissModal();
8582
return;
8683
}
8784
}
8885

89-
if (isVisibleAction) {
90-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID));
91-
} else {
92-
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID));
93-
}
94-
}}
95-
accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
96-
role={CONST.ROLE.LINK}
97-
style={pressableStyles}
86+
Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: parentReportID}));
87+
return;
88+
}
89+
90+
// If the parent report is already displayed underneath RHP, simply dismiss the modal
91+
if (Navigation.getTopmostReportId() === parentReportID) {
92+
Navigation.dismissModal();
93+
return;
94+
}
95+
}
96+
97+
if (isVisibleAction) {
98+
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID));
99+
} else {
100+
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID));
101+
}
102+
};
103+
104+
return (
105+
<Text
106+
style={[styles.optionAlternateText, styles.textLabelSupporting]}
107+
numberOfLines={1}
98108
>
99-
<Text
100-
style={[styles.optionAlternateText, styles.textLabelSupporting]}
101-
numberOfLines={1}
102-
>
103-
{!!reportName && (
104-
<>
105-
<Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
106-
<Text style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}>{reportName}</Text>
107-
</>
108-
)}
109-
{!!workspaceName && workspaceName !== reportName && (
110-
<Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
111-
)}
112-
</Text>
113-
</PressableWithoutFeedback>
109+
{!!reportName && (
110+
<>
111+
<Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{`${translate('threads.from')} `}</Text>
112+
<TextLink
113+
onMouseEnter={onMouseEnter}
114+
onMouseLeave={onMouseLeave}
115+
onPress={onPress}
116+
accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
117+
style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link]}
118+
>
119+
{reportName}
120+
</TextLink>
121+
</>
122+
)}
123+
{!!workspaceName && workspaceName !== reportName && (
124+
<Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
125+
)}
126+
</Text>
114127
);
115128
}
116129

0 commit comments

Comments
 (0)