@sendbird/uikit-react-native 3.3.0 → 3.4.1

package/src/components/FileViewer/FileViewerHeader.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { truncate } from '@sendbird/uikit-utils';
+
+type Props = {
+  headerShown?: boolean;
+  topInset: number;
+  onClose: () => void;
+  title: string;
+  subtitle: string;
+};
+
+const FileViewerHeader = ({ headerShown = true, topInset, onClose, subtitle, title }: Props) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  if (!headerShown) return null;
+
+  return (
+    <Box
+      style={[
+        styles.container,
+        {
+          paddingLeft: styles.container.paddingHorizontal + left,
+          paddingRight: styles.container.paddingHorizontal + right,
+          paddingTop: topInset,
+          height: defaultHeight + topInset,
+          backgroundColor: palette.overlay01,
+        },
+      ]}
+    >
+      <PressBox activeOpacity={0.75} onPress={onClose} style={styles.buttonContainer}>
+        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
+      </PressBox>
+      <Box style={styles.titleContainer}>
+        <Text h2 color={palette.onBackgroundDark01} style={styles.title} numberOfLines={1}>
+          {truncate(title, { mode: 'mid', maxLen: 18 })}
+        </Text>
+        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      </Box>
+      <Box style={styles.buttonContainer} />
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    top: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    marginBottom: 2,
+  },
+});
+
+export default FileViewerHeader;

package/src/components/FileViewer/index.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Box, useAlert, useHeaderStyle, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte } from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import FileViewerContent from './FileViewerContent';
+import FileViewerFooter from './FileViewerFooter';
+import FileViewerHeader from './FileViewerHeader';
+
+type Props = {
+  fileMessage: SendbirdFileMessage;
+  deleteMessage: () => Promise<void>;
+
+  onClose: () => void;
+  onPressDownload?: (message: SendbirdFileMessage) => void;
+  onPressDelete?: (message: SendbirdFileMessage) => void;
+
+  headerShown?: boolean;
+  headerTopInset?: number;
+
+  /** This prop is only available on the Image viewer */
+  minZoom?: number;
+  /** This prop is only available on the Image viewer */
+  maxZoom?: number;
+};
+
+const FileViewer = ({
+  headerShown = true,
+  maxZoom = 3,
+  minZoom = 1,
+  headerTopInset,
+  fileMessage,
+  onClose,
+  onPressDownload,
+  onPressDelete,
+  deleteMessage,
+}: Props) => {
+  const { topInset, statusBarTranslucent } = useHeaderStyle();
+  const { bottom } = useSafeAreaInsets();
+  const { palette } = useUIKitTheme();
+  const { alert } = useAlert();
+  const { show } = useToast();
+
+  const { fileService } = usePlatformService();
+  const { currentUser } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+
+  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
+  const canDelete = isMyMessage(fileMessage, currentUser?.userId);
+  const basicTopInset = statusBarTranslucent ? topInset : 0;
+
+  const onPressDeleteButton = () => {
+    if (!canDelete) return;
+
+    if (onPressDelete) {
+      onPressDelete(fileMessage);
+    } else {
+      alert({
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+        buttons: [
+          {
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
+          },
+          {
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+            style: 'destructive',
+            onPress: () => {
+              deleteMessage()
+                .then(() => {
+                  onClose();
+                })
+                .catch(() => {
+                  show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+                });
+            },
+          },
+        ],
+      });
+    }
+  };
+
+  const onPressDownloadButton = () => {
+    if (onPressDownload) {
+      onPressDownload(fileMessage);
+    } else {
+      if (toMegabyte(fileMessage.size) > 4) {
+        show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })
+        .then((response) => {
+          show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+          Logger.log('File saved to', response);
+        })
+        .catch((err) => {
+          show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+          Logger.log('File save failure', err);
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (fileType === 'file') onClose();
+  }, []);
+
+  return (
+    <Box flex={1} backgroundColor={palette.background700}>
+      <StatusBar barStyle={'light-content'} animated />
+      <FileViewerHeader
+        topInset={headerTopInset ?? basicTopInset}
+        headerShown={headerShown}
+        title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}
+        subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}
+        onClose={onClose}
+      />
+      <FileViewerContent
+        topInset={headerTopInset ?? basicTopInset}
+        bottomInset={bottom}
+        type={fileType}
+        src={fileMessage.url}
+        maxZoom={maxZoom}
+        minZoom={minZoom}
+      />
+      <FileViewerFooter
+        bottomInset={bottom}
+        deleteShown={canDelete}
+        onPressDelete={onPressDeleteButton}
+        onPressDownload={onPressDownloadButton}
+      />
+    </Box>
+  );
+};
+
+export default FileViewer;

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type { BaseMessage } from '@sendbird/chat/message';
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
@@ -24,12 +25,12 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
-        const msg = await sdk.message.getMessage({
+        const msg = (await sdk.message.getMessage({
           includeReactions: true,
           messageId: message.messageId,
           channelUrl: message.channelUrl,
           channelType: message.channelType,
-        });
+        })) as null | BaseMessage;
         if (msg) updateReactionFocusedItem({ message: msg });
       }
     },

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -34,7 +34,9 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout });
       } else {
         if (props.channel.messageOffsetTimestamp <= createdAt) {
-          if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
+          if (focusAnimated) {
+            props.onUpdateSearchItem({ startingPoint: createdAt });
+          }
           props.onResetMessageListWithStartingPoint(createdAt);
         } else {
           return false;
@@ -44,15 +46,14 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     },
   );
 
-  const scrollToBottom = useFreshCallback((animated = false) => {
+  const scrollToBottom = useFreshCallback(async (animated = false) => {
     if (props.hasNext()) {
       props.onUpdateSearchItem(undefined);
       props.onScrolledAwayFromBottom(false);
 
-      props.onResetMessageList(() => {
-        props.onScrolledAwayFromBottom(false);
-        lazyScrollToBottom({ animated });
-      });
+      await props.onResetMessageList();
+      props.onScrolledAwayFromBottom(false);
+      lazyScrollToBottom({ animated });
     } else {
       lazyScrollToBottom({ animated });
     }

package/src/domain/groupChannel/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { FlatList } from 'react-native';
 
+import type { MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
   OnBeforeHandler,
@@ -20,6 +21,7 @@ import type { ChannelMessageListProps } from '../../components/ChannelMessageLis
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
 
+export type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 export interface GroupChannelProps {
   Fragment: {
     channel: SendbirdGroupChannel;
@@ -43,9 +45,19 @@ export interface GroupChannelProps {
     keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
     flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
-    collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
 
     searchItem?: GroupChannelProps['MessageList']['searchItem'];
+
+    /**
+     * @description You can specify the query parameters for the message list.
+     * @example
+     * ```
+     * <GroupChannelFragment messageListQueryParams={{ prevResultLimit: 20, customTypesFilter: ['filter'] }} />
+     * ```
+     * */
+    messageListQueryParams?: MessageListQueryParamsType;
+    /** @deprecated Please use `messageListQueryParams` instead */
+    collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
   };
   Header: {
     shouldHideRight: () => boolean;
@@ -73,8 +85,8 @@ export interface GroupChannelProps {
     | 'hasNext'
     | 'searchItem'
   > & {
-    onResetMessageList: (callback?: () => void) => void;
-    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+    onResetMessageList: () => Promise<void>;
+    onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
 
     // Changing the search item will trigger the focus animation on messages.
     onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
@@ -169,7 +181,7 @@ export interface GroupChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;
+export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;
 
 export type GroupChannelPubSubContextPayload =
   | {

package/src/domain/groupChannelBannedUsers/types.ts

@@ -49,4 +49,4 @@ export interface GroupChannelBannedUsersModule {
   StatusError: CommonComponent<GroupChannelBannedUsersProps['StatusError']>;
 }
 
-export type GroupChannelBannedUsersFragment = CommonComponent<GroupChannelBannedUsersProps['Fragment']>;
+export type GroupChannelBannedUsersFragment = React.FC<GroupChannelBannedUsersProps['Fragment']>;

package/src/domain/groupChannelList/types.ts

@@ -1,21 +1,32 @@
 import type React from 'react';
 import type { FlatListProps } from 'react-native';
 
+import type { GroupChannelCollectionParams, GroupChannelFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelListOptions } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 
+export type ChannelListQueryParamsType = Omit<GroupChannelCollectionParams, 'filter'> & GroupChannelFilterParams;
 export interface GroupChannelListProps {
   Fragment: {
     onPressChannel: GroupChannelListProps['List']['onPressChannel'];
     onPressCreateChannel: (channelType: GroupChannelType) => void;
     renderGroupChannelPreview?: GroupChannelListProps['List']['renderGroupChannelPreview'];
     skipTypeSelection?: boolean;
-    collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
     flatListProps?: GroupChannelListProps['List']['flatListProps'];
     menuItemCreator?: GroupChannelListProps['List']['menuItemCreator'];
+    /**
+     * @description You can specify the query parameters for the channel list.
+     * @example
+     * ```
+     * <GroupChannelListFragment channelListQueryParams={{ limit: 20, includeEmpty: false }} />
+     * ```
+     * */
+    channelListQueryParams?: ChannelListQueryParamsType;
+    /** @deprecated Please use `channelListQueryParams` instead */
+    collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
   };
   Header: {};
   List: {
@@ -61,5 +72,5 @@ export interface GroupChannelListModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelListFragment = CommonComponent<GroupChannelListProps['Fragment']>;
+export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
 export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

package/src/domain/groupChannelModeration/types.ts

@@ -45,4 +45,4 @@ export interface GroupChannelModerationModule {
   Menu: CommonComponent<GroupChannelModerationProps['Menu']>;
 }
 
-export type GroupChannelModerationFragment = CommonComponent<GroupChannelModerationProps['Fragment']>;
+export type GroupChannelModerationFragment = React.FC<GroupChannelModerationProps['Fragment']>;

package/src/domain/groupChannelMutedMembers/types.ts

@@ -49,4 +49,4 @@ export interface GroupChannelMutedMembersModule {
   StatusError: CommonComponent<GroupChannelMutedMembersProps['StatusError']>;
 }
 
-export type GroupChannelMutedMembersFragment = CommonComponent<GroupChannelMutedMembersProps['Fragment']>;
+export type GroupChannelMutedMembersFragment = React.FC<GroupChannelMutedMembersProps['Fragment']>;

package/src/domain/groupChannelNotifications/types.ts

@@ -35,4 +35,4 @@ export interface GroupChannelNotificationsModule {
   View: CommonComponent<GroupChannelNotificationsProps['View']>;
 }
 
-export type GroupChannelNotificationsFragment = CommonComponent<GroupChannelNotificationsProps['Fragment']>;
+export type GroupChannelNotificationsFragment = React.FC<GroupChannelNotificationsProps['Fragment']>;

package/src/domain/groupChannelOperators/types.ts

@@ -51,4 +51,4 @@ export interface GroupChannelOperatorsModule {
   StatusError: CommonComponent<GroupChannelOperatorsProps['StatusError']>;
 }
 
-export type GroupChannelOperatorsFragment = CommonComponent<GroupChannelOperatorsProps['Fragment']>;
+export type GroupChannelOperatorsFragment = React.FC<GroupChannelOperatorsProps['Fragment']>;

package/src/domain/groupChannelSettings/types.ts

@@ -53,4 +53,4 @@ export interface GroupChannelSettingsModule {
   Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
 }
 
-export type GroupChannelSettingsFragment = CommonComponent<GroupChannelSettingsProps['Fragment']>;
+export type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;

package/src/domain/groupChannelUserList/types.ts

@@ -52,7 +52,7 @@ export interface GroupChannelMembersProps {
     queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
+export type GroupChannelMembersFragment = React.FC<GroupChannelMembersProps['Fragment']>;
 
 export interface GroupChannelRegisterOperatorProps {
   Fragment: {
@@ -64,4 +64,4 @@ export interface GroupChannelRegisterOperatorProps {
     queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;
+export type GroupChannelRegisterOperatorFragment = React.FC<GroupChannelRegisterOperatorProps['Fragment']>;

package/src/domain/messageSearch/component/MessageSearchHeader.tsx

@@ -91,7 +91,10 @@ const styles = createStyleSheet({
     flex: 1,
     height: '100%',
     fontSize: 14,
-    padding: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingRight: 0,
   },
 });
 

package/src/domain/messageSearch/types.ts

@@ -52,4 +52,4 @@ export interface MessageSearchModule {
   StatusError: CommonComponent<MessageSearchProps['StatusError']>;
 }
 
-export type MessageSearchFragment = CommonComponent<MessageSearchProps['Fragment']>;
+export type MessageSearchFragment = React.FC<MessageSearchProps['Fragment']>;

package/src/domain/openChannel/types.ts

@@ -111,7 +111,7 @@ export interface OpenChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type OpenChannelFragment = CommonComponent<OpenChannelProps['Fragment']>;
+export type OpenChannelFragment = React.FC<OpenChannelProps['Fragment']>;
 
 export type OpenChannelPubSubContextPayload =
   | {

package/src/domain/openChannelBannedUsers/types.ts

@@ -49,4 +49,4 @@ export interface OpenChannelBannedUsersModule {
   StatusError: CommonComponent<OpenChannelBannedUsersProps['StatusError']>;
 }
 
-export type OpenChannelBannedUsersFragment = CommonComponent<OpenChannelBannedUsersProps['Fragment']>;
+export type OpenChannelBannedUsersFragment = React.FC<OpenChannelBannedUsersProps['Fragment']>;

package/src/domain/openChannelCreate/component/OpenChannelCreateProfileInput.tsx

@@ -142,8 +142,10 @@ const styles = createStyleSheet({
   },
   input: {
     flex: 1,
-    paddingVertical: 0,
-    paddingHorizontal: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
   },
   removeButtonContainer: {
     alignItems: 'flex-end',

package/src/domain/openChannelCreate/types.ts

@@ -42,4 +42,4 @@ export interface OpenChannelCreateModule {
   StatusLoading: CommonComponent;
 }
 
-export type OpenChannelCreateFragment = CommonComponent<OpenChannelCreateProps['Fragment']>;
+export type OpenChannelCreateFragment = React.FC<OpenChannelCreateProps['Fragment']>;

package/src/domain/openChannelList/types.ts

@@ -53,4 +53,4 @@ export interface OpenChannelListModule {
   StatusError: CommonComponent<OpenChannelListProps['StatusError']>;
 }
 
-export type OpenChannelListFragment = CommonComponent<OpenChannelListProps['Fragment']>;
+export type OpenChannelListFragment = React.FC<OpenChannelListProps['Fragment']>;

package/src/domain/openChannelModeration/types.ts

@@ -45,4 +45,4 @@ export interface OpenChannelModerationModule {
   Menu: CommonComponent<OpenChannelModerationProps['Menu']>;
 }
 
-export type OpenChannelModerationFragment = CommonComponent<OpenChannelModerationProps['Fragment']>;
+export type OpenChannelModerationFragment = React.FC<OpenChannelModerationProps['Fragment']>;

package/src/domain/openChannelMutedParticipants/types.ts

@@ -49,4 +49,4 @@ export interface OpenChannelMutedParticipantsModule {
   StatusError: CommonComponent<OpenChannelMutedParticipantsProps['StatusError']>;
 }
 
-export type OpenChannelMutedParticipantsFragment = CommonComponent<OpenChannelMutedParticipantsProps['Fragment']>;
+export type OpenChannelMutedParticipantsFragment = React.FC<OpenChannelMutedParticipantsProps['Fragment']>;

package/src/domain/openChannelOperators/types.ts

@@ -51,4 +51,4 @@ export interface OpenChannelOperatorsModule {
   StatusError: CommonComponent<OpenChannelOperatorsProps['StatusError']>;
 }
 
-export type OpenChannelOperatorsFragment = CommonComponent<OpenChannelOperatorsProps['Fragment']>;
+export type OpenChannelOperatorsFragment = React.FC<OpenChannelOperatorsProps['Fragment']>;

package/src/domain/openChannelSettings/types.ts

@@ -51,4 +51,4 @@ export interface OpenChannelSettingsModule {
   Menu: CommonComponent<OpenChannelSettingsProps['Menu']>;
 }
 
-export type OpenChannelSettingsFragment = CommonComponent<OpenChannelSettingsProps['Fragment']>;
+export type OpenChannelSettingsFragment = React.FC<OpenChannelSettingsProps['Fragment']>;

package/src/domain/openChannelUserList/types.ts

@@ -1,7 +1,8 @@
+import type React from 'react';
+
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 
-import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
 
 export interface OpenChannelParticipantsProps {
@@ -14,7 +15,7 @@ export interface OpenChannelParticipantsProps {
     sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
+export type OpenChannelParticipantsFragment = React.FC<OpenChannelParticipantsProps['Fragment']>;
 
 export interface OpenChannelRegisterOperatorProps {
   Fragment: {
@@ -27,4 +28,4 @@ export interface OpenChannelRegisterOperatorProps {
     sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelRegisterOperatorFragment = CommonComponent<OpenChannelRegisterOperatorProps['Fragment']>;
+export type OpenChannelRegisterOperatorFragment = React.FC<OpenChannelRegisterOperatorProps['Fragment']>;