stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/Message/MessageItemView/MessageReplies.tsx

@@ -0,0 +1,233 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import {
+  TranslationContextValue,
+  useTranslationContext,
+} from '../../../contexts/translationContext/TranslationContext';
+import { ReplyConnectorLeft } from '../../../icons/ReplyConnectorLeft';
+import { ReplyConnectorRight } from '../../../icons/ReplyConnectorRight';
+import { primitives } from '../../../theme';
+import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
+
+export type MessageRepliesPropsWithContext = Pick<
+  MessageContextValue,
+  | 'alignment'
+  | 'message'
+  | 'onLongPress'
+  | 'onPress'
+  | 'onPressIn'
+  | 'onOpenThread'
+  | 'preventPress'
+  | 'threadList'
+> &
+  Pick<MessagesContextValue, 'MessageRepliesAvatars'> &
+  Pick<TranslationContextValue, 't'>;
+
+const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
+  const {
+    alignment,
+    message,
+    MessageRepliesAvatars,
+    onLongPress,
+    onOpenThread,
+    onPress,
+    onPressIn,
+    preventPress,
+    t,
+    threadList,
+  } = props;
+
+  const {
+    theme: {
+      messageItemView: {
+        replies: { container, messageRepliesText, content },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  if (threadList || !message.reply_count) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, container]}>
+      {alignment === 'left' && (
+        <ReplyConnectorLeft height={48} width={16} stroke={semantics.chatThreadConnectorIncoming} />
+      )}
+      <Pressable
+        disabled={preventPress}
+        onLongPress={(event) => {
+          if (onLongPress) {
+            onLongPress({
+              emitter: 'messageReplies',
+              event,
+            });
+          }
+        }}
+        onPress={(event) => {
+          if (onPress) {
+            onPress({
+              defaultHandler: onOpenThread,
+              emitter: 'messageReplies',
+              event,
+            });
+          }
+        }}
+        onPressIn={(event) => {
+          if (onPressIn) {
+            onPressIn({
+              defaultHandler: onOpenThread,
+              emitter: 'messageReplies',
+              event,
+            });
+          }
+        }}
+        style={[
+          styles.content,
+          { flexDirection: alignment === 'left' ? 'row' : 'row-reverse' },
+          content,
+        ]}
+        testID='message-replies'
+      >
+        <MessageRepliesAvatars />
+        <Text style={[styles.messageRepliesText, messageRepliesText]}>
+          {message.reply_count === 1
+            ? t('1 Reply')
+            : t('{{ replyCount }} Replies', {
+                replyCount: message.reply_count,
+              })}
+        </Text>
+      </Pressable>
+      {alignment === 'right' && (
+        <ReplyConnectorRight
+          height={48}
+          width={16}
+          stroke={semantics.chatThreadConnectorOutgoing}
+        />
+      )}
+    </View>
+  );
+};
+
+const areEqual = (
+  prevProps: MessageRepliesPropsWithContext,
+  nextProps: MessageRepliesPropsWithContext,
+) => {
+  const {
+    message: prevMessage,
+    onOpenThread: prevOnOpenThread,
+    t: prevT,
+    threadList: prevThreadList,
+  } = prevProps;
+  const {
+    message: nextMessage,
+    onOpenThread: nextOnOpenThread,
+    t: nextT,
+    threadList: nextThreadList,
+  } = nextProps;
+
+  const threadListEqual = prevThreadList === nextThreadList;
+  if (!threadListEqual) {
+    return false;
+  }
+
+  const messageReplyCountEqual = prevMessage.reply_count === nextMessage.reply_count;
+  if (!messageReplyCountEqual) {
+    return false;
+  }
+
+  const tEqual = prevT === nextT;
+  if (!tEqual) {
+    return false;
+  }
+
+  const onOpenThreadEqual = prevOnOpenThread === nextOnOpenThread;
+  if (!onOpenThreadEqual) {
+    return false;
+  }
+
+  return true;
+};
+
+const MemoizedMessageReplies = React.memo(
+  MessageRepliesWithContext,
+  areEqual,
+) as typeof MessageRepliesWithContext;
+
+export type MessageRepliesProps = Partial<MessageRepliesPropsWithContext>;
+
+export const MessageReplies = (props: MessageRepliesProps) => {
+  const {
+    alignment,
+    message,
+    onLongPress,
+    onOpenThread,
+    onPress,
+    onPressIn,
+    preventPress,
+    threadList,
+  } = useMessageContext();
+  const { MessageRepliesAvatars } = useMessagesContext();
+  const { t } = useTranslationContext();
+
+  return (
+    <MemoizedMessageReplies
+      {...{
+        alignment,
+        message,
+        MessageRepliesAvatars,
+        onLongPress,
+        onOpenThread,
+        onPress,
+        onPressIn,
+        preventPress,
+        t,
+        threadList,
+      }}
+      {...props}
+    />
+  );
+};
+
+MessageReplies.displayName = 'MessageReplies{messageItemView{replies}}';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: primitives.spacingXs,
+        marginTop: -primitives.spacingMd, // Pulling the replies container up to hide the stick in the message content
+      },
+      content: {
+        alignSelf: 'flex-end',
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: primitives.spacingXs,
+      },
+      messageRepliesText: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightTight,
+      },
+    });
+  }, [shouldUseOverlayStyles, semantics]);
+};

package/src/components/Message/MessageItemView/MessageRepliesAvatars.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import {
+  useMessageContext,
+  type MessageContextValue,
+} from '../../../contexts/messageContext/MessageContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
+
+export type MessageRepliesAvatarsProps = Partial<Pick<MessageContextValue, 'message'>>;
+
+export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsProps) => {
+  const { message } = props;
+
+  const {
+    theme: {
+      messageItemView: {
+        replies: { avatarStackContainer },
+      },
+    },
+  } = useTheme();
+
+  const avatars = message?.thread_participants || [];
+
+  return (
+    <View style={avatarStackContainer}>
+      <UserAvatarStack users={avatars} avatarSize='sm' maxVisible={3} overlap={0.4} />
+    </View>
+  );
+};
+
+export const MessageRepliesAvatars = (props: MessageRepliesAvatarsProps) => {
+  const { message } = useMessageContext();
+  return <MessageRepliesAvatarsWithContext message={message} {...props} />;
+};

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { Check } from '../../../icons/Check';
+import { CheckAll } from '../../../icons/CheckAll';
+import { Time } from '../../../icons/Time';
+import { primitives } from '../../../theme';
+import { MessageStatusTypes } from '../../../utils/utils';
+import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
+
+export type MessageStatusPropsWithContext = Pick<
+  MessageContextValue,
+  'deliveredToCount' | 'message' | 'readBy'
+> &
+  Pick<MessagesContextValue, 'MessageTimestamp'> & {
+    formattedDate?: string | Date;
+    timestamp?: string | Date;
+  };
+
+const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
+  const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
+
+  const styles = useStyles();
+
+  const {
+    theme: {
+      messageItemView: {
+        status: { checkAllIcon, checkIcon, container, timeIcon },
+      },
+      semantics,
+    },
+  } = useTheme();
+
+  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+    return null;
+  }
+
+  const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
+
+  // Variables to determine the status of the message
+  const read = hasReadByGreaterThanOne || readBy === true;
+  const delivered = deliveredToCount > 1;
+  const sending = message.status === MessageStatusTypes.SENDING;
+  const sent =
+    message.status === MessageStatusTypes.RECEIVED &&
+    !delivered &&
+    !read &&
+    message.type !== 'ephemeral';
+
+  return (
+    <View style={[styles.container, container]}>
+      {read ? (
+        <CheckAll
+          height={16}
+          stroke={semantics.accentPrimary}
+          width={16}
+          accessibilityLabel='Read'
+          {...checkAllIcon}
+        />
+      ) : delivered ? (
+        <CheckAll
+          stroke={semantics.chatTextTimestamp}
+          height={16}
+          width={16}
+          accessibilityLabel='Delivered'
+          {...checkAllIcon}
+        />
+      ) : sending ? (
+        <Time
+          stroke={semantics.chatTextTimestamp}
+          height={16}
+          width={16}
+          accessibilityLabel='Sending'
+          {...timeIcon}
+        />
+      ) : sent ? (
+        <Check
+          stroke={semantics.chatTextTimestamp}
+          height={16}
+          width={16}
+          accessibilityLabel='Sent'
+          {...checkIcon}
+        />
+      ) : null}
+      <MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
+    </View>
+  );
+};
+
+const areEqual = (
+  prevProps: MessageStatusPropsWithContext,
+  nextProps: MessageStatusPropsWithContext,
+) => {
+  const {
+    deliveredToCount: prevDeliveredBy,
+    message: prevMessage,
+    readBy: prevReadBy,
+    formattedDate: prevFormattedDate,
+    timestamp: prevTimestamp,
+  } = prevProps;
+  const {
+    deliveredToCount: nextDeliveredBy,
+    message: nextMessage,
+    readBy: nextReadBy,
+    formattedDate: nextFormattedDate,
+    timestamp: nextTimestamp,
+  } = nextProps;
+
+  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
+  if (!deliveredByEqual) {
+    return false;
+  }
+
+  const readByEqual = prevReadBy === nextReadBy;
+  if (!readByEqual) {
+    return false;
+  }
+
+  const messageEqual =
+    prevMessage.status === nextMessage.status && prevMessage.type === nextMessage.type;
+  if (!messageEqual) {
+    return false;
+  }
+
+  const timestampEqual = prevTimestamp === nextTimestamp;
+  if (!timestampEqual) {
+    return false;
+  }
+
+  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
+  if (!formattedDateEqual) {
+    return false;
+  }
+
+  return true;
+};
+
+const MemoizedMessageStatus = React.memo(
+  MessageStatusWithContext,
+  areEqual,
+) as typeof MessageStatusWithContext;
+
+export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
+
+export const MessageStatus = (props: MessageStatusProps) => {
+  const { channel } = useChannelContext();
+  const { deliveredToCount, message, readBy } = useMessageContext();
+  const { MessageTimestamp } = useMessagesContext();
+
+  const channelMembersCount = Object.keys(channel?.state.members).length;
+
+  return (
+    <MemoizedMessageStatus
+      {...{
+        channel,
+        channelMembersCount,
+        deliveredToCount,
+        message,
+        readBy,
+        MessageTimestamp,
+      }}
+      {...props}
+    />
+  );
+};
+
+MessageStatus.displayName = 'MessageStatus{messageItemView{status}}';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      readByCount: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightTight,
+      },
+      container: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: primitives.spacingXxs,
+      },
+    });
+  }, [shouldUseOverlayStyles, semantics]);
+};

package/src/components/Message/MessageItemView/MessageSwipeContent.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { ArrowShareLeft } from '../../../icons';
+import { primitives } from '../../../theme';
+
+export const MessageSwipeContent = () => {
+  const styles = useStyles();
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <ArrowShareLeft stroke={semantics.buttonSecondaryTextOnAccent} height={20} width={20} />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: {
+      messageItemView: {
+        swipeLeftContent: { container },
+      },
+      semantics,
+    },
+  } = useTheme();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        backgroundColor: semantics.buttonSecondaryBg,
+        height: 32,
+        width: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: primitives.radiusMax,
+        ...container,
+      },
+    });
+  }, [container, semantics.buttonSecondaryBg]);
+};