diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js index 47b53f94a..f2f37cd0b 100644 --- a/native/chat/inner-robotext-message.react.js +++ b/native/chat/inner-robotext-message.react.js @@ -1,146 +1,159 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { Text, TouchableWithoutFeedback, View } from 'react-native'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { splitRobotext, parseRobotextEntity, robotextToRawString, } from 'lib/shared/message-utils'; import Markdown from '../markdown/markdown.react'; import { inlineMarkdownRules } from '../markdown/rules.react'; import { useSelector } from '../redux/redux-utils'; import { useOverlayStyles } from '../themes/colors'; import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types'; import { useNavigateToThread } from './message-list-types'; function dummyNodeForRobotextMessageHeightMeasurement( robotext: string, ): React.Element { return ( {robotextToRawString(robotext)} ); } type InnerRobotextMessageProps = { +item: ChatRobotextMessageInfoItemWithHeight, +onPress: () => void, +onLongPress?: () => void, }; function InnerRobotextMessage(props: InnerRobotextMessageProps): React.Node { const { item, onLongPress, onPress } = props; const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const styles = useOverlayStyles(unboundStyles); - const { robotext } = item; - const robotextParts = splitRobotext(robotext); - const textParts = []; - let keyIndex = 0; - - for (const splitPart of robotextParts) { - if (splitPart === '') { - continue; - } - if (splitPart.charAt(0) !== '<') { - const darkColor = activeTheme === 'dark'; - const key = `text${keyIndex++}`; - textParts.push( - - {decodeURI(splitPart)} - , - ); - continue; - } - const { rawText, entityType, id } = parseRobotextEntity(splitPart); - - if (entityType === 't' && id !== item.messageInfo.threadID) { - textParts.push(); - } else if (entityType === 'c') { - textParts.push(); - } else { - textParts.push(rawText); + const { messageInfo, robotext } = item; + const { threadID } = messageInfo; + const textParts = React.useMemo(() => { + const robotextParts = splitRobotext(robotext); + const result = []; + let keyIndex = 0; + + for (const splitPart of robotextParts) { + if (splitPart === '') { + continue; + } + if (splitPart.charAt(0) !== '<') { + const darkColor = activeTheme === 'dark'; + const key = `text${keyIndex++}`; + result.push( + + {decodeURI(splitPart)} + , + ); + continue; + } + + const { rawText, entityType, id } = parseRobotextEntity(splitPart); + + if (entityType === 't' && id !== threadID) { + result.push(); + } else if (entityType === 'c') { + result.push(); + } else { + result.push(rawText); + } } - } + + return result; + }, [robotext, activeTheme, threadID, styles.robotext]); const viewStyle = [styles.robotextContainer]; if (!__DEV__) { // We don't force view height in dev mode because we // want to measure it in Message to see if it's correct viewStyle.push({ height: item.contentHeight }); } return ( {textParts} ); } type ThreadEntityProps = { +id: string, +name: string, }; function ThreadEntity(props: ThreadEntityProps) { const threadID = props.id; const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const styles = useOverlayStyles(unboundStyles); const navigateToThread = useNavigateToThread(); const onPressThread = React.useCallback(() => { invariant(threadInfo, 'onPressThread should have threadInfo'); navigateToThread({ threadInfo }); }, [threadInfo, navigateToThread]); if (!threadInfo) { return {props.name}; } return ( {props.name} ); } function ColorEntity(props: { +color: string }) { const colorStyle = { color: props.color }; return {props.color}; } const unboundStyles = { link: { color: 'link', }, robotextContainer: { paddingTop: 6, paddingBottom: 11, paddingHorizontal: 24, }, robotext: { color: 'listForegroundSecondaryLabel', fontFamily: 'Arial', fontSize: 15, textAlign: 'center', }, dummyRobotext: { fontFamily: 'Arial', fontSize: 15, textAlign: 'center', }, }; -export { dummyNodeForRobotextMessageHeightMeasurement, InnerRobotextMessage }; +const MemoizedInnerRobotextMessage: React.ComponentType = React.memo( + InnerRobotextMessage, +); + +export { + dummyNodeForRobotextMessageHeightMeasurement, + MemoizedInnerRobotextMessage as InnerRobotextMessage, +};