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

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

@@ -1,92 +0,0 @@
-import React from 'react';
-
-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 { ReactionListTop } from '../ReactionList/ReactionListTop';
-
-describe('ReactionListTop', () => {
-  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}>
-              <ReactionListTop {...options} />
-            </Channel>
-          </Chat>
-        </ChannelsStateProvider>,
-      );
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  it('renders the ReactionListTop component', async () => {
-    renderMessage({
-      hasReactions: true,
-      messageContentWidth: 100,
-      reactions: [{ count: 1, own: true, type: 'love' }],
-    });
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Reaction List Top')).toBeTruthy();
-    });
-  });
-
-  it('return null in ReactionListTop component when hasReactions false', async () => {
-    renderMessage({
-      hasReactions: false,
-      messageContentWidth: 100,
-      reactions: [{ count: 1, own: true, type: 'love' }],
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
-    });
-  });
-
-  it('return null in ReactionListTop component when supportedReactions are not matching', async () => {
-    renderMessage(
-      {
-        hasReactions: false,
-        messageContentWidth: 100,
-        reactions: [{ count: 1, own: true, type: 'love' }],
-      },
-      { supportedReactions: [] },
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Reaction List Top')).toBeNull();
-    });
-  });
-});

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

@@ -1,59 +0,0 @@
-import {
-  MessageContextValue,
-  useMessageContext,
-} from '../../../contexts/messageContext/MessageContext';
-
-import { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes } from '../../../utils/utils';
-
-export type UseMessageDataProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Pick<
-    MessageContextValue<StreamChatGenerics>,
-    'channel' | 'groupStyles' | 'isMyMessage' | 'message'
-  >
->;
-
-export const useMessageData = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  channel: propChannel,
-  groupStyles: propGroupStyles,
-  isMyMessage: propIsMyMessage,
-  message: propMessage,
-}: UseMessageDataProps<StreamChatGenerics>) => {
-  const {
-    channel: contextChannel,
-    groupStyles: contextGroupStyles,
-    isMyMessage: contextIsMyMessage,
-    message: contextMessage,
-  } = useMessageContext();
-
-  const channel = propChannel || contextChannel;
-  const groupStyles = propGroupStyles || contextGroupStyles;
-  const isMyMessage = propIsMyMessage || contextIsMyMessage;
-  const message = propMessage || contextMessage;
-
-  const isVeryLastMessage =
-    channel?.state.messages[channel?.state.messages.length - 1]?.id === message.id;
-
-  const messageGroupedSingleOrBottom =
-    groupStyles.includes('single') || groupStyles.includes('bottom');
-
-  const isMessageErrorType =
-    message.type === 'error' || message.status === MessageStatusTypes.FAILED;
-  const isMessageTypeDeleted = message.type === 'deleted';
-  const isMessageReceivedOrErrorType = !isMyMessage || isMessageErrorType;
-
-  const hasThreadReplies = !!message?.reply_count;
-
-  return {
-    hasThreadReplies,
-    isMessageErrorType,
-    isMessageReceivedOrErrorType,
-    isMessageTypeDeleted,
-    isVeryLastMessage,
-    messageGroupedSingleOrBottom,
-  };
-};

package/src/components/MessageMenu/MessageActionList.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { MessageActionType } from './MessageActionListItem';
-
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
-export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionListItem'> & {
-  /**
-   * Function to close the message actions bottom sheet
-   * @returns void
-   */
-  dismissOverlay?: () => void;
-  /**
-   * An array of message actions to render
-   */
-  messageActions?: MessageActionType[];
-};
-
-export const MessageActionList = (props: MessageActionListProps) => {
-  const { MessageActionListItem, messageActions } = props;
-  const {
-    theme: {
-      messageMenu: {
-        actionList: { container },
-      },
-    },
-  } = useTheme();
-
-  if (messageActions?.length === 0) return null;
-
-  return (
-    <View accessibilityLabel='Message action list' style={[styles.container, container]}>
-      {messageActions?.map((messageAction, index) => (
-        <MessageActionListItem
-          key={messageAction.title}
-          {...{ ...messageAction, index, length: messageActions.length }}
-        />
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-  },
-});

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -1,86 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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,
-  },
-});