stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

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

@@ -0,0 +1,398 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+
+import Svg, { Circle } from 'react-native-svg';
+
+import { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+
+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';
+
+export type MessageReactions = {
+  reactions: ReactionSummary[];
+  supportedReactions?: ReactionData[];
+};
+
+type Props = Pick<IconProps, 'pathFill' | 'style'> & {
+  size: number;
+  supportedReactions: ReactionData[];
+  type: string;
+};
+
+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 ReactionListPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  MessageContextValue<StreamChatGenerics>,
+  | 'alignment'
+  | 'message'
+  | 'onLongPress'
+  | 'onPress'
+  | 'onPressIn'
+  | 'preventPress'
+  | 'reactions'
+  | 'showMessageOverlay'
+> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'targetedMessage'> & {
+    messageContentWidth: number;
+    supportedReactions: ReactionData[];
+    fill?: string;
+    /** An array of the reaction objects to display in the list */
+    latest_reactions?: ReactionResponse<StreamChatGenerics>[];
+    /** An array of the own reaction objects to distinguish own reactions visually */
+    own_reactions?: ReactionResponse<StreamChatGenerics>[] | null;
+    radius?: number; // not recommended to change this
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse> | null;
+    reactionSize?: number;
+    stroke?: string;
+    strokeSize?: number; // not recommended to change this
+  };
+
+const ReactionListWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    alignment,
+    fill: propFill,
+    message,
+    messageContentWidth,
+    onLongPress,
+    onPress,
+    onPressIn,
+    preventPress,
+    radius: propRadius,
+    reactions,
+    reactionSize: propReactionSize,
+    showMessageOverlay,
+    stroke: propStroke,
+    strokeSize: propStrokeSize,
+    supportedReactions,
+    targetedMessage,
+  } = props;
+
+  const {
+    theme: {
+      colors: {
+        accent_blue,
+        black,
+        grey,
+        grey_gainsboro,
+        grey_whisper,
+        targetedMessageBackground,
+        white,
+        white_snow,
+      },
+      messageSimple: {
+        avatarWrapper: { leftAlign, spacer },
+        reactionList: {
+          container,
+          iconFillColor,
+          middleIcon,
+          radius: themeRadius,
+          reactionBubble,
+          reactionContainer,
+          reactionCount,
+          reactionSize: themeReactionSize,
+          strokeSize: themeStrokeSize,
+        },
+      },
+      screenPadding,
+    },
+  } = useTheme();
+
+  const width = useWindowDimensions().width;
+
+  const supportedReactionTypes = supportedReactions.map(
+    (supportedReaction) => supportedReaction.type,
+  );
+  const hasSupportedReactions = reactions.some((reaction) =>
+    supportedReactionTypes.includes(reaction.type),
+  );
+
+  if (!hasSupportedReactions || messageContentWidth === 0) {
+    return null;
+  }
+
+  const alignmentLeft = alignment === 'left';
+  const fill = propFill || (alignmentLeft ? grey_gainsboro : grey_whisper);
+  const radius = propRadius || themeRadius;
+  const reactionSize = propReactionSize || themeReactionSize;
+  const highlighted = message.pinned || targetedMessage === message.id;
+  const stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);
+  const strokeSize = propStrokeSize || themeStrokeSize;
+
+  const x1 = alignmentLeft
+    ? messageContentWidth +
+      (Number(leftAlign.marginRight) || 0) +
+      (Number(spacer.width) || 0) -
+      radius * 0.5
+    : width - screenPadding * 2 - messageContentWidth;
+  const x2 = x1 + radius * 2 * (alignmentLeft ? 1 : -1);
+  const y1 = reactionSize + radius * 2;
+  const y2 = reactionSize - radius;
+
+  const insideLeftBound = x2 - (reactionSize * reactions.length) / 2 > screenPadding;
+  const insideRightBound =
+    x2 + strokeSize + (reactionSize * reactions.length) / 2 < width - screenPadding * 2;
+  const left =
+    reactions.length === 1
+      ? x1 + (alignmentLeft ? -radius : radius - reactionSize)
+      : !insideLeftBound
+      ? screenPadding
+      : !insideRightBound
+      ? width - screenPadding * 2 - reactionSize * reactions.length - strokeSize
+      : x2 - (reactionSize * reactions.length) / 2 - strokeSize;
+
+  return (
+    <View
+      pointerEvents='box-none'
+      style={[
+        styles.container,
+        {
+          height: reactionSize + radius * 5,
+          width,
+        },
+        container,
+      ]}
+      testID='reaction-list'
+    >
+      {reactions.length ? (
+        <View pointerEvents='box-none' style={[StyleSheet.absoluteFill]}>
+          <Svg pointerEvents='none'>
+            <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />
+            <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />
+            <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />
+            <Circle cx={x2} cy={y2} fill={fill} r={radius * 2 + strokeSize} />
+            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />
+            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
+          </Svg>
+          <View pointerEvents='none' style={[StyleSheet.absoluteFill]}>
+            <Svg>
+              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
+            </Svg>
+          </View>
+          <TouchableOpacity
+            disabled={preventPress}
+            onLongPress={(event) => {
+              if (onLongPress) {
+                onLongPress({
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
+            onPress={(event) => {
+              if (onPress) {
+                onPress({
+                  defaultHandler: () => showMessageOverlay(false),
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
+            onPressIn={(event) => {
+              if (onPressIn) {
+                onPressIn({
+                  defaultHandler: () => showMessageOverlay(false),
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
+            style={[
+              styles.reactionBubble,
+              {
+                backgroundColor: alignmentLeft ? fill : white,
+                borderColor: fill,
+                borderRadius: reactionSize,
+                borderWidth: strokeSize,
+                height: reactionSize - strokeSize * 2,
+                left: left + strokeSize,
+                top: strokeSize,
+              },
+              reactionBubble,
+            ]}
+          >
+            {reactions.map((reaction, index) => (
+              <View
+                key={reaction.type}
+                style={[
+                  styles.reactionContainer,
+                  {
+                    marginRight: index < reactions.length - 1 ? 5 : 0,
+                  },
+                  reactionContainer,
+                ]}
+              >
+                <Icon
+                  key={reaction.type}
+                  pathFill={reaction.own ? iconFillColor || accent_blue : grey}
+                  size={reactionSize / 2}
+                  style={middleIcon}
+                  supportedReactions={supportedReactions}
+                  type={reaction.type}
+                />
+                <Text style={[styles.reactionCount, { color: black }, reactionCount]}>
+                  {reaction.count}
+                </Text>
+              </View>
+            ))}
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ReactionListPropsWithContext<StreamChatGenerics>,
+  nextProps: ReactionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    message: prevMessage,
+    messageContentWidth: prevMessageContentWidth,
+    reactions: prevReactions,
+    targetedMessage: prevTargetedMessage,
+  } = prevProps;
+  const {
+    message: nextMessage,
+    messageContentWidth: nextMessageContentWidth,
+    reactions: nextReactions,
+    targetedMessage: nextTargetedMessage,
+  } = nextProps;
+
+  const messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;
+  if (!messageContentWidthEqual) return false;
+
+  const messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;
+
+  if (!messagePinnedEqual) return false;
+
+  const targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;
+
+  if (!targetedMessageEqual) return false;
+
+  const latestReactionsEqual =
+    Array.isArray(prevMessage.latest_reactions) && Array.isArray(nextMessage.latest_reactions)
+      ? prevMessage.latest_reactions.length === nextMessage.latest_reactions.length &&
+        prevMessage.latest_reactions.every(
+          ({ type }, index) => type === nextMessage.latest_reactions?.[index].type,
+        )
+      : prevMessage.latest_reactions === nextMessage.latest_reactions;
+  if (!latestReactionsEqual) return false;
+
+  const reactionsEqual =
+    Array.isArray(prevReactions) && Array.isArray(nextReactions)
+      ? prevReactions.length === nextReactions.length &&
+        prevReactions.every(
+          ({ count, type }, index) =>
+            type === nextMessage.latest_reactions?.[index].type &&
+            count === nextMessage.latest_reactions?.[index].count,
+        )
+      : prevReactions === nextReactions;
+
+  if (!reactionsEqual) return false;
+
+  return true;
+};
+
+const MemoizedReactionList = React.memo(
+  ReactionListWithContext,
+  areEqual,
+) as typeof ReactionListWithContext;
+
+export type ReactionListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ReactionListPropsWithContext<StreamChatGenerics>> &
+  Pick<ReactionListPropsWithContext<StreamChatGenerics>, 'messageContentWidth'>;
+
+/**
+ * ReactionList - A high level component which implements all the logic required for a message reaction list
+ */
+export const ReactionList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ReactionListProps<StreamChatGenerics>,
+) => {
+  const {
+    alignment,
+    message,
+    onLongPress,
+    onPress,
+    onPressIn,
+    preventPress,
+    reactions,
+    showMessageOverlay,
+  } = useMessageContext<StreamChatGenerics>();
+  const { supportedReactions, targetedMessage } = useMessagesContext<StreamChatGenerics>();
+
+  return (
+    <MemoizedReactionList
+      {...{
+        alignment,
+        message,
+        onLongPress,
+        onPress,
+        onPressIn,
+        preventPress,
+        reactions,
+        showMessageOverlay,
+        supportedReactions,
+        targetedMessage,
+      }}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
+  reactionBubble: {
+    alignItems: 'center',
+    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,6 +102,7 @@ describe('MessageContent', () => {
     });
 
     await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
       expect(screen.getByTestId('message-deleted')).toBeTruthy();
     });
   });
@@ -236,7 +237,7 @@ describe('MessageContent', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(screen.getByLabelText('Reaction List Top')).toBeTruthy();
+      expect(screen.getByTestId('reaction-list')).toBeTruthy();
     });
   });
 });

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx

@@ -30,7 +30,7 @@ describe('MessageTextContainer', () => {
       user: { ...staticUser, image: undefined },
     });
     const { getByTestId, getByText, rerender, toJSON } = render(
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider style={defaultTheme}>
         <MessageTextContainer message={message as unknown as MessageType} />
       </ThemeProvider>,
     );
@@ -41,7 +41,7 @@ describe('MessageTextContainer', () => {
     });
 
     rerender(
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider style={defaultTheme}>
         <MessageTextContainer
           message={message as unknown as MessageType}
           MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
@@ -60,7 +60,7 @@ describe('MessageTextContainer', () => {
     });
 
     rerender(
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider style={defaultTheme}>
         <MessageTextContainer message={staticMessage as unknown as MessageType} />
       </ThemeProvider>,
     );

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -2,13 +2,14 @@
 
 exports[`MessagePinnedHeader should render message pinned 1`] = `
 <View
-  accessibilityLabel="Message Pinned Header"
   style={
     [
       {
-        "alignItems": "center",
+        "display": "flex",
         "flexDirection": "row",
-        "justifyContent": "center",
+      },
+      {
+        "justifyContent": "flex-start",
       },
       {},
     ]
@@ -17,14 +18,14 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={16}
-    bbWidth={16}
-    fill="#7A7A7A"
+    bbHeight={24}
+    bbWidth={24}
     focusable={false}
-    height={16}
+    height={24}
     meetOrSlice={0}
     minX={0}
     minY={0}
+    pathFill="#7A7A7A"
     style={
       [
         {
@@ -33,39 +34,37 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
         },
         {
           "flex": 0,
-          "height": 16,
-          "width": 16,
+          "height": 24,
+          "width": 24,
         },
       ]
     }
-    vbHeight={16}
-    vbWidth={16}
-    width={16}
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4286216826,
+          "payload": 4278190080,
           "type": 0,
         }
       }
-      propList={
-        [
-          "fill",
-        ]
-      }
     >
       <RNSVGPath
-        d="M9.33325 2.66668V6.00001C9.33325 6.74668 9.57992 7.44001 9.99992 8.00001H5.99992C6.43325 7.42668 6.66659 6.73334 6.66659 6.00001V2.66668H9.33325ZM11.3333 1.33334H4.66659C4.29992 1.33334 3.99992 1.63334 3.99992 2.00001C3.99992 2.36668 4.29992 2.66668 4.66659 2.66668H5.33325V6.00001C5.33325 7.10668 4.43992 8.00001 3.33325 8.00001V9.33334H7.31325V14L7.97992 14.6667L8.64659 14V9.33334H12.6666V8.00001C11.5599 8.00001 10.6666 7.10668 10.6666 6.00001V2.66668H11.3333C11.6999 2.66668 11.9999 2.36668 11.9999 2.00001C11.9999 1.63334 11.6999 1.33334 11.3333 1.33334Z"
+        clipRule={0}
+        d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
         fill={
           {
             "payload": 4286216826,
             "type": 0,
           }
         }
+        fillRule={0}
         propList={
           [
             "fill",
+            "fillRule",
           ]
         }
       />
@@ -77,10 +76,7 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
         {
           "color": "#7A7A7A",
         },
-        {
-          "fontSize": 12,
-          "marginLeft": 4,
-        },
+        {},
         {},
       ]
     }

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -10,12 +10,18 @@ export const useCreateMessageContext = <
   actionsEnabled,
   alignment,
   channel,
-  dismissOverlay,
   files,
   goToMessage,
   groupStyles,
   handleAction,
-  handleReaction,
+  handleCopyMessage,
+  handleDeleteMessage,
+  handleEditMessage,
+  handleFlagMessage,
+  handleQuotedReplyMessage,
+  handleResendMessage,
+  handleToggleBanUser,
+  handleToggleMuteUser,
   handleToggleReaction,
   hasReactions,
   images,
@@ -56,12 +62,18 @@ export const useCreateMessageContext = <
       actionsEnabled,
       alignment,
       channel,
-      dismissOverlay,
       files,
       goToMessage,
       groupStyles,
       handleAction,
-      handleReaction,
+      handleCopyMessage,
+      handleDeleteMessage,
+      handleEditMessage,
+      handleFlagMessage,
+      handleQuotedReplyMessage,
+      handleResendMessage,
+      handleToggleBanUser,
+      handleToggleMuteUser,
       handleToggleReaction,
       hasReactions,
       images,