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

package/src/contexts/themeContext/utils/theme.ts

@@ -4,24 +4,27 @@ import type { CircleProps, StopProps } from 'react-native-svg';
 import type { IconProps } from '../../../icons/utils/base';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
-export const BASE_AVATAR_SIZE = 32;
 
 export const Colors = {
   accent_blue: '#005FFF',
+  accent_dark_blue: '#005DFF',
+  accent_error: '#FF3842',
   accent_green: '#20E070',
+  accent_info: '#1FE06F',
   accent_red: '#FF3742',
   bg_gradient_end: '#F7F7F7',
   bg_gradient_start: '#FCFCFC',
+  bg_user: '#F7F7F8',
   black: '#000000',
   blue_alice: '#E9F2FF',
   border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+  disabled: '#B4BBBA',
   grey: '#7A7A7A',
   grey_dark: '#72767E',
   grey_gainsboro: '#DBDBDB',
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
   label_bg_transparent: '#00000033', // 33 = 20% opacity
-  light_blue: '#E0F0FF',
   light_gray: '#DBDDE1',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
@@ -210,6 +213,7 @@ export type Theme = {
       centerContainer: ViewStyle;
       container: ViewStyle;
       dateText: TextStyle;
+      innerContainer: ViewStyle;
       leftContainer: ViewStyle;
       rightContainer: ViewStyle;
       usernameText: TextStyle;
@@ -241,7 +245,6 @@ export type Theme = {
     container: ViewStyle;
     loadingText: TextStyle;
   };
-
   messageInput: {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
@@ -410,42 +413,6 @@ export type Theme = {
     };
     typingIndicatorContainer: ViewStyle;
   };
-  messageMenu: {
-    actionList: {
-      container: ViewStyle;
-    };
-    actionListItem: {
-      container: ViewStyle;
-      icon: ViewStyle;
-      title: TextStyle;
-    };
-    reactionButton: {
-      filledColor: ColorValue;
-      unfilledColor: ColorValue;
-    };
-    reactionPicker: {
-      buttonContainer: ViewStyle;
-      container: ViewStyle;
-      contentContainer: ViewStyle;
-      reactionIconSize: number;
-    };
-    userReactions: {
-      avatarContainer: ViewStyle;
-      avatarName: TextStyle;
-      avatarSize: number;
-      container: ViewStyle;
-      contentContainer: ViewStyle;
-      flatlistColumnContainer: ViewStyle;
-      flatlistContainer: ViewStyle;
-      radius: number;
-      reactionBubble: ViewStyle;
-      reactionBubbleBackground: ViewStyle;
-      reactionBubbleBorderRadius: number;
-      reactionSelectorContainer: ViewStyle;
-      reactionsText: TextStyle;
-      title: TextStyle;
-    };
-  };
   messageSimple: {
     actions: {
       button: ViewStyle & {
@@ -521,7 +488,6 @@ export type Theme = {
       senderMessageBackgroundColor?: ColorValue;
       timestampText?: TextStyle;
     };
-    contentWrapper: ViewStyle;
     file: {
       container: ViewStyle;
       details: ViewStyle;
@@ -570,7 +536,6 @@ export type Theme = {
       shuffle: TextStyle;
       title: TextStyle;
     };
-    headerWrapper: ViewStyle;
     lastMessageContainer: ViewStyle;
     loadingIndicator: {
       container: ViewStyle;
@@ -582,28 +547,16 @@ export type Theme = {
       container: ViewStyle;
       label: TextStyle;
     };
-    reactionListBottom: {
-      contentContainer: ViewStyle;
-      item: {
-        container: ViewStyle;
-        countText: TextStyle;
-        icon: ViewStyle;
-        iconFillColor: ColorValue;
-        iconSize: number;
-        iconUnFillColor: ColorValue;
-      };
-    };
-    reactionListTop: {
+    reactionList: {
       container: ViewStyle;
-      item: {
-        container: ViewStyle;
-        icon: ViewStyle;
-        iconFillColor: ColorValue;
-        iconSize: number;
-        iconUnFillColor: ColorValue;
-        reactionSize: number;
-      };
-      position: number;
+      iconFillColor: ColorValue;
+      middleIcon: ViewStyle;
+      radius: number;
+      reactionBubble: ViewStyle;
+      reactionContainer: ViewStyle;
+      reactionCount: TextStyle;
+      reactionSize: number;
+      strokeSize: number;
     };
     replies: {
       avatar: ViewStyle;
@@ -625,12 +578,160 @@ export type Theme = {
       timeIcon: IconProps;
     };
     targetedMessageContainer: ViewStyle;
+    targetedMessageUnderlay: ViewStyle;
     videoThumbnail: {
       container: ViewStyle;
       roundedView: ViewStyle;
     };
     unreadUnderlayColor?: ColorValue;
   };
+  overlay: {
+    container: ViewStyle;
+    messageActions: {
+      actionContainer: ViewStyle;
+      icon: ViewStyle;
+      title: TextStyle;
+    };
+    messageActionsList: {
+      container: ViewStyle;
+    };
+    padding: number;
+    reactions: {
+      avatarContainer: ViewStyle;
+      avatarName: TextStyle;
+      avatarSize: number;
+      container: ViewStyle;
+      flatListContainer: ViewStyle;
+      radius: number;
+      reactionBubble: ViewStyle;
+      reactionBubbleBackground: ViewStyle;
+      reactionBubbleBorderRadius: number;
+      title: TextStyle;
+    };
+    reactionsList: {
+      radius: number;
+      reaction: ViewStyle;
+      reactionList: ViewStyle;
+      reactionListBorderRadius: number;
+      reactionSize: number;
+      selectedIcon: IconProps;
+      unSelectedIcon: IconProps;
+    };
+  };
+  poll: {
+    allOptions: {
+      listContainer: ViewStyle;
+      titleContainer: ViewStyle;
+      titleText: TextStyle;
+      wrapper: ViewStyle;
+    };
+    answersList: {
+      buttonContainer: ViewStyle;
+      container: ViewStyle;
+      item: {
+        answerText: TextStyle;
+        container: ViewStyle;
+        infoContainer: ViewStyle;
+        userInfoContainer: ViewStyle;
+      };
+    };
+    button: { container: ViewStyle; text: TextStyle };
+    createContent: {
+      addComment: {
+        title: TextStyle;
+        wrapper: ViewStyle;
+      };
+      anonymousPoll: {
+        title: TextStyle;
+        wrapper: ViewStyle;
+      };
+      headerContainer: ViewStyle;
+      maxVotes: {
+        input: TextStyle;
+        validationText: TextStyle;
+        wrapper: ViewStyle;
+      };
+      multipleAnswers: {
+        row: ViewStyle;
+        title: TextStyle;
+        wrapper: ViewStyle;
+      };
+      name: {
+        input: TextStyle;
+        title: TextStyle;
+      };
+      pollOptions: {
+        addOption: {
+          text: TextStyle;
+          wrapper: ViewStyle;
+        };
+        container: ViewStyle;
+        optionStyle: {
+          input: TextStyle;
+          validationErrorText: TextStyle;
+          wrapper: ViewStyle;
+        };
+        title: TextStyle;
+      };
+      scrollView: ViewStyle;
+      sendButton: ViewStyle;
+      suggestOption: {
+        title: TextStyle;
+        wrapper: ViewStyle;
+      };
+    };
+    fullResults: {
+      container: ViewStyle;
+      contentContainer: ViewStyle;
+      headerContainer: ViewStyle;
+      headerText: TextStyle;
+    };
+    inputDialog: {
+      button: TextStyle;
+      buttonContainer: ViewStyle;
+      container: ViewStyle;
+      input: TextStyle;
+      title: TextStyle;
+      transparentContainer: ViewStyle;
+    };
+    message: {
+      container: ViewStyle;
+      header: {
+        subtitle: TextStyle;
+        title: TextStyle;
+      };
+      option: {
+        container: ViewStyle;
+        progressBar: ViewStyle;
+        progressBarEmptyFill: string;
+        progressBarVotedFill: string;
+        progressBarWinnerFill: string;
+        text: TextStyle;
+        voteButtonActive: string;
+        voteButtonContainer: ViewStyle;
+        voteButtonInactive: string;
+        votesContainer: ViewStyle;
+        wrapper: ViewStyle;
+      };
+      optionsWrapper: ViewStyle;
+    };
+    modalHeader: {
+      container: ViewStyle;
+      title: TextStyle;
+    };
+    results: {
+      container: ViewStyle;
+      item: {
+        container: ViewStyle;
+        headerContainer: ViewStyle;
+        title: TextStyle;
+        voteCount: TextStyle;
+      };
+      scrollView: ViewStyle;
+      title: TextStyle;
+      vote: { container: ViewStyle; dateText: TextStyle; userName: TextStyle };
+    };
+  };
   progressControl: {
     container: ViewStyle;
     filledColor: ColorValue;
@@ -718,7 +819,7 @@ export const defaultTheme: Theme = {
     speedChangeButtonText: {},
   },
   avatar: {
-    BASE_AVATAR_SIZE,
+    BASE_AVATAR_SIZE: 32,
     container: {},
     image: {
       borderRadius: 16,
@@ -839,6 +940,7 @@ export const defaultTheme: Theme = {
       centerContainer: {},
       container: {},
       dateText: {},
+      innerContainer: {},
       leftContainer: {},
       rightContainer: {},
       usernameText: {},
@@ -1021,42 +1123,6 @@ export const defaultTheme: Theme = {
     },
     typingIndicatorContainer: {},
   },
-  messageMenu: {
-    actionList: {
-      container: {},
-    },
-    actionListItem: {
-      container: {},
-      icon: {},
-      title: {},
-    },
-    reactionButton: {
-      filledColor: Colors.accent_blue,
-      unfilledColor: Colors.grey,
-    },
-    reactionPicker: {
-      buttonContainer: {},
-      container: {},
-      contentContainer: {},
-      reactionIconSize: 24,
-    },
-    userReactions: {
-      avatarContainer: {},
-      avatarName: {},
-      avatarSize: 64,
-      container: {},
-      contentContainer: {},
-      flatlistColumnContainer: {},
-      flatlistContainer: {},
-      radius: 2,
-      reactionBubble: {},
-      reactionBubbleBackground: {},
-      reactionBubbleBorderRadius: 24,
-      reactionSelectorContainer: {},
-      reactionsText: {},
-      title: {},
-    },
-  },
   messageSimple: {
     actions: {
       button: {},
@@ -1072,8 +1138,8 @@ export const defaultTheme: Theme = {
         marginLeft: 8,
       },
       spacer: {
-        height: BASE_AVATAR_SIZE,
-        width: BASE_AVATAR_SIZE, // same as BASE_AVATAR_SIZE
+        height: 28,
+        width: 32, // same as BASE_AVATAR_SIZE
       },
     },
     card: {
@@ -1152,17 +1218,16 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
-      receiverMessageBackgroundColor: Colors.grey_gainsboro,
+      receiverMessageBackgroundColor: Colors.white,
       replyBorder: {},
       replyContainer: {},
-      senderMessageBackgroundColor: Colors.light_blue,
+      senderMessageBackgroundColor: Colors.grey_gainsboro,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },
       timestampText: {},
       wrapper: {},
     },
-    contentWrapper: {},
     file: {
       container: {},
       details: {},
@@ -1206,7 +1271,6 @@ export const defaultTheme: Theme = {
       shuffle: {},
       title: {},
     },
-    headerWrapper: {},
     lastMessageContainer: {},
     loadingIndicator: {
       container: {},
@@ -1218,28 +1282,16 @@ export const defaultTheme: Theme = {
       container: {},
       label: {},
     },
-    reactionListBottom: {
-      contentContainer: {},
-      item: {
-        container: {},
-        countText: {},
-        icon: {},
-        iconFillColor: Colors.accent_blue,
-        iconSize: 16,
-        iconUnFillColor: Colors.grey,
-      },
-    },
-    reactionListTop: {
+    reactionList: {
       container: {},
-      item: {
-        container: {},
-        icon: {},
-        iconFillColor: Colors.accent_blue,
-        iconSize: 24,
-        iconUnFillColor: Colors.grey,
-        reactionSize: 24,
-      },
-      position: 16,
+      iconFillColor: '',
+      middleIcon: {},
+      radius: 2, // not recommended to change this
+      reactionBubble: {},
+      reactionContainer: {},
+      reactionCount: {},
+      reactionSize: 24,
+      strokeSize: 1, // not recommended to change this
     },
     replies: {
       avatar: {},
@@ -1269,12 +1321,160 @@ export const defaultTheme: Theme = {
       },
     },
     targetedMessageContainer: {},
+    targetedMessageUnderlay: {},
     unreadUnderlayColor: Colors.bg_gradient_start,
     videoThumbnail: {
       container: {},
       roundedView: {},
     },
   },
+  overlay: {
+    container: {},
+    messageActions: {
+      actionContainer: {},
+      icon: {},
+      title: {},
+    },
+    messageActionsList: {
+      container: {},
+    },
+    padding: 8,
+    reactions: {
+      avatarContainer: {},
+      avatarName: {},
+      avatarSize: 64,
+      container: {},
+      flatListContainer: {},
+      radius: 2,
+      reactionBubble: {},
+      reactionBubbleBackground: {},
+      reactionBubbleBorderRadius: 24,
+      title: {},
+    },
+    reactionsList: {
+      radius: 2.5,
+      reaction: {},
+      reactionList: {},
+      reactionListBorderRadius: 24,
+      reactionSize: 24,
+      selectedIcon: {},
+      unSelectedIcon: {},
+    },
+  },
+  poll: {
+    allOptions: {
+      listContainer: {},
+      titleContainer: {},
+      titleText: {},
+      wrapper: {},
+    },
+    answersList: {
+      buttonContainer: {},
+      container: {},
+      item: {
+        answerText: {},
+        container: {},
+        infoContainer: {},
+        userInfoContainer: {},
+      },
+    },
+    button: { container: {}, text: {} },
+    createContent: {
+      addComment: {
+        title: {},
+        wrapper: {},
+      },
+      anonymousPoll: {
+        title: {},
+        wrapper: {},
+      },
+      headerContainer: {},
+      maxVotes: {
+        input: {},
+        validationText: {},
+        wrapper: {},
+      },
+      multipleAnswers: {
+        row: {},
+        title: {},
+        wrapper: {},
+      },
+      name: {
+        input: {},
+        title: {},
+      },
+      pollOptions: {
+        addOption: {
+          text: {},
+          wrapper: {},
+        },
+        container: {},
+        optionStyle: {
+          input: {},
+          validationErrorText: {},
+          wrapper: {},
+        },
+        title: {},
+      },
+      scrollView: {},
+      sendButton: {},
+      suggestOption: {
+        title: {},
+        wrapper: {},
+      },
+    },
+    fullResults: {
+      container: {},
+      contentContainer: {},
+      headerContainer: {},
+      headerText: {},
+    },
+    inputDialog: {
+      button: {},
+      buttonContainer: {},
+      container: {},
+      input: {},
+      title: {},
+      transparentContainer: {},
+    },
+    message: {
+      container: {},
+      header: {
+        subtitle: {},
+        title: {},
+      },
+      option: {
+        container: {},
+        progressBar: {},
+        progressBarEmptyFill: '',
+        progressBarVotedFill: '',
+        progressBarWinnerFill: '',
+        text: {},
+        voteButtonActive: '',
+        voteButtonContainer: {},
+        voteButtonInactive: '',
+        votesContainer: {},
+        wrapper: {},
+      },
+      optionsWrapper: {},
+    },
+    modalHeader: {
+      container: {},
+      title: {},
+    },
+    results: {
+      container: {},
+      item: {
+        container: {},
+        headerContainer: {},
+        title: {},
+        voteCount: {},
+      },
+      scrollView: {},
+      title: {},
+      vote: { container: {}, dateText: {}, userName: {} },
+    },
+  },
   progressControl: {
     container: {},
     filledColor: '',

package/src/contexts/threadContext/ThreadContext.tsx

@@ -3,9 +3,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 import { ChannelState, Thread } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ThreadType<
@@ -64,3 +65,29 @@ export const useThreadContext = <
 
   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 withThreadContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withThreadContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof ThreadContextValue<StreamChatGenerics>>> => {
+  const WithThreadContextComponent = (
+    props: Omit<P, keyof ThreadContextValue<StreamChatGenerics>>,
+  ) => {
+    const threadContext = useThreadContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...threadContext} />;
+  };
+  WithThreadContextComponent.displayName = `WithThreadContext${getDisplayName(Component)}`;
+  return WithThreadContextComponent;
+};

package/src/contexts/translationContext/TranslationContext.tsx

@@ -7,6 +7,8 @@ import type { Moment } from 'moment-timezone';
 
 import type { TranslationLanguages } from 'stream-chat';
 
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export const DEFAULT_USER_LANGUAGE: TranslationLanguages = 'en';
@@ -58,3 +60,30 @@ export const useTranslationContext = () => {
 
   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 withTranslationContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withTranslationContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<StreamChatGenerics>,
+): React.ComponentType<Omit<StreamChatGenerics, keyof TranslationContextValue>> => {
+  const WithTranslationContextComponent = (
+    props: Omit<StreamChatGenerics, keyof TranslationContextValue>,
+  ) => {
+    const translationContext = useTranslationContext();
+
+    return <Component {...(props as StreamChatGenerics)} {...translationContext} />;
+  };
+  WithTranslationContextComponent.displayName = `WithTranslationContext${getDisplayName(
+    Component as React.ComponentType,
+  )}`;
+  return WithTranslationContextComponent;
+};

package/src/contexts/typingContext/TypingContext.tsx

@@ -2,9 +2,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type TypingContextValue<
@@ -43,3 +44,29 @@ export const useTypingContext = <
 
   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 withTypingContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withTypingContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof TypingContextValue<StreamChatGenerics>>> => {
+  const WithTypingContextComponent = (
+    props: Omit<P, keyof TypingContextValue<StreamChatGenerics>>,
+  ) => {
+    const typingContext = useTypingContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...typingContext} />;
+  };
+  WithTypingContextComponent.displayName = `WithTypingContext${getDisplayName(Component)}`;
+  return WithTypingContextComponent;
+};