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

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-
-import { useLocalization } from '../../../hooks/useContext';
-import type { FileMessageProps } from './index';
-
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
-type Props = FileMessageProps & {
-  type: 'image' | 'audio' | 'video' | 'file';
-};
-const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
-  const { STRINGS } = useLocalization();
-  const { colors } = useUIKitTheme();
-  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
-  return (
-    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
-      <View style={styles.container}>
-        <Icon
-          icon={iconMapper[type]}
-          size={24}
-          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
-        />
-        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>
-          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}
-        </Text>
-      </View>
-      {children}
-    </View>
-  );
-};
-
-const styles = createStyleSheet({
-  bubbleContainer: {
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  name: {
-    flexShrink: 1,
-  },
-});
-
-export default BaseFileMessage;

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

@@ -1,98 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';
-
-import type { FileMessageProps } from './index';
-
-const useRetry = (hasError: boolean, retryCount = 5) => {
-  if (Platform.OS === 'android') return '';
-
-  const forceUpdate = useForceUpdate();
-  const retryCountRef = useRef(1);
-  const retryTimeoutRef = useRef<NodeJS.Timeout>();
-
-  useEffect(() => {
-    if (hasError) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            forceUpdate();
-          }, retryCountRef.current * 5000);
-        }
-      };
-
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [hasError]);
-
-  return retryCountRef.current;
-};
-
-const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
-  const { colors } = useUIKitTheme();
-  const [imageNotFound, setImageNotFound] = useState(false);
-
-  const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
-
-  const key = useRetry(imageNotFound);
-
-  return (
-    <View
-      style={[
-        styles.bubbleContainer,
-        {
-          backgroundColor: imageNotFound
-            ? colors.onBackground04
-            : colors.ui.groupChannelMessage[variant].enabled.background,
-        },
-      ]}
-    >
-      <View style={style}>
-        <Image
-          key={key}
-          source={{ uri: fileUrl }}
-          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
-          resizeMode={'cover'}
-          resizeMethod={'resize'}
-          onError={() => setImageNotFound(true)}
-          onLoad={() => setImageNotFound(false)}
-        />
-        {imageNotFound && (
-          <Icon
-            containerStyle={StyleSheet.absoluteFill}
-            icon={'thumbnail-none'}
-            size={48}
-            color={colors.onBackground02}
-          />
-        )}
-      </View>
-      {children}
-    </View>
-  );
-};
-
-const styles = createStyleSheet({
-  bubbleContainer: {
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  image: {
-    width: 240,
-    maxWidth: 240,
-    height: 160,
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  hide: {
-    display: 'none',
-  },
-});
-
-export default ImageFileMessage;

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

@@ -1,113 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { View } from 'react-native';
-
-import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
-
-import { usePlatformService } from '../../../hooks/useContext';
-import type { FileMessageProps } from './index';
-
-const useRetry = (videoFileUrl: string, retryCount = 5) => {
-  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
-  const retryCountRef = useRef(0);
-  const retryTimeoutRef = useRef<NodeJS.Timeout>();
-
-  const { mediaService } = usePlatformService();
-
-  const fetchThumbnail = () => {
-    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
-      setState({ loading: false, thumbnail: result?.path ?? null });
-    });
-  };
-
-  useEffect(() => {
-    if (!state.thumbnail) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            fetchThumbnail();
-          }, retryCountRef.current * 5000);
-        }
-      };
-
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [state.thumbnail]);
-
-  return state;
-};
-
-const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
-  const { colors } = useUIKitTheme();
-
-  const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.video, { backgroundColor: colors.onBackground04 }];
-
-  const { loading, thumbnail } = useRetry(fileUrl);
-
-  if (loading) {
-    return (
-      <View
-        style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
-      >
-        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
-          <View style={style} />
-          <PlayIcon />
-        </View>
-        {children}
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
-    >
-      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
-        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
-        <PlayIcon />
-      </View>
-      {children}
-    </View>
-  );
-};
-
-const PlayIcon = () => {
-  const { colors } = useUIKitTheme();
-
-  return (
-    <Icon
-      icon={'play'}
-      size={28}
-      color={colors.onBackground02}
-      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}
-    />
-  );
-};
-
-const styles = createStyleSheet({
-  bubbleContainer: {
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  bubbleInnerContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  video: {
-    width: 240,
-    maxWidth: 240,
-    height: 160,
-  },
-  playIcon: {
-    position: 'absolute',
-    padding: 10,
-    borderRadius: 50,
-  },
-});
-
-export default VideoFileMessage;

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

@@ -1,20 +0,0 @@
-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';
-import VideoFileMessage from './VideoFileMessage';
-
-export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
-const FileMessage = (props: FileMessageProps) => {
-  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
-
-  if (fileType === 'image') return <ImageFileMessage {...props} />;
-  if (fileType === 'video') return <VideoFileMessage {...props} />;
-
-  return <BaseFileMessage {...props} type={fileType} />;
-};
-
-export default React.memo(FileMessage);

package/src/components/MessageRenderer/MessageContainer.tsx

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

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;