@sendbird/uikit-react-native-foundation 3.0.4 → 3.1.1

package/src/index.ts

@@ -14,6 +14,7 @@ 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 { VideoThumbnail } from './components/VideoThumbnail';
 
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';

package/src/theme/DarkUIKitTheme.ts

@@ -99,6 +99,7 @@ const DarkUIKitTheme = createTheme({
               message: palette.onBackgroundDark02,
               highlight: palette.primary200,
               destructive: palette.error300,
+              blurred: palette.onBackgroundDark04,
             },
           },
         },

package/src/theme/LightUIKitTheme.ts

@@ -99,6 +99,7 @@ const LightUIKitTheme = createTheme({
               message: palette.onBackgroundLight02,
               highlight: palette.primary300,
               destructive: palette.error300,
+              blurred: palette.onBackgroundLight04,
             },
           },
         },

package/src/types.ts

@@ -93,7 +93,7 @@ export type ComponentColorTree = GetColorTree<{
   ColorPart: {
     Header: 'background' | 'borderBottom';
     Button: 'background' | 'content';
-    Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
+    Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive' | 'blurred';
     Input: 'text' | 'placeholder' | 'background' | 'highlight';
     Badge: 'text' | 'background';
     Placeholder: 'content' | 'highlight';

package/src/ui/BottomSheet/index.tsx

@@ -14,6 +14,7 @@ export type BottomSheetItem = {
     iconColor?: string;
     title: string;
     titleColor?: string;
+    disabled?: boolean;
     onPress: () => void;
   }[];
   HeaderComponent?: (props: HeaderProps) => JSX.Element;
@@ -44,6 +45,7 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }
             activeOpacity={0.75}
             key={props.title + idx}
             style={{ paddingLeft: left, paddingRight: right }}
+            disabled={props.disabled}
             onPress={async () => {
               await onHide();
               try {

package/src/ui/Dialog/DialogSheet.tsx

@@ -23,22 +23,25 @@ export type SheetItemProps = {
   iconColor?: string;
   title: string;
   titleColor?: string;
+  disabled?: boolean;
 };
-const SheetItem = ({ icon, title, iconColor, titleColor }: SheetItemProps) => {
+const SheetItem = ({ icon, title, iconColor, titleColor, disabled = false }: SheetItemProps) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.sheetItemContainer, { backgroundColor: colors.ui.dialog.default.none.background }]}>
       {icon && (
         <Icon
           icon={icon}
-          color={iconColor ?? colors.ui.dialog.default.none.highlight}
+          color={
+            iconColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.highlight)
+          }
           containerStyle={styles.sheetItemIcon}
         />
       )}
       <Text
         subtitle1
         numberOfLines={1}
-        color={titleColor ?? colors.ui.dialog.default.none.text}
+        color={titleColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.text)}
         style={styles.sheetItemText}
       >
         {title}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
@@ -20,7 +20,7 @@ const ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>)
     <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} />
+          <ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(props.message) }} style={styles.image} />
         </PressBox>
         {props.children}
       </Box>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { SendbirdFileMessage, getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import Icon from '../../components/Icon';
@@ -11,8 +11,6 @@ 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) => {
@@ -28,8 +26,8 @@ const FileMessage = (props: Props) => {
         {({ pressed }) => (
           <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
             <Box style={styles.bubble}>
-              <Icon
-                icon={iconMapper[fileType]}
+              <Icon.File
+                fileType={fileType}
                 size={24}
                 containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
               />
@@ -40,7 +38,7 @@ const FileMessage = (props: Props) => {
                 color={pressed ? color.pressed.textMsg : color.enabled.textMsg}
                 style={styles.name}
               >
-                {props.strings?.fileName || props.message.name}
+                {truncate(props.strings?.fileName || props.message.name, { mode: 'mid', maxLen: 20 })}
               </Text>
             </Box>
             {props.children}

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

@@ -1,13 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } 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 { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
@@ -15,41 +13,24 @@ import type { GroupChannelMessageProps } from './index';
 
 type Props = GroupChannelMessageProps<
   SendbirdFileMessage,
-  {
-    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
-  }
+  { 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));
+  const { colors } = useUIKitTheme();
+  const uri = getThumbnailUriFromFileMessage(props.message);
 
   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 activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+          <VideoThumbnail
+            style={styles.image}
+            source={uri}
+            fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
+          />
         </PressBox>
         {props.children}
       </Box>
@@ -57,35 +38,6 @@ const VideoFileMessage = (props: Props) => {
   );
 };
 
-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,

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -28,6 +28,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   message,
   onPressAvatar,
   strings,
+  parentMessage,
 }: Props) {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelMessage.incoming;
@@ -42,7 +43,8 @@ MessageContainer.Incoming = function MessageContainerIncoming({
         )}
       </Box>
       <Box flexShrink={1}>
-        {!groupedWithPrev && (
+        {parentMessage}
+        {!groupedWithPrev && !message.parentMessage && (
           <Box marginLeft={12} marginBottom={4}>
             {(message.isFileMessage() || message.isUserMessage()) && (
               <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
@@ -73,24 +75,27 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
   groupedWithNext,
   strings,
   sendingStatus,
+  parentMessage,
 }: 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>
+      {parentMessage}
+      <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>
-      <Box style={styles.bubble}>{children}</Box>
     </Box>
   );
 };

package/src/ui/GroupChannelMessage/MessageOpenGraph.tsx

@@ -15,7 +15,7 @@ const MessageOpenGraph = ({
   ogMetaData,
   variant,
 }: {
-  ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+  ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;
   variant: 'outgoing' | 'incoming';
   onPressURL?: (url: string) => void;
   onLongPress?: () => void;
@@ -31,7 +31,7 @@ const MessageOpenGraph = ({
     >
       {({ pressed }) => (
         <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
-          {Boolean(ogMetaData.defaultImage) && (
+          {!!ogMetaData.defaultImage && (
             <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />
           )}
 
@@ -42,7 +42,7 @@ const MessageOpenGraph = ({
             <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
               {ogMetaData.title}
             </Text>
-            {Boolean(ogMetaData.description) && (
+            {!!ogMetaData.description && (
               <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
                 {ogMetaData.description}
               </Text>

package/src/ui/GroupChannelMessage/index.ts

@@ -25,6 +25,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
 
   children?: React.ReactNode;
   sendingStatus?: React.ReactNode;
+  parentMessage?: React.ReactNode;
 
   groupedWithPrev: boolean;
   groupedWithNext: boolean;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
@@ -12,7 +12,7 @@ import type { OpenChannelMessageProps } from './index';
 
 const ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {
   const { onPress, onLongPress, ...rest } = props;
-  const uri = getAvailableUriFromFileMessage(props.message);
+  const uri = getThumbnailUriFromFileMessage(props.message);
   return (
     <MessageContainer {...rest}>
       <Box borderRadius={8} overflow={'hidden'} style={styles.container}>

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

@@ -11,8 +11,6 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 import type { OpenChannelMessageProps } from './index';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
 type Props = {};
 const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
   const { colors } = useUIKitTheme();
@@ -40,7 +38,7 @@ const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>)
                 alignItems={'flex-start'}
                 backgroundColor={colors.background}
               >
-                <Icon icon={iconMapper[type]} size={32} />
+                <Icon.File fileType={type} size={32} />
               </Box>
               <Text
                 body3

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

@@ -1,84 +1,41 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } 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 { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
-import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 import type { OpenChannelMessageProps } from './index';
 
 type Props = {
   fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
 };
+
 const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
-  const { colors, palette } = useUIKitTheme();
   const { onPress, onLongPress, ...rest } = props;
-  const uri = getAvailableUriFromFileMessage(props.message);
-  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+  const uri = getThumbnailUriFromFileMessage(props.message);
 
   return (
     <MessageContainer {...rest}>
       <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
-        <Box borderRadius={8} overflow={'hidden'} style={styles.container}>
-          {loading ? (
-            <Box backgroundColor={colors.onBackground04} style={{ width: '100%', height: '100%' }} />
-          ) : (
-            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} width={'100%'} height={'100%'} />
-          )}
-
-          {(loading || thumbnail !== null) && (
-            <Box style={styles.iconContainer} alignItems={'center'} justifyContent={'center'}>
-              <Icon
-                icon={'play'}
-                size={28}
-                color={palette.onBackgroundLight02}
-                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
-              />
-            </Box>
-          )}
-        </Box>
+        <VideoThumbnail
+          style={styles.container}
+          source={uri}
+          fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
+        />
       </PressBox>
     </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: {
     maxWidth: 296,
     height: 196,
+    borderRadius: 8,
+    overflow: 'hidden',
   },
   iconContainer: {
     position: 'absolute',

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

@@ -88,7 +88,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                     </Text>
                   )}
 
-                  {Boolean(props.message.ogMetaData.defaultImage) && (
+                  {!!props.message.ogMetaData.defaultImage && (
                     <ImageWithPlaceholder
                       style={styles.ogImage}
                       source={{ uri: props.message.ogMetaData.defaultImage.url }}