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

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

@@ -1,398 +0,0 @@
-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/MessageOverlay/MessageActionList.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import { StyleSheet, ViewStyle } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-
-import { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';
-
-import {
-  MessageOverlayData,
-  useMessageOverlayContext,
-} from '../../contexts/messageOverlayContext/MessageOverlayContext';
-import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useViewport } from '../../hooks/useViewport';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
-export type MessageActionListPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  OverlayProviderProps<StreamChatGenerics>,
-  | 'MessageActionListItem'
-  | 'error'
-  | 'isMyMessage'
-  | 'isThreadMessage'
-  | 'message'
-  | 'messageReactions'
-> &
-  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {
-    showScreen: Animated.SharedValue<number>;
-  };
-
-const MessageActionListWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageActionListPropsWithContext<StreamChatGenerics>,
-) => {
-  const {
-    alignment,
-    error,
-    isMyMessage,
-    isThreadMessage,
-    message,
-    MessageActionListItem = DefaultMessageActionListItem,
-    messageActions,
-    messageReactions,
-    showScreen,
-  } = props;
-
-  const messageActionProps = {
-    error,
-    isMyMessage,
-    isThreadMessage,
-    message,
-    messageReactions,
-  };
-  const { vw } = useViewport();
-
-  const {
-    theme: {
-      colors: { white_snow },
-      overlay: {
-        messageActionsList: { container },
-      },
-    },
-  } = useTheme();
-
-  const height = useSharedValue(0);
-  const width = useSharedValue(0);
-
-  const showScreenStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      transform: [
-        {
-          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),
-        },
-        {
-          translateX: interpolate(
-            showScreen.value,
-            [0, 1],
-            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],
-          ),
-        },
-        {
-          scale: showScreen.value,
-        },
-      ],
-    }),
-    [alignment],
-  );
-
-  return (
-    <Animated.View
-      onLayout={({ nativeEvent: { layout } }) => {
-        width.value = layout.width;
-        height.value = layout.height;
-      }}
-      style={[
-        styles.container,
-        { backgroundColor: white_snow, minWidth: vw(65) },
-        showScreenStyle,
-        container,
-      ]}
-      testID='message-action-list'
-    >
-      {messageActions?.map((messageAction, index) => (
-        <MessageActionListItem
-          key={messageAction.title}
-          {...messageActionProps}
-          {...{ ...messageAction, index, length: messageActions.length }}
-        />
-      ))}
-    </Animated.View>
-  );
-};
-
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,
-  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,
-) => {
-  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;
-  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;
-
-  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;
-  if (!messageActionsEqual) return false;
-
-  const alignmentEqual = prevAlignment === nextAlignment;
-  if (!alignmentEqual) return false;
-
-  return true;
-};
-
-const MemoizedMessageActionList = React.memo(
-  MessageActionListWithContext,
-  areEqual,
-) as typeof MessageActionListWithContext;
-
-export type MessageActionListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &
-  Pick<
-    MessageActionListPropsWithContext<StreamChatGenerics>,
-    'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
-  >;
-
-/**
- * MessageActionList - A high level component which implements all the logic required for MessageActions
- */
-export const MessageActionList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageActionListProps<StreamChatGenerics>,
-) => {
-  const { data } = useMessageOverlayContext<StreamChatGenerics>();
-
-  const { alignment, messageActions } = data || {};
-
-  return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;
-};
-
-const styles = StyleSheet.create({
-  bottomBorder: {
-    borderBottomWidth: 1,
-  },
-  container: {
-    borderRadius: 16,
-    marginTop: 8,
-    overflow: 'hidden',
-  },
-  titleStyle: {
-    paddingLeft: 20,
-  },
-});

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
-import { TapGestureHandler } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-
-import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useViewport } from '../../hooks/useViewport';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
-
-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>;
-};
-
-export type MessageActionListItemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = MessageActionType &
-  Pick<
-    MessageOverlayPropsWithContext<StreamChatGenerics>,
-    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'
-  > & {
-    index: number;
-    length: number;
-  };
-
-const MessageActionListItemWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageActionListItemProps<StreamChatGenerics>,
-) => {
-  const { action, actionType, icon, index, length, title, titleStyle } = props;
-  const { vw } = useViewport();
-
-  const {
-    theme: {
-      colors: { black, border },
-      overlay: { messageActions },
-    },
-  } = useTheme();
-
-  const { animatedStyle, onTap } = useMessageActionAnimation({ action });
-
-  return (
-    <TapGestureHandler onHandlerStateChange={onTap}>
-      <Animated.View
-        style={[
-          styles.row,
-          {
-            minWidth: vw(65),
-          },
-          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
-          animatedStyle,
-          messageActions.actionContainer,
-        ]}
-        testID={`${actionType}-list-item`}
-      >
-        <View style={messageActions.icon}>{icon}</View>
-        <Text style={[styles.titleStyle, { color: black }, titleStyle, messageActions.title]}>
-          {title}
-        </Text>
-      </Animated.View>
-    </TapGestureHandler>
-  );
-};
-
-const messageActionIsEqual = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  prevProps: MessageActionListItemProps<StreamChatGenerics>,
-  nextProps: MessageActionListItemProps<StreamChatGenerics>,
-) => prevProps.length === nextProps.length;
-
-export const MemoizedMessageActionListItem = React.memo(
-  MessageActionListItemWithContext,
-  messageActionIsEqual,
-) as typeof MessageActionListItemWithContext;
-
-/**
- * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
- */
-export const MessageActionListItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageActionListItemProps<StreamChatGenerics>,
-) => <MemoizedMessageActionListItem {...props} />;
-
-const styles = StyleSheet.create({
-  bottomBorder: {
-    borderBottomWidth: 1,
-  },
-  container: {
-    borderRadius: 16,
-    marginTop: 8,
-    maxWidth: 275,
-  },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
-  titleStyle: {
-    paddingLeft: 20,
-  },
-});