stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx

@@ -0,0 +1,295 @@
+import React, { useCallback, useRef } from 'react';
+import { Animated, FlatList, Pressable, StyleSheet, Text } from 'react-native';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../../contexts/messageContext/MessageContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+
+import { Unknown } from '../../../../icons/Unknown';
+
+import type { IconProps } from '../../../../icons/utils/base';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { ReactionData } from '../../../../utils/utils';
+import { ReactionSummary } from '../../hooks/useProcessReactions';
+
+type Props = Pick<IconProps, 'pathFill' | 'style'> & {
+  size: number;
+  type: string;
+  supportedReactions?: ReactionData[];
+};
+
+const Icon = ({ pathFill, size, style, supportedReactions, type }: Props) => {
+  const ReactionIcon =
+    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || Unknown;
+
+  return <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />;
+};
+
+export type ReactionListBottomItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    | 'handleReaction'
+    | 'onLongPress'
+    | 'onPress'
+    | 'onPressIn'
+    | 'preventPress'
+    | 'showMessageOverlay'
+  >
+> &
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>> & {
+    reaction: ReactionSummary;
+  };
+
+export const ReactionListBottomItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListBottomItemProps<StreamChatGenerics>,
+) => {
+  const {
+    handleReaction,
+    onLongPress,
+    onPress,
+    onPressIn,
+    preventPress,
+    reaction,
+    showMessageOverlay,
+    supportedReactions,
+  } = props;
+  const scaleValue = useRef(new Animated.Value(1)).current;
+  const {
+    theme: {
+      colors: { black, grey_gainsboro, light_blue },
+      messageSimple: {
+        reactionListBottom: {
+          item: { container, countText, icon, iconFillColor, iconSize, iconUnFillColor },
+        },
+      },
+    },
+  } = useTheme();
+
+  const onPressInAnimation = useCallback(() => {
+    Animated.spring(scaleValue, {
+      toValue: 0.8,
+      useNativeDriver: true,
+    }).start();
+  }, [scaleValue]);
+
+  const onPressOutAnimation = useCallback(() => {
+    Animated.spring(scaleValue, {
+      toValue: 1,
+      useNativeDriver: true,
+    }).start();
+  }, [scaleValue]);
+
+  return (
+    <Pressable
+      accessibilityLabel='Reaction List Bottom Item'
+      disabled={preventPress}
+      key={reaction.type}
+      onLongPress={(event) => {
+        if (onLongPress) {
+          onLongPress({
+            defaultHandler: () => {
+              if (showMessageOverlay) {
+                showMessageOverlay(true);
+              }
+            },
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      onPress={(event) => {
+        if (onPress) {
+          onPress({
+            defaultHandler: () => {
+              if (handleReaction) {
+                handleReaction(reaction.type);
+              }
+            },
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      onPressIn={(event) => {
+        onPressInAnimation();
+        if (onPressIn) {
+          onPressIn({
+            defaultHandler: () => {
+              if (handleReaction) {
+                handleReaction(reaction.type);
+              }
+            },
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      onPressOut={onPressOutAnimation}
+    >
+      <Animated.View
+        style={[
+          styles.itemContainer,
+          {
+            backgroundColor: reaction.own ? light_blue : grey_gainsboro,
+            transform: [{ scale: scaleValue }],
+          },
+          container,
+        ]}
+      >
+        <Icon
+          key={reaction.type}
+          pathFill={reaction.own ? iconFillColor : iconUnFillColor}
+          size={iconSize}
+          style={icon}
+          supportedReactions={supportedReactions}
+          type={reaction.type}
+        />
+        <Text style={[styles.reactionCount, { color: black }, countText]}>{reaction.count}</Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const renderItem = ({ index, item }: { index: number; item: ReactionListBottomItemProps }) => (
+  <ReactionListBottomItem
+    handleReaction={item.handleReaction}
+    key={index}
+    onLongPress={item.onLongPress}
+    onPress={item.onPress}
+    onPressIn={item.onPressIn}
+    preventPress={item.preventPress}
+    reaction={item.reaction}
+    showMessageOverlay={item.showMessageOverlay}
+    supportedReactions={item.supportedReactions}
+  />
+);
+
+export type ReactionListBottomProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    | 'handleReaction'
+    | 'hasReactions'
+    | 'onLongPress'
+    | 'onPress'
+    | 'onPressIn'
+    | 'preventPress'
+    | 'reactions'
+    | 'showMessageOverlay'
+  >
+> &
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>>;
+
+export const ReactionListBottom = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListBottomProps<StreamChatGenerics>,
+) => {
+  const {
+    handleReaction: propHandlerReaction,
+    hasReactions: propHasReactions,
+    onLongPress: propOnLongPress,
+    onPress: propOnPress,
+    onPressIn: propOnPressIn,
+    preventPress: propPreventPress,
+    reactions: propReactions,
+    showMessageOverlay: propShowMessageOverlay,
+    supportedReactions: propSupportedReactions,
+  } = props;
+
+  const {
+    handleReaction: contextHandleReaction,
+    hasReactions: contextHasReactions,
+    onLongPress: contextOnLongPress,
+    onPress: contextOnPress,
+    onPressIn: contextOnPressIn,
+    preventPress: contextPreventPress,
+    reactions: contextReactions,
+    showMessageOverlay: contextShowMessageOverlay,
+  } = useMessageContext<StreamChatGenerics>();
+
+  const { supportedReactions: contextSupportedReactions } =
+    useMessagesContext<StreamChatGenerics>();
+
+  const handleReaction = propHandlerReaction || contextHandleReaction;
+  const hasReactions = propHasReactions || contextHasReactions;
+  const onLongPress = propOnLongPress || contextOnLongPress;
+  const onPress = propOnPress || contextOnPress;
+  const onPressIn = propOnPressIn || contextOnPressIn;
+  const preventPress = propPreventPress || contextPreventPress;
+  const reactions = propReactions || contextReactions;
+  const showMessageOverlay = propShowMessageOverlay || contextShowMessageOverlay;
+  const supportedReactions = propSupportedReactions || contextSupportedReactions;
+  const {
+    theme: {
+      messageSimple: {
+        reactionListBottom: { contentContainer },
+      },
+    },
+  } = useTheme();
+
+  const supportedReactionTypes = supportedReactions?.map(
+    (supportedReaction) => supportedReaction.type,
+  );
+
+  const hasSupportedReactions = reactions.some((reaction) =>
+    supportedReactionTypes?.includes(reaction.type),
+  );
+
+  if (!hasSupportedReactions || !hasReactions) {
+    return null;
+  }
+
+  const reactionListBottomItemData: ReactionListBottomItemProps[] = reactions.map((reaction) => ({
+    handleReaction,
+    onLongPress,
+    onPress,
+    onPressIn,
+    preventPress,
+    reaction,
+    showMessageOverlay,
+    supportedReactions,
+  }));
+
+  return (
+    <FlatList
+      accessibilityLabel='Reaction List Bottom'
+      contentContainerStyle={[styles.contentContainer, contentContainer]}
+      data={reactionListBottomItemData}
+      keyExtractor={(item) => item.reaction.type}
+      numColumns={6}
+      renderItem={renderItem}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    alignSelf: 'flex-end',
+  },
+  itemContainer: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: 2,
+    padding: 8,
+  },
+  reactionCount: {
+    fontWeight: '600',
+    marginLeft: 4,
+  },
+});

package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../../contexts/messageContext/MessageContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+
+import { Unknown } from '../../../../icons/Unknown';
+
+import type { IconProps } from '../../../../icons/utils/base';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { ReactionData } from '../../../../utils/utils';
+import { ReactionSummary } from '../../hooks/useProcessReactions';
+
+type Props = Pick<IconProps, 'pathFill' | 'style'> & {
+  size: number;
+  type: string;
+  supportedReactions?: ReactionData[];
+};
+
+const Icon = ({ pathFill, size, style, supportedReactions, type }: Props) => {
+  const ReactionIcon =
+    supportedReactions?.find((reaction) => reaction.type === type)?.Icon || Unknown;
+
+  return (
+    <View>
+      <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />
+    </View>
+  );
+};
+
+export type ReactionListTopItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'reactions'>> &
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>> & {
+    index: number;
+    reaction: ReactionSummary;
+  };
+
+export const ReactionListTopItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListTopItemProps<StreamChatGenerics>,
+) => {
+  const { index, reaction, reactions, supportedReactions } = props;
+  const {
+    theme: {
+      messageSimple: {
+        reactionListTop: {
+          item: { container, icon, iconFillColor, iconUnFillColor, reactionSize },
+        },
+      },
+    },
+  } = useTheme();
+
+  const reactionsLength = reactions ? reactions.length : 0;
+
+  return (
+    <View
+      key={reaction.type}
+      style={[
+        styles.reactionContainer,
+        {
+          marginRight: index < reactionsLength - 1 ? 5 : 0,
+        },
+        container,
+      ]}
+    >
+      <Icon
+        key={reaction.type}
+        pathFill={reaction.own ? iconFillColor : iconUnFillColor}
+        size={reactionSize / 2}
+        style={icon}
+        supportedReactions={supportedReactions}
+        type={reaction.type}
+      />
+    </View>
+  );
+};
+
+export type ReactionListTopProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    | 'alignment'
+    | 'hasReactions'
+    | 'onLongPress'
+    | 'onPress'
+    | 'onPressIn'
+    | 'preventPress'
+    | 'reactions'
+    | 'showMessageOverlay'
+  >
+> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> & {
+    messageContentWidth: number;
+    fill?: string;
+    reactionSize?: number;
+  };
+
+/**
+ * ReactionListTop - A high level component which implements all the logic required for a message reaction list
+ */
+export const ReactionListTop = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListTopProps<StreamChatGenerics>,
+) => {
+  const {
+    alignment: propAlignment,
+    fill: propFill,
+    hasReactions: propHasReactions,
+    messageContentWidth,
+    onLongPress: propOnLongPress,
+    onPress: propOnPress,
+    onPressIn: propOnPressIn,
+    preventPress: propPreventPress,
+    reactions: propReactions,
+    reactionSize: propReactionSize,
+    showMessageOverlay: propShowMessageOverlay,
+    supportedReactions: propSupportedReactions,
+  } = props;
+
+  const {
+    alignment: contextAlignment,
+    hasReactions: contextHasReactions,
+    onLongPress: contextOnLongPress,
+    onPress: contextOnPress,
+    onPressIn: contextOnPressIn,
+    preventPress: contextPreventPress,
+    reactions: contextReactions,
+    showMessageOverlay: contextShowMessageOverlay,
+  } = useMessageContext<StreamChatGenerics>();
+
+  const { supportedReactions: contextSupportedReactions } =
+    useMessagesContext<StreamChatGenerics>();
+
+  const alignment = propAlignment || contextAlignment;
+  const hasReactions = propHasReactions || contextHasReactions;
+  const onLongPress = propOnLongPress || contextOnLongPress;
+  const onPress = propOnPress || contextOnPress;
+  const onPressIn = propOnPressIn || contextOnPressIn;
+  const preventPress = propPreventPress || contextPreventPress;
+  const reactions = propReactions || contextReactions;
+  const showMessageOverlay = propShowMessageOverlay || contextShowMessageOverlay;
+  const supportedReactions = propSupportedReactions || contextSupportedReactions;
+
+  const {
+    theme: {
+      colors: { grey_gainsboro, grey_whisper, white },
+      messageSimple: {
+        reactionListTop: {
+          container,
+          item: { reactionSize: themeReactionSize },
+          position: reactionPosition,
+        },
+      },
+    },
+  } = useTheme();
+
+  const supportedReactionTypes = supportedReactions?.map(
+    (supportedReaction) => supportedReaction.type,
+  );
+
+  const hasSupportedReactions = reactions.some((reaction) =>
+    supportedReactionTypes?.includes(reaction.type),
+  );
+
+  if (!hasSupportedReactions || messageContentWidth === 0 || !hasReactions) {
+    return null;
+  }
+
+  const alignmentLeft = alignment === 'left';
+  const fill = propFill || (alignmentLeft ? grey_gainsboro : grey_whisper);
+  const reactionSize = propReactionSize || themeReactionSize;
+
+  // This is an estimated value for the message length that is considered small
+  const SMALL_MESSAGE_LENGTH_THRESHOLD = 80;
+
+  // It is the length of the reaction list
+  const totalReactionSize = reactionSize * reactions.length;
+  const halfReactionSize = totalReactionSize / 2;
+
+  const position =
+    messageContentWidth < SMALL_MESSAGE_LENGTH_THRESHOLD
+      ? messageContentWidth - reactionPosition
+      : messageContentWidth - halfReactionSize;
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel='Reaction List Top'
+      disabled={preventPress}
+      onLongPress={(event) => {
+        if (onLongPress) {
+          onLongPress({
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      onPress={(event) => {
+        if (onPress) {
+          onPress({
+            defaultHandler: () => showMessageOverlay(true),
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      onPressIn={(event) => {
+        if (onPressIn) {
+          onPressIn({
+            defaultHandler: () => showMessageOverlay(true),
+            emitter: 'reactionList',
+            event,
+          });
+        }
+      }}
+      style={[
+        styles.container,
+        {
+          backgroundColor: fill,
+          borderColor: white,
+          borderRadius: reactionSize,
+          height: reactionSize,
+          top: -reactionPosition,
+        },
+        alignmentLeft ? { left: position } : { right: position },
+        container,
+      ]}
+    >
+      {reactions.map((reaction, index) => (
+        <ReactionListTopItem
+          index={index}
+          key={reaction.type}
+          reaction={reaction}
+          reactions={reactions}
+          supportedReactions={supportedReactions}
+        />
+      ))}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 5,
+    position: 'absolute',
+  },
+  reactionContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  reactionCount: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginLeft: 2,
+  },
+});

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -102,7 +102,6 @@ describe('MessageContent', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
       expect(screen.getByTestId('message-deleted')).toBeTruthy();
     });
   });
@@ -237,7 +236,7 @@ describe('MessageContent', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(screen.getByTestId('reaction-list')).toBeTruthy();
+      expect(screen.getByLabelText('Reaction List Top')).toBeTruthy();
     });
   });
 });