@sendbird/uikit-react-native 2.5.0 → 3.0.0-rc.0

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

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

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -1,36 +0,0 @@
-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 = ({ message, grouping }: Props) => {
-  const { colors } = useUIKitTheme();
-  const { STRINGS } = useLocalization();
-  if (grouping) return null;
-
-  return (
-    <View style={styles.sender}>
-      {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.groupChannelMessage.incoming.enabled.textSenderName} numberOfLines={1}>
-          {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/MessageTime.tsx

@@ -1,28 +0,0 @@
-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 = ({ message, grouping, style }: Props) => {
-  const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
-  if (grouping) return null;
-
-  return (
-    <View style={style}>
-      <Text caption4 color={colors.ui.groupChannelMessage.incoming.enabled.textTime}>
-        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}
-      </Text>
-    </View>
-  );
-};
-
-export default MessageTime;

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

@@ -1,34 +0,0 @@
-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 = ({ message, variant, pressed }: UnknownMessageProps) => {
-  const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
-  const color = colors.ui.groupChannelMessage[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

@@ -1,102 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { urlRegexStrict } from '@sendbird/uikit-utils';
-
-import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import SBUUtils from '../../../libs/SBUUtils';
-import type { UserMessageProps } from './index';
-
-const BaseUserMessage = ({
-  message,
-  variant,
-  pressed,
-  children,
-  onLongPressMentionedUser,
-  onLongPressURL,
-}: UserMessageProps) => {
-  const { mentionManager, currentUser } = useSendbirdChat();
-  const { show } = useUserProfile();
-  const { STRINGS } = useLocalization();
-  const { colors, palette } = useUIKitTheme();
-
-  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
-
-  return (
-    <View style={[styles.container, { backgroundColor: color.background }]}>
-      <View style={styles.wrapper}>
-        <Text body3 color={color.textMsg}>
-          <RegexText
-            body3
-            color={color.textMsg}
-            patterns={[
-              {
-                regex: mentionManager.templateRegex,
-                replacer({ match, groups, parentProps, index, keyPrefix }) {
-                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
-                  if (user) {
-                    return (
-                      <Text
-                        {...parentProps}
-                        key={`${keyPrefix}-${index}`}
-                        onPress={() => show(user)}
-                        onLongPress={onLongPressMentionedUser}
-                        style={[
-                          parentProps?.style,
-                          { fontWeight: 'bold' },
-                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },
-                        ]}
-                      >
-                        {`${mentionManager.asMentionedMessageText(user)}`}
-                      </Text>
-                    );
-                  }
-                  return match;
-                },
-              },
-              {
-                regex: urlRegexStrict,
-                replacer({ match, parentProps, index, keyPrefix }) {
-                  return (
-                    <Text
-                      {...parentProps}
-                      key={`${keyPrefix}-${index}`}
-                      onPress={() => SBUUtils.openURL(match)}
-                      onLongPress={onLongPressURL}
-                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}
-                    >
-                      {match}
-                    </Text>
-                  );
-                },
-              },
-            ]}
-          >
-            {mentionManager.shouldUseMentionedMessageTemplate(message)
-              ? message.mentionedMessageTemplate
-              : message.message}
-          </RegexText>
-          {Boolean(message.updatedAt) && (
-            <Text body3 color={color.textEdited}>
-              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-            </Text>
-          )}
-        </Text>
-      </View>
-      {children}
-    </View>
-  );
-};
-const styles = createStyleSheet({
-  container: {
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  wrapper: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-});
-
-export default BaseUserMessage;

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

@@ -1,188 +0,0 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-
-import type { OGMetaData } from '@sendbird/chat/message';
-import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
-
-import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import SBUUtils from '../../../libs/SBUUtils';
-import type { UserMessageProps } from './index';
-
-type Props = UserMessageProps & {
-  ogMetaData: OGMetaData;
-};
-
-const OpenGraphUserMessage = ({
-  message,
-  variant,
-  pressed,
-  ogMetaData,
-  children,
-  onLongPressMentionedUser,
-  onLongPressURL,
-}: Props) => {
-  const { mentionManager, currentUser } = useSendbirdChat();
-  const { STRINGS } = useLocalization();
-  const { show } = useUserProfile();
-  const { colors, select, palette } = useUIKitTheme();
-
-  const [imageNotFound, setImageNotFound] = useState(false);
-  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
-
-  const containerBackground = select({ dark: palette.background400, light: palette.background100 });
-
-  return (
-    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>
-      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>
-        <View style={styles.messageContainer}>
-          <Text body3 color={color.textMsg}>
-            <RegexText
-              body3
-              color={color.textMsg}
-              patterns={[
-                {
-                  regex: mentionManager.templateRegex,
-                  replacer({ match, groups, parentProps, keyPrefix, index }) {
-                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
-                    if (user) {
-                      const isCurrentUser = user.userId === currentUser?.userId;
-                      return (
-                        <Text
-                          {...parentProps}
-                          key={`${keyPrefix}-${index}`}
-                          onPress={() => show(user)}
-                          onLongPress={onLongPressMentionedUser}
-                          style={[
-                            parentProps?.style,
-                            styles.mentionedText,
-                            isCurrentUser && { backgroundColor: palette.highlight },
-                          ]}
-                        >
-                          {`${mentionManager.asMentionedMessageText(user)}`}
-                        </Text>
-                      );
-                    }
-                    return match;
-                  },
-                },
-                {
-                  regex: urlRegexRough,
-                  replacer({ match, parentProps, keyPrefix, index }) {
-                    return (
-                      <Text
-                        {...parentProps}
-                        key={`${keyPrefix}-${index}`}
-                        onPress={() => SBUUtils.openURL(match)}
-                        onLongPress={onLongPressURL}
-                        style={[parentProps?.style, styles.urlText]}
-                      >
-                        {match}
-                      </Text>
-                    );
-                  },
-                },
-              ]}
-            >
-              {mentionManager.shouldUseMentionedMessageTemplate(message)
-                ? message.mentionedMessageTemplate
-                : message.message}
-            </RegexText>
-            {Boolean(message.updatedAt) && (
-              <Text body3 color={color.textEdited}>
-                {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-              </Text>
-            )}
-          </Text>
-        </View>
-        <TouchableOpacity
-          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}
-          activeOpacity={0.85}
-          onPress={() => SBUUtils.openURL(ogMetaData.url)}
-        >
-          <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: containerBackground }]}>
-            <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>
-      {children}
-    </View>
-  );
-};
-
-const styles = createStyleSheet({
-  bubbleContainer: {
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  container: {
-    width: 240,
-    maxWidth: 240,
-  },
-  messageContainer: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-  },
-  ogContainer: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 12,
-  },
-  ogImageContainer: {
-    flex: 1,
-    height: 136,
-  },
-  ogImage: {
-    width: '100%',
-    height: '100%',
-  },
-  ogTitle: {
-    marginBottom: 4,
-  },
-  ogDesc: {
-    lineHeight: 14,
-    marginBottom: 8,
-  },
-  mentionedText: {
-    fontWeight: 'bold',
-  },
-  urlText: {
-    textDecorationLine: 'underline',
-  },
-});
-
-export default OpenGraphUserMessage;

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

@@ -1,24 +0,0 @@
-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,
-  {
-    onLongPressMentionedUser?: () => void;
-    onLongPressURL?: () => void;
-  }
->;
-
-const UserMessage = (props: UserMessageProps) => {
-  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

@@ -1,198 +0,0 @@
-import React from 'react';
-import { Pressable, PressableProps, View } from 'react-native';
-
-import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdMessage } from '@sendbird/uikit-utils';
-import {
-  calcMessageGrouping,
-  conditionChaining,
-  isMyMessage,
-  shouldRenderReaction,
-  useIIFE,
-} from '@sendbird/uikit-utils';
-
-import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
-import type { GroupChannelProps } from '../../domain/groupChannel/types';
-import { useSendbirdChat } from '../../hooks/useContext';
-import { ReactionAddons } from '../ReactionAddons';
-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 type MessageRendererInterface<T = SendbirdMessage, AdditionalProps = unknown> = {
-  message: T;
-  prevMessage?: SendbirdMessage;
-  nextMessage?: SendbirdMessage;
-  variant: MessageStyleVariant;
-  groupWithPrev: boolean;
-  groupWithNext: boolean;
-  pressed: boolean;
-  children?: React.ReactElement | null;
-} & AdditionalProps;
-
-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 { features } = useSendbirdChat();
-
-  const reactionChildren = useIIFE(() => {
-    if (shouldRenderReaction(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {
-      return <ReactionAddons.Message channel={channel} message={message} />;
-    }
-    return null;
-  });
-
-  const messageComponent = useIIFE(() => {
-    const pressableProps: 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}
-              onLongPressURL={onLongPress}
-              onLongPressMentionedUser={onLongPress}
-              {...messageProps}
-            >
-              {reactionChildren}
-            </UserMessage>
-          )}
-        </Pressable>
-      );
-    }
-
-    if (message.isFileMessage()) {
-      return (
-        <Pressable {...pressableProps}>
-          {({ pressed }) => (
-            <FileMessage message={message} pressed={pressed} {...messageProps}>
-              {reactionChildren}
-            </FileMessage>
-          )}
-        </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 style={styles.bubbleContainer}>
-            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
-            <View style={styles.bubbleWrapper}>
-              {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: {
-    flexShrink: 1,
-  },
-  bubbleWrapper: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-  },
-  outgoingContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-});
-
-export default React.memo(MessageRenderer);