Skip to content

Commit 8e1108a

Browse files
JakubKorytkoJakubKorytko
committed
Improve ParentNavigationSubtitle component
1 parent 5e91bd1 commit 8e1108a

1 file changed

Lines changed: 64 additions & 48 deletions

File tree

‎src/components/ParentNavigationSubtitle.tsx‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import {useRoute} from '@react-navigation/native';
22
import React from 'react';
33
import type {StyleProp, ViewStyle} from 'react-native';
4+
import {View} from 'react-native';
45
import {useOnyx} from 'react-native-onyx';
6+
import useHover from '@hooks/useHover';
57
import useLocalize from '@hooks/useLocalize';
68
import useRootNavigationState from '@hooks/useRootNavigationState';
9+
import useStyleUtils from '@hooks/useStyleUtils';
10+
import useTheme from '@hooks/useTheme';
711
import useThemeStyles from '@hooks/useThemeStyles';
812
import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
913
import Navigation from '@libs/Navigation/Navigation';
@@ -16,8 +20,8 @@ import NAVIGATORS from '@src/NAVIGATORS';
1620
import ONYXKEYS from '@src/ONYXKEYS';
1721
import ROUTES from '@src/ROUTES';
1822
import SCREENS from '@src/SCREENS';
19-
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
2023
import Text from './Text';
24+
import TextLink from './TextLink';
2125

2226
type ParentNavigationSubtitleProps = {
2327
parentNavigationSubtitleData: ParentNavigationSummaryParams;
@@ -44,6 +48,13 @@ function ParentNavigationSubtitle({
4448
}: ParentNavigationSubtitleProps) {
4549
const currentRoute = useRoute();
4650
const styles = useThemeStyles();
51+
const theme = useTheme();
52+
const StyleUtils = useStyleUtils();
53+
const {
54+
hovered,
55+
bind: {onMouseEnter, onMouseLeave},
56+
} = useHover();
57+
4758
const {workspaceName, reportName} = parentNavigationSubtitleData;
4859
const {translate} = useLocalize();
4960
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`, {canBeMissing: false});
@@ -56,61 +67,66 @@ function ParentNavigationSubtitle({
5667
return;
5768
}
5869

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-
}
70+
const onPress = () => {
71+
const parentAction = getReportAction(parentReportID, parentReportActionID);
72+
const isVisibleAction = shouldReportActionBeVisible(parentAction, parentAction?.reportActionID ?? CONST.DEFAULT_NUMBER_ID, canUserPerformWriteAction);
8173

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

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

0 commit comments

Comments
 (0)