Page MenuHomePhorge
Files F33093474

D14545.1768464871.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D14545.1768464871.diff
View Options

diff --git a/native/chat/deleted-message.react.js b/native/chat/deleted-message.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/deleted-message.react.js
@@ -0,0 +1,71 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import ComposedMessage from './composed-message.react.js';
+import {
+ allCorners,
+ filterCorners,
+ getRoundedContainerStyle,
+} from './rounded-corners.js';
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useStyles } from '../themes/colors.js';
+import { type ChatComposedMessageInfoItemWithHeight } from '../types/chat-types.js';
+
+type Props = {
+ +item: ChatComposedMessageInfoItemWithHeight,
+};
+
+function DeletedMessage(props: Props): React.Node {
+ const { item } = props;
+
+ const cornerStyle = React.useMemo(
+ () => getRoundedContainerStyle(filterCorners(allCorners, item)),
+ [item],
+ );
+
+ const styles = useStyles(unboundStyles);
+ const containerStyle = React.useMemo(
+ () => [styles.message, cornerStyle],
+ [cornerStyle, styles.message],
+ );
+ const text = 'Deleted message';
+ return (
+ <ComposedMessage
+ item={item}
+ sendFailed={false}
+ focused={false}
+ swipeOptions="none"
+ shouldDisplayPinIndicator={false}
+ >
+ <View style={containerStyle}>
+ <SWMansionIcon name="block-2" size={16} style={styles.icon} />
+ <Text style={styles.text}>{text}</Text>
+ </View>
+ </ComposedMessage>
+ );
+}
+
+const unboundStyles = {
+ icon: {
+ marginRight: 4,
+ color: 'deletedMessageText',
+ },
+ text: {
+ fontFamily: 'Arial',
+ fontSize: 18,
+ color: 'deletedMessageText',
+ fontStyle: 'italic',
+ },
+ message: {
+ overflow: 'hidden',
+ paddingHorizontal: 12,
+ paddingVertical: 6,
+ backgroundColor: 'deletedMessageBackground',
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+};
+
+export { DeletedMessage };
diff --git a/native/chat/message.react.js b/native/chat/message.react.js
--- a/native/chat/message.react.js
+++ b/native/chat/message.react.js
@@ -11,6 +11,7 @@
import { useCanToggleMessagePin } from 'lib/utils/message-pinning-utils.js';
import type { ChatNavigationProp } from './chat.react.js';
+import { DeletedMessage } from './deleted-message.react.js';
import MultimediaMessage from './multimedia-message.react.js';
import { RobotextMessage } from './robotext-message.react.js';
import { TextMessage } from './text-message.react.js';
@@ -98,7 +99,9 @@
);
const innerMessageNode = React.useMemo(() => {
- if (item.messageShapeType === 'text') {
+ if (item.deleted) {
+ return <DeletedMessage item={item} />;
+ } else if (item.messageShapeType === 'text') {
return (
<TextMessage
item={item}
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -154,6 +154,8 @@
greenIndicatorOuter: designSystemColors.successDark50,
redIndicatorInner: designSystemColors.errorPrimary,
redIndicatorOuter: designSystemColors.errorDark50,
+ deletedMessageText: designSystemColors.shadesBlack60,
+ deletedMessageBackground: designSystemColors.shadesWhite90,
});
export type Colors = $Exact<typeof light>;
@@ -262,6 +264,8 @@
greenIndicatorOuter: designSystemColors.successDark90,
redIndicatorInner: designSystemColors.errorPrimary,
redIndicatorOuter: designSystemColors.errorDark90,
+ deletedMessageText: designSystemColors.shadesWhite60,
+ deletedMessageBackground: designSystemColors.shadesBlack90,
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 8:14 AM (10 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5936878
Default Alt Text
D14545.1768464871.diff (3 KB)

Event Timeline