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

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/groupChannelUserList/types.ts

@@ -42,28 +42,26 @@ export type GroupChannelInviteFragment<User extends UserStruct> = CommonComponen
   GroupChannelInviteProps<User>['Fragment']
 >;
 
-export interface GroupChannelMembersProps<User extends UserStruct> {
+export interface GroupChannelMembersProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelMembersFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelMembersProps<User>['Fragment']
->;
+export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
 
-export interface GroupChannelRegisterOperatorProps<User extends UserStruct = SendbirdMember> {
+export interface GroupChannelRegisterOperatorProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (channel: SendbirdGroupChannel) => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelRegisterOperatorProps<User>['Fragment']
->;
+export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;

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']>;