@sendbird/uikit-react-native 2.3.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -10,7 +10,8 @@
   "files": [
     "src",
     "lib",
-    "!**/__tests__"
+    "!**/__tests__",
+    "!**/__template__"
   ],
   "sideEffects": false,
   "scripts": {
@@ -41,9 +42,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.3.0",
-    "@sendbird/uikit-react-native-foundation": "2.3.0",
-    "@sendbird/uikit-utils": "2.3.0"
+    "@sendbird/uikit-chat-hooks": "2.4.1",
+    "@sendbird/uikit-react-native-foundation": "2.4.1",
+    "@sendbird/uikit-utils": "2.4.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -69,7 +70,7 @@
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
     "react": "17.0.2",
-    "react-native": "0.67.4",
+    "react-native": "0.67.5",
     "react-native-builder-bob": "^0.18.0",
     "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
@@ -86,7 +87,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.0.13",
+    "@sendbird/chat": "^4.3.0",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
@@ -181,5 +182,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "a9bf41fd7919436db99f6cc3bacd0f8d791b7729"
+  "gitHead": "9ba7a005c941a3edd5b0f78d88d8cd1df6c280fc"
 }

package/src/components/ChannelCover.tsx

@@ -3,12 +3,12 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 
 import { Avatar, Icon, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdGroupChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
+import { SendbirdBaseChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 
 type Props = {
-  channel: SendbirdGroupChannel;
+  channel: SendbirdBaseChannel;
   size: number;
   containerStyle?: StyleProp<ViewStyle>;
 };
@@ -17,48 +17,57 @@ const ChannelCover = ({ channel, ...avatarProps }: Props) => {
   const { currentUser } = useSendbirdChat();
   const { colors } = useUIKitTheme();
 
-  // custom channel cover
-  if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {
-    return <Avatar uri={channel.coverUrl} {...avatarProps} />;
-  }
+  if (channel.isGroupChannel()) {
+    // custom channel cover
+    if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {
+      return <Avatar uri={channel.coverUrl} {...avatarProps} />;
+    }
+
+    // broadcast channel cover
+    if (channel.isBroadcast) {
+      return (
+        <View style={avatarProps.containerStyle}>
+          <Icon
+            icon={'broadcast'}
+            size={avatarProps.size * (4 / 7)}
+            color={colors.onBackgroundReverse01}
+            containerStyle={{
+              backgroundColor: colors.secondary,
+              borderRadius: avatarProps.size * 0.5,
+              padding: avatarProps.size * (3 / 7) * 0.5,
+            }}
+          />
+        </View>
+      );
+    }
+
+    // no members, use anonymous profile
+    if (channel.memberCount <= 1) {
+      return <Avatar {...avatarProps} />;
+    }
 
-  // broadcast channel cover
-  if (channel.isBroadcast) {
+    // 1:1, use member profile
+    if (channel.memberCount === 2) {
+      const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;
+      return <Avatar uri={otherUserProfile} {...avatarProps} />;
+    }
+
+    // group, use members profile
     return (
-      <View style={avatarProps.containerStyle}>
-        <Icon
-          icon={'broadcast'}
-          size={avatarProps.size * (4 / 7)}
-          color={colors.onBackgroundReverse01}
-          containerStyle={{
-            backgroundColor: colors.secondary,
-            borderRadius: avatarProps.size * 0.5,
-            padding: avatarProps.size * (3 / 7) * 0.5,
-          }}
-        />
-      </View>
+      <Avatar.Group {...avatarProps}>
+        {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (
+          <Avatar key={m.userId} uri={m.profileUrl} />
+        ))}
+      </Avatar.Group>
     );
   }
 
-  // no members, use anonymous profile
-  if (channel.memberCount <= 1) {
-    return <Avatar {...avatarProps} />;
-  }
-
-  // 1:1, use member profile
-  if (channel.memberCount === 2) {
-    const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;
-    return <Avatar uri={otherUserProfile} {...avatarProps} />;
+  if (channel.isOpenChannel()) {
+    // channel cover
+    return <Avatar uri={channel.coverUrl} {...avatarProps} />;
   }
 
-  // group, use members profile
-  return (
-    <Avatar.Group {...avatarProps}>
-      {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (
-        <Avatar key={m.userId} uri={m.profileUrl} />
-      ))}
-    </Avatar.Group>
-  );
+  return <Avatar uri={channel.coverUrl} {...avatarProps} />;
 };
 
 export default ChannelCover;

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/EditInput.tsx

@@ -11,20 +11,19 @@ import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
 
-import { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';
-import type { MentionedUser } from '../../../../types';
-import type { GroupChannelProps } from '../../types';
+import { useLocalization, useSendbirdChat } from '../../hooks/useContext';
+import type { MentionedUser } from '../../types';
+import type { ChannelInputProps } from './index';
 
-type EditInputProps = GroupChannelProps['Input'] & {
+interface EditInputProps extends ChannelInputProps {
   text: string;
   onChangeText: (val: string) => void;
   messageToEdit: SendbirdUserMessage | SendbirdFileMessage;
   setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
   onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
-  disabled: boolean;
   autoFocus: boolean;
   mentionedUsers: MentionedUser[];
-};
+}
 
 const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   {
@@ -32,11 +31,12 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     onChangeText,
     messageToEdit,
     setMessageToEdit,
+    onPressUpdateUserMessage,
     onUpdateUserMessage,
     onSelectionChange,
-    disabled,
     autoFocus,
     mentionedUsers,
+    inputDisabled,
   },
   ref,
 ) {
@@ -51,20 +51,31 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
 
   const onPressSave = () => {
     if (messageToEdit.isUserMessage()) {
-      const mention = {
-        userIds: mentionedUsers.map((it) => it.user.userId),
-        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
-        type: MentionType.USERS,
-      };
+      const mentionType = MentionType.USERS;
+      const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
 
-      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>
-        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),
-      );
+      if (onPressUpdateUserMessage) {
+        onPressUpdateUserMessage(messageToEdit, {
+          message: text,
+          mentionType,
+          mentionedUserIds,
+          mentionedMessageTemplate,
+        }).catch(onFailureToUpdate);
+      } else if (onUpdateUserMessage) {
+        onUpdateUserMessage(text, messageToEdit, {
+          type: MentionType.USERS,
+          userIds: mentionedUserIds,
+          messageTemplate: mentionedMessageTemplate,
+        }).catch(onFailureToUpdate);
+      }
     }
     setMessageToEdit();
     onChangeText('');
   };
 
+  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');
+
   return (
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
@@ -72,11 +83,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           ref={ref}
           multiline
           disableFullscreenUI
-          editable={!disabled}
+          editable={!inputDisabled}
           autoFocus={autoFocus}
           onChangeText={onChangeText}
           style={styles.input}
-          placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
+          placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
           {mentionManager.textToMentionedComponents(text, mentionedUsers)}
@@ -84,11 +95,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>
         <Button variant={'text'} onPress={onPressCancel}>
-          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}
+          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}
         </Button>
         <View style={styles.space} />
         <Button variant={'contained'} onPress={onPressSave}>
-          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}
+          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}
         </Button>
       </View>
     </View>

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/SendInput.tsx

@@ -18,34 +18,35 @@ import {
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining, isImage, shouldCompressImage } from '@sendbird/uikit-utils';
+import { isImage, shouldCompressImage } from '@sendbird/uikit-utils';
 
-import { useLocalization, usePlatformService, useSendbirdChat } from '../../../../hooks/useContext';
-import SBUError from '../../../../libs/SBUError';
-import SBUUtils from '../../../../libs/SBUUtils';
-import type { MentionedUser } from '../../../../types';
-import type { GroupChannelProps } from '../../types';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUError from '../../libs/SBUError';
+import SBUUtils from '../../libs/SBUUtils';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser } from '../../types';
+import type { ChannelInputProps } from './index';
 
-type SendInputProps = GroupChannelProps['Input'] & {
+interface SendInputProps extends ChannelInputProps {
   text: string;
   onChangeText: (val: string) => void;
-  frozen: boolean;
-  muted: boolean;
-  disabled: boolean;
   onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
   mentionedUsers: MentionedUser[];
-};
+}
+
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    onPressSendUserMessage,
+    onPressSendFileMessage,
     onSendUserMessage,
     onSendFileMessage,
     text,
     onChangeText,
-    disabled,
-    frozen,
-    muted,
     onSelectionChange,
     mentionedUsers,
+    inputDisabled,
+    inputFrozen,
+    inputMuted,
   },
   ref,
 ) {
@@ -57,22 +58,44 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   const { alert } = useAlert();
   const toast = useToast();
 
-  const onPressSend = () => {
-    const mention = {
-      userIds: mentionedUsers.map((it) => it.user.userId),
-      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
-      type: MentionType.USERS,
-    };
+  const sendUserMessage = () => {
+    const mentionType = MentionType.USERS;
+    const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+
+    if (onPressSendUserMessage) {
+      onPressSendUserMessage({
+        message: text,
+        mentionType,
+        mentionedUserIds,
+        mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    } else if (onSendUserMessage) {
+      onSendUserMessage(text, {
+        type: mentionType,
+        userIds: mentionedUserIds,
+        messageTemplate: mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    }
 
-    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
     onChangeText('');
   };
 
+  const sendFileMessage = (file: FileType) => {
+    if (onPressSendFileMessage) {
+      onPressSendFileMessage({ file }).catch(onFailureToSend);
+    } else if (onSendFileMessage) {
+      onSendFileMessage(file).catch(onFailureToSend);
+    }
+  };
+
+  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+
   const onPressAttachment = () => {
     openSheet({
       sheetItems: [
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
           icon: 'camera',
           onPress: async () => {
             const mediaFile = await fileService.openCamera({
@@ -97,7 +120,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
@@ -114,12 +137,12 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(mediaFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(mediaFile);
             }
           },
         },
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
           icon: 'photo',
           onPress: async () => {
             const mediaFiles = await fileService.openMediaLibrary({
@@ -147,7 +170,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
@@ -164,12 +187,12 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(mediaFiles[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(mediaFile);
             }
           },
         },
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
           icon: 'document',
           onPress: async () => {
             const documentFile = await fileService.openDocument({
@@ -180,7 +203,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(documentFile.uri, documentFile.type) &&
-                shouldCompressImage(documentFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(documentFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
@@ -197,7 +220,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(documentFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(documentFile);
             }
           },
         },
@@ -205,11 +228,19 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     });
   };
 
+  const getPlaceholder = () => {
+    if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
+    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
+
+    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+  };
+
   return (
     <View style={styles.sendInputContainer}>
-      <TouchableOpacity onPress={onPressAttachment} disabled={disabled}>
+      <TouchableOpacity onPress={onPressAttachment} disabled={inputDisabled}>
         <Icon
-          color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+          color={inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
           icon={'add'}
           size={24}
           containerStyle={styles.iconAttach}
@@ -220,25 +251,20 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
         multiline
         disableFullscreenUI
         onSelectionChange={onSelectionChange}
-        editable={!disabled}
+        editable={!inputDisabled}
         onChangeText={onChangeText}
         style={styles.input}
-        placeholder={conditionChaining(
-          [frozen, muted],
-          [
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED,
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED,
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
-          ],
-        )}
+        placeholder={getPlaceholder()}
       >
         {mentionManager.textToMentionedComponents(text, mentionedUsers)}
       </TextInput>
 
       {Boolean(text.trim()) && (
-        <TouchableOpacity onPress={onPressSend} disabled={disabled}>
+        <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
           <Icon
-            color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+            color={
+              inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
+            }
             icon={'send'}
             size={24}
             containerStyle={styles.iconSend}