@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/README.md

@@ -45,11 +45,12 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 **Install dependencies**
 
 ```sh
-npm i @sendbird/uikit-react-native \
-      @sendbird/chat \
-      date-fns \
-      react-native-safe-area-context \
-      @react-native-community/netinfo
+npm install @sendbird/uikit-react-native \
+            @sendbird/chat \
+            date-fns \
+            react-native-safe-area-context \
+            @react-native-community/netinfo \
+            @react-native-async-storage/async-storage
 ```
 
 **Linking native modules**
@@ -121,6 +122,7 @@ const App = () => {
         file: FileService,
         notification: NotificationService,
         clipboard: ClipboardService,
+        media: MediaService,
       }}
     >
       {/* ... */}
@@ -136,17 +138,20 @@ In order to implement the interfaces to your React Native app more easily, we pr
 
 **Using React Native CLI**
 
-You can use `createNativeClipboardService`, `createNativeNotificationService` and `createNativeFileService` helper functions with below native modules.
+You can use `createNativeClipboardService`, `createNativeNotificationService`, `createNativeFileService` and `createNativeMediaService` helper functions with below native modules.
 
 ```sh
-npm install react-native-permissions \
+npm install react-native-video \
+            react-native-permissions \
+            react-native-file-access \
             react-native-image-picker \
             react-native-document-picker \
-            @react-native-camera-roll/camera-roll \
-            react-native-file-access \
+            react-native-create-thumbnail \
             @react-native-clipboard/clipboard \
+            @react-native-camera-roll/camera-roll \
             @react-native-firebase/app \
             @react-native-firebase/messaging \
+            @bam.tech/react-native-image-resizer
 
 npx pod-install
 ```
@@ -155,28 +160,36 @@ npx pod-install
 import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
+import Video from 'react-native-video';
 import * as DocumentPicker from 'react-native-document-picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
+import * as CreateThumbnail from 'react-native-create-thumbnail';
+import * as ImageResizer from '@bam.tech/react-native-image-resizer';
 
-const ClipboardService = createNativeClipboardService(Clipboard);
-const NotificationService = createNativeNotificationService({
+const NativeClipboardService = createNativeClipboardService(Clipboard);
+const NativeNotificationService = createNativeNotificationService({
   messagingModule: RNFBMessaging,
   permissionModule: Permissions,
 });
-const FileService = createNativeFileService({
+const NativeFileService = createNativeFileService({
   fsModule: FileAccess,
   permissionModule: Permissions,
   imagePickerModule: ImagePicker,
   mediaLibraryModule: CameraRoll,
   documentPickerModule: DocumentPicker,
 });
+const NativeMediaService = createNativeMediaService({
+  VideoComponent: Video,
+  thumbnailModule: CreateThumbnail,
+  imageResizerModule: ImageResizer,
+});
 ```
 
 **Using Expo CLI**
 
-You can use `createExpoClipboardService`, `createExpoNotificationService` and `createExpoFileService` helper functions with below expo modules.
+You can use `createExpoClipboardService`, `createExpoNotificationService`, `createExpoFileService` and `createExpoMediaService` helper functions with below expo modules.
 
 ```sh
 expo install expo-image-picker \
@@ -184,7 +197,10 @@ expo install expo-image-picker \
              expo-media-library \
              expo-file-system \
              expo-clipboard \
-             expo-notifications
+             expo-notifications \
+             expo-av \
+             expo-video-thumbnails \
+             expo-image-manipulator
 ```
 
 ```ts
@@ -194,15 +210,24 @@ import * as ExpoFS from 'expo-file-system';
 import * as ExpoImagePicker from 'expo-image-picker';
 import * as ExpoMediaLibrary from 'expo-media-library';
 import * as ExpoNotifications from 'expo-notifications';
+import * as ExpoAV from 'expo-av';
+import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
-const NotificationService = createExpoNotificationService(ExpoNotifications);
-const ClipboardService = createExpoClipboardService(ExpoClipboard);
-const FileService = createExpoFileService({
+const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
+const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
+const ExpoFileService = createExpoFileService({
   fsModule: ExpoFS,
   imagePickerModule: ExpoImagePicker,
   mediaLibraryModule: ExpoMediaLibrary,
   documentPickerModule: ExpoDocumentPicker,
 });
+const ExpoMediaService = createExpoMediaService({
+  avModule: ExpoAV,
+  thumbnailModule: ExpoVideoThumbnail,
+  imageManipulator: ExpoImageManipulator,
+  fsModule: ExpoFS,
+})
 ```
 
 ### Local caching (optional)
@@ -269,6 +294,7 @@ import {
   createGroupChannelFragment,
   createGroupChannelListFragment,
 } from '@sendbird/uikit-react-native';
+import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
 
 const GroupChannelListFragment = createGroupChannelListFragment();
 const GroupChannelCreateFragment = createGroupChannelCreateFragment();
@@ -279,14 +305,12 @@ const GroupChannelListScreen = () => {
   return (
     <GroupChannelListFragment
       onPressCreateChannel={(channelType) => {
-        // Navigate to GroupChannelCreate key function.
+        // Navigate to GroupChannelCreate function.
         navigation.navigate('GroupChannelCreate', { channelType });
       }}
       onPressChannel={(channel) => {
-        // Navigate to GroupChannel key function.
-        navigation.navigate('GroupChannel', {
-          serializedChannel: channel.serialize(),
-        });
+        // Navigate to GroupChannel function.
+        navigation.navigate('GroupChannel', { channelUrl: channel.url });
       }}
     />
   );
@@ -298,10 +322,8 @@ const GroupChannelCreateScreen = () => {
   return (
     <GroupChannelCreateFragment
       onCreateChannel={async (channel) => {
-        // Navigate to GroupChannel key function.
-        navigation.replace('GroupChannel', {
-          serializedChannel: channel.serialize(),
-        });
+        // Navigate to GroupChannel function.
+        navigation.replace('GroupChannel', { channelUrl: channel.url });
       }}
       onPressHeaderLeft={() => {
         // Go back to the previous screen.
@@ -316,13 +338,14 @@ const GroupChannelScreen = () => {
   const { params } = useRoute<any>();
 
   const { sdk } = useSendbirdChat();
-  const channel = sdk.GroupChannel.buildFromSerializedData(params.serializedChannel);
-
+  const { channel } = useGroupChannel(sdk, params.channelUrl);
+  if (!channel) return null;
+  
   return (
     <GroupChannelFragment
       channel={channel}
       onChannelDeleted={() => {
-        // Navigate to GroupChannelList key function.
+        // Navigate to GroupChannelList function.
         navigation.navigate('GroupChannelList');
       }}
       onPressHeaderLeft={() => {
@@ -330,10 +353,8 @@ const GroupChannelScreen = () => {
         navigation.goBack();
       }}
       onPressHeaderRight={() => {
-        // Navigate to GroupChannelSettings key function.
-        navigation.navigate('GroupChannelSettings', {
-          serializedChannel: params.serializedChannel,
-        });
+        // Navigate to GroupChannelSettings function.
+        navigation.navigate('GroupChannelSettings', { channelUrl: params.channelUrl });
       }}
     />
   );
@@ -398,6 +419,7 @@ const App = () => {
         file: FileService,
         notification: NotificationService,
         clipboard: ClipboardService,
+        media: MediaService,
       }}
     >
       <Navigation />

package/lib/commonjs/components/ChannelCover.js

@@ -29,50 +29,64 @@ const ChannelCover = _ref => {
   } = (0, _useContext.useSendbirdChat)();
   const {
     colors
-  } = (0, _uikitReactNativeFoundation.useUIKitTheme)(); // custom channel cover
-
-  if (!(0, _uikitUtils.isDefaultCoverImage)(channel.coverUrl) || !currentUser) {
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+
+  if (channel.isGroupChannel()) {
+    // custom channel cover
+    if (!(0, _uikitUtils.isDefaultCoverImage)(channel.coverUrl) || !currentUser) {
+      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, _extends({
+        uri: channel.coverUrl
+      }, avatarProps));
+    } // broadcast channel cover
+
+
+    if (channel.isBroadcast) {
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: avatarProps.containerStyle
+      }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.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
+        }
+      }));
+    } // no members, use anonymous profile
+
+
+    if (channel.memberCount <= 1) {
+      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, avatarProps);
+    } // 1:1, use member profile
+
+
+    if (channel.memberCount === 2) {
+      var _channel$members$filt, _channel$members$filt2;
+
+      const otherUserProfile = (_channel$members$filt = channel.members.filter(m => m.userId !== currentUser.userId)) === null || _channel$members$filt === void 0 ? void 0 : (_channel$members$filt2 = _channel$members$filt[0]) === null || _channel$members$filt2 === void 0 ? void 0 : _channel$members$filt2.profileUrl;
+      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, _extends({
+        uri: otherUserProfile
+      }, avatarProps));
+    } // group, use members profile
+
+
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar.Group, avatarProps, (0, _uikitUtils.getMembersExcludeMe)(channel, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId).map(m => /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
+      key: m.userId,
+      uri: m.profileUrl
+    })));
+  }
+
+  if (channel.isOpenChannel()) {
+    // channel cover
     return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, _extends({
       uri: channel.coverUrl
     }, avatarProps));
-  } // broadcast channel cover
-
-
-  if (channel.isBroadcast) {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: avatarProps.containerStyle
-    }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.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
-      }
-    }));
-  } // no members, use anonymous profile
-
-
-  if (channel.memberCount <= 1) {
-    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, avatarProps);
-  } // 1:1, use member profile
-
-
-  if (channel.memberCount === 2) {
-    var _channel$members$filt, _channel$members$filt2;
-
-    const otherUserProfile = (_channel$members$filt = channel.members.filter(m => m.userId !== currentUser.userId)) === null || _channel$members$filt === void 0 ? void 0 : (_channel$members$filt2 = _channel$members$filt[0]) === null || _channel$members$filt2 === void 0 ? void 0 : _channel$members$filt2.profileUrl;
-    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, _extends({
-      uri: otherUserProfile
-    }, avatarProps));
-  } // group, use members profile
-
+  }
 
-  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar.Group, avatarProps, (0, _uikitUtils.getMembersExcludeMe)(channel, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId).map(m => /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
-    key: m.userId,
-    uri: m.profileUrl
-  })));
+  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, _extends({
+    uri: channel.coverUrl
+  }, avatarProps));
 };
 
 var _default = ChannelCover;

package/lib/commonjs/components/ChannelCover.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChannelCover","channel","avatarProps","currentUser","useSendbirdChat","colors","useUIKitTheme","isDefaultCoverImage","coverUrl","isBroadcast","containerStyle","size","onBackgroundReverse01","backgroundColor","secondary","borderRadius","padding","memberCount","otherUserProfile","members","filter","m","userId","profileUrl","getMembersExcludeMe","map"],"sources":["ChannelCover.tsx"],"sourcesContent":["import React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\n\nimport { Avatar, Icon, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdGroupChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  channel: SendbirdGroupChannel;\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst ChannelCover = ({ channel, ...avatarProps }: Props) => {\n  const { currentUser } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  // custom channel cover\n  if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {\n    return <Avatar uri={channel.coverUrl} {...avatarProps} />;\n  }\n\n  // broadcast channel cover\n  if (channel.isBroadcast) {\n    return (\n      <View style={avatarProps.containerStyle}>\n        <Icon\n          icon={'broadcast'}\n          size={avatarProps.size * (4 / 7)}\n          color={colors.onBackgroundReverse01}\n          containerStyle={{\n            backgroundColor: colors.secondary,\n            borderRadius: avatarProps.size * 0.5,\n            padding: avatarProps.size * (3 / 7) * 0.5,\n          }}\n        />\n      </View>\n    );\n  }\n\n  // no members, use anonymous profile\n  if (channel.memberCount <= 1) {\n    return <Avatar {...avatarProps} />;\n  }\n\n  // 1:1, use member profile\n  if (channel.memberCount === 2) {\n    const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;\n    return <Avatar uri={otherUserProfile} {...avatarProps} />;\n  }\n\n  // group, use members profile\n  return (\n    <Avatar.Group {...avatarProps}>\n      {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (\n        <Avatar key={m.userId} uri={m.profileUrl} />\n      ))}\n    </Avatar.Group>\n  );\n};\n\nexport default ChannelCover;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAEA;;;;;;AAQA,MAAMA,YAAY,GAAG,QAAwC;EAAA,IAAvC;IAAEC,OAAF;IAAW,GAAGC;EAAd,CAAuC;EAC3D,MAAM;IAAEC;EAAF,IAAkB,IAAAC,2BAAA,GAAxB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB,CAF2D,CAI3D;;EACA,IAAI,CAAC,IAAAC,+BAAA,EAAoBN,OAAO,CAACO,QAA5B,CAAD,IAA0C,CAACL,WAA/C,EAA4D;IAC1D,oBAAO,6BAAC,kCAAD;MAAQ,GAAG,EAAEF,OAAO,CAACO;IAArB,GAAmCN,WAAnC,EAAP;EACD,CAP0D,CAS3D;;;EACA,IAAID,OAAO,CAACQ,WAAZ,EAAyB;IACvB,oBACE,6BAAC,iBAAD;MAAM,KAAK,EAAEP,WAAW,CAACQ;IAAzB,gBACE,6BAAC,gCAAD;MACE,IAAI,EAAE,WADR;MAEE,IAAI,EAAER,WAAW,CAACS,IAAZ,IAAoB,IAAI,CAAxB,CAFR;MAGE,KAAK,EAAEN,MAAM,CAACO,qBAHhB;MAIE,cAAc,EAAE;QACdC,eAAe,EAAER,MAAM,CAACS,SADV;QAEdC,YAAY,EAAEb,WAAW,CAACS,IAAZ,GAAmB,GAFnB;QAGdK,OAAO,EAAEd,WAAW,CAACS,IAAZ,IAAoB,IAAI,CAAxB,IAA6B;MAHxB;IAJlB,EADF,CADF;EAcD,CAzB0D,CA2B3D;;;EACA,IAAIV,OAAO,CAACgB,WAAR,IAAuB,CAA3B,EAA8B;IAC5B,oBAAO,6BAAC,kCAAD,EAAYf,WAAZ,CAAP;EACD,CA9B0D,CAgC3D;;;EACA,IAAID,OAAO,CAACgB,WAAR,KAAwB,CAA5B,EAA+B;IAAA;;IAC7B,MAAMC,gBAAgB,4BAAGjB,OAAO,CAACkB,OAAR,CAAgBC,MAAhB,CAAwBC,CAAD,IAAOA,CAAC,CAACC,MAAF,KAAanB,WAAW,CAACmB,MAAvD,CAAH,oFAAG,sBAAiE,CAAjE,CAAH,2DAAG,uBAAqEC,UAA9F;IACA,oBAAO,6BAAC,kCAAD;MAAQ,GAAG,EAAEL;IAAb,GAAmChB,WAAnC,EAAP;EACD,CApC0D,CAsC3D;;;EACA,oBACE,6BAAC,kCAAD,CAAQ,KAAR,EAAkBA,WAAlB,EACG,IAAAsB,+BAAA,EAAoBvB,OAApB,EAA6BE,WAA7B,aAA6BA,WAA7B,uBAA6BA,WAAW,CAAEmB,MAA1C,EAAkDG,GAAlD,CAAuDJ,CAAD,iBACrD,6BAAC,kCAAD;IAAQ,GAAG,EAAEA,CAAC,CAACC,MAAf;IAAuB,GAAG,EAAED,CAAC,CAACE;EAA9B,EADD,CADH,CADF;AAOD,CA9CD;;eAgDevB,Y"}
+{"version":3,"names":["ChannelCover","channel","avatarProps","currentUser","useSendbirdChat","colors","useUIKitTheme","isGroupChannel","isDefaultCoverImage","coverUrl","isBroadcast","containerStyle","size","onBackgroundReverse01","backgroundColor","secondary","borderRadius","padding","memberCount","otherUserProfile","members","filter","m","userId","profileUrl","getMembersExcludeMe","map","isOpenChannel"],"sources":["ChannelCover.tsx"],"sourcesContent":["import React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\n\nimport { Avatar, Icon, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdBaseChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  channel: SendbirdBaseChannel;\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst ChannelCover = ({ channel, ...avatarProps }: Props) => {\n  const { currentUser } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  if (channel.isGroupChannel()) {\n    // custom channel cover\n    if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {\n      return <Avatar uri={channel.coverUrl} {...avatarProps} />;\n    }\n\n    // broadcast channel cover\n    if (channel.isBroadcast) {\n      return (\n        <View style={avatarProps.containerStyle}>\n          <Icon\n            icon={'broadcast'}\n            size={avatarProps.size * (4 / 7)}\n            color={colors.onBackgroundReverse01}\n            containerStyle={{\n              backgroundColor: colors.secondary,\n              borderRadius: avatarProps.size * 0.5,\n              padding: avatarProps.size * (3 / 7) * 0.5,\n            }}\n          />\n        </View>\n      );\n    }\n\n    // no members, use anonymous profile\n    if (channel.memberCount <= 1) {\n      return <Avatar {...avatarProps} />;\n    }\n\n    // 1:1, use member profile\n    if (channel.memberCount === 2) {\n      const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;\n      return <Avatar uri={otherUserProfile} {...avatarProps} />;\n    }\n\n    // group, use members profile\n    return (\n      <Avatar.Group {...avatarProps}>\n        {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (\n          <Avatar key={m.userId} uri={m.profileUrl} />\n        ))}\n      </Avatar.Group>\n    );\n  }\n\n  if (channel.isOpenChannel()) {\n    // channel cover\n    return <Avatar uri={channel.coverUrl} {...avatarProps} />;\n  }\n\n  return <Avatar uri={channel.coverUrl} {...avatarProps} />;\n};\n\nexport default ChannelCover;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAEA;;;;;;AAQA,MAAMA,YAAY,GAAG,QAAwC;EAAA,IAAvC;IAAEC,OAAF;IAAW,GAAGC;EAAd,CAAuC;EAC3D,MAAM;IAAEC;EAAF,IAAkB,IAAAC,2BAAA,GAAxB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;;EAEA,IAAIL,OAAO,CAACM,cAAR,EAAJ,EAA8B;IAC5B;IACA,IAAI,CAAC,IAAAC,+BAAA,EAAoBP,OAAO,CAACQ,QAA5B,CAAD,IAA0C,CAACN,WAA/C,EAA4D;MAC1D,oBAAO,6BAAC,kCAAD;QAAQ,GAAG,EAAEF,OAAO,CAACQ;MAArB,GAAmCP,WAAnC,EAAP;IACD,CAJ2B,CAM5B;;;IACA,IAAID,OAAO,CAACS,WAAZ,EAAyB;MACvB,oBACE,6BAAC,iBAAD;QAAM,KAAK,EAAER,WAAW,CAACS;MAAzB,gBACE,6BAAC,gCAAD;QACE,IAAI,EAAE,WADR;QAEE,IAAI,EAAET,WAAW,CAACU,IAAZ,IAAoB,IAAI,CAAxB,CAFR;QAGE,KAAK,EAAEP,MAAM,CAACQ,qBAHhB;QAIE,cAAc,EAAE;UACdC,eAAe,EAAET,MAAM,CAACU,SADV;UAEdC,YAAY,EAAEd,WAAW,CAACU,IAAZ,GAAmB,GAFnB;UAGdK,OAAO,EAAEf,WAAW,CAACU,IAAZ,IAAoB,IAAI,CAAxB,IAA6B;QAHxB;MAJlB,EADF,CADF;IAcD,CAtB2B,CAwB5B;;;IACA,IAAIX,OAAO,CAACiB,WAAR,IAAuB,CAA3B,EAA8B;MAC5B,oBAAO,6BAAC,kCAAD,EAAYhB,WAAZ,CAAP;IACD,CA3B2B,CA6B5B;;;IACA,IAAID,OAAO,CAACiB,WAAR,KAAwB,CAA5B,EAA+B;MAAA;;MAC7B,MAAMC,gBAAgB,4BAAGlB,OAAO,CAACmB,OAAR,CAAgBC,MAAhB,CAAwBC,CAAD,IAAOA,CAAC,CAACC,MAAF,KAAapB,WAAW,CAACoB,MAAvD,CAAH,oFAAG,sBAAiE,CAAjE,CAAH,2DAAG,uBAAqEC,UAA9F;MACA,oBAAO,6BAAC,kCAAD;QAAQ,GAAG,EAAEL;MAAb,GAAmCjB,WAAnC,EAAP;IACD,CAjC2B,CAmC5B;;;IACA,oBACE,6BAAC,kCAAD,CAAQ,KAAR,EAAkBA,WAAlB,EACG,IAAAuB,+BAAA,EAAoBxB,OAApB,EAA6BE,WAA7B,aAA6BA,WAA7B,uBAA6BA,WAAW,CAAEoB,MAA1C,EAAkDG,GAAlD,CAAuDJ,CAAD,iBACrD,6BAAC,kCAAD;MAAQ,GAAG,EAAEA,CAAC,CAACC,MAAf;MAAuB,GAAG,EAAED,CAAC,CAACE;IAA9B,EADD,CADH,CADF;EAOD;;EAED,IAAIvB,OAAO,CAAC0B,aAAR,EAAJ,EAA6B;IAC3B;IACA,oBAAO,6BAAC,kCAAD;MAAQ,GAAG,EAAE1B,OAAO,CAACQ;IAArB,GAAmCP,WAAnC,EAAP;EACD;;EAED,oBAAO,6BAAC,kCAAD;IAAQ,GAAG,EAAED,OAAO,CAACQ;EAArB,GAAmCP,WAAnC,EAAP;AACD,CAvDD;;eAyDeF,Y"}

package/lib/commonjs/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/EditInput.js

@@ -13,7 +13,7 @@ var _message = require("@sendbird/chat/message");
 
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 
-var _useContext = require("../../../../hooks/useContext");
+var _useContext = require("../../hooks/useContext");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -25,11 +25,12 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     onChangeText,
     messageToEdit,
     setMessageToEdit,
+    onPressUpdateUserMessage,
     onUpdateUserMessage,
     onSelectionChange,
-    disabled,
     autoFocus,
-    mentionedUsers
+    mentionedUsers,
+    inputDisabled
   } = _ref;
   const {
     mentionManager
@@ -46,18 +47,32 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
 
   const onPressSave = () => {
     if (messageToEdit.isUserMessage()) {
-      const mention = {
-        userIds: mentionedUsers.map(it => it.user.userId),
-        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
-        type: _message.MentionType.USERS
-      };
-      onUpdateUserMessage(text, messageToEdit, mention).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+      const mentionType = _message.MentionType.USERS;
+      const mentionedUserIds = mentionedUsers.map(it => it.user.userId);
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+
+      if (onPressUpdateUserMessage) {
+        onPressUpdateUserMessage(messageToEdit, {
+          message: text,
+          mentionType,
+          mentionedUserIds,
+          mentionedMessageTemplate
+        }).catch(onFailureToUpdate);
+      } else if (onUpdateUserMessage) {
+        onUpdateUserMessage(text, messageToEdit, {
+          type: _message.MentionType.USERS,
+          userIds: mentionedUserIds,
+          messageTemplate: mentionedMessageTemplate
+        }).catch(onFailureToUpdate);
+      }
     }
 
     setMessageToEdit();
     onChangeText('');
   };
 
+  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');
+
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.editInputContainer
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -66,11 +81,11 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     ref: ref,
     multiline: true,
     disableFullscreenUI: true,
-    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))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
@@ -80,12 +95,12 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Button, {
     variant: 'text',
     onPress: onPressCancel
-  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.space
   }), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Button, {
     variant: 'contained',
     onPress: onPressSave
-  }, STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK)));
+  }, STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK)));
 });
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   editInputContainer: {

package/lib/commonjs/components/ChannelInput/EditInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["EditInput","forwardRef","ref","text","onChangeText","messageToEdit","setMessageToEdit","onPressUpdateUserMessage","onUpdateUserMessage","onSelectionChange","autoFocus","mentionedUsers","inputDisabled","mentionManager","useSendbirdChat","STRINGS","useLocalization","toast","useToast","onPressCancel","onPressSave","isUserMessage","mentionType","MentionType","USERS","mentionedUserIds","map","it","user","userId","mentionedMessageTemplate","textToMentionedMessageTemplate","message","catch","onFailureToUpdate","type","userIds","messageTemplate","show","TOAST","UPDATE_MSG_ERROR","styles","editInputContainer","inputWrapper","input","LABELS","CHANNEL_INPUT_PLACEHOLDER_ACTIVE","textToMentionedComponents","marginTop","flexDirection","CHANNEL_INPUT_EDIT_CANCEL","space","CHANNEL_INPUT_EDIT_OK","createStyleSheet","paddingVertical","paddingHorizontal","alignItems","flex","marginRight","minHeight","maxHeight","Platform","select","ios","default","borderRadius"],"sources":["EditInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  NativeSyntheticEvent,\n  Platform,\n  TextInput as RNTextInput,\n  TextInputSelectionChangeEventData,\n  View,\n} from 'react-native';\n\nimport { MentionType } from '@sendbird/chat/message';\nimport { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../../hooks/useContext';\nimport type { MentionedUser } from '../../types';\nimport type { ChannelInputProps } from './index';\n\ninterface EditInputProps extends ChannelInputProps {\n  text: string;\n  onChangeText: (val: string) => void;\n  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;\n  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;\n  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;\n  autoFocus: boolean;\n  mentionedUsers: MentionedUser[];\n}\n\nconst EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(\n  {\n    text,\n    onChangeText,\n    messageToEdit,\n    setMessageToEdit,\n    onPressUpdateUserMessage,\n    onUpdateUserMessage,\n    onSelectionChange,\n    autoFocus,\n    mentionedUsers,\n    inputDisabled,\n  },\n  ref,\n) {\n  const { mentionManager } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const toast = useToast();\n\n  const onPressCancel = () => {\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onPressSave = () => {\n    if (messageToEdit.isUserMessage()) {\n      const mentionType = MentionType.USERS;\n      const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);\n      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);\n\n      if (onPressUpdateUserMessage) {\n        onPressUpdateUserMessage(messageToEdit, {\n          message: text,\n          mentionType,\n          mentionedUserIds,\n          mentionedMessageTemplate,\n        }).catch(onFailureToUpdate);\n      } else if (onUpdateUserMessage) {\n        onUpdateUserMessage(text, messageToEdit, {\n          type: MentionType.USERS,\n          userIds: mentionedUserIds,\n          messageTemplate: mentionedMessageTemplate,\n        }).catch(onFailureToUpdate);\n      }\n    }\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');\n\n  return (\n    <View style={styles.editInputContainer}>\n      <View style={styles.inputWrapper}>\n        <TextInput\n          ref={ref}\n          multiline\n          disableFullscreenUI\n          editable={!inputDisabled}\n          autoFocus={autoFocus}\n          onChangeText={onChangeText}\n          style={styles.input}\n          placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}\n          onSelectionChange={onSelectionChange}\n        >\n          {mentionManager.textToMentionedComponents(text, mentionedUsers)}\n        </TextInput>\n      </View>\n      <View style={{ marginTop: 8, flexDirection: 'row' }}>\n        <Button variant={'text'} onPress={onPressCancel}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}\n        </Button>\n        <View style={styles.space} />\n        <Button variant={'contained'} onPress={onPressSave}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}\n        </Button>\n      </View>\n    </View>\n  );\n});\n\nconst styles = createStyleSheet({\n  editInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  input: {\n    flex: 1,\n    marginRight: 4,\n    minHeight: 36,\n    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),\n    borderRadius: 20,\n  },\n  inputWrapper: {\n    flexDirection: 'row',\n  },\n  space: {\n    flex: 1,\n  },\n});\n\nexport default EditInput;\n"],"mappings":"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"}