Page MenuHomePhabricator
Files F3401747

D7791.diff
No OneTemporary
Actions

D7791.diff
View Options

diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -4,7 +4,12 @@
import invariant from 'invariant';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {
+ useDerivedValue,
+ withTiming,
+ interpolateColor,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js';
@@ -55,6 +60,7 @@
+inputState: ?InputState,
+navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean,
+ +editedMessageStyle: AnimatedStyleObj,
};
class ComposedMessage extends React.PureComponent<Props> {
render() {
@@ -73,6 +79,7 @@
contentAndHeaderOpacity,
deliveryIconOpacity,
shouldRenderAvatars,
+ editedMessageStyle,
...viewProps
} = this.props;
const { id, creator } = item.messageInfo;
@@ -87,16 +94,7 @@
if (item.endsCluster) {
containerMarginBottom += clusterEndHeight;
}
-
- const highlightStyle =
- id && this.props.inputState?.editState.editedMessage?.id === id
- ? { backgroundColor: `#${item.threadInfo.color}40` }
- : null;
-
- const containerStyle = [
- { marginBottom: containerMarginBottom },
- highlightStyle,
- ];
+ const containerStyle = { marginBottom: containerMarginBottom };
const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer
@@ -217,7 +215,7 @@
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView>
- <View style={containerStyle}>
+ <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}>
<View style={[styles.content, alignStyle]}>
{deliveryIcon}
@@ -226,7 +224,7 @@
{failedSendInfo}
{inlineEngagement}
</View>
- </View>
+ </AnimatedView>
</View>
);
}
@@ -305,6 +303,21 @@
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars();
+ const progress = useDerivedValue(() => {
+ const isHighlighted =
+ inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
+ return withTiming(isHighlighted ? 1 : 0);
+ });
+ const editedMessageStyle = useAnimatedStyle(() => {
+ const backgroundColor = interpolateColor(
+ progress.value,
+ [0, 1],
+ ['transparent', `#${props.item.threadInfo.color}40`],
+ );
+ return {
+ backgroundColor,
+ };
+ });
return (
<ComposedMessage
@@ -316,6 +329,7 @@
contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars}
+ editedMessageStyle={editedMessageStyle}
/>
);
});

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 1:43 PM (21 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2611868
Default Alt Text
D7791.diff (3 KB)

Event Timeline