stream-chat-react-native-core 6.6.8-beta.3 → 7.0.0-rc.2

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -27,7 +27,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import type { Emoji } from '../../emoji-data';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+
 import {
   isCommandTrigger,
   isEmojiTrigger,
@@ -51,11 +51,9 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
-type AutoCompleteInputPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'giphyEnabled'> &
+type AutoCompleteInputPropsWithContext = Pick<ChannelContextValue, 'giphyEnabled'> &
   Pick<
-    MessageInputContextValue<StreamChatGenerics>,
+    MessageInputContextValue,
     | 'additionalTextInputProps'
     | 'autoCompleteSuggestionsLimit'
     | 'giphyActive'
@@ -69,10 +67,7 @@ type AutoCompleteInputPropsWithContext<
     | 'text'
     | 'triggerSettings'
   > &
-  Pick<
-    SuggestionsContextValue<StreamChatGenerics>,
-    'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
-  > &
+  Pick<SuggestionsContextValue, 'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'> &
   Pick<TranslationContextValue, 't'> & {
     /**
      * This is currently passed in from MessageInput to avoid rerenders
@@ -81,15 +76,9 @@ type AutoCompleteInputPropsWithContext<
     cooldownActive?: boolean;
   };
 
-export type AutoCompleteInputProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AutoCompleteInputPropsWithContext<StreamChatGenerics>>;
+export type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
 
-const AutoCompleteInputWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
-) => {
+const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
@@ -160,7 +149,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionUser<StreamChatGenerics>['name'],
+          query as SuggestionUser['name'],
           text,
           (data, queryCallback) => {
             if (query === queryCallback) {
@@ -182,7 +171,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionCommand<StreamChatGenerics>['name'],
+          query as SuggestionCommand['name'],
           text,
           (data, queryCallback) => {
             if (query !== queryCallback) {
@@ -226,13 +215,7 @@ const AutoCompleteInputWithContext = <
     selectionEnd.current = end;
   };
 
-  const onSelectSuggestion = ({
-    item,
-    trigger,
-  }: {
-    item: Suggestion<StreamChatGenerics>;
-    trigger: Trigger;
-  }) => {
+  const onSelectSuggestion = ({ item, trigger }: { item: Suggestion; trigger: Trigger }) => {
     if (!trigger || !triggerSettings[trigger]) {
       return;
     }
@@ -434,9 +417,9 @@ const AutoCompleteInputWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
-  nextProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: AutoCompleteInputPropsWithContext,
+  nextProps: AutoCompleteInputPropsWithContext,
 ) => {
   const {
     cooldownActive: prevCooldownActive,
@@ -479,12 +462,8 @@ const MemoizedAutoCompleteInput = React.memo(
   areEqual,
 ) as typeof AutoCompleteInputWithContext;
 
-export const AutoCompleteInput = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteInputProps<StreamChatGenerics>,
-) => {
-  const { giphyEnabled } = useChannelContext<StreamChatGenerics>();
+export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
+  const { giphyEnabled } = useChannelContext();
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
@@ -498,9 +477,8 @@ export const AutoCompleteInput = <
     setInputBoxRef,
     text,
     triggerSettings,
-  } = useMessageInputContext<StreamChatGenerics>();
-  const { closeSuggestions, openSuggestions, updateSuggestions } =
-    useSuggestionsContext<StreamChatGenerics>();
+  } = useMessageInputContext();
+  const { closeSuggestions, openSuggestions, updateSuggestions } = useSuggestionsContext();
   const { t } = useTranslationContext();
 
   return (

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -4,7 +4,6 @@ import { StyleSheet, View } from 'react-native';
 import type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   iconContainer: {
@@ -17,12 +16,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AutoCompleteSuggestionCommandIcon = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AutoCompleteSuggestionCommandIcon = ({
   name,
 }: {
-  name: SuggestionCommand<StreamChatGenerics>['name'];
+  name: SuggestionCommand['name'];
 }) => {
   const {
     theme: {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -7,11 +7,11 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 
 import { Lightning } from '../../icons/Lightning';
 import { Smile } from '../../icons/Smile';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
-export type AutoCompleteSuggestionHeaderPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<SuggestionsContextValue<StreamChatGenerics>, 'triggerType' | 'queryText'>;
+export type AutoCompleteSuggestionHeaderPropsWithContext = Pick<
+  SuggestionsContextValue,
+  'triggerType' | 'queryText'
+>;
 
 const styles = StyleSheet.create({
   container: {
@@ -25,12 +25,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const AutoCompleteSuggestionHeaderWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+const AutoCompleteSuggestionHeaderWithContext = ({
   queryText,
   triggerType,
-}: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>) => {
+}: AutoCompleteSuggestionHeaderPropsWithContext) => {
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -68,9 +66,9 @@ const AutoCompleteSuggestionHeaderWithContext = <
   }
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
-  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: AutoCompleteSuggestionHeaderPropsWithContext,
+  nextProps: AutoCompleteSuggestionHeaderPropsWithContext,
 ) => {
   const { queryText: prevQueryText, triggerType: prevType } = prevProps;
   const { queryText: nextQueryText, triggerType: nextType } = nextProps;
@@ -92,15 +90,11 @@ const MemoizedAutoCompleteSuggestionHeader = React.memo(
   areEqual,
 ) as typeof AutoCompleteSuggestionHeaderWithContext;
 
-export type AutoCompleteSuggestionHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>;
+export type AutoCompleteSuggestionHeaderProps = AutoCompleteSuggestionHeaderPropsWithContext;
 
-export const AutoCompleteSuggestionHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteSuggestionHeaderProps<StreamChatGenerics>,
-) => <MemoizedAutoCompleteSuggestionHeader {...props} />;
+export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeaderProps) => (
+  <MemoizedAutoCompleteSuggestionHeader {...props} />
+);
 
 AutoCompleteSuggestionHeader.displayName =
   'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -12,13 +12,14 @@ import type {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Emoji } from '../../emoji-data';
 import { AtMentions } from '../../icons/AtMentions';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+
 import { Avatar } from '../Avatar/Avatar';
 
-export type AutoCompleteSuggestionItemPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<SuggestionsContextValue, 'triggerType'> & {
-  itemProps: Suggestion<StreamChatGenerics>;
+export type AutoCompleteSuggestionItemPropsWithContext = Pick<
+  SuggestionsContextValue,
+  'triggerType'
+> & {
+  itemProps: Suggestion;
 };
 
 const styles = StyleSheet.create({
@@ -55,12 +56,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const AutoCompleteSuggestionItemWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+const AutoCompleteSuggestionItemWithContext = ({
   itemProps,
   triggerType,
-}: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>) => {
+}: AutoCompleteSuggestionItemPropsWithContext) => {
   const {
     theme: {
       colors: { accent_blue, black, grey },
@@ -75,7 +74,7 @@ const AutoCompleteSuggestionItemWithContext = <
   } = useTheme();
 
   if (triggerType === 'mention') {
-    const { id, image, name, online } = itemProps as SuggestionUser<StreamChatGenerics>;
+    const { id, image, name, online } = itemProps as SuggestionUser;
     return (
       <View style={[styles.container, mentionContainer]}>
         <Avatar image={image} name={name} online={online} size={avatarSize} />
@@ -100,7 +99,7 @@ const AutoCompleteSuggestionItemWithContext = <
       </View>
     );
   } else if (triggerType === 'command') {
-    const { args, name } = itemProps as SuggestionCommand<StreamChatGenerics>;
+    const { args, name } = itemProps as SuggestionCommand;
     return (
       <View style={[styles.container, commandContainer]}>
         <AutoCompleteSuggestionCommandIcon name={name} />
@@ -117,9 +116,9 @@ const AutoCompleteSuggestionItemWithContext = <
   }
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
-  nextProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: AutoCompleteSuggestionItemPropsWithContext,
+  nextProps: AutoCompleteSuggestionItemPropsWithContext,
 ) => {
   const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
   const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
@@ -139,15 +138,11 @@ const MemoizedAutoCompleteSuggestionItem = React.memo(
   areEqual,
 ) as typeof AutoCompleteSuggestionItemWithContext;
 
-export type AutoCompleteSuggestionItemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>;
+export type AutoCompleteSuggestionItemProps = AutoCompleteSuggestionItemPropsWithContext;
 
-export const AutoCompleteSuggestionItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteSuggestionItemProps<StreamChatGenerics>,
-) => <MemoizedAutoCompleteSuggestionItem {...props} />;
+export const AutoCompleteSuggestionItem = (props: AutoCompleteSuggestionItemProps) => (
+  <MemoizedAutoCompleteSuggestionItem {...props} />
+);
 
 AutoCompleteSuggestionItem.displayName =
   'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -20,25 +20,23 @@ import {
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 50;
 
-type AutoCompleteSuggestionListComponentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
+type AutoCompleteSuggestionListComponentProps = Pick<
+  SuggestionsContextValue,
+  'queryText' | 'triggerType'
+> & {
   active: boolean;
-  data: Suggestion<StreamChatGenerics>[];
-  onSelect: (item: Suggestion<StreamChatGenerics>) => void;
+  data: Suggestion[];
+  onSelect: (item: Suggestion) => void;
 };
 
-export type AutoCompleteSuggestionListPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  SuggestionsContextValue<StreamChatGenerics>,
+export type AutoCompleteSuggestionListPropsWithContext = Pick<
+  SuggestionsContextValue,
   'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'
 > &
-  AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
+  AutoCompleteSuggestionListComponentProps;
 
 const SuggestionsItem = (props: PressableProps) => {
   const { children, style: propsStyle, ...pressableProps } = props;
@@ -57,10 +55,8 @@ const SuggestionsItem = (props: PressableProps) => {
 
 SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
 
-export const AutoCompleteSuggestionListWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+export const AutoCompleteSuggestionListWithContext = (
+  props: AutoCompleteSuggestionListPropsWithContext,
 ) => {
   const [itemHeight, setItemHeight] = useState<number>(0);
   const {
@@ -98,7 +94,7 @@ export const AutoCompleteSuggestionListWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemHeight, data.length]);
 
-  const renderItem = ({ item }: { item: Suggestion<StreamChatGenerics> }) => {
+  const renderItem = ({ item }: { item: Suggestion }) => {
     switch (triggerType) {
       case 'command':
       case 'mention':
@@ -145,9 +141,9 @@ export const AutoCompleteSuggestionListWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
-  nextProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: AutoCompleteSuggestionListPropsWithContext,
+  nextProps: AutoCompleteSuggestionListPropsWithContext,
 ) => {
   const {
     active: prevActive,
@@ -190,22 +186,13 @@ const MemoizedAutoCompleteSuggestionList = React.memo(
   areEqual,
 ) as typeof AutoCompleteSuggestionListWithContext;
 
-export type AutoCompleteSuggestionListProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = AutoCompleteSuggestionListComponentProps<StreamChatGenerics> & {
+export type AutoCompleteSuggestionListProps = AutoCompleteSuggestionListComponentProps & {
   AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
-  AutoCompleteSuggestionItem?: React.ComponentType<
-    AutoCompleteSuggestionItemProps<StreamChatGenerics>
-  >;
+  AutoCompleteSuggestionItem?: React.ComponentType<AutoCompleteSuggestionItemProps>;
 };
 
-export const AutoCompleteSuggestionList = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteSuggestionListProps<StreamChatGenerics>,
-) => {
-  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =
-    useSuggestionsContext<StreamChatGenerics>();
+export const AutoCompleteSuggestionList = (props: AutoCompleteSuggestionListProps) => {
+  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } = useSuggestionsContext();
 
   return (
     <MemoizedAutoCompleteSuggestionList

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import {
   Image,
   ImageProps,
@@ -83,34 +83,6 @@ export const Avatar = (props: AvatarProps) => {
 
   const { isLoadingImageError, setLoadingImageError } = useLoadingImage();
 
-  const onError = useCallback(() => {
-    setLoadingImageError(true);
-  }, [setLoadingImageError]);
-
-  const uri = useMemo(() => {
-    let imageUrl;
-    if (
-      !imageProp ||
-      imageProp.includes(randomImageBaseUrl) ||
-      imageProp.includes(randomSvgBaseUrl)
-    ) {
-      if (imageProp?.includes(streamCDN)) {
-        imageUrl = imageProp;
-      } else {
-        imageUrl = `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`;
-      }
-    } else {
-      imageUrl = getResizedImageUrl({
-        height: size,
-        resizableCDNHosts,
-        url: imageProp,
-        width: size,
-      });
-    }
-
-    return imageUrl;
-  }, [imageProp, name, size, resizableCDNHosts]);
-
   return (
     <View>
       <View
@@ -136,10 +108,24 @@ export const Avatar = (props: AvatarProps) => {
           />
         ) : (
           <ImageComponent
-            accessibilityLabel={testID ?? 'Avatar Image'}
-            onError={onError}
+            accessibilityLabel={testID || 'Avatar Image'}
+            onError={() => setLoadingImageError(true)}
             source={{
-              uri,
+              uri:
+                !imageProp ||
+                imageProp.includes(randomImageBaseUrl) ||
+                imageProp.includes(randomSvgBaseUrl)
+                  ? imageProp?.includes(streamCDN)
+                    ? imageProp
+                    : `${randomImageBaseUrl}${
+                        name ? `?name=${getInitials(name)}&size=${size}` : ''
+                      }`
+                  : getResizedImageUrl({
+                      height: size,
+                      resizableCDNHosts,
+                      url: imageProp,
+                      width: size,
+                    }),
             }}
             style={[
               image,
@@ -153,7 +139,7 @@ export const Avatar = (props: AvatarProps) => {
                 : {},
               imageStyle,
             ]}
-            testID={testID ?? 'avatar-image'}
+            testID={testID || 'avatar-image'}
           />
         )}
       </View>