Skip to content

Commit

Permalink
Merge pull request #497 from ephemeraHQ/saulmc/reactions-no-abs
Browse files Browse the repository at this point in the history
  • Loading branch information
@saulmc
saulmc authored Aug 13, 2024
2 parents 185f57a + a2d813d commit 5cbca98
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 126 deletions.
104 changes: 59 additions & 45 deletions components/Chat/Message/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
TouchableOpacity,
View,
useColorScheme,
DimensionValue,
} from "react-native";
import { Swipeable } from "react-native-gesture-handler";

Expand Down Expand Up @@ -182,6 +183,24 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) {
const reactions = getMessageReactions(message);
const showInBubble = !isGroupUpdated;
const showAvatar = isGroup && !message.fromMe;
const showReactionsOutside = isAttachment || isFrame || isTransaction;

let messageMaxWidth: DimensionValue;
if (isDesktop) {
if (isAttachment) {
messageMaxWidth = 366;
} else {
messageMaxWidth = 588;
}
} else {
if (isAttachment) {
messageMaxWidth = "70%";
} else {
if (isFrame) {
messageMaxWidth = "100%";
} else messageMaxWidth = "85%";
}
}

const showStatus =
message.fromMe &&
Expand All @@ -201,8 +220,8 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) {
const messageAttachment = useChatStore(
(state) => state.messageAttachments[message.id] || null
);
const attachmentStillLoading =
isAttachment && (!messageAttachment || messageAttachment.loading);

const hasReactions = Object.keys(reactions).length > 0;

const swipeableRef = useRef<Swipeable | null>(null);

Expand Down Expand Up @@ -289,6 +308,7 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) {
style={{
alignSelf: message.fromMe ? "flex-end" : "flex-start",
alignItems: message.fromMe ? "flex-end" : "flex-start",
maxWidth: messageMaxWidth,
}}
>
<ChatMessageActions
Expand Down Expand Up @@ -341,18 +361,6 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) {
>
{messageContent}
</View>
<View
style={
isAttachment || isFrame || isTransaction
? { position: "absolute", bottom: 0, zIndex: 1 }
: undefined
}
>
<ChatMessageReactions
message={message}
reactions={reactions}
/>
</View>
</View>
) : (
<View
Expand All @@ -363,45 +371,41 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) {
: undefined,
]}
>
<View style={{ zIndex: 0 }}>{messageContent}</View>
<View
style={
isAttachment || isFrame || isTransaction
? { position: "absolute", bottom: 0, zIndex: 1 }
: undefined
}
>
<ChatMessageReactions
message={message}
reactions={reactions}
/>
</View>
<View>{messageContent}</View>
</View>
)}
{hasReactions && !showReactionsOutside && (
<View style={styles.reactionsContainer}>
<ChatMessageReactions
message={message}
reactions={reactions}
/>
</View>
)}
</ChatMessageActions>
<View
style={{
flexDirection: "row",
flexBasis: "100%",
justifyContent: "space-between",
alignItems: "center",
}}
style={showReactionsOutside && styles.outsideMetaContainer}
>
{isFrame && (
<TouchableOpacity
onPress={() => handleUrlPress(message.content)}
style={{ flex: 1 }}
>
<Text style={styles.linkToFrame}>
{getUrlToRender(message.content)}
</Text>
</TouchableOpacity>
)}
{message.fromMe && (
<View style={styles.statusContainer}>
<MessageStatus message={message} />
{showReactionsOutside && (
<View style={styles.outsideReactionsContainer}>
<ChatMessageReactions
message={message}
reactions={reactions}
/>
</View>
)}
{message.fromMe && !hasReactions && (
<MessageStatus message={message} />
)}
</View>
</View>
</View>
Expand Down Expand Up @@ -507,15 +511,11 @@ const useStyles = () => {
flexDirection: "row",
flexWrap: "wrap",
},
statusContainer: {
marginLeft: "auto",
},
linkToFrame: {
fontSize: 12,
marginVertical: 7,
marginLeft: 6,
marginRight: "auto",
padding: 6,
color: textSecondaryColor(colorScheme),
flexGrow: 1,
},
date: {
flexBasis: "100%",
Expand All @@ -534,8 +534,8 @@ const useStyles = () => {
paddingHorizontal: 0,
},
messageContentContainer: {
paddingVertical: 8,
paddingHorizontal: 14,
paddingVertical: 6,
paddingHorizontal: 10,
},
messageText: {
color: textPrimaryColor(colorScheme),
Expand Down Expand Up @@ -571,5 +571,19 @@ const useStyles = () => {
width: AvatarSizes.messageSender,
height: AvatarSizes.messageSender,
},
outsideMetaContainer: {
marginTop: 4,
flexDirection: "row",
justifyContent: "flex-start",
columnGap: 8,
width: "100%",
},
reactionsContainer: {
marginHorizontal: 8,
marginBottom: 8,
},
outsideReactionsContainer: {
flex: 1,
},
});
};
26 changes: 3 additions & 23 deletions components/Chat/Message/MessageActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import * as Haptics from "expo-haptics";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
ColorSchemeName,
DimensionValue,
Platform,
StyleSheet,
useColorScheme,
Expand Down Expand Up @@ -40,7 +39,6 @@ import { useFramesStore } from "../../../data/store/framesStore";
import { ReanimatedTouchableOpacity } from "../../../utils/animations";
import { isAttachmentMessage } from "../../../utils/attachment/helpers";
import { useConversationContext } from "../../../utils/conversation";
import { isDesktop } from "../../../utils/device";
import { converseEventEmitter } from "../../../utils/events";
import {
MessageReaction,
Expand Down Expand Up @@ -78,23 +76,6 @@ export default function ChatMessageActions({
const isFrame = !!frames[message.content.toLowerCase()];
const styles = useStyles();

let messageMaxWidth: DimensionValue;
if (isDesktop) {
if (isAttachment) {
messageMaxWidth = 366;
} else {
messageMaxWidth = 588;
}
} else {
if (isAttachment) {
messageMaxWidth = "70%";
} else {
if (isFrame) {
messageMaxWidth = "100%";
} else messageMaxWidth = "85%";
}
}

const [emojiPickerShown, setEmojiPickerShown] = useState(false);

const showReactionModal = useCallback(() => {
Expand Down Expand Up @@ -391,7 +372,7 @@ export default function ChatMessageActions({
},
}),
{
maxWidth: messageMaxWidth,
// maxWidth: messageMaxWidth,
},
]}
onPress={() => {
Expand Down Expand Up @@ -499,10 +480,9 @@ const useStyles = () => {
messageBubble: {
flexShrink: 1,
flexGrow: 0,
minHeight: 36,
borderRadius: 18,
minHeight: 32,
borderRadius: 16,
},

messageBubbleMe: {
marginLeft: "auto",
},
Expand Down
Loading

0 comments on commit 5cbca98

Please sign in to comment.