stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Pressable, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type ActionType =
+  | 'banUser'
+  | 'blockUser'
+  | 'copyMessage'
+  | 'deleteMessage'
+  | 'editMessage'
+  | 'flagMessage'
+  | 'muteUser'
+  | 'pinMessage'
+  | 'selectReaction'
+  | 'reply'
+  | 'retry'
+  | 'quotedReply'
+  | 'threadReply'
+  | 'unpinMessage';
+
+export type MessageActionType = {
+  /**
+   * Callback when user presses the action button.
+   */
+  action: () => void;
+  /**
+   * Type of the action performed.
+   * Eg: 'banUser', 'blockUser', 'copyMessage', 'deleteMessage', 'editMessage', 'flagMessage', 'muteUser', 'pinMessage', 'selectReaction', 'reply', 'retry', 'quotedReply', 'threadReply', 'unpinMessage'
+   */
+  actionType: ActionType | string;
+  /**
+   * Title for action button.
+   */
+  title: string;
+  /**
+   * Element to render as icon for action button.
+   */
+  icon?: React.ReactElement;
+  /**
+   * Styles for underlying Text component of action title.
+   */
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+/**
+ * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
+ */
+export type MessageActionListItemProps = MessageActionType;
+
+export const MessageActionListItem = (props: MessageActionListItemProps) => {
+  const { action, actionType, icon, title, titleStyle } = props;
+
+  const {
+    theme: {
+      colors: { black },
+      messageMenu: {
+        actionListItem: { container, icon: iconTheme, title: titleTheme },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable onPress={action} style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }]}>
+      <View
+        accessibilityLabel={`${actionType} action list item`}
+        style={[styles.container, container]}
+      >
+        <View style={iconTheme}>{icon}</View>
+        <Text style={[styles.titleStyle, { color: black }, titleStyle, titleTheme]}>{title}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingVertical: 8,
+  },
+  titleStyle: {
+    paddingLeft: 16,
+  },
+});

package/src/components/MessageMenu/MessageMenu.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { useWindowDimensions } from 'react-native';
+
+import { MessageActionType } from './MessageActionListItem';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../contexts/messageContext/MessageContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+import { DefaultStreamChatGenerics } from '../../types/types';
+import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
+
+export type MessageMenuProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    | 'MessageActionList'
+    | 'MessageActionListItem'
+    | 'MessageReactionPicker'
+    | 'MessageUserReactions'
+    | 'MessageUserReactionsAvatar'
+    | 'MessageUserReactionsItem'
+  >
+> &
+  Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>> & {
+    /**
+     * Function to close the message actions bottom sheet
+     * @returns void
+     */
+    dismissOverlay: () => void;
+    /**
+     * An array of message actions to render
+     */
+    messageActions: MessageActionType[];
+    /**
+     * Boolean to determine if there are message actions
+     */
+    showMessageReactions: boolean;
+    /**
+     * Boolean to determine if the overlay is visible.
+     */
+    visible: boolean;
+    /**
+     * Function to handle reaction on press
+     * @param reactionType
+     * @returns
+     */
+    handleReaction?: (reactionType: string) => Promise<void>;
+  };
+
+export const MessageMenu = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageMenuProps<StreamChatGenerics>,
+) => {
+  const {
+    dismissOverlay,
+    handleReaction,
+    message: propMessage,
+    MessageActionList: propMessageActionList,
+    MessageActionListItem: propMessageActionListItem,
+    messageActions,
+    MessageReactionPicker: propMessageReactionPicker,
+    MessageUserReactions: propMessageUserReactions,
+    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
+    MessageUserReactionsItem: propMessageUserReactionsItem,
+    showMessageReactions,
+    visible,
+  } = props;
+  const { height } = useWindowDimensions();
+  const {
+    MessageActionList: contextMessageActionList,
+    MessageActionListItem: contextMessageActionListItem,
+    MessageReactionPicker: contextMessageReactionPicker,
+    MessageUserReactions: contextMessageUserReactions,
+    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
+    MessageUserReactionsItem: contextMessageUserReactionsItem,
+  } = useMessagesContext<StreamChatGenerics>();
+  const { message: contextMessage } = useMessageContext<StreamChatGenerics>();
+  const MessageActionList = propMessageActionList ?? contextMessageActionList;
+  const MessageActionListItem = propMessageActionListItem ?? contextMessageActionListItem;
+  const MessageReactionPicker = propMessageReactionPicker ?? contextMessageReactionPicker;
+  const MessageUserReactions = propMessageUserReactions ?? contextMessageUserReactions;
+  const MessageUserReactionsAvatar =
+    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
+  const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
+  const message = propMessage ?? contextMessage;
+
+  return (
+    <BottomSheetModal
+      height={messageActions.length === 0 && !showMessageReactions ? height / 5 : height / 2}
+      onClose={dismissOverlay}
+      visible={visible}
+    >
+      {showMessageReactions ? (
+        <MessageUserReactions
+          message={message}
+          MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+          MessageUserReactionsItem={MessageUserReactionsItem}
+        />
+      ) : (
+        <>
+          <MessageReactionPicker
+            dismissOverlay={dismissOverlay}
+            handleReaction={handleReaction}
+            ownReactionTypes={message?.own_reactions?.map((reaction) => reaction.type) || []}
+          />
+          <MessageActionList
+            dismissOverlay={dismissOverlay}
+            MessageActionListItem={MessageActionListItem}
+            messageActions={messageActions}
+          />
+        </>
+      )}
+    </BottomSheetModal>
+  );
+};

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { FlatList, StyleSheet, View } from 'react-native';
+
+import { ReactionButton } from './ReactionButton';
+
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { triggerHaptic } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+
+export type MessageReactionPickerProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> & {
+  /**
+   * Function to dismiss the action bottom sheet.
+   * @returns void
+   */
+  dismissOverlay: () => void;
+  /**
+   * An array of reaction types that the current user has reacted with
+   */
+  ownReactionTypes: string[];
+  /**
+   * Function to handle reaction on press
+   * @param reactionType
+   * @returns
+   */
+  handleReaction?: (reactionType: string) => Promise<void>;
+};
+
+export type ReactionPickerItemType = ReactionData & {
+  onSelectReaction: (type: string) => void;
+  ownReactionTypes: string[];
+};
+
+const renderItem = ({ index, item }: { index: number; item: ReactionPickerItemType }) => (
+  <ReactionButton
+    Icon={item.Icon}
+    key={`${item.type}_${index}`}
+    onPress={item.onSelectReaction}
+    selected={item.ownReactionTypes.includes(item.type)}
+    type={item.type}
+  />
+);
+
+/**
+ * MessageReactionPicker - A high level component which implements all the logic required for a message overlay reaction list
+ */
+export const MessageReactionPicker = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageReactionPickerProps<StreamChatGenerics>,
+) => {
+  const {
+    dismissOverlay,
+    handleReaction,
+    ownReactionTypes,
+    supportedReactions: propSupportedReactions,
+  } = props;
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const {
+    theme: {
+      messageMenu: {
+        reactionPicker: { container, contentContainer },
+      },
+    },
+  } = useTheme();
+  const own_capabilities = useOwnCapabilitiesContext();
+
+  const supportedReactions = propSupportedReactions || contextSupportedReactions;
+
+  const onSelectReaction = (type: string) => {
+    triggerHaptic('impactLight');
+    if (handleReaction) {
+      handleReaction(type);
+    }
+    dismissOverlay();
+  };
+
+  if (!own_capabilities.sendReaction) {
+    return null;
+  }
+
+  const reactions: ReactionPickerItemType[] =
+    supportedReactions?.map((reaction) => ({
+      ...reaction,
+      onSelectReaction,
+      ownReactionTypes,
+    })) ?? [];
+
+  return (
+    <View
+      accessibilityLabel='Reaction Selector on long pressing message'
+      style={[styles.container, container]}
+    >
+      <FlatList
+        contentContainerStyle={[styles.contentContainer, contentContainer]}
+        data={reactions}
+        horizontal
+        keyExtractor={(item) => item.type}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+  },
+  contentContainer: {
+    flexGrow: 1,
+    justifyContent: 'space-around',
+    marginVertical: 8,
+  },
+});

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -0,0 +1,209 @@
+import React, { useMemo } from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+
+import { ReactionSortBase } from 'stream-chat';
+
+import { useFetchReactions } from './hooks/useFetchReactions';
+import { ReactionButton } from './ReactionButton';
+
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { DefaultStreamChatGenerics, Reaction } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+import { MessageType } from '../MessageList/hooks/useMessageList';
+
+export type MessageUserReactionsProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    'MessageUserReactionsAvatar' | 'MessageUserReactionsItem' | 'supportedReactions'
+  >
+> & {
+  /**
+   * The message object
+   */
+  message?: MessageType<StreamChatGenerics>;
+  /**
+   * An array of reactions
+   */
+  reactions?: Reaction[];
+};
+
+const sort: ReactionSortBase = {
+  created_at: -1,
+};
+
+export type ReactionSelectorItemType = ReactionData & {
+  onSelectReaction: (type: string) => void;
+  selectedReaction?: string;
+};
+
+const renderSelectorItem = ({ index, item }: { index: number; item: ReactionSelectorItemType }) => (
+  <ReactionButton
+    Icon={item.Icon}
+    key={`${item.type}_${index}`}
+    onPress={item.onSelectReaction}
+    selected={item.selectedReaction === item.type}
+    type={item.type}
+  />
+);
+
+export const MessageUserReactions = (props: MessageUserReactionsProps) => {
+  const {
+    message,
+    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
+    MessageUserReactionsItem: propMessageUserReactionsItem,
+    reactions: propReactions,
+    supportedReactions: propSupportedReactions,
+  } = props;
+  const reactionTypes = Object.keys(message?.reaction_groups ?? {});
+  const [selectedReaction, setSelectedReaction] = React.useState<string | undefined>(
+    reactionTypes[0],
+  );
+  const {
+    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
+    MessageUserReactionsItem: contextMessageUserReactionsItem,
+    supportedReactions: contextSupportedReactions,
+  } = useMessagesContext();
+  const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
+  const MessageUserReactionsAvatar =
+    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
+  const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
+
+  const onSelectReaction = (reactionType: string) => {
+    setSelectedReaction(reactionType);
+  };
+
+  const messageReactions = useMemo(
+    () =>
+      reactionTypes.reduce<ReactionData[]>((acc, reaction) => {
+        const reactionData = supportedReactions?.find(
+          (supportedReaction) => supportedReaction.type === reaction,
+        );
+        if (reactionData) {
+          acc.push(reactionData);
+        }
+        return acc;
+      }, []),
+    [reactionTypes, supportedReactions],
+  );
+
+  const {
+    loading,
+    loadNextPage,
+    reactions: fetchedReactions,
+  } = useFetchReactions({
+    messageId: message?.id,
+    reactionType: selectedReaction,
+    sort,
+  });
+
+  const {
+    theme: {
+      messageMenu: {
+        userReactions: {
+          container,
+          contentContainer,
+          flatlistColumnContainer,
+          flatlistContainer,
+          reactionSelectorContainer,
+          reactionsText,
+        },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+
+  const reactions = useMemo(
+    () =>
+      propReactions ||
+      (fetchedReactions.map((reaction) => ({
+        id: reaction.user?.id,
+        image: reaction.user?.image,
+        name: reaction.user?.name,
+        type: reaction.type,
+      })) as Reaction[]),
+    [propReactions, fetchedReactions],
+  );
+
+  const renderItem = ({ item }: { item: Reaction }) => (
+    <MessageUserReactionsItem
+      MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+      reaction={item}
+      supportedReactions={supportedReactions ?? []}
+    />
+  );
+
+  const renderHeader = () => (
+    <Text style={[styles.reactionsText, reactionsText]}>{t<string>('Message Reactions')}</Text>
+  );
+
+  const selectorReactions: ReactionSelectorItemType[] = messageReactions.map((reaction) => ({
+    ...reaction,
+    onSelectReaction,
+    selectedReaction,
+  }));
+
+  return (
+    <View
+      accessibilityLabel='User Reactions on long press message'
+      style={[styles.container, container]}
+    >
+      <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
+        <FlatList
+          contentContainerStyle={[styles.contentContainer, contentContainer]}
+          data={selectorReactions}
+          horizontal
+          keyExtractor={(item) => item.type}
+          renderItem={renderSelectorItem}
+        />
+      </View>
+
+      {!loading ? (
+        <FlatList
+          accessibilityLabel='reaction-flat-list'
+          columnWrapperStyle={[styles.flatListColumnContainer, flatlistColumnContainer]}
+          contentContainerStyle={[styles.flatListContainer, flatlistContainer]}
+          data={reactions}
+          keyExtractor={(item) => item.id}
+          ListHeaderComponent={renderHeader}
+          numColumns={4}
+          onEndReached={loadNextPage}
+          renderItem={renderItem}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+    justifyContent: 'space-around',
+    marginVertical: 16,
+  },
+  flatListColumnContainer: {
+    justifyContent: 'space-evenly',
+  },
+  flatListContainer: {
+    justifyContent: 'center',
+  },
+  reactionSelectorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  reactionsText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginVertical: 16,
+    textAlign: 'center',
+  },
+});

package/src/components/{MessageOverlay/OverlayReactionsAvatar.tsx → MessageMenu/MessageUserReactionsAvatar.tsx}

@@ -1,15 +1,17 @@
 import React from 'react';
 
-import type { Reaction } from './OverlayReactions';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Reaction } from '../../types/types';
 import { Avatar, AvatarProps } from '../Avatar/Avatar';
 
-export type OverlayReactionsAvatarProps = {
+export type MessageUserReactionsAvatarProps = {
+  /**
+   * The reaction object
+   */
   reaction: Reaction;
 } & Partial<Pick<AvatarProps, 'size'>>;
 
-export const OverlayReactionsAvatar = (props: OverlayReactionsAvatarProps) => {
+export const MessageUserReactionsAvatar = (props: MessageUserReactionsAvatarProps) => {
   const {
     reaction: { image, name },
     size,
@@ -23,5 +25,3 @@ export const OverlayReactionsAvatar = (props: OverlayReactionsAvatarProps) => {
 
   return <Avatar image={image} name={name} size={size || BASE_AVATAR_SIZE} />;
 };
-
-OverlayReactionsAvatar.displayName = 'OverlayReactionsAvatar{overlay{reactionsAvatar}}';

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Unknown } from '../../icons';
+
+import type { DefaultStreamChatGenerics, Reaction } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+
+export type MessageUserReactionsItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'MessageUserReactionsAvatar'> & {
+  /**
+   * The reaction object
+   */
+  reaction: Reaction;
+  /**
+   * An array of supported reactions
+   */
+  supportedReactions: ReactionData[];
+};
+
+export const MessageUserReactionsItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  MessageUserReactionsAvatar,
+  reaction,
+  supportedReactions,
+}: MessageUserReactionsItemProps<StreamChatGenerics>) => {
+  const { id, name, type } = reaction;
+  const {
+    theme: {
+      colors: { accent_blue, black, grey, grey_gainsboro, white },
+      messageMenu: {
+        userReactions: {
+          avatarContainer,
+          avatarName,
+          avatarSize,
+          radius,
+          reactionBubbleBackground,
+          reactionBubbleBorderRadius,
+        },
+      },
+    },
+  } = useTheme();
+  const { client } = useChatContext();
+  const alignment = client.userID && client.userID === id ? 'left' : 'right';
+  const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
+  const y = avatarSize - radius;
+
+  const left =
+    alignment === 'left'
+      ? x -
+        (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
+        radius
+      : x - radius;
+  const top =
+    y -
+    radius -
+    (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
+
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? Unknown;
+
+  return (
+    <View
+      accessibilityLabel='Individual User Reaction on long press message'
+      style={[styles.avatarContainer, avatarContainer]}
+    >
+      <View style={styles.avatarInnerContainer}>
+        <MessageUserReactionsAvatar reaction={reaction} size={avatarSize} />
+        <View
+          style={[
+            styles.reactionBubbleBackground,
+            {
+              backgroundColor: grey_gainsboro,
+              borderColor: alignment === 'left' ? white : grey_gainsboro,
+              borderWidth: radius / 2,
+              left,
+              top,
+            },
+            reactionBubbleBackground,
+          ]}
+        >
+          <Icon
+            height={reactionBubbleBorderRadius / 2}
+            pathFill={alignment === 'left' ? accent_blue : grey}
+            width={reactionBubbleBorderRadius / 2}
+          />
+        </View>
+      </View>
+      <View style={styles.avatarNameContainer}>
+        <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatarContainer: {
+    marginBottom: 8,
+  },
+  avatarInnerContainer: {
+    alignSelf: 'center',
+  },
+  avatarName: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: '700',
+    paddingTop: 6,
+    textAlign: 'center',
+  },
+  avatarNameContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexGrow: 1,
+  },
+  reactionBubbleBackground: {
+    alignItems: 'center',
+    borderRadius: 24,
+    height: 24,
+    justifyContent: 'center',
+    position: 'absolute',
+    width: 24,
+  },
+});