@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -1,60 +1,86 @@
-import React, { useEffect, useRef } from 'react';
-import { Platform, TextInput as RNTextInput, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  View,
+} from 'react-native';
 
+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 } from '../../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';
+import type { MentionedUser } from '../../../../types';
 import type { GroupChannelProps } from '../../types';
 
 type EditInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
-  editMessage: SendbirdUserMessage | SendbirdFileMessage;
-  setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onChangeText: (val: string) => void;
+  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
   disabled: boolean;
+  autoFocus: boolean;
+  mentionedUsers: MentionedUser[];
 };
 
-const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage, disabled }: EditInputProps) => {
+const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
+  {
+    text,
+    onChangeText,
+    messageToEdit,
+    setMessageToEdit,
+    onUpdateUserMessage,
+    onSelectionChange,
+    disabled,
+    autoFocus,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();
 
-  useEffect(() => {
-    if (editMessage.isUserMessage()) {
-      setText(editMessage.message ?? '');
-
-      if (!AUTO_FOCUS) setTimeout(() => inputRef.current?.focus(), 500);
-    }
-  }, [editMessage]);
-
   const onPressCancel = () => {
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   const onPressSave = () => {
-    if (editMessage.isUserMessage()) {
-      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+    if (messageToEdit.isUserMessage()) {
+      const mention = {
+        userIds: mentionedUsers.map((it) => it.user.userId),
+        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+        type: MentionType.USERS,
+      };
+
+      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>
+        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),
+      );
     }
-    setEditMessage();
-    setText('');
+    setMessageToEdit();
+    onChangeText('');
   };
 
   return (
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
-          editable={!disabled}
-          autoFocus={AUTO_FOCUS}
-          ref={inputRef}
+          ref={ref}
           multiline
-          value={text}
-          onChangeText={setText}
+          disableFullscreenUI
+          editable={!disabled}
+          autoFocus={autoFocus}
+          onChangeText={onChangeText}
           style={styles.input}
           placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
-        />
+          onSelectionChange={onSelectionChange}
+        >
+          {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+        </TextInput>
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>
         <Button variant={'text'} onPress={onPressCancel}>
@@ -67,7 +93,7 @@ const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMes
       </View>
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   editInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -1,6 +1,14 @@
-import React from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
+import { MentionType } from '@sendbird/chat/message';
 import {
   Icon,
   TextInput,
@@ -10,40 +18,56 @@ import {
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { conditionChaining, isImage, shouldCompressImage } from '@sendbird/uikit-utils';
 
-import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+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';
 
 type SendInputProps = GroupChannelProps['Input'] & {
   text: string;
-  setText: (val: string) => void;
+  onChangeText: (val: string) => void;
   frozen: boolean;
   muted: boolean;
   disabled: boolean;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+  mentionedUsers: MentionedUser[];
 };
-const SendInput = ({
-  onSendUserMessage,
-  onSendFileMessage,
-  text,
-  setText,
-  disabled,
-  frozen,
-  muted,
-}: SendInputProps) => {
+const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
+  {
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    onChangeText,
+    disabled,
+    frozen,
+    muted,
+    onSelectionChange,
+    mentionedUsers,
+  },
+  ref,
+) {
+  const { mentionManager, imageCompressionConfig, features } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const { fileService } = usePlatformService();
+  const { fileService, mediaService } = usePlatformService();
   const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
   const { alert } = useAlert();
   const toast = useToast();
 
   const onPressSend = () => {
-    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
-    setText('');
+    const mention = {
+      userIds: mentionedUsers.map((it) => it.user.userId),
+      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+      type: MentionType.USERS,
+    };
+
+    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    onChangeText('');
   };
+
   const onPressAttachment = () => {
     openSheet({
       sheetItems: [
@@ -51,13 +75,16 @@ const SendInput = ({
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
           icon: 'camera',
           onPress: async () => {
-            const photo = await fileService.openCamera({
+            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('camera', 'UIKitSample'),
+                    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 {
@@ -66,8 +93,28 @@ const SendInput = ({
               },
             });
 
-            if (photo) {
-              onSendFileMessage(photo).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (mediaFile) {
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, 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;
+                  }
+                });
+              }
+
+              onSendFileMessage(mediaFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },
@@ -75,14 +122,17 @@ const SendInput = ({
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
           icon: 'photo',
           onPress: async () => {
-            const photo = await fileService.openMediaLibrary({
+            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('device storage', 'UIKitSample'),
+                    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 {
@@ -91,8 +141,30 @@ const SendInput = ({
               },
             });
 
-            if (photo && photo[0]) {
-              onSendFileMessage(photo[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (mediaFiles && mediaFiles[0]) {
+              const mediaFile = mediaFiles[0];
+
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, 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;
+                  }
+                });
+              }
+
+              onSendFileMessage(mediaFiles[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },
@@ -100,12 +172,32 @@ const SendInput = ({
           title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
           icon: 'document',
           onPress: async () => {
-            const file = await fileService.openDocument({
+            const documentFile = await fileService.openDocument({
               onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
             });
 
-            if (file) {
-              onSendFileMessage(file).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+            if (documentFile) {
+              // Image compression
+              if (
+                isImage(documentFile.uri, documentFile.type) &&
+                shouldCompressImage(documentFile.uri, 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;
+                  }
+                });
+              }
+
+              onSendFileMessage(documentFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
             }
           },
         },
@@ -124,10 +216,12 @@ const SendInput = ({
         />
       </TouchableOpacity>
       <TextInput
+        ref={ref}
         multiline
+        disableFullscreenUI
+        onSelectionChange={onSelectionChange}
         editable={!disabled}
-        value={text}
-        onChangeText={setText}
+        onChangeText={onChangeText}
         style={styles.input}
         placeholder={conditionChaining(
           [frozen, muted],
@@ -137,7 +231,10 @@ const SendInput = ({
             STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
           ],
         )}
-      />
+      >
+        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+      </TextInput>
+
       {Boolean(text.trim()) && (
         <TouchableOpacity onPress={onPressSend} disabled={disabled}>
           <Icon
@@ -150,7 +247,7 @@ const SendInput = ({
       )}
     </View>
   );
-};
+});
 
 const styles = createStyleSheet({
   sendInputContainer: {

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -1,75 +1,170 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getGroupChannelChatAvailableState, useIIFE } from '@sendbird/uikit-utils';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+  getGroupChannelChatAvailableState,
+  replace,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
+import { useSendbirdChat } from '../../../../hooks/useContext';
+import useMentionTextInput from '../../../../hooks/useMentionTextInput';
 import { GroupChannelContexts } from '../../module/moduleContext';
 import type { GroupChannelProps } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
+
+// FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
+//  To workaround temporarily, change the key for re-mount the component.
+//  -> This will affect to keyboard blur when add/remove first mentioned user.
+const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
+
+// TODO: Refactor 'Edit' mode to clearly
 const GroupChannelInput = (props: GroupChannelProps['Input']) => {
-  const { left, right, bottom } = useSafeAreaInsets();
+  const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
-  const { channel, editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
+  const { features, mentionManager } = useSendbirdChat();
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(GroupChannelContexts.Fragment);
 
-  const [text, setText] = useState('');
-  const textTmpRef = useRef('');
   const chatAvailableState = getGroupChannelChatAvailableState(channel);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputMode = useIIFE(() => {
+    if (!messageToEdit) return 'send';
+    if (messageToEdit.isFileMessage()) return 'send';
+    return 'edit';
+  });
+
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit: messageToEdit,
+  });
+
+  useTypingTrigger(text, channel);
+  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useAutoFocusOnEditMode(textInputRef, messageToEdit);
+
+  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+    const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
+    const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
+
+    onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
+  };
+
+  if (!props.shouldRenderInput) {
+    return <SafeAreaBottom height={bottom} />;
+  }
+
+  return (
+    <>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
+        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+      >
+        <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
+          <View onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)} style={styles.inputContainer}>
+            {inputMode === 'send' && (
+              <SendInput
+                {...props}
+                {...chatAvailableState}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                text={text}
+                onChangeText={onChangeText}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+            {inputMode === 'edit' && messageToEdit && (
+              <EditInput
+                {...props}
+                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                ref={textInputRef as never}
+                autoFocus={AUTO_FOCUS}
+                text={text}
+                onChangeText={onChangeText}
+                messageToEdit={messageToEdit}
+                setMessageToEdit={setMessageToEdit}
+                disabled={chatAvailableState.disabled}
+                onSelectionChange={onSelectionChange}
+                mentionedUsers={mentionedUsers}
+              />
+            )}
+          </View>
+          <SafeAreaBottom height={bottom} />
+        </View>
+      </KeyboardAvoidingView>
+      {mentionAvailable && (
+        <props.SuggestedMentionList
+          text={text}
+          selection={selection}
+          inputHeight={inputHeight}
+          topInset={top}
+          bottomInset={bottom}
+          onPressToMention={onPressToMention}
+          mentionedUsers={mentionedUsers}
+        />
+      )}
+    </>
+  );
+};
 
+const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
   useEffect(() => {
     if (text.length === 0) channel.endTyping();
     else channel.startTyping();
   }, [text]);
+};
+
+const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
+  const textTmpRef = useRef('');
 
   useEffect(() => {
-    if (chatAvailableState.disabled) {
+    if (chatDisabled) {
       textTmpRef.current = text;
       setText('');
     } else {
       setText(textTmpRef.current);
     }
-  }, [chatAvailableState.disabled]);
-
-  const inputMode = useIIFE(() => {
-    if (!editMessage) return 'send';
-    if (editMessage.isFileMessage()) return 'send';
-    return 'edit';
-  });
-
-  if (!props.shouldRenderInput) {
-    return <SafeAreaBottom height={bottom} />;
-  }
+  }, [chatDisabled]);
+};
 
-  return (
-    <KeyboardAvoidingView
-      keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
-      behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
-    >
-      <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
-        <View style={{ justifyContent: 'center', width: '100%' }}>
-          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} {...chatAvailableState} />}
-          {inputMode === 'edit' && editMessage && (
-            <EditInput
-              {...props}
-              text={text}
-              setText={setText}
-              editMessage={editMessage}
-              setEditMessage={setEditMessage}
-              disabled={chatAvailableState.disabled}
-            />
-          )}
-        </View>
-        <SafeAreaBottom height={bottom} />
-      </View>
-    </KeyboardAvoidingView>
-  );
+const useAutoFocusOnEditMode = (
+  textInputRef: MutableRefObject<TextInput | undefined>,
+  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+) => {
+  useEffect(() => {
+    if (messageToEdit?.isUserMessage()) {
+      if (!AUTO_FOCUS) setTimeout(() => textInputRef.current?.focus(), 500);
+    }
+  }, [messageToEdit]);
 };
+
 const SafeAreaBottom = ({ height }: { height: number }) => {
   return <View style={{ height }} />;
 };
 
+const styles = createStyleSheet({
+  inputContainer: {
+    justifyContent: 'center',
+    width: '100%',
+  },
+  inputDefault: {
+    height: 56,
+  },
+});
+
 export default React.memo(GroupChannelInput);