diff options
| -rw-r--r-- | src/components/dms/MessageItem.tsx | 22 | ||||
| -rw-r--r-- | src/screens/Messages/Conversation/MessagesList.tsx | 8 |
2 files changed, 23 insertions, 7 deletions
diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index a449c6ed1..a8393c742 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -1,5 +1,5 @@ -import React, {useCallback, useMemo} from 'react' -import {StyleProp, TextStyle, View} from 'react-native' +import React, {useCallback, useMemo, useRef} from 'react' +import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native' import {ChatBskyConvoDefs} from '@atproto-labs/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -13,12 +13,14 @@ import {Text} from '#/components/Typography' export function MessageItem({ item, next, + pending, }: { item: ChatBskyConvoDefs.MessageView next: | ChatBskyConvoDefs.MessageView | ChatBskyConvoDefs.DeletedMessageView | null + pending?: boolean }) { const t = useTheme() const {currentAccount} = useSession() @@ -35,20 +37,26 @@ export function MessageItem({ return true } - // or, if there's a 10 minute gap between this message and the next + // or, if there's a 3 minute gap between this message and the next if (ChatBskyConvoDefs.isMessageView(next)) { const thisDate = new Date(item.sentAt) const nextDate = new Date(next.sentAt) const diff = nextDate.getTime() - thisDate.getTime() - // 10 minutes - return diff > 10 * 60 * 1000 + // 3 minutes + return diff > 3 * 60 * 1000 } return true }, [item, next, isFromSelf, isNextFromSelf]) + const lastInGroupRef = useRef(isLastInGroup) + if (lastInGroupRef.current !== isLastInGroup) { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + lastInGroupRef.current = isLastInGroup + } + return ( <View> <ActionsWrapper isFromSelf={isFromSelf} message={item}> @@ -60,7 +68,9 @@ export function MessageItem({ a.rounded_md, { backgroundColor: isFromSelf - ? t.palette.primary_500 + ? pending + ? t.palette.primary_200 + : t.palette.primary_500 : t.palette.contrast_50, borderRadius: 17, }, diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index e011721e1..28cc48776 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -57,7 +57,13 @@ function RetryButton({onPress}: {onPress: () => unknown}) { function renderItem({item}: {item: ConvoItem}) { if (item.type === 'message' || item.type === 'pending-message') { - return <MessageItem item={item.message} next={item.nextMessage} /> + return ( + <MessageItem + item={item.message} + next={item.nextMessage} + pending={item.type === 'pending-message'} + /> + ) } else if (item.type === 'deleted-message') { return <Text>Deleted message</Text> } else if (item.type === 'pending-retry') { |