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

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

@@ -1,271 +0,0 @@
-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__/MessageSimple.test.js

@@ -1,208 +0,0 @@
-import React from 'react';
-
-import { Text } from 'react-native';
-
-import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
-
-import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
-
-import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
-import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
-import { generateMember } from '../../../../mock-builders/generator/member';
-import { generateMessage } from '../../../../mock-builders/generator/message';
-import { generateUser } from '../../../../mock-builders/generator/user';
-import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import { Channel } from '../../../Channel/Channel';
-import { Chat } from '../../../Chat/Chat';
-import { Message } from '../../Message';
-
-describe('MessageSimple', () => {
-  let channel;
-  let chatClient;
-  let renderMessage;
-
-  const user = generateUser({ id: 'id', name: 'name' });
-  const messages = [generateMessage({ user })];
-
-  beforeEach(async () => {
-    const members = [generateMember({ user })];
-    const mockedChannel = generateChannelResponse({
-      members,
-      messages,
-    });
-
-    chatClient = await getTestClientWithUser(user);
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
-
-    renderMessage = (options, channelProps) =>
-      render(
-        <ChannelsStateProvider>
-          <Chat client={chatClient}>
-            <Channel channel={channel} {...channelProps}>
-              <Message groupStyles={['bottom']} {...options} />
-            </Channel>
-          </Chat>
-        </ChannelsStateProvider>,
-      );
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  it('renders the MessageSimple component', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper')).toBeTruthy();
-    });
-  });
-
-  it('renders MessageAvatar when alignment is left', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeDefined();
-    });
-  });
-
-  it('do not renders MessageAvatar when alignment is right', async () => {
-    const user = generateUser({ id: 'id', name: 'name' });
-    const message = generateMessage({ user });
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeNull();
-    });
-  });
-
-  it('renders MessageDeleted when message type is deleted', async () => {
-    const user = generateUser();
-    const message = generateMessage({ type: 'deleted', user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('message-deleted')).toBeDefined();
-    });
-  });
-
-  it('renders MessageContent when message is not deleted', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('message-components')).toBeDefined();
-    });
-  });
-
-  it('renders ReactionListTop when reactionListPosition is top', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message }, { reactionListPosition: 'top' });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Top')).toBeDefined();
-      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
-    });
-  });
-
-  it('renders ReactionListBottom when reactionListPosition is bottom', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
-      expect(screen.queryByLabelText('Reaction List Bottom')).toBeDefined();
-    });
-  });
-
-  it('renders MessagePinnedHeader when message is pinned', async () => {
-    const user = generateUser();
-    const message = generateMessage({ pinned: true, user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Message Pinned Header')).not.toBeNull();
-    });
-  });
-
-  it('renders MessageHeader component if defined', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message }, { MessageHeader: () => <Text>Message Header</Text> });
-
-    await waitFor(() => {
-      expect(screen.queryByText('Message Header')).not.toBeNull();
-    });
-  });
-
-  it('applies correct styles for when group styles are not single or bottom', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ groupStyles: ['top'], message });
-
-    await waitFor(() => {
-      console.log(screen.getByTestId('message-simple-wrapper').props.style[1]);
-      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({});
-    });
-  });
-
-  it('applies correct styles for when group styles are single/bottom and not last message', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({
-        marginBottom: 8,
-      });
-    });
-  });
-
-  it('noBorder true when only emojis text', async () => {
-    const user = generateUser();
-    const message = generateMessage({ quoted_message: undefined, text: '😊', user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      console.log(screen.getByTestId('message-content-wrapper').props.style);
-      expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
-        borderWidth: 0,
-      });
-    });
-  });
-
-  it('noBorder true when only other attachments is present', async () => {
-    const user = generateUser();
-    const message = generateMessage({ attachments: [{ title: 'other', type: 'other' }], user });
-
-    renderMessage({ message });
-
-    await waitFor(() => {
-      console.log(screen.getByTestId('message-content-wrapper').props.style);
-      expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
-        borderWidth: 0,
-      });
-    });
-  });
-});

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

@@ -1,166 +0,0 @@
-import React from 'react';
-
-import { Animated } from 'react-native';
-
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
-
-import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
-
-import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
-import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
-import { generateMember } from '../../../../mock-builders/generator/member';
-import { generateMessage } from '../../../../mock-builders/generator/message';
-import { generateReaction } from '../../../../mock-builders/generator/reaction';
-import { generateUser } from '../../../../mock-builders/generator/user';
-import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import { Channel } from '../../../Channel/Channel';
-import { Chat } from '../../../Chat/Chat';
-import { Message } from '../../Message';
-
-describe('ReactionListBottom', () => {
-  let channel;
-  let chatClient;
-  let renderMessage;
-
-  const user = generateUser({ id: 'id', name: 'name' });
-  const messages = [generateMessage({ user })];
-
-  beforeEach(async () => {
-    const members = [generateMember({ user })];
-    const mockedChannel = generateChannelResponse({
-      members,
-      messages,
-    });
-
-    chatClient = await getTestClientWithUser(user);
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
-
-    renderMessage = (options, channelProps) =>
-      render(
-        <ChannelsStateProvider>
-          <Chat client={chatClient}>
-            <Channel channel={channel} {...channelProps}>
-              <Message groupStyles={['bottom']} {...options} />
-            </Channel>
-          </Chat>
-        </ChannelsStateProvider>,
-      );
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  it('renders the ReactionListBottom component', async () => {
-    const user = generateUser();
-    const reaction = generateReaction();
-    const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
-      user,
-    });
-
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Reaction List Bottom')).toBeTruthy();
-    });
-  });
-
-  it('renders null when no supported reaction', async () => {
-    const user = generateUser();
-    const reaction = generateReaction();
-    const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
-      user,
-    });
-
-    renderMessage({ message }, { reactionListPosition: 'bottom', supportedReactions: [] });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
-    });
-  });
-
-  it('renders null when no hasReactions false', async () => {
-    const user = generateUser();
-    const message = generateMessage({
-      reaction_groups: {},
-      user,
-    });
-
-    renderMessage({ hasReactions: false, message }, { reactionListPosition: 'bottom' });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Bottom')).toBeNull();
-    });
-  });
-
-  it('applies animation on press in', () => {
-    const animatedSpy = jest.spyOn(Animated, 'spring');
-    const user = generateUser();
-    const reaction = generateReaction();
-    const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
-      user,
-    });
-
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
-
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
-
-    fireEvent(reactionListBottomItem, 'onPressIn');
-
-    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
-      toValue: 0.8,
-      useNativeDriver: true,
-    });
-  });
-
-  it('applies animation on press out', () => {
-    const animatedSpy = jest.spyOn(Animated, 'spring');
-    const user = generateUser();
-    const reaction = generateReaction();
-    const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
-      user,
-    });
-
-    renderMessage({ message }, { reactionListPosition: 'bottom' });
-
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
-
-    fireEvent(reactionListBottomItem, 'onPressOut');
-
-    expect(animatedSpy).toHaveBeenCalledWith(expect.any(Animated.Value), {
-      toValue: 1,
-      useNativeDriver: true,
-    });
-  });
-
-  it('call handleReaction on press', () => {
-    const handleReactionMock = jest.fn();
-    const user = generateUser();
-    const reaction = generateReaction();
-    const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
-      user,
-    });
-
-    renderMessage(
-      {
-        handleReaction: handleReactionMock,
-        message,
-      },
-      { reactionListPosition: 'bottom' },
-    );
-
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Bottom Item');
-
-    fireEvent(reactionListBottomItem, 'onPress');
-
-    expect(handleReactionMock).toHaveBeenCalledTimes(1);
-  });
-});