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

package/src/components/ChannelInput/SendInput.tsx

@@ -18,7 +18,8 @@ import {
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { isImage, shouldCompressImage } from '@sendbird/uikit-utils';
+import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdChannel, isImage, shouldCompressImage, useIIFE } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUError from '../../libs/SBUError';
@@ -36,10 +37,9 @@ interface SendInputProps extends ChannelInputProps {
 
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    AttachmentsButton,
     onPressSendUserMessage,
     onPressSendFileMessage,
-    onSendUserMessage,
-    onSendFileMessage,
     text,
     onChangeText,
     onSelectionChange,
@@ -47,186 +47,41 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     inputDisabled,
     inputFrozen,
     inputMuted,
+    channel,
   },
   ref,
 ) {
-  const { mentionManager, imageCompressionConfig, features } = useSendbirdChat();
+  const { mentionManager, sbOptions } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const { fileService, mediaService } = usePlatformService();
   const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
-  const { alert } = useAlert();
   const toast = useToast();
 
+  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+
   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);
-    }
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
+      text,
+      mentionedUsers,
+      sbOptions.uikit.groupChannel.channel.enableMention,
+    );
 
-    onChangeText('');
-  };
+    onPressSendUserMessage({
+      message: text,
+      mentionType,
+      mentionedUserIds,
+      mentionedMessageTemplate,
+    }).catch(onFailureToSend);
 
-  const sendFileMessage = (file: FileType) => {
-    if (onPressSendFileMessage) {
-      onPressSendFileMessage({ file }).catch(onFailureToSend);
-    } else if (onSendFileMessage) {
-      onSendFileMessage(file).catch(onFailureToSend);
-    }
+    onChangeText('');
   };
 
-  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
-
-  const onPressAttachment = () => {
-    openSheet({
-      sheetItems: [
-        {
-          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
-          icon: 'camera',
-          onPress: async () => {
-            const mediaFile = await fileService.openCamera({
-              mediaType: 'all',
-              onOpenFailure: (error) => {
-                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-                  alert({
-                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
-                      STRINGS.LABELS.PERMISSION_CAMERA,
-                      STRINGS.LABELS.PERMISSION_APP_NAME,
-                    ),
-                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
-                  });
-                } else {
-                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-                }
-              },
-            });
-
-            if (mediaFile) {
-              // Image compression
-              if (
-                isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
-              ) {
-                await SBUUtils.safeRun(async () => {
-                  const compressed = await mediaService.compressImage({
-                    uri: mediaFile.uri,
-                    maxWidth: imageCompressionConfig.width,
-                    maxHeight: imageCompressionConfig.height,
-                    compressionRate: imageCompressionConfig.compressionRate,
-                  });
-
-                  if (compressed) {
-                    mediaFile.uri = compressed.uri;
-                    mediaFile.size = compressed.size;
-                  }
-                });
-              }
-
-              sendFileMessage(mediaFile);
-            }
-          },
-        },
-        {
-          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
-          icon: 'photo',
-          onPress: async () => {
-            const mediaFiles = await fileService.openMediaLibrary({
-              selectionLimit: 1,
-              mediaType: 'all',
-              onOpenFailure: (error) => {
-                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-                  alert({
-                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
-                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
-                      STRINGS.LABELS.PERMISSION_APP_NAME,
-                    ),
-                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
-                  });
-                } else {
-                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
-                }
-              },
-            });
-
-            if (mediaFiles && mediaFiles[0]) {
-              const mediaFile = mediaFiles[0];
-
-              // Image compression
-              if (
-                isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
-              ) {
-                await SBUUtils.safeRun(async () => {
-                  const compressed = await mediaService.compressImage({
-                    uri: mediaFile.uri,
-                    maxWidth: imageCompressionConfig.width,
-                    maxHeight: imageCompressionConfig.height,
-                    compressionRate: imageCompressionConfig.compressionRate,
-                  });
-
-                  if (compressed) {
-                    mediaFile.uri = compressed.uri;
-                    mediaFile.size = compressed.size;
-                  }
-                });
-              }
-
-              sendFileMessage(mediaFile);
-            }
-          },
-        },
-        {
-          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
-          icon: 'document',
-          onPress: async () => {
-            const documentFile = await fileService.openDocument({
-              onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
-            });
-
-            if (documentFile) {
-              // Image compression
-              if (
-                isImage(documentFile.uri, documentFile.type) &&
-                shouldCompressImage(documentFile.type, features.imageCompressionEnabled)
-              ) {
-                await SBUUtils.safeRun(async () => {
-                  const compressed = await mediaService.compressImage({
-                    uri: documentFile.uri,
-                    maxWidth: imageCompressionConfig.width,
-                    maxHeight: imageCompressionConfig.height,
-                    compressionRate: imageCompressionConfig.compressionRate,
-                  });
-
-                  if (compressed) {
-                    documentFile.uri = compressed.uri;
-                    documentFile.size = compressed.size;
-                  }
-                });
-              }
-
-              sendFileMessage(documentFile);
-            }
-          },
-        },
-      ],
-    });
-  };
+  const sheetItems = useChannelInputItems(channel, (file) => {
+    onPressSendFileMessage({ file }).catch(onFailureToSend);
+  });
+  const onPressAttachment = () => openSheet({ sheetItems });
 
   const getPlaceholder = () => {
     if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
@@ -238,14 +93,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
 
   return (
     <View style={styles.sendInputContainer}>
-      <TouchableOpacity onPress={onPressAttachment} disabled={inputDisabled}>
-        <Icon
-          color={inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
-          icon={'add'}
-          size={24}
-          containerStyle={styles.iconAttach}
-        />
-      </TouchableOpacity>
+      {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
       <TextInput
         ref={ref}
         multiline
@@ -256,7 +104,11 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
         style={styles.input}
         placeholder={getPlaceholder()}
       >
-        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+        {mentionManager.textToMentionedComponents(
+          text,
+          mentionedUsers,
+          sbOptions.uikit.groupChannel.channel.enableMention,
+        )}
       </TextInput>
 
       {Boolean(text.trim()) && (
@@ -275,6 +127,214 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   );
 });
 
+const useChannelInputItems = (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
+  const { sbOptions, imageCompressionConfig } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { fileService, mediaService } = usePlatformService();
+  const { alert } = useAlert();
+  const toast = useToast();
+
+  const sheetItems: BottomSheetItem['sheetItems'] = [];
+  const input = useIIFE(() => {
+    switch (true) {
+      case channel.isOpenChannel():
+        return sbOptions.uikit.openChannel.channel.input;
+      case channel.isGroupChannel():
+        return sbOptions.uikit.groupChannel.channel.input;
+      default:
+        return {
+          enableDocument: true,
+          camera: { enablePhoto: true, enableVideo: true },
+          gallery: { enablePhoto: true, enableVideo: true },
+        };
+    }
+  });
+
+  if (input.camera.enablePhoto) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO,
+      icon: 'camera',
+      onPress: async () => {
+        const mediaFile = await fileService.openCamera({
+          mediaType: 'photo',
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_CAMERA,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFile) {
+          // Image compression
+          if (
+            isImage(mediaFile.uri, mediaFile.type) &&
+            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: mediaFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                mediaFile.uri = compressed.uri;
+                mediaFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.camera.enableVideo) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO,
+      icon: 'camera',
+      onPress: async () => {
+        const mediaFile = await fileService.openCamera({
+          mediaType: 'video',
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_CAMERA,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFile) {
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.gallery.enablePhoto || input.gallery.enableVideo) {
+    const mediaType = (() => {
+      switch (true) {
+        case input.gallery.enablePhoto && input.gallery.enableVideo:
+          return 'all';
+        case input.gallery.enablePhoto && !input.gallery.enableVideo:
+          return 'photo';
+        case !input.gallery.enablePhoto && input.gallery.enableVideo:
+          return 'video';
+        default:
+          return 'all';
+      }
+    })();
+
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
+      icon: 'photo',
+      onPress: async () => {
+        const mediaFiles = await fileService.openMediaLibrary({
+          selectionLimit: 1,
+          mediaType,
+          onOpenFailure: (error) => {
+            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+              alert({
+                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                  STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                  STRINGS.LABELS.PERMISSION_APP_NAME,
+                ),
+                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+            }
+          },
+        });
+
+        if (mediaFiles && mediaFiles[0]) {
+          const mediaFile = mediaFiles[0];
+
+          // Image compression
+          if (
+            isImage(mediaFile.uri, mediaFile.type) &&
+            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: mediaFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                mediaFile.uri = compressed.uri;
+                mediaFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(mediaFile);
+        }
+      },
+    });
+  }
+
+  if (input.enableDocument) {
+    sheetItems.push({
+      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
+      icon: 'document',
+      onPress: async () => {
+        const documentFile = await fileService.openDocument({
+          onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+        });
+
+        if (documentFile) {
+          // Image compression
+          if (
+            isImage(documentFile.uri, documentFile.type) &&
+            shouldCompressImage(documentFile.type, sbOptions.chat.imageCompressionEnabled)
+          ) {
+            await SBUUtils.safeRun(async () => {
+              const compressed = await mediaService.compressImage({
+                uri: documentFile.uri,
+                maxWidth: imageCompressionConfig.width,
+                maxHeight: imageCompressionConfig.height,
+                compressionRate: imageCompressionConfig.compressionRate,
+              });
+
+              if (compressed) {
+                documentFile.uri = compressed.uri;
+                documentFile.size = compressed.size;
+              }
+            });
+          }
+
+          sendFileMessage(documentFile);
+        }
+      },
+    });
+  }
+
+  return sheetItems;
+};
+
 const styles = createStyleSheet({
   sendInputContainer: {
     paddingVertical: 10,
@@ -289,10 +349,6 @@ const styles = createStyleSheet({
     maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
     borderRadius: 20,
   },
-  iconAttach: {
-    marginRight: 8,
-    padding: 4,
-  },
   iconSend: {
     marginLeft: 4,
     padding: 4,

package/src/components/ChannelInput/index.tsx

@@ -19,17 +19,12 @@ import {
 
 import { useSendbirdChat } from '../../hooks/useContext';
 import useMentionTextInput from '../../hooks/useMentionTextInput';
-import type { FileType } from '../../platform/types';
 import type { MentionedUser, Range } from '../../types';
+import type { AttachmentsButtonProps } from './AttachmentsButton';
+import AttachmentsButton from './AttachmentsButton';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
-type UserMessageMentionParams = Required<{
-  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
-  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
-  type: SendbirdUserMessageCreateParams['mentionType'];
-}>;
-
 export type SuggestedMentionListProps = {
   text: string;
   selection: Range;
@@ -64,18 +59,8 @@ export type ChannelInputProps = {
   // mention
   SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
 
-  /** @deprecated Please use `onPressSendUserMessage` **/
-  onSendFileMessage?: (file: FileType) => Promise<void>;
-  /** @deprecated Please use `onPressSendFileMessage` **/
-  onSendUserMessage?: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
-  /** @deprecated Please use `onPressUpdateUserMessage` **/
-  onUpdateFileMessage?: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
-  /** @deprecated Please use `onPressUpdateFileMessage` **/
-  onUpdateUserMessage?: (
-    editedText: string,
-    message: SendbirdUserMessage,
-    mention?: UserMessageMentionParams,
-  ) => Promise<void>;
+  // sub-components
+  AttachmentsButton?: (props: AttachmentsButtonProps) => JSX.Element | null;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
@@ -92,7 +77,7 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
-  const { features, mentionManager } = useSendbirdChat();
+  const { sbOptions, mentionManager } = useSendbirdChat();
 
   const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
     messageToEdit,
@@ -103,7 +88,8 @@ const ChannelInput = (props: ChannelInputProps) => {
     return 'edit';
   });
 
-  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const mentionAvailable =
+    sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
   const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
@@ -140,6 +126,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 onChangeText={onChangeText}
                 onSelectionChange={onSelectionChange}
                 mentionedUsers={mentionedUsers}
+                AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (