@sendbird/uikit-react-native 1.0.0-rc.1

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import type { FileMessageProps } from './index';
+
+const ImageFileMessage: React.FC<FileMessageProps> = ({ message }) => {
+  const { colors } = useUIKitTheme();
+  const [imageNotFound, setImageNotFound] = useState(false);
+
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+
+  if (imageNotFound) {
+    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;
+  }
+
+  return (
+    <Image
+      source={{ uri: fileUrl }}
+      style={style}
+      resizeMode={'cover'}
+      resizeMethod={'resize'}
+      onError={() => setImageNotFound(true)}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16,
+  },
+});
+
+export default ImageFileMessage;

package/src/components/MessageRenderer/FileMessage/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+
+import type { MessageRendererInterface } from '../index';
+import BaseFileMessage from './BaseFileMessage';
+import ImageFileMessage from './ImageFileMessage';
+
+export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
+const FileMessage: React.FC<FileMessageProps> = (props) => {
+  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
+
+  if (fileType === 'image') return <ImageFileMessage {...props} />;
+  return <BaseFileMessage {...props} type={fileType} />;
+};
+
+export default React.memo(FileMessage);

package/src/components/MessageRenderer/MessageContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+
+const MessageContainer: React.FC = ({ children }) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'column',
+    paddingHorizontal: 16,
+  },
+});
+
+export default MessageContainer;

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -0,0 +1,43 @@
+import isSameDay from 'date-fns/isSameDay';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+type Props = {
+  message: SendbirdMessage;
+  prevMessage?: SendbirdMessage;
+};
+
+const MessageDateSeparator: React.FC<Props> = ({ message, prevMessage }) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
+  if (sameDay) return null;
+  return (
+    <View style={styles.container}>
+      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>
+        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>
+          {STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+  },
+});
+
+export default MessageDateSeparator;

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+type Props = { message: SendbirdMessage; grouping: boolean };
+const MessageIncomingAvatar: React.FC<Props> = ({ message, grouping }) => {
+  if (grouping) return <View style={styles.avatar} />;
+  return (
+    <View style={styles.avatar}>
+      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  avatar: {
+    width: 26,
+    marginRight: 12,
+  },
+});
+
+export default MessageIncomingAvatar;

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+type Props = { message: SendbirdMessage; grouping: boolean };
+const MessageIncomingSenderName: React.FC<Props> = ({ message, grouping }) => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  if (grouping) return null;
+
+  return (
+    <View style={styles.sender}>
+      {(message.isFileMessage() || message.isUserMessage()) && (
+        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>
+          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  sender: {
+    marginLeft: 12,
+    marginBottom: 4,
+  },
+});
+
+export default MessageIncomingSenderName;

package/src/components/MessageRenderer/MessageOutgoingStatus.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+
+import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type {
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdUserMessage,
+} from '@sendbird/uikit-utils';
+import { useUniqId } from '@sendbird/uikit-utils';
+
+import { useSendbirdChat } from '../../hooks/useContext';
+
+const SIZE = 16;
+
+type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
+const MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {
+  if (!message.isUserMessage() && !message.isFileMessage()) return null;
+
+  const handlerId = useUniqId('MessageOutgoingStatus');
+
+  const { sdk, features } = useSendbirdChat();
+  const { colors } = useUIKitTheme();
+
+  const [state, setState] = useState(() => ({
+    unreadCount: channel.getUnreadMemberCount(message),
+    undeliveredCount: channel.getUndeliveredMemberCount(message),
+  }));
+
+  const getCounts = (channel: SendbirdGroupChannel, message: SendbirdUserMessage | SendbirdFileMessage) => {
+    return {
+      unreadCount: channel.getUnreadMemberCount(message),
+      undeliveredCount: channel.getUndeliveredMemberCount(message),
+    };
+  };
+
+  useEffect(() => {
+    const id = String(handlerId);
+    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {
+      sdk.removeChannelHandler(id);
+    } else {
+      const handler = new sdk.ChannelHandler();
+      handler.onReadReceiptUpdated = (channel) => {
+        if (channel.url === message.channelUrl) setState(getCounts(channel, message));
+      };
+
+      if (features.deliveryReceiptEnabled) {
+        handler.onDeliveryReceiptUpdated = (channel) => {
+          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));
+        };
+      }
+      sdk.addChannelHandler(id, handler);
+    }
+
+    return () => {
+      sdk.removeChannelHandler(id);
+    };
+  }, [message.sendingStatus]);
+
+  if (message.sendingStatus === 'pending') {
+    return <LoadingSpinner size={SIZE} style={styles.container} />;
+  }
+
+  if (message.sendingStatus === 'failed') {
+    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
+  }
+
+  if (state.unreadCount === 0) {
+    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
+  }
+
+  if (features.deliveryReceiptEnabled) {
+    if (state.undeliveredCount === 0) {
+      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+    }
+    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  }
+
+  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+};
+
+const styles = createStyleSheet({
+  container: {
+    marginRight: 4,
+  },
+});
+
+export default React.memo(MessageOutgoingStatus);

package/src/components/MessageRenderer/MessageTime.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+type Props = { message: SendbirdMessage; grouping: boolean; style?: StyleProp<ViewStyle> };
+const MessageTime: React.FC<Props> = ({ message, grouping, style }) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  if (grouping) return null;
+
+  return (
+    <View style={style}>
+      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>
+        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}
+      </Text>
+    </View>
+  );
+};
+
+export default MessageTime;

package/src/components/MessageRenderer/UnknownMessage/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import type { MessageRendererInterface } from '../index';
+
+export type UnknownMessageProps = MessageRendererInterface;
+const UnknownMessage: React.FC<UnknownMessageProps> = ({ message, variant, pressed }) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }]}>
+      <Text body3 color={colors.onBackground01}>
+        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message)}
+      </Text>
+      <Text body3 color={colors.onBackground02}>
+        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)}
+      </Text>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+});
+
+export default UnknownMessage;

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import type { UserMessageProps } from './index';
+
+const BaseUserMessage: React.FC<UserMessageProps> = ({ message, variant, pressed }) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const { STRINGS } = useLocalization();
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }]}>
+      <URLParsedText body3 strict color={color.textMsg}>
+        {message.message}
+        {Boolean(message.updatedAt) && (
+          <Text body3 color={color.textEdited}>
+            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
+          </Text>
+        )}
+      </URLParsedText>
+    </View>
+  );
+};
+const styles = createStyleSheet({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+});
+
+export default BaseUserMessage;

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Linking, TouchableOpacity, View } from 'react-native';
+import type Sendbird from 'sendbird';
+
+import {
+  Icon,
+  Image,
+  Text,
+  URLParsedText,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../../hooks/useContext';
+import type { UserMessageProps } from './index';
+
+type Props = UserMessageProps & { ogMetaData: Sendbird.OGMetaData };
+const OpenGraphUserMessage: React.FC<Props> = ({ message, variant, pressed, ogMetaData }) => {
+  const { STRINGS } = useLocalization();
+  const { colors, select, palette } = useUIKitTheme();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const [imageNotFound, setImageNotFound] = useState(false);
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }]}>
+      <View style={styles.messageContainer}>
+        <URLParsedText body3 color={color.textMsg}>
+          {message.message}
+          {Boolean(message.updatedAt) && (
+            <Text body3 color={color.textEdited}>
+              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
+            </Text>
+          )}
+        </URLParsedText>
+      </View>
+      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>
+        <View
+          style={[
+            styles.ogImageContainer,
+            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },
+          ]}
+        >
+          {conditionChaining(
+            [imageNotFound],
+            [
+              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,
+              <Image
+                source={{ uri: ogMetaData.defaultImage?.url }}
+                style={styles.ogImage}
+                resizeMode={'cover'}
+                onError={() => setImageNotFound(true)}
+              />,
+            ],
+          )}
+        </View>
+        <View
+          style={[
+            styles.ogContainer,
+            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },
+          ]}
+        >
+          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+            {ogMetaData.title}
+          </Text>
+          {Boolean(ogMetaData.description) && (
+            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+              {ogMetaData.description}
+            </Text>
+          )}
+          <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+            {ogMetaData.url}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  messageContainer: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+  },
+  ogContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+  },
+  ogImageContainer: {
+    width: 240,
+    height: 136,
+  },
+  ogImage: {
+    width: '100%',
+    height: '100%',
+  },
+  ogTitle: {
+    marginBottom: 4,
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8,
+  },
+});
+
+export default OpenGraphUserMessage;

package/src/components/MessageRenderer/UserMessage/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import type { MessageRendererInterface } from '../index';
+import BaseUserMessage from './BaseUserMessage';
+import OpenGraphUserMessage from './OpenGraphUserMessage';
+
+export type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;
+const UserMessage: React.FC<UserMessageProps> = (props) => {
+  if (props.message.ogMetaData) {
+    return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;
+  }
+  return <BaseUserMessage {...props} />;
+};
+
+export default React.memo(UserMessage);

package/src/components/MessageRenderer/index.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import { calcMessageGrouping, conditionChaining, isMyMessage, useIIFE } from '@sendbird/uikit-utils';
+
+import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
+import type { GroupChannelProps } from '../../domain/groupChannel/types';
+import AdminMessage from './AdminMessage';
+import FileMessage from './FileMessage';
+import MessageContainer from './MessageContainer';
+import MessageDateSeparator from './MessageDateSeparator';
+import MessageIncomingAvatar from './MessageIncomingAvatar';
+import MessageIncomingSenderName from './MessageIncomingSenderName';
+import MessageOutgoingStatus from './MessageOutgoingStatus';
+import MessageTime from './MessageTime';
+import UnknownMessage from './UnknownMessage';
+import UserMessage from './UserMessage';
+
+type MessageStyleVariant = 'outgoing' | 'incoming';
+export interface MessageRendererInterface<T = SendbirdMessage> {
+  message: T;
+  prevMessage?: SendbirdMessage;
+  nextMessage?: SendbirdMessage;
+  variant: MessageStyleVariant;
+  groupWithPrev: boolean;
+  groupWithNext: boolean;
+  pressed: boolean;
+}
+
+const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
+  currentUserId,
+  channel,
+  message,
+  onPress,
+  onLongPress,
+  ...rest
+}) => {
+  const variant: MessageStyleVariant = isMyMessage(message, currentUserId) ? 'outgoing' : 'incoming';
+  const isOutgoing = variant === 'outgoing';
+  const isIncoming = variant === 'incoming';
+  const variantContainerStyle = { incoming: styles.chatIncoming, outgoing: styles.chatOutgoing }[variant];
+
+  const { groupWithPrev, groupWithNext } = calcMessageGrouping(
+    Boolean(rest.enableMessageGrouping),
+    message,
+    rest.prevMessage,
+    rest.nextMessage,
+  );
+
+  const messageComponent = useIIFE(() => {
+    const pressableProps = {
+      style: styles.msgContainer,
+      disabled: !onPress && !onLongPress,
+      onPress,
+      onLongPress,
+      delayLongPress: DEFAULT_LONG_PRESS_DELAY,
+    };
+    const messageProps = { ...rest, variant, groupWithNext, groupWithPrev };
+
+    if (message.isUserMessage()) {
+      return (
+        <Pressable {...pressableProps}>
+          {({ pressed }) => <UserMessage message={message} pressed={pressed} {...messageProps} />}
+        </Pressable>
+      );
+    }
+
+    if (message.isFileMessage()) {
+      return (
+        <Pressable {...pressableProps}>
+          {({ pressed }) => <FileMessage message={message} pressed={pressed} {...messageProps} />}
+        </Pressable>
+      );
+    }
+
+    if (message.isAdminMessage()) {
+      return <AdminMessage message={message} pressed={false} {...messageProps} />;
+    }
+
+    return (
+      <Pressable {...pressableProps}>
+        {({ pressed }) => <UnknownMessage message={message} pressed={pressed} {...messageProps} />}
+      </Pressable>
+    );
+  });
+
+  return (
+    <MessageContainer>
+      <MessageDateSeparator message={message} prevMessage={rest.prevMessage} />
+      {message.isAdminMessage() && messageComponent}
+      {!message.isAdminMessage() && (
+        <View
+          style={[
+            variantContainerStyle,
+            conditionChaining(
+              [groupWithNext, Boolean(rest.nextMessage)],
+              [styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],
+            ),
+          ]}
+        >
+          {isOutgoing && (
+            <View style={styles.outgoingContainer}>
+              <MessageOutgoingStatus channel={channel} message={message} />
+              <MessageTime message={message} grouping={groupWithNext} style={styles.timeOutgoing} />
+            </View>
+          )}
+          {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}
+          <View>
+            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
+            <View style={styles.bubbleContainer}>
+              {messageComponent}
+              {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}
+            </View>
+          </View>
+        </View>
+      )}
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  chatIncoming: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+  },
+  chatOutgoing: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  timeIncoming: {
+    marginLeft: 4,
+  },
+  timeOutgoing: {
+    marginRight: 4,
+  },
+  chatGroup: {
+    marginBottom: 2,
+  },
+  chatNonGroup: {
+    marginBottom: 16,
+  },
+  chatLastMessage: {
+    marginBottom: 16,
+  },
+  msgContainer: {
+    maxWidth: 240,
+  },
+  bubbleContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  outgoingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default React.memo(MessageRenderer);