@sendbird/uikit-react-native 2.4.2 → 2.5.0-rc.0

package/src/domain/groupChannel/types.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type { FlatListProps } from 'react-native';
 
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -16,7 +15,9 @@ import type {
 } from '@sendbird/uikit-utils';
 
 import type { ChannelInputProps, SuggestedMentionListProps } from '../../components/ChannelInput';
+import type { ChannelMessageListProps } from '../../components/ChannelMessageList';
 import type { CommonComponent } from '../../types';
+import type { PubSub } from '../../utils/pubsub';
 
 export interface GroupChannelProps {
   Fragment: {
@@ -44,50 +45,44 @@ export interface GroupChannelProps {
     collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
     queryCreator?: UseGroupChannelMessagesOptions['queryCreator'];
 
-    /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
+    searchItem?: GroupChannelProps['MessageList']['searchItem'];
+
+    /** @deprecated Please use `onPressMediaMessage` instead **/
     onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
   };
   Header: {
+    shouldHideRight: () => boolean;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
   };
-  MessageList: {
-    enableMessageGrouping: boolean;
-    currentUserId?: string;
-    channel: SendbirdGroupChannel;
-    messages: SendbirdMessage[];
-    nextMessages: SendbirdMessage[];
-    newMessagesFromMembers: SendbirdMessage[];
-    onTopReached: () => void;
-    onBottomReached: () => void;
-
-    onResendFailedMessage: (failedMessage: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
-    onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
-    onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+  MessageList: Pick<
+    ChannelMessageListProps<SendbirdGroupChannel>,
+    | 'enableMessageGrouping'
+    | 'currentUserId'
+    | 'channel'
+    | 'messages'
+    | 'newMessages'
+    | 'scrolledAwayFromBottom'
+    | 'onScrolledAwayFromBottom'
+    | 'onTopReached'
+    | 'onBottomReached'
+    | 'onResendFailedMessage'
+    | 'onDeleteMessage'
+    | 'onPressMediaMessage'
+    | 'renderMessage'
+    | 'renderNewMessagesButton'
+    | 'renderScrollToBottomButton'
+    | 'flatListProps'
+    | 'onPressImageMessage'
+    | 'hasNext'
+    | 'searchItem'
+  > & {
+    onResetMessageList: (callback?: () => void) => void;
 
-    renderMessage: (props: {
-      message: SendbirdMessage;
-      prevMessage?: SendbirdMessage;
-      nextMessage?: SendbirdMessage;
-      onPress?: () => void;
-      onLongPress?: () => void;
-      channel: GroupChannelProps['MessageList']['channel'];
-      currentUserId?: GroupChannelProps['MessageList']['currentUserId'];
-      enableMessageGrouping: GroupChannelProps['MessageList']['enableMessageGrouping'];
-    }) => React.ReactElement | null;
-    renderNewMessagesButton: null | CommonComponent<{
-      visible: boolean;
-      onPress: () => void;
-      newMessages: SendbirdMessage[];
-    }>;
-    renderScrollToBottomButton: null | CommonComponent<{
-      visible: boolean;
-      onPress: () => void;
-    }>;
-    flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
-
-    /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
-    onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+    /** @deprecated Please use `newMessages` instead */
+    newMessagesFromMembers: SendbirdMessage[];
+    /** @deprecated Please use `newMessages` instead */
+    nextMessages: SendbirdMessage[];
   };
   Input: Pick<
     ChannelInputProps,
@@ -108,6 +103,7 @@ export interface GroupChannelProps {
     channel: SendbirdGroupChannel;
     enableTypingIndicator: boolean;
     keyboardAvoidOffset?: number;
+    groupChannelPubSub: PubSub<GroupChannelPubSubContextPayload>;
   };
 }
 
@@ -127,6 +123,7 @@ export interface GroupChannelContextsType {
   TypingIndicator: React.Context<{
     typingUsers: SendbirdUser[];
   }>;
+  PubSub: React.Context<PubSub<GroupChannelPubSubContextPayload>>;
 }
 export interface GroupChannelModule {
   Provider: CommonComponent<GroupChannelProps['Provider']>;
@@ -139,3 +136,17 @@ export interface GroupChannelModule {
 }
 
 export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;
+
+export type GroupChannelPubSubContextPayload =
+  | {
+      type: 'MESSAGE_SENT_PENDING' | 'MESSAGE_SENT_SUCCESS';
+      data: {
+        message: SendbirdUserMessage | SendbirdFileMessage;
+      };
+    }
+  | {
+      type: 'MESSAGES_RECEIVED';
+      data: {
+        messages: SendbirdMessage[];
+      };
+    };

package/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.tsx

@@ -11,10 +11,12 @@ import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
 let WARN_onPressMenuNotification = false;
+let WARN_onPressMenuSearchInChannel = false;
 
 const GroupChannelSettingsMenu = ({
   onPressMenuModeration,
   onPressMenuMembers,
+  onPressMenuSearchInChannel,
   onPressMenuLeaveChannel,
   onPressMenuNotification,
   menuItemsCreator = (menu) => menu,
@@ -24,11 +26,16 @@ const GroupChannelSettingsMenu = ({
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
-  if (__DEV__ && !WARN_onPressMenuNotification && !onPressMenuNotification) {
-    Logger.warn('You should pass `onPressMenuNotification` prop if using mention');
+  if (__DEV__ && !WARN_onPressMenuNotification && !onPressMenuNotification && features.userMentionEnabled) {
+    Logger.warn('If you are using mention, make sure to pass the `onPressMenuNotification` prop');
     WARN_onPressMenuNotification = true;
   }
 
+  if (__DEV__ && !WARN_onPressMenuSearchInChannel && !onPressMenuSearchInChannel && features.messageSearchEnabled) {
+    Logger.warn('If you are using message search, make sure to pass the `onPressMenuSearchInChannel` prop');
+    WARN_onPressMenuSearchInChannel = true;
+  }
+
   const toggleNotification = async () => {
     if (channel.myPushTriggerOption === 'off') {
       await channel.setMyPushTriggerOption(PushTriggerOption.DEFAULT);
@@ -88,19 +95,28 @@ const GroupChannelSettingsMenu = ({
       actionLabel: String(channel.memberCount),
       actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
     },
-    {
-      icon: 'leave',
-      iconColor: colors.error,
-      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_LEAVE_CHANNEL,
-      onPress: () => {
-        channel.leave().then(() => {
-          onPressMenuLeaveChannel();
-          sdk.clearCachedMessages([channel.url]).catch();
-        });
-      },
-    },
   ]);
 
+  if (features.messageSearchEnabled) {
+    menuItems.push({
+      icon: 'search',
+      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_SEARCH,
+      onPress: () => onPressMenuSearchInChannel?.(),
+    });
+  }
+
+  menuItems.push({
+    icon: 'leave',
+    iconColor: colors.error,
+    name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_LEAVE_CHANNEL,
+    onPress: () => {
+      channel.leave().then(() => {
+        onPressMenuLeaveChannel();
+        sdk.clearCachedMessages([channel.url]).catch();
+      });
+    },
+  });
+
   return (
     <View>
       {menuItems.map((menu) => {

package/src/domain/groupChannelSettings/types.ts

@@ -11,6 +11,7 @@ export interface GroupChannelSettingsProps {
     onPressHeaderLeft: GroupChannelSettingsProps['Header']['onPressHeaderLeft'];
     onPressMenuModeration: GroupChannelSettingsProps['Menu']['onPressMenuModeration'];
     onPressMenuMembers: GroupChannelSettingsProps['Menu']['onPressMenuMembers'];
+    onPressMenuSearchInChannel?: GroupChannelSettingsProps['Menu']['onPressMenuSearchInChannel'];
     onPressMenuLeaveChannel: GroupChannelSettingsProps['Menu']['onPressMenuLeaveChannel'];
     onPressMenuNotification?: GroupChannelSettingsProps['Menu']['onPressMenuNotification'];
     menuItemsCreator?: GroupChannelSettingsProps['Menu']['menuItemsCreator'];
@@ -22,6 +23,7 @@ export interface GroupChannelSettingsProps {
   Menu: {
     onPressMenuModeration: () => void;
     onPressMenuMembers: () => void;
+    onPressMenuSearchInChannel?: () => void;
     onPressMenuLeaveChannel: () => void;
     onPressMenuNotification?: () => void;
     menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react';
+import { Platform, TextInput } from 'react-native';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import type { MessageSearchProps } from '../types';
+
+const MessageSearchHeader = ({
+  keyword,
+  onChangeKeyword,
+  onPressHeaderLeft,
+  onPressHeaderRight,
+}: MessageSearchProps['Header']) => {
+  const { HeaderComponent } = useHeaderStyle();
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+
+  const inputRef = useRef<TextInput>(null);
+  const inputColor = colors.ui.input.default.active;
+  const searchEnabled = keyword.length > 0;
+
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, Platform.select({ ios: 500, default: 0 }));
+  }, []);
+
+  return (
+    <HeaderComponent
+      clearTitleMargin
+      title={
+        <Box
+          flex={1}
+          height={36}
+          alignItems={'center'}
+          backgroundColor={inputColor.background}
+          borderRadius={24}
+          paddingHorizontal={10}
+          flexDirection={'row'}
+        >
+          <Icon size={24} icon={'search'} color={colors.onBackground03} containerStyle={styles.searchIcon} />
+          <TextInput
+            disableFullscreenUI
+            enablesReturnKeyAutomatically
+            ref={inputRef}
+            returnKeyType={'search'}
+            onSubmitEditing={() => onPressHeaderRight()}
+            selectionColor={colors.primary}
+            placeholder={STRINGS.MESSAGE_SEARCH.HEADER_INPUT_PLACEHOLDER}
+            placeholderTextColor={inputColor.placeholder}
+            style={[styles.input, { color: inputColor.text }]}
+            value={keyword}
+            onChangeText={onChangeKeyword}
+          />
+          {searchEnabled && (
+            <PressBox onPress={() => onChangeKeyword('')}>
+              <Icon size={18} icon={'remove'} color={colors.onBackground03} containerStyle={styles.clearIcon} />
+            </PressBox>
+          )}
+        </Box>
+      }
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={
+        <Text button color={searchEnabled ? colors.primary : colors.onBackground04}>
+          {STRINGS.MESSAGE_SEARCH.HEADER_RIGHT}
+        </Text>
+      }
+      onPressRight={searchEnabled ? onPressHeaderRight : undefined}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  searchIcon: {
+    marginRight: 8,
+  },
+  clearIcon: {
+    marginLeft: 8,
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+    fontSize: 14,
+    padding: 0,
+  },
+});
+
+export default MessageSearchHeader;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+
+import { SendbirdBaseMessage, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { MessageSearchProps } from '../types';
+
+const MessageSearchList = ({
+  messages,
+  renderSearchResultItem,
+  flatListProps,
+  onPressSearchResultItem,
+  channel,
+}: MessageSearchProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdBaseMessage> = useFreshCallback(({ item }) => {
+    return renderSearchResultItem({
+      message: item,
+      onPress: () => onPressSearchResultItem({ message: item, channel }),
+      channel,
+    });
+  });
+
+  return <FlatList {...flatListProps} data={messages} renderItem={renderItem} />;
+};
+
+export default MessageSearchList;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const MessageSearchStatusEmpty = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'no-results-found'} />
+    </Box>
+  );
+};
+
+export default MessageSearchStatusEmpty;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { MessageSearchModule } from '../types';
+
+const MessageSearchStatusError: MessageSearchModule['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </Box>
+  );
+};
+
+export default MessageSearchStatusError;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const MessageSearchStatusLoading = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'loading'} />
+    </Box>
+  );
+};
+
+export default MessageSearchStatusLoading;

package/src/domain/messageSearch/index.ts

@@ -0,0 +1,7 @@
+export { default as MessageSearchHeader } from './component/MessageSearchHeader';
+export { default as MessageSearchList } from './component/MessageSearchList';
+export { default as MessageSearchStatusLoading } from './component/MessageSearchStatusLoading';
+export { default as MessageSearchStatusEmpty } from './component/MessageSearchStatusEmpty';
+export { default as MessageSearchStatusError } from './component/MessageSearchStatusError';
+export { default as createMessageSearchModule } from './module/createMessageSearchModule';
+export { MessageSearchContextsProvider, MessageSearchContexts } from './module/moduleContext';

package/src/domain/messageSearch/module/createMessageSearchModule.tsx

@@ -0,0 +1,21 @@
+import MessageSearchHeader from '../component/MessageSearchHeader';
+import MessageSearchList from '../component/MessageSearchList';
+import MessageSearchStatusEmpty from '../component/MessageSearchStatusEmpty';
+import MessageSearchStatusError from '../component/MessageSearchStatusError';
+import MessageSearchStatusLoading from '../component/MessageSearchStatusLoading';
+import type { MessageSearchModule } from '../types';
+import { MessageSearchContextsProvider } from './moduleContext';
+
+const createMessageSearchModule = ({
+  Header = MessageSearchHeader,
+  List = MessageSearchList,
+  StatusError = MessageSearchStatusError,
+  StatusLoading = MessageSearchStatusLoading,
+  StatusEmpty = MessageSearchStatusEmpty,
+  Provider = MessageSearchContextsProvider,
+  ...module
+}: Partial<MessageSearchModule> = {}): MessageSearchModule => {
+  return { Header, List, Provider, StatusError, StatusEmpty, StatusLoading, ...module };
+};
+
+export default createMessageSearchModule;

package/src/domain/messageSearch/module/moduleContext.tsx

@@ -0,0 +1,16 @@
+import React, { createContext } from 'react';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import type { MessageSearchContextsType, MessageSearchModule } from '../types';
+
+export const MessageSearchContexts: MessageSearchContextsType = {
+  Fragment: createContext(null),
+};
+
+export const MessageSearchContextsProvider: MessageSearchModule['Provider'] = ({ children }) => {
+  return (
+    <ProviderLayout>
+      <MessageSearchContexts.Fragment.Provider value={null}>{children}</MessageSearchContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/messageSearch/types.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+import type { FlatListProps } from 'react-native';
+
+import type { SendbirdBaseMessage, SendbirdGroupChannel, SendbirdMessageSearchQuery } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type MessageSearchProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: MessageSearchProps['Header']['onPressHeaderLeft'];
+    onPressSearchResultItem: MessageSearchProps['List']['onPressSearchResultItem'];
+    renderSearchResultItem?: MessageSearchProps['List']['renderSearchResultItem'];
+    queryCreator?: () => SendbirdMessageSearchQuery;
+  };
+  Header: {
+    keyword: string;
+    onChangeKeyword: (value: string) => void;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+  };
+  List: {
+    channel: SendbirdGroupChannel;
+    messages: SendbirdBaseMessage[];
+    onPressSearchResultItem: (params: { channel: SendbirdGroupChannel; message: SendbirdBaseMessage }) => void;
+    renderSearchResultItem: (props: {
+      channel: SendbirdGroupChannel;
+      message: SendbirdBaseMessage;
+      onPress: () => void;
+    }) => React.ReactElement | null;
+    flatListProps?: Partial<FlatListProps<SendbirdBaseMessage>>;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+};
+
+/**
+ * Internal context for MessageSearch
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type MessageSearchContextsType = {
+  Fragment: React.Context<null>;
+};
+export interface MessageSearchModule {
+  Provider: CommonComponent;
+  Header: CommonComponent<MessageSearchProps['Header']>;
+  List: CommonComponent<MessageSearchProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<MessageSearchProps['StatusError']>;
+}
+
+export type MessageSearchFragment = CommonComponent<MessageSearchProps['Fragment']>;