diff --git a/native/chat/message-list-types.js b/native/chat/message-list-types.js --- a/native/chat/message-list-types.js +++ b/native/chat/message-list-types.js @@ -1,16 +1,20 @@ // @flow -import { useNavigation } from '@react-navigation/native'; +import { useNavigation, useNavigationState } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { type UserInfo } from 'lib/types/user-types.js'; +import { ChatContext } from './chat-context.js'; import type { ChatRouterNavigationAction } from './chat-router.js'; import type { MarkdownRules } from '../markdown/rules.react.js'; import { useTextMessageRulesFunc } from '../markdown/rules.react.js'; -import { MessageListRouteName } from '../navigation/route-names.js'; +import { + MessageListRouteName, + TextMessageTooltipModalRouteName, +} from '../navigation/route-names.js'; export type MessageListParams = { +threadInfo: ThreadInfo, @@ -84,9 +88,41 @@ return messageListContext.getTextMessageMarkdownRules(useDarkStyle); } +function useNavigateToThreadWithFadeAnimation( + threadInfo: ThreadInfo, + messageKey: ?string, +): () => mixed { + const chatContext = React.useContext(ChatContext); + invariant(chatContext, 'ChatContext should be set'); + const { + setCurrentTransitionSidebarSourceID: setSidebarSourceID, + setSidebarAnimationType, + } = chatContext; + const navigateToThread = useNavigateToThread(); + const navigationStack = useNavigationState(state => state.routes); + return React.useCallback(() => { + if ( + navigationStack[navigationStack.length - 1].name === + TextMessageTooltipModalRouteName + ) { + setSidebarSourceID(messageKey); + setSidebarAnimationType('fade_source_message'); + } + navigateToThread({ threadInfo }); + }, [ + messageKey, + navigateToThread, + navigationStack, + setSidebarAnimationType, + setSidebarSourceID, + threadInfo, + ]); +} + export { MessageListContextProvider, createNavigateToThreadAction, useNavigateToThread, useTextMessageMarkdownRules, + useNavigateToThreadWithFadeAnimation, }; diff --git a/native/markdown/markdown-chat-mention.react.js b/native/markdown/markdown-chat-mention.react.js --- a/native/markdown/markdown-chat-mention.react.js +++ b/native/markdown/markdown-chat-mention.react.js @@ -3,18 +3,28 @@ import * as React from 'react'; import { Text, StyleSheet } from 'react-native'; +import type { ResolvedThreadInfo } from 'lib/types/thread-types.js'; + import { useMarkdownOnPressUtils } from './markdown-utils.js'; +import { useNavigateToThreadWithFadeAnimation } from '../chat/message-list-types.js'; type TextProps = React.ElementConfig<typeof Text>; type Props = { + +threadInfo: ResolvedThreadInfo, +children: React.Node, ...TextProps, }; function MarkdownChatMention(props: Props): React.Node { - const { ...rest } = props; - const { isRevealed, onLongPressHandler } = useMarkdownOnPressUtils(); + const { threadInfo, ...rest } = props; + const { messageKey, isRevealed, onLongPressHandler } = + useMarkdownOnPressUtils(); + const onPressHandler = useNavigateToThreadWithFadeAnimation( + threadInfo, + messageKey, + ); return ( <Text + onPress={isRevealed ? onPressHandler : null} onLongPress={isRevealed ? onLongPressHandler : null} style={styles.mention} {...rest}