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

package/src/index.ts

@@ -10,10 +10,10 @@ export { default as ImageWithPlaceholder } from './components/ImageWithPlacehold
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
 export { default as RegexText } from './components/RegexText';
+export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
-export { default as URLParsedText } from './components/URLParsedText';
 
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';
@@ -24,11 +24,14 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
 export type { MenuBarProps } from './ui/MenuBar';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
+
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';

package/src/types.ts

@@ -43,8 +43,7 @@ export type Component =
   | 'ProfileCard'
   | 'Reaction'
   | 'OpenChannelMessage'
-  | 'OpenChannelPreview'
-  | 'Message';
+  | 'OpenChannelPreview';
 
 export type GetColorTree<
   Tree extends {
@@ -75,8 +74,6 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'default' | 'rounded';
     OpenChannelMessage: 'default';
     OpenChannelPreview: 'default';
-    /** @deprecated **/
-    Message: 'incoming' | 'outgoing';
   };
   State: {
     Header: 'none';
@@ -92,8 +89,6 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'enabled' | 'selected';
     OpenChannelMessage: 'enabled' | 'pressed';
     OpenChannelPreview: 'none';
-    /** @deprecated **/
-    Message: 'enabled' | 'pressed';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -133,9 +128,6 @@ export type ComponentColorTree = GetColorTree<{
       | 'background'
       | 'coverBackground'
       | 'separator';
-
-    /** @deprecated **/
-    Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -183,8 +175,6 @@ export interface UIKitColors {
     reaction: ComponentColors<'Reaction'>;
     openChannelMessage: ComponentColors<'OpenChannelMessage'>;
     openChannelPreview: ComponentColors<'OpenChannelPreview'>;
-    /** @deprecated Please use `colors.ui.groupChannelMessage` **/
-    message: ComponentColors<'Message'>;
   };
 }
 

package/src/ui/Avatar/AvatarGroup.tsx

@@ -71,7 +71,7 @@ const getWidthPoint = (idx: number, total: number) => {
   return 0.5;
 };
 const getTopPoint = (idx: number, total: number) => {
-  if (total === 2) return -0.025;
+  if (total === 2) return 0;
   if (total === 3 && idx === 0) return -0.025;
   if (total === 3 && idx !== 0) return 0.525;
   if (idx === 0 || idx === 1) return -0.025;

package/src/ui/GroupChannelMessage/Message.admin.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { GroupChannelMessageProps } from './index';
+
+const AdminMessage = (props: GroupChannelMessageProps<SendbirdAdminMessage>) => {
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Box style={styles.container}>
+      <Text caption2 color={colors.onBackground02} style={styles.text}>
+        {props.message.message}
+      </Text>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 300,
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+export default AdminMessage;

package/src/ui/GroupChannelMessage/Message.file.image.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+const ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>) => {
+  const { onPress, onLongPress, variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+
+  return (
+    <MessageContainer {...props}>
+      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
+        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+          <ImageWithPlaceholder source={{ uri: getAvailableUriFromFileMessage(props.message) }} style={styles.image} />
+        </PressBox>
+        {props.children}
+      </Box>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default ImageFileMessage;

package/src/ui/GroupChannelMessage/Message.file.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+type Props = GroupChannelMessageProps<SendbirdFileMessage>;
+
+const FileMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+  const { colors } = useUIKitTheme();
+
+  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
+            <Box style={styles.bubble}>
+              <Icon
+                icon={iconMapper[fileType]}
+                size={24}
+                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
+              />
+              <Text
+                body3
+                ellipsizeMode={'middle'}
+                numberOfLines={1}
+                color={pressed ? color.pressed.textMsg : color.enabled.textMsg}
+                style={styles.name}
+              >
+                {props.strings?.fileName || props.message.name}
+              </Text>
+            </Box>
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16,
+  },
+  bubble: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  name: {
+    flexShrink: 1,
+  },
+});
+
+export default FileMessage;

package/src/ui/GroupChannelMessage/Message.file.video.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdFileMessage,
+  {
+    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+  }
+>;
+
+const VideoFileMessage = (props: Props) => {
+  const { onPress, onLongPress, variant = 'incoming' } = props;
+
+  const { colors, palette, select } = useUIKitTheme();
+  const uri = getAvailableUriFromFileMessage(props.message);
+  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+
+  return (
+    <MessageContainer {...props}>
+      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
+        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress} style={styles.image}>
+          {loading ? (
+            <Box
+              style={StyleSheet.absoluteFill}
+              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+            />
+          ) : (
+            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />
+          )}
+
+          {(loading || thumbnail !== null) && (
+            <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>
+              <Icon
+                icon={'play'}
+                size={28}
+                color={palette.onBackgroundLight02}
+                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
+              />
+            </Box>
+          )}
+        </PressBox>
+        {props.children}
+      </Box>
+    </MessageContainer>
+  );
+};
+
+const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+  const fetchThumbnail = useRef(fetch);
+  fetchThumbnail.current = fetch;
+
+  useEffect(() => {
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail.current().then((result) => {
+              setState({ loading: false, thumbnail: result?.path ?? null });
+            });
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+
+  return state;
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  playIcon: {
+    padding: 10,
+    borderRadius: 50,
+  },
+});
+export default VideoFileMessage;

package/src/ui/GroupChannelMessage/Message.unknown.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+const UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {
+  const { variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage['incoming'];
+  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;
+  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box style={styles.bubble} backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
+            <Text body3 color={titleColor}>
+              {props.strings?.unknownTitle ?? '(Unknown message type)'}
+            </Text>
+            <Text body3 color={descColor}>
+              {props.strings?.unknownDescription ?? 'Cannot read this message.'}
+            </Text>
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+  },
+});
+
+export default UnknownMessage;

package/src/ui/GroupChannelMessage/Message.user.og.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import type { RegexTextPattern } from '../../components/RegexText';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+import MessageOpenGraph from './MessageOpenGraph';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const OpenGraphUserMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+
+  const { palette, select, colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  const containerBackgroundColor = select({ dark: palette.background400, light: palette.background100 });
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={containerBackgroundColor} style={styles.container}>
+            <MessageBubbleWithText
+              backgroundColor={pressed ? color.pressed.background : color.enabled.background}
+              {...props}
+            />
+            {props.message.ogMetaData && (
+              <MessageOpenGraph
+                variant={variant}
+                ogMetaData={props.message.ogMetaData}
+                onLongPress={props.onLongPress}
+                onPressURL={props.onPressURL}
+              />
+            )}
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default OpenGraphUserMessage;

package/src/ui/GroupChannelMessage/Message.user.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import type { RegexTextPattern } from '../../components/RegexText';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const UserMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
+            <MessageBubbleWithText {...props} />
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16,
+  },
+});
+
+export default UserMessage;

package/src/ui/GroupChannelMessage/MessageBubbleWithText.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import RegexText, { RegexTextPattern } from '../../components/RegexText';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    backgroundColor?: string;
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const MessageBubbleWithText = ({
+  backgroundColor,
+  message,
+  onPressURL,
+  onLongPress,
+  strings,
+  variant = 'incoming',
+  regexTextPatterns = [],
+  renderRegexTextChildren = (msg) => msg.message,
+}: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  return (
+    <Box backgroundColor={backgroundColor} style={styles.bubble}>
+      <Text body3 color={color.enabled.textMsg} suppressHighlighting>
+        <RegexText
+          body3
+          color={color.enabled.textMsg}
+          patterns={[
+            ...regexTextPatterns,
+            {
+              regex: urlRegexStrict,
+              replacer({ match, parentProps, keyPrefix, index }) {
+                return (
+                  <Text
+                    {...parentProps}
+                    key={`${keyPrefix}-${index}`}
+                    onPress={() => onPressURL?.(match)}
+                    onLongPress={onLongPress}
+                    style={[parentProps?.style, styles.urlText]}
+                  >
+                    {match}
+                  </Text>
+                );
+              },
+            },
+          ]}
+        >
+          {renderRegexTextChildren(message)}
+        </RegexText>
+        {Boolean(message.updatedAt) && (
+          <Text body3 color={color.enabled.textEdited}>
+            {strings?.edited ?? ' (edited)'}
+          </Text>
+        )}
+      </Text>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
+});
+export default MessageBubbleWithText;

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import { getMessageTimeFormat } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<SendbirdMessage>;
+
+const MessageContainer = (props: Props) => {
+  if (props.variant === 'incoming') {
+    return <MessageContainer.Incoming {...props} />;
+  } else {
+    return <MessageContainer.Outgoing {...props} />;
+  }
+};
+
+MessageContainer.Incoming = function MessageContainerIncoming({
+  children,
+  groupedWithNext,
+  groupedWithPrev,
+  message,
+  onPressAvatar,
+  strings,
+}: Props) {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.incoming;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
+      <Box width={26} marginRight={12}>
+        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
+          <Pressable onPress={onPressAvatar}>
+            <Avatar size={26} uri={message.sender?.profileUrl} />
+          </Pressable>
+        )}
+      </Box>
+      <Box flexShrink={1}>
+        {!groupedWithPrev && (
+          <Box marginLeft={12} marginBottom={4}>
+            {(message.isFileMessage() || message.isUserMessage()) && (
+              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
+                {strings?.senderName ?? message.sender.nickname}
+              </Text>
+            )}
+          </Box>
+        )}
+
+        <Box flexDirection={'row'} alignItems={'flex-end'}>
+          <Box style={styles.bubble}>{children}</Box>
+          {!groupedWithNext && (
+            <Box marginLeft={4}>
+              <Text caption4 color={color.enabled.textTime}>
+                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+MessageContainer.Outgoing = function MessageContainerOutgoing({
+  children,
+  message,
+  groupedWithNext,
+  strings,
+  sendingStatus,
+}: Props) {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.outgoing;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
+      <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
+        {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
+
+        {!groupedWithNext && (
+          <Box marginRight={4}>
+            <Text caption4 color={color.enabled.textTime}>
+              {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+            </Text>
+          </Box>
+        )}
+      </Box>
+      <Box style={styles.bubble}>{children}</Box>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    maxWidth: 240,
+    overflow: 'hidden',
+    flexShrink: 1,
+  },
+});
+
+export default MessageContainer;