Page MenuHomePhabricator
Files F2770070

D9055.diff
No OneTemporary
Actions

D9055.diff
View Options

diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js
--- a/native/chat/inner-text-message.react.js
+++ b/native/chat/inner-text-message.react.js
@@ -81,19 +81,28 @@
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
const boundColors = useColors();
- const messageStyle = {};
- let darkColor;
- if (isViewer) {
- const threadColor = item.threadInfo.color;
- messageStyle.backgroundColor =
- props.threadColorOverride ?? `#${threadColor}`;
- darkColor = props.isThreadColorDarkOverride ?? colorIsDark(threadColor);
- } else {
- messageStyle.backgroundColor = boundColors.listChatBubble;
- darkColor = activeTheme === 'dark';
- }
-
- const cornerStyle = getRoundedContainerStyle(filterCorners(allCorners, item));
+ const darkColor = !isViewer
+ ? activeTheme === 'dark'
+ : props.isThreadColorDarkOverride ?? colorIsDark(item.threadInfo.color);
+
+ const messageStyle = React.useMemo(
+ () => ({
+ backgroundColor: !isViewer
+ ? boundColors.listChatBubble
+ : props.threadColorOverride ?? `#${item.threadInfo.color}`,
+ }),
+ [
+ boundColors.listChatBubble,
+ isViewer,
+ item.threadInfo.color,
+ props.threadColorOverride,
+ ],
+ );
+
+ const cornerStyle = React.useMemo(
+ () => getRoundedContainerStyle(filterCorners(allCorners, item)),
+ [item],
+ );
const rules = useTextMessageMarkdownRules(darkColor);
const textMessageMarkdown = useTextMessageMarkdown(item.messageInfo);
@@ -118,54 +127,82 @@
// around the text, and to have the Texts inside ALL implement an onPress prop
// that will default to the message touch gesture. Luckily, Text with onPress
// plays nice with the message swipe gesture.
- let secondMessage;
- if (textMessageMarkdown.markdownHasPressable) {
- secondMessage = (
- <View
- style={[StyleSheet.absoluteFill, styles.message]}
- pointerEvents="box-none"
- >
+ const secondMessageStyle = React.useMemo(
+ () => [StyleSheet.absoluteFill, styles.message],
+ [],
+ );
+ const secondMessage = React.useMemo(() => {
+ if (!textMessageMarkdown.markdownHasPressable) {
+ return undefined;
+ }
+ return (
+ <View style={secondMessageStyle} pointerEvents="box-none">
<Markdown style={markdownStyles} rules={rules}>
{text}
</Markdown>
</View>
);
- }
-
- const message = (
- <TextMessageMarkdownContext.Provider value={textMessageMarkdown}>
- <TouchableWithoutFeedback>
- <View>
- <GestureTouchableOpacity
- onPress={props.onPress}
- onLongPress={props.onPress}
- activeOpacity={0.6}
- style={[styles.message, cornerStyle]}
- animatedStyle={messageStyle}
- >
- <Markdown style={markdownStyles} rules={rules}>
- {text}
- </Markdown>
- </GestureTouchableOpacity>
- {secondMessage}
- </View>
- </TouchableWithoutFeedback>
- </TextMessageMarkdownContext.Provider>
+ }, [
+ markdownStyles,
+ rules,
+ secondMessageStyle,
+ text,
+ textMessageMarkdown.markdownHasPressable,
+ ]);
+
+ const gestureTouchableOpacityStyle = React.useMemo(
+ () => [styles.message, cornerStyle],
+ [cornerStyle],
+ );
+ const message = React.useMemo(
+ () => (
+ <TextMessageMarkdownContext.Provider value={textMessageMarkdown}>
+ <TouchableWithoutFeedback>
+ <View>
+ <GestureTouchableOpacity
+ onPress={props.onPress}
+ onLongPress={props.onPress}
+ activeOpacity={0.6}
+ style={gestureTouchableOpacityStyle}
+ animatedStyle={messageStyle}
+ >
+ <Markdown style={markdownStyles} rules={rules}>
+ {text}
+ </Markdown>
+ </GestureTouchableOpacity>
+ {secondMessage}
+ </View>
+ </TouchableWithoutFeedback>
+ </TextMessageMarkdownContext.Provider>
+ ),
+ [
+ gestureTouchableOpacityStyle,
+ markdownStyles,
+ messageStyle,
+ props.onPress,
+ rules,
+ secondMessage,
+ text,
+ textMessageMarkdown,
+ ],
);
// We need to set onLayout in order to allow .measure() to be on the ref
const onLayout = React.useCallback(() => {}, []);
-
const { messageRef } = props;
- if (!messageRef) {
- return message;
- }
- return (
- <View onLayout={onLayout} ref={messageRef}>
- {message}
- </View>
- );
+ const innerTextMessage = React.useMemo(() => {
+ if (!messageRef) {
+ return message;
+ }
+ return (
+ <View onLayout={onLayout} ref={messageRef}>
+ {message}
+ </View>
+ );
+ }, [message, messageRef, onLayout]);
+
+ return innerTextMessage;
}
const styles = StyleSheet.create({

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 7:33 PM (22 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2153947
Default Alt Text
D9055.diff (4 KB)

Event Timeline