stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
+
+import {
+  isSuggestionCommand,
+  isSuggestionEmoji,
+  isSuggestionUser,
+  Suggestion,
+  SuggestionsContextValue,
+  useSuggestionsContext,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+
+type AutoCompleteSuggestionListComponentProps<
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+> = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
+  active: boolean;
+  data: Suggestion<Co, Us>[];
+  onSelect: (item: Suggestion<Co, Us>) => void;
+};
+
+export type AutoCompleteSuggestionListPropsWithContext<
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+> = Pick<
+  SuggestionsContextValue<Co, Us>,
+  'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'
+> &
+  AutoCompleteSuggestionListComponentProps<Co, Us>;
+
+const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
+  const { children, ...touchableOpacityProps } = props;
+  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
+};
+
+SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
+
+export const AutoCompleteSuggestionListWithContext = <
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
+) => {
+  const {
+    active,
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    data,
+    onSelect,
+    queryText,
+    triggerType,
+  } = props;
+
+  const {
+    theme: {
+      messageInput: {
+        container: { maxHeight },
+        suggestions: { item: itemStyle },
+        suggestionsListContainer: { flatlist },
+      },
+    },
+  } = useTheme();
+
+  const renderItem = ({ index, item }: { index: number; item: Suggestion<Co, Us> }) => {
+    switch (triggerType) {
+      case 'mention':
+        if (isSuggestionUser(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[
+                {
+                  paddingBottom: index === data.length - 1 ? 8 : 0,
+                  paddingTop: index === 0 ? 8 : 0,
+                },
+                itemStyle,
+              ]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      case 'command':
+        if (isSuggestionCommand(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[itemStyle]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      case 'emoji':
+        if (isSuggestionEmoji(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[itemStyle]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      default:
+        return null;
+    }
+  };
+
+  if (!active || data.length === 0) return null;
+
+  return (
+    <FlatList
+      data={data}
+      keyboardShouldPersistTaps='always'
+      keyExtractor={(item, index) =>
+        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
+      }
+      ListHeaderComponent={
+        AutoCompleteSuggestionHeader ? (
+          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
+        ) : null
+      }
+      renderItem={renderItem}
+      style={[flatlist, { maxHeight }]}
+    />
+  );
+};
+
+const areEqual = <Co extends string = DefaultCommandType, Us extends UnknownType = DefaultUserType>(
+  prevProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
+  nextProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
+) => {
+  const {
+    active: prevActive,
+    data: prevData,
+    queryText: prevQueryText,
+    triggerType: prevType,
+  } = prevProps;
+  const {
+    active: nextActive,
+    data: nextData,
+    queryText: nextQueryText,
+    triggerType: nextType,
+  } = nextProps;
+
+  const activeEqual = prevActive === nextActive;
+  if (!activeEqual) return false;
+
+  const queryTextEqual = prevQueryText === nextQueryText;
+  if (!queryTextEqual) return false;
+
+  const dataEqual = prevData === nextData;
+  if (!dataEqual) return false;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionList = React.memo(
+  AutoCompleteSuggestionListWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionListWithContext;
+
+export type AutoCompleteSuggestionListProps<
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+> = AutoCompleteSuggestionListComponentProps<Co, Us> & {
+  AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
+  AutoCompleteSuggestionItem?: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
+};
+
+export const AutoCompleteSuggestionList = <
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionListProps<Co, Us>,
+) => {
+  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =
+    useSuggestionsContext<Co, Us>();
+  return (
+    <MemoizedAutoCompleteSuggestionList
+      {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}
+      {...props}
+    />
+  );
+};
+
+AutoCompleteSuggestionList.displayName =
+  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js

@@ -1,18 +1,16 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
-
-import { AutoCompleteInput } from '../AutoCompleteInput';
 
-import { Chat } from '../../Chat/Chat';
-
-import { ACITriggerSettings } from '../../../utils/utils';
+import { render, waitFor } from '@testing-library/react-native';
 
 import { SuggestionsProvider } from '../../../contexts/suggestionsContext/SuggestionsContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { ACITriggerSettings } from '../../../utils/utils';
+import { Chat } from '../../Chat/Chat';
+import { AutoCompleteInput } from '../AutoCompleteInput';
 
 describe('AutoCompleteInput', () => {
   const clientUser = generateUser();
@@ -58,7 +56,7 @@ describe('AutoCompleteInput', () => {
       openSuggestions: jest.fn(),
     };
 
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { queryByTestId, rerender } = render(getComponent(props));
 
@@ -72,8 +70,6 @@ describe('AutoCompleteInput', () => {
 
     await waitFor(() => {
       expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-      expect(props.closeSuggestions).toHaveBeenCalledTimes(0);
-      expect(props.openSuggestions).toHaveBeenCalledTimes(1);
     });
 
     rerender(getComponent({ ...props, text: '' }));
@@ -81,8 +77,6 @@ describe('AutoCompleteInput', () => {
 
     await waitFor(() => {
       expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-      expect(props.closeSuggestions).toHaveBeenCalledTimes(1);
-      expect(props.openSuggestions).toHaveBeenCalledTimes(1);
     });
   });
 

package/src/components/Avatar/Avatar.tsx

@@ -1,16 +1,9 @@
 import React, { useState } from 'react';
-import {
-  Image,
-  ImageStyle,
-  PixelRatio,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
@@ -103,7 +96,11 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
                 ? imageProp?.includes(streamCDN)
                   ? imageProp
                   : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`
-                : imageProp.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(size)}`),
+                : getResizedImageUrl({
+                    height: size,
+                    url: imageProp,
+                    width: size,
+                  }),
           }}
           style={[
             image,

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Image, PixelRatio, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
@@ -69,18 +70,6 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
             : ''
         }`;
     if (imagesOrNames.length <= 2) {
-      Image.prefetch(
-        imageError
-          ? url
-          : url.replace(
-              'h=%2A',
-              `h=${PixelRatio.getPixelSizeForLayoutSize(
-                imagesOrNames.length <= 2 ? size : size / 2,
-              )}`,
-            ),
-      ).catch(() => {
-        // do nothing, not a big deal that prefetch failed
-      });
       returnArray[0] = [
         ...(returnArray[0] || []),
         {
@@ -91,13 +80,6 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
         },
       ];
     } else {
-      Image.prefetch(
-        imageError
-          ? url
-          : url.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(size / 2)}`),
-      )?.catch(() => {
-        // do nothing, not a big deal that prefetch failed
-      });
       if (index < 2) {
         returnArray[0] = [
           ...(returnArray[0] || []),
@@ -156,7 +138,11 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
                       : `${randomImageBaseUrl}${
                           name ? `?name=${getInitials(name)}&size=${height}` : ''
                         }`
-                    : url.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(height)}`),
+                    : getResizedImageUrl({
+                        height,
+                        url,
+                        width,
+                      }),
               }}
               style={[
                 image,

package/src/components/Avatar/__tests__/Avatar.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
 
-import { Avatar } from '../Avatar';
+import { render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { Avatar } from '../Avatar';
 
 describe('Avatar', () => {
   it('should render an image with no name and default size', async () => {
@@ -47,32 +47,4 @@ describe('Avatar', () => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
     });
   });
-
-  it('should render an avatar with a random image and no size', async () => {
-    const { queryByTestId } = render(
-      <ThemeProvider>
-        <Avatar name='Test User' />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image').props.source).toMatchObject({
-        uri: 'https://getstream.io/random_png/?name=T U&size=undefined',
-      });
-    });
-  });
-
-  it('should render an avatar with a random image and custom size', async () => {
-    const { queryByTestId } = render(
-      <ThemeProvider>
-        <Avatar name='Test User' size={20} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image').props.source).toMatchObject({
-        uri: 'https://getstream.io/random_png/?name=T U&size=20',
-      });
-    });
-  });
 });