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

package/src/components/ChatFlatList.tsx

@@ -1,69 +1,50 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { FlatList, FlatListProps, Platform } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import { FlatListProps, Platform, FlatList as RNFlatList, StyleSheet } from 'react-native';
 
+import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, getMessageUniqId, isMyMessage } from '@sendbird/uikit-utils';
+import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
-// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;
+const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
 
-function hasReachedToBottom(yPos: number, thresholdPx = 0) {
-  return thresholdPx >= yPos;
-}
-
-export type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };
 type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
-  currentUserId?: string;
   onBottomReached: () => void;
   onTopReached: () => void;
-  nextMessages: SendbirdMessage[];
-  onLeaveScrollBottom: (value: boolean) => void;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+
+  /** @deprecated Please use `onScrolledAwayFromBottom` **/
+  onLeaveScrollBottom?: (value: boolean) => void;
+  /** @deprecated Not used anymore **/
+  nextMessages?: unknown;
 };
 // FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
-const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
-  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },
+const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function CustomFlatList(
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onLeaveScrollBottom, onScroll, ...props },
   ref,
 ) {
   const { select } = useUIKitTheme();
-  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);
-  const yPos = useRef(0);
+  const contentOffsetY = useRef(0);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),
-    }),
-    [],
-  );
+  const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
+    onScroll?.(event);
 
-  useEffect(() => {
-    const latestMessage = nextMessages[nextMessages.length - 1];
-    if (!latestMessage) return;
+    const { contentOffset } = event.nativeEvent;
 
-    if (hasReachedToBottom(yPos.current)) {
-      onBottomReached();
-    } else if (isMyMessage(latestMessage, currentUserId)) {
-      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });
-    }
-  }, [onBottomReached, nextMessages, currentUserId]);
+    const prevOffsetY = contentOffsetY.current;
+    const currOffsetY = contentOffset.y;
 
-  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(
-    (event) => {
-      const { contentOffset } = event.nativeEvent;
-      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {
-        onLeaveScrollBottom(false);
-      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {
-        onLeaveScrollBottom(true);
-      }
-
-      yPos.current = contentOffset.y;
+    if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(false);
+      onLeaveScrollBottom?.(false);
+    } else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(true);
+      onLeaveScrollBottom?.(true);
+    }
 
-      onScroll?.(event);
-      if (hasReachedToBottom(yPos.current)) onBottomReached();
-    },
-    [onScroll, onBottomReached],
-  );
+    contentOffsetY.current = contentOffset.y;
+  });
 
   if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {
     ANDROID_BUG_ALERT_SHOWED = true;
@@ -83,14 +64,15 @@ const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
       {...props}
       // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
       inverted={Boolean(props.data?.length)}
-      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}
-      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}
-      ref={scrollRef}
-      onEndReachedThreshold={0.5}
+      ref={ref}
       onEndReached={onTopReached}
+      onScrollToIndexFailed={NOOP}
+      onStartReached={onBottomReached}
       scrollEventThrottle={16}
       onScroll={_onScroll}
       keyExtractor={getMessageUniqId}
+      style={{ flex: 1, ...StyleSheet.flatten(props.style) }}
+      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: UNREACHABLE_THRESHOLD }}
     />
   );
 });

package/src/components/MessageSearchResultItem.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import {
+  Avatar,
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import { getFileExtension, getFileType, useIIFE } from '@sendbird/uikit-utils';
+
+import type { MessageSearchProps } from '../domain/messageSearch/types';
+import { useLocalization } from '../hooks/useContext';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+export const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {
+  const { colors, select, palette } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+
+  const fileIcon = useIIFE(() => {
+    if (!message?.isFileMessage()) return undefined;
+    return iconMapper[getFileType(message.type || getFileExtension(message.name))];
+  });
+
+  return (
+    <PressBox onPress={onPress}>
+      <Box style={styles.container}>
+        <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />
+
+        <Box flex={1} paddingRight={16}>
+          <Box style={styles.titleLine}>
+            <Box flex={1} marginRight={4} justifyContent={'center'}>
+              <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}
+              </Text>
+            </Box>
+            <Box paddingTop={2}>
+              <Text caption2 color={colors.onBackground02}>
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE_CAPTION(message)}
+              </Text>
+            </Box>
+          </Box>
+
+          <Box flex={1}>
+            <Box alignItems={'center'} flexDirection={'row'}>
+              {fileIcon && (
+                <Icon
+                  size={18}
+                  icon={fileIcon}
+                  color={colors.onBackground02}
+                  containerStyle={[
+                    styles.bodyIcon,
+                    { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },
+                  ]}
+                />
+              )}
+
+              <Text
+                body3
+                numberOfLines={fileIcon ? 1 : 2}
+                ellipsizeMode={fileIcon ? 'middle' : 'tail'}
+                style={styles.bodyText}
+                color={colors.onBackground03}
+              >
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
+              </Text>
+            </Box>
+          </Box>
+
+          <Box style={styles.separator} backgroundColor={colors.onBackground04} />
+        </Box>
+      </Box>
+    </PressBox>
+  );
+};
+
+function getSenderProfile(message: SendbirdBaseMessage) {
+  if (message.isUserMessage() || message.isFileMessage()) {
+    return message.sender.profileUrl;
+  } else {
+    return undefined;
+  }
+}
+
+const styles = createStyleSheet({
+  container: {
+    height: 76,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {
+    marginHorizontal: 16,
+  },
+  avatarSize: {
+    width: 56,
+  },
+  titleLine: {
+    flexDirection: 'row',
+    marginTop: 10,
+    marginBottom: 4,
+  },
+  bodyIcon: {
+    borderRadius: 8,
+    width: 26,
+    height: 26,
+    marginRight: 4,
+  },
+  bodyText: {
+    flex: 1,
+    lineHeight: 16,
+  },
+  separator: {
+    position: 'absolute',
+    left: 0,
+    right: -16,
+    bottom: 0,
+    height: 1,
+  },
+});

package/src/components/ScrollToBottomButton.tsx

@@ -9,6 +9,8 @@ type Props = {
 };
 const ScrollToBottomButton = ({ visible, onPress }: Props) => {
   const { palette, select } = useUIKitTheme();
+  if (!visible) return null;
+
   return (
     <TouchableOpacity
       onPress={onPress}
@@ -16,10 +18,7 @@ const ScrollToBottomButton = ({ visible, onPress }: Props) => {
       disabled={!visible}
       style={[
         styles.container,
-        {
-          opacity: visible ? 1 : 0,
-          backgroundColor: select({ dark: palette.background400, light: palette.background50 }),
-        },
+        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },
       ]}
     >
       <Icon icon={'chevron-down'} size={22} />

package/src/constants.ts

@@ -1,6 +1,8 @@
 export const DEFAULT_LONG_PRESS_DELAY = 350;
+export const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
+export const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
 export const DEPRECATION_WARNING = {
-  GROUP_CHANNEL: {
+  CHANNEL: {
     ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
   },
 } as const;

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -55,7 +55,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
   });
 
-  const bodyIcon = useIIFE(() => {
+  const fileIcon = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
     if (typingUsers.length > 0) return undefined;
     return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
@@ -98,7 +98,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         titleCaptionLeft={titleCaptionIcon}
         titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
         body={bodyText}
-        bodyIcon={bodyIcon}
+        bodyIcon={fileIcon}
         badgeCount={channel.unreadMessageCount}
         mentioned={channel.unreadMentionCount > 0}
         mentionTrigger={mentionManager.config.trigger}

package/src/containers/SendbirdUIKitContainer.tsx

@@ -60,6 +60,7 @@ export const SendbirdUIKit = Object.freeze({
     USE_USER_ID_FOR_NICKNAME: false,
     USER_MENTION: false,
     IMAGE_COMPRESSION: true,
+    MESSAGE_SEARCH: false,
   },
 });
 
@@ -206,6 +207,7 @@ const SendbirdUIKitContainer = ({
         }
         enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
         enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
+        enableMessageSearch={chatOptions?.enableMessageSearch ?? SendbirdUIKit.DEFAULT.MESSAGE_SEARCH}
       >
         <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider

package/src/contexts/SendbirdChatCtx.tsx

@@ -21,6 +21,7 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableUseUserIdForNickname: boolean;
   enableUserMention: boolean;
   enableImageCompression: boolean;
+  enableMessageSearch: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
@@ -43,13 +44,16 @@ export type SendbirdChatContextType = {
   markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
 
   features: {
-    // UIKit features
+    // RN UIKit features
     autoPushTokenRegistrationEnabled: boolean;
+
+    // UIKit features
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
     userMentionEnabled: boolean;
     imageCompressionEnabled: boolean;
+    messageSearchEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -72,6 +76,7 @@ export const SendbirdChatProvider = ({
   enableUseUserIdForNickname,
   enableUserMention,
   enableImageCompression,
+  enableMessageSearch,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -147,6 +152,7 @@ export const SendbirdChatProvider = ({
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
       userMentionEnabled: enableUserMention,
       imageCompressionEnabled: enableImageCompression,
+      messageSearchEnabled: enableMessageSearch,
     },
   };
 

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

@@ -8,13 +8,19 @@ import { useLocalization } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
-const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChannelProps['Header']) => {
+const GroupChannelHeader = ({
+  shouldHideRight,
+  onPressHeaderLeft,
+  onPressHeaderRight,
+}: GroupChannelProps['Header']) => {
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();
   const { HeaderComponent } = useHeaderStyle();
   const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
 
+  const isHidden = shouldHideRight();
+
   return (
     <HeaderComponent
       clearTitleMargin
@@ -29,8 +35,8 @@ const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChan
       }
       left={<Icon icon={'arrow-left'} />}
       onPressLeft={onPressHeaderLeft}
-      right={<Icon icon={'info'} />}
-      onPressRight={onPressHeaderRight}
+      right={isHidden ? null : <Icon icon={'info'} />}
+      onPressRight={isHidden ? undefined : onPressHeaderRight}
     />
   );
 };