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

package/src/components/MessageOverlay/OverlayReactionsItem.tsx

@@ -1,188 +0,0 @@
-import React from 'react';
-
-import { StyleSheet, Text, View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
-
-import { ReactionResponse } from 'stream-chat';
-
-import { Reaction } from './OverlayReactions';
-
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Unknown } from '../../icons';
-
-import type { DefaultStreamChatGenerics } from '../../types/types';
-import { ReactionData } from '../../utils/utils';
-
-export type OverlayReactionsItemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
-  reaction: Reaction;
-  supportedReactions: ReactionData[];
-};
-
-type ReactionIconProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ReactionResponse<StreamChatGenerics>, 'type'> & {
-  pathFill: string;
-  size: number;
-  supportedReactions: ReactionData[];
-};
-
-const ReactionIcon = ({ pathFill, size, supportedReactions, type }: ReactionIconProps) => {
-  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
-  return <Icon height={size} pathFill={pathFill} width={size} />;
-};
-
-export const OverlayReactionsItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  OverlayReactionsAvatar,
-  reaction,
-  supportedReactions,
-}: OverlayReactionsItemProps<StreamChatGenerics>) => {
-  const { id, name, type } = reaction;
-  const {
-    theme: {
-      colors: { accent_blue, black, grey_gainsboro, white },
-      overlay: {
-        reactions: {
-          avatarContainer,
-          avatarName,
-          avatarSize,
-          radius,
-          reactionBubble,
-          reactionBubbleBackground,
-          reactionBubbleBorderRadius,
-        },
-      },
-    },
-  } = useTheme();
-  const { client } = useChatContext();
-  const alignment = client.userID && client.userID === id ? 'right' : 'left';
-  const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
-  const y = avatarSize - radius;
-
-  const left =
-    alignment === 'left'
-      ? x -
-        (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
-        radius
-      : x - radius;
-  const top =
-    y -
-    radius -
-    (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
-
-  return (
-    <View style={[styles.avatarContainer, avatarContainer]}>
-      <View style={styles.avatarInnerContainer}>
-        <OverlayReactionsAvatar reaction={reaction} size={avatarSize} />
-        <View style={[StyleSheet.absoluteFill]}>
-          <Svg>
-            <Circle
-              cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
-              cy={y - radius * 2 - radius / 4}
-              fill={alignment === 'left' ? grey_gainsboro : white}
-              r={radius * 2}
-              stroke={alignment === 'left' ? white : grey_gainsboro}
-              strokeWidth={radius / 2}
-            />
-            <Circle
-              cx={x}
-              cy={y}
-              fill={alignment === 'left' ? grey_gainsboro : white}
-              r={radius}
-              stroke={alignment === 'left' ? white : grey_gainsboro}
-              strokeWidth={radius / 2}
-            />
-          </Svg>
-          <View
-            style={[
-              styles.reactionBubbleBackground,
-              {
-                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
-                borderColor: alignment === 'left' ? white : grey_gainsboro,
-                borderWidth: radius / 2,
-                left,
-                top,
-              },
-              reactionBubbleBackground,
-            ]}
-          />
-          <View style={[StyleSheet.absoluteFill]}>
-            <Svg>
-              <Circle
-                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
-                cy={y - radius * 2 - radius / 4}
-                fill={alignment === 'left' ? grey_gainsboro : white}
-                r={radius * 2 - radius / 2}
-              />
-            </Svg>
-          </View>
-          <View
-            style={[
-              styles.reactionBubble,
-              {
-                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
-                height:
-                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
-                left,
-                top,
-                width:
-                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
-              },
-              reactionBubble,
-            ]}
-          >
-            <ReactionIcon
-              pathFill={accent_blue}
-              size={(reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) / 2}
-              supportedReactions={supportedReactions}
-              type={type}
-            />
-          </View>
-        </View>
-      </View>
-      <View style={styles.avatarNameContainer}>
-        <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
-          {name}
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  avatarContainer: {
-    padding: 8,
-  },
-  avatarInnerContainer: {
-    alignSelf: 'center',
-  },
-  avatarName: {
-    flex: 1,
-    fontSize: 12,
-    fontWeight: '700',
-    paddingTop: 6,
-    textAlign: 'center',
-  },
-  avatarNameContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    flexGrow: 1,
-  },
-  reactionBubble: {
-    alignItems: 'center',
-    borderRadius: 24,
-    justifyContent: 'center',
-    position: 'absolute',
-  },
-  reactionBubbleBackground: {
-    borderRadius: 24,
-    height: 24,
-    position: 'absolute',
-    width: 24,
-  },
-});

package/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx

@@ -1,44 +0,0 @@
-import type { ViewStyle } from 'react-native';
-import type { TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-import {
-  runOnJS,
-  useAnimatedGestureHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-import type { MessageActionListItemProps } from '../MessageActionListItem';
-
-export const useMessageActionAnimation = ({
-  action,
-  activeOpacity = 0.2,
-}: Pick<MessageActionListItemProps, 'action'> & {
-  activeOpacity?: number;
-}) => {
-  const opacity = useSharedValue(1);
-
-  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
-    {
-      onEnd: () => {
-        runOnJS(action)();
-      },
-      onFinish: () => {
-        opacity.value = 1;
-      },
-      onStart: () => {
-        opacity.value = activeOpacity;
-      },
-    },
-    [action],
-  );
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
-    opacity: opacity.value,
-  }));
-
-  return {
-    animatedStyle,
-    onTap,
-    opacity,
-  };
-};

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,147 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react';
-
-import type { ImageProps } from 'react-native';
-
-import type { Attachment, TranslationLanguages } from 'stream-chat';
-
-import { useResettableState } from './hooks/useResettableState';
-
-import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
-import type {
-  MessageActionListItemProps,
-  MessageActionType,
-} from '../../components/MessageOverlay/MessageActionListItem';
-import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
-import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
-import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import type { ReactionData } from '../../utils/utils';
-import type { ChatContextValue } from '../chatContext/ChatContext';
-import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
-import type { MessagesContextValue } from '../messagesContext/MessagesContext';
-import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
-import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
-
-import { getDisplayName } from '../utils/getDisplayName';
-import { isTestEnvironment } from '../utils/isTestEnvironment';
-
-export type MessageOverlayData<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  alignment?: Alignment;
-  chatContext?: ChatContextValue<StreamChatGenerics>;
-  clientId?: string;
-  files?: Attachment<StreamChatGenerics>[];
-  groupStyles?: GroupType[];
-  handleReaction?: (reactionType: string) => Promise<void>;
-  ImageComponent?: React.ComponentType<ImageProps>;
-  images?: Attachment<StreamChatGenerics>[];
-  message?: MessageType<StreamChatGenerics>;
-  messageActions?: MessageActionType[];
-  messageContext?: MessageContextValue<StreamChatGenerics>;
-  messageReactionTitle?: string;
-  messagesContext?: MessagesContextValue<StreamChatGenerics>;
-  onlyEmojis?: boolean;
-  otherAttachments?: Attachment<StreamChatGenerics>[];
-  OverlayReactionList?: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
-  ownCapabilities?: OwnCapabilitiesContextValue;
-  supportedReactions?: ReactionData[];
-  threadList?: boolean;
-  userLanguage?: TranslationLanguages;
-  videos?: Attachment<StreamChatGenerics>[];
-};
-
-export type MessageOverlayContextValue<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  /**
-   * Custom UI component for rendering [message actions](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png) in overlay.
-   *
-   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActions.tsx)
-   */
-  MessageActionList: React.ComponentType<MessageActionListProps<StreamChatGenerics>>;
-  MessageActionListItem: React.ComponentType<MessageActionListItemProps<StreamChatGenerics>>;
-  /**
-   * Custom UI component for rendering [reaction selector](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png) in overlay (which shows up on long press on message).
-   *
-   * **Default** [OverlayReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/OverlayReactionList.tsx)
-   */
-  OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
-  /**
-   * Custom UI component for rendering [reactions list](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png), in overlay (which shows up on long press on message).
-   *
-   * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/OverlayReactions.tsx)
-   */
-  OverlayReactions: React.ComponentType<OverlayReactionsProps<StreamChatGenerics>>;
-  OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
-  reset: () => void;
-  setData: React.Dispatch<React.SetStateAction<MessageOverlayData<StreamChatGenerics>>>;
-  data?: MessageOverlayData<StreamChatGenerics>;
-};
-
-export const MessageOverlayContext = React.createContext(
-  DEFAULT_BASE_CONTEXT_VALUE as MessageOverlayContextValue,
-);
-
-export const MessageOverlayProvider = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
-  children,
-  value,
-}: PropsWithChildren<{
-  value?: MessageOverlayContextValue<StreamChatGenerics>;
-}>) => {
-  const messageOverlayContext = useResettableState(value);
-  return (
-    <MessageOverlayContext.Provider
-      value={messageOverlayContext as unknown as MessageOverlayContextValue}
-    >
-      {children}
-    </MessageOverlayContext.Provider>
-  );
-};
-
-export const useMessageOverlayContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->() => {
-  const contextValue = useContext(
-    MessageOverlayContext,
-  ) as unknown as MessageOverlayContextValue<StreamChatGenerics>;
-
-  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
-    throw new Error(
-      `The useMessageOverlayContext hook was called outside the MessageOverlayContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
-    );
-  }
-
-  return contextValue;
-};
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withMessageOverlayContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withMessageOverlayContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>> => {
-  const WithMessageOverlayContextComponent = (
-    props: Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>,
-  ) => {
-    const messageContext = useMessageOverlayContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...messageContext} />;
-  };
-  WithMessageOverlayContextComponent.displayName = `WithMessageOverlayContext${getDisplayName(
-    Component,
-  )}`;
-  return WithMessageOverlayContextComponent;
-};

package/src/contexts/messageOverlayContext/hooks/useResettableState.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Button, Text } from 'react-native';
-
-import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
-
-import { useResettableState } from './useResettableState';
-
-const TestComponent = () => {
-  const { data, reset, setData } = useResettableState(0);
-
-  return (
-    <>
-      <Text testID='value'>{`${data}`}</Text>
-      <Button
-        onPress={() => {
-          setData(data + 1);
-        }}
-        testID='increment'
-        title='Super useful incrementer'
-      />
-      <Button
-        onPress={() => {
-          reset();
-        }}
-        testID='reset'
-        title='Oh no, go back!'
-      />
-    </>
-  );
-};
-
-const waitForOptions = {
-  timeout: 1000,
-};
-
-test('useResettableState can be reset to its initial state', async () => {
-  const user = userEvent.setup();
-  render(<TestComponent />);
-
-  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
-
-  user.press(screen.getByTestId('increment'));
-  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('1'), waitForOptions);
-
-  user.press(screen.getByTestId('reset'));
-  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
-});

package/src/contexts/messageOverlayContext/hooks/useResettableState.ts

@@ -1,22 +0,0 @@
-import { useState } from 'react';
-
-import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
-
-/**
- * Wrapper around useState that provides a `reset`
- * function to reset the state to its initial value.
- *
- * Will not set state after being unmounted.
- * */
-export const useResettableState = <T>(values: T) => {
-  const [data, setData] = useState(values);
-  const isMounted = useIsMountedRef();
-
-  const reset = () => {
-    if (isMounted.current) {
-      setData(values);
-    }
-  };
-
-  return { data, reset, setData };
-};

package/src/utils/StreamChatRN.ts

@@ -1,27 +0,0 @@
-type StreamConfig = {
-  resizableCDNHosts: string[];
-};
-const DEFAULT_GLOBAL_STREAM_CONFIG = {
-  resizableCDNHosts: ['.stream-io-cdn.com'],
-};
-
-/**
- * StreamChatRN - Global config for the RN Chat SDK
- * This config is used to enable/disable features and options for the SDK.
- *
- * @deprecated Use the `resizableCDNHosts` prop in the `Chat` component, instead. StreamChatRN will not be exposed starting the next major release.
- */
-export class StreamChatRN {
-  /**
-   * Global config for StreamChatRN.
-   */
-  static config: StreamConfig = DEFAULT_GLOBAL_STREAM_CONFIG;
-  /**
-   * Set global config for StreamChatRN allows you to set wished CDN hosts for resizing images.
-   * This function accepts an config object that will be merged with the default config.
-   * @example StreamChatRN.setConfig({ resizableCDNHosts: ['my-custom-cdn.com', 'my-other-cdn.com'] });
-   */
-  static setConfig(config: Partial<StreamConfig>) {
-    this.config = { ...this.config, ...config };
-  }
-}