Changeset View
Changeset View
Standalone View
Standalone View
native/chat/text-message-tooltip-button.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import Animated from 'react-native-reanimated'; | import Animated from 'react-native-reanimated'; | ||||
import EmojiPicker from 'rn-emoji-keyboard'; | import EmojiPicker from 'rn-emoji-keyboard'; | ||||
import { localIDPrefix } from 'lib/shared/message-utils.js'; | import { localIDPrefix } from 'lib/shared/message-utils.js'; | ||||
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; | import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; | ||||
import { TooltipInlineEngagement } from './inline-engagement.react.js'; | import { TooltipInlineEngagement } from './inline-engagement.react.js'; | ||||
import { InnerTextMessage } from './inner-text-message.react.js'; | import { InnerTextMessage } from './inner-text-message.react.js'; | ||||
import { MessageHeader } from './message-header.react.js'; | import { MessageHeader } from './message-header.react.js'; | ||||
import { MessageListContextProvider } from './message-list-types.js'; | import { MessageListContextProvider } from './message-list-types.js'; | ||||
import { MessagePressResponderContext } from './message-press-responder-context.js'; | import { MessagePressResponderContext } from './message-press-responder-context.js'; | ||||
import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js'; | |||||
import { useSendReaction } from './reaction-message-utils.js'; | import { useSendReaction } from './reaction-message-utils.js'; | ||||
import ReactionSelectionPopover from './reaction-selection-popover.react.js'; | import ReactionSelectionPopover from './reaction-selection-popover.react.js'; | ||||
import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js'; | import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js'; | ||||
import { useAnimatedMessageTooltipButton } from './utils.js'; | import { useAnimatedMessageTooltipButton } from './utils.js'; | ||||
import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; | import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; | ||||
import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; | import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; | ||||
import type { TooltipRoute } from '../tooltip/tooltip.react.js'; | import type { TooltipRoute } from '../tooltip/tooltip.react.js'; | ||||
▲ Show 20 Lines • Show All 130 Lines • ▼ Show 20 Lines | <MessageListContextProvider threadInfo={threadInfo}> | ||||
<SidebarInputBarHeightMeasurer | <SidebarInputBarHeightMeasurer | ||||
sourceMessage={item} | sourceMessage={item} | ||||
onInputBarMeasured={onInputBarMeasured} | onInputBarMeasured={onInputBarMeasured} | ||||
/> | /> | ||||
<Animated.View style={messageContainerStyle}> | <Animated.View style={messageContainerStyle}> | ||||
<Animated.View style={headerStyle}> | <Animated.View style={headerStyle}> | ||||
<MessageHeader item={item} focused={true} display="modal" /> | <MessageHeader item={item} focused={true} display="modal" /> | ||||
</Animated.View> | </Animated.View> | ||||
<MessageTooltipButtonAvatar item={item} /> | |||||
ginsu: This component and `multimedia-message-tooltip-button.react.js` and `robotext-message-tooltip… | |||||
ashoatUnsubmitted Not Done Inline ActionsYes, great idea for a Backlog task!! ashoat: Yes, great idea for a Backlog task!! | |||||
ginsuAuthorUnsubmitted Done Inline Actionsginsu: https://linear.app/comm/issue/ENG-2911/introduce-a-wrapper-component-for-all-the-message… | |||||
{reactionSelectionPopover} | {reactionSelectionPopover} | ||||
<MessagePressResponderContext.Provider | <MessagePressResponderContext.Provider | ||||
value={messagePressResponderContext} | value={messagePressResponderContext} | ||||
> | > | ||||
<InnerTextMessage | <InnerTextMessage | ||||
item={item} | item={item} | ||||
onPress={navigation.goBackOnce} | onPress={navigation.goBackOnce} | ||||
threadColorOverride={threadColorOverride} | threadColorOverride={threadColorOverride} | ||||
Show All 15 Lines |
This component and multimedia-message-tooltip-button.react.js and robotext-message-tooltip-button.react.js have a ton of code that is copy and pasted with each other (reactions, inline engagement, and some styles). This is something we shouldn't spend time on now but wonder if eventually, we should make a general MessageTooltipButtonWrapper component that factors out all the shared code between these three components. If this is something we should do, I can create a task to track it