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,31 @@ return messageListContext.getTextMessageMarkdownRules(useDarkStyle); } +function useNavigateToThreadWithFadeAnimation( + threadInfo: ThreadInfo, + messageKey: ?string, +): () => mixed { + const chatContext = React.useContext(ChatContext); + invariant(chatContext, 'ChatContext should be set'); + const navigateToThread = useNavigateToThread(); + const navigationStack = useNavigationState(state => state.routes); + + return React.useCallback(() => { + if ( + navigationStack[navigationStack.length - 1].name === + TextMessageTooltipModalRouteName + ) { + chatContext.setCurrentTransitionSidebarSourceID(messageKey); + chatContext.setSidebarAnimationType('fade_source_message'); + } + navigateToThread({ threadInfo }); + }, [chatContext, messageKey, navigateToThread, navigationStack, 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 new file mode 100644 --- /dev/null +++ b/native/markdown/markdown-chat-mention.react.js @@ -0,0 +1,39 @@ +// @flow + +import * as React from 'react'; +import { Text } from 'react-native'; + +import type { ResolvedThreadInfo } from 'lib/types/thread-types.js'; + +import { + useMarkdownOnPressUtils, + useHandleChatMentionClick, +} from './markdown-utils.js'; + +type TextProps = React.ElementConfig; +type Props = { + +threadInfo: ResolvedThreadInfo, + +hasAccessToChat: boolean, + +children: React.Node, + ...TextProps, +}; +function MarkdownChatMention(props: Props): React.Node { + const { threadInfo, hasAccessToChat, style, ...rest } = props; + const { markdownContext, messageKey, shouldBePressable, onLongPressHandler } = + useMarkdownOnPressUtils(!hasAccessToChat); + const onPressHandler = useHandleChatMentionClick( + threadInfo, + markdownContext, + messageKey, + ); + return ( + + ); +} + +export default MarkdownChatMention; diff --git a/native/markdown/markdown-utils.js b/native/markdown/markdown-utils.js --- a/native/markdown/markdown-utils.js +++ b/native/markdown/markdown-utils.js @@ -5,12 +5,14 @@ import { Linking } from 'react-native'; import { inviteLinkUrl } from 'lib/facts/links.js'; +import type { ThreadInfo } from 'lib/types/thread-types.js'; import { MarkdownContext, type MarkdownContextType, } from './markdown-context.js'; import { MarkdownSpoilerContext } from './markdown-spoiler-context.js'; +import { useNavigateToThreadWithFadeAnimation } from '../chat/message-list-types.js'; import { MessagePressResponderContext } from '../chat/message-press-responder-context.js'; import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context.js'; import { InviteLinksContext } from '../invite-links/invite-links-context-provider.react.js'; @@ -101,4 +103,24 @@ ]); } -export { useMarkdownOnPressUtils, useHandleLinkClick }; +function useHandleChatMentionClick( + threadInfo: ThreadInfo, + markdownContext: MarkdownContextType, + messageKey: ?string, +): () => mixed { + const { setLinkModalActive } = markdownContext; + const navigateToThreadWithFadeAnimation = + useNavigateToThreadWithFadeAnimation(threadInfo, messageKey); + + return React.useCallback(() => { + messageKey && setLinkModalActive({ [messageKey]: true }); + navigateToThreadWithFadeAnimation(); + messageKey && setLinkModalActive({ [messageKey]: false }); + }, [messageKey, navigateToThreadWithFadeAnimation, setLinkModalActive]); +} + +export { + useMarkdownOnPressUtils, + useHandleLinkClick, + useHandleChatMentionClick, +};