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

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Avatar } from '../Avatar/Avatar';
+import { AtMentions } from '../../icons/AtMentions';
+import type { DefaultCommandType, DefaultUserType } from '../../types/types';
+import type {
+  Suggestion,
+  SuggestionCommand,
+  SuggestionsContextValue,
+  SuggestionUser,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+import type { Emoji } from '../../emoji-data/compiled';
+
+export type AutoCompleteSuggestionItemPropsWithContext<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Pick<SuggestionsContextValue, 'triggerType'> & {
+  itemProps: Suggestion<Co, Us>;
+};
+
+const styles = StyleSheet.create({
+  args: {
+    fontSize: 14,
+  },
+  column: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingLeft: 8,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingBottom: 2,
+  },
+  tag: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  text: {
+    fontSize: 14,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingRight: 8,
+  },
+});
+
+const AutoCompleteSuggestionItemWithContext = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>({
+  itemProps,
+  triggerType,
+}: AutoCompleteSuggestionItemPropsWithContext<Co, Us>) => {
+  const {
+    theme: {
+      colors: { accent_blue, black, grey },
+      messageInput: {
+        suggestions: {
+          command: { args: argsStyle, container: commandContainer, title },
+          emoji: { container: emojiContainer, text },
+          mention: { avatarSize, column, container: mentionContainer, name: nameStyle },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'mention') {
+    const { id, image, name, online } = itemProps as SuggestionUser<Us>;
+    return (
+      <View style={[styles.container, mentionContainer]}>
+        <Avatar image={image} name={name} online={online} size={avatarSize} />
+        <View style={[styles.column, column]}>
+          <Text style={[styles.name, { color: black }, nameStyle]} testID='mentions-item-name'>
+            {name || id}
+          </Text>
+        </View>
+        <AtMentions pathFill={accent_blue} />
+      </View>
+    );
+  } else if (triggerType === 'emoji') {
+    const { name, unicode } = itemProps as Emoji;
+    return (
+      <View style={[styles.container, emojiContainer]}>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-unicode'>
+          {unicode}
+        </Text>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-name'>
+          {` ${name}`}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'command') {
+    const { args, name } = itemProps as SuggestionCommand<Co>;
+    return (
+      <View style={[styles.container, commandContainer]}>
+        <AutoCompleteSuggestionCommandIcon name={name} />
+        <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+          {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
+        </Text>
+        <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+          {`/${name} ${args}`}
+        </Text>
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  prevProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
+  nextProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
+) => {
+  const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
+  const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
+  const itemPropsEqual = prevItemProps === nextItemProps;
+  if (!itemPropsEqual) return false;
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionItem = React.memo(
+  AutoCompleteSuggestionItemWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionItemWithContext;
+
+export type AutoCompleteSuggestionItemProps<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = AutoCompleteSuggestionItemPropsWithContext<Co, Us>;
+
+export const AutoCompleteSuggestionItem = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionItemProps<Co, Us>,
+) => <MemoizedAutoCompleteSuggestionItem {...props} />;
+
+AutoCompleteSuggestionItem.displayName =
+  'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import {
+  isSuggestionCommand,
+  isSuggestionEmoji,
+  isSuggestionUser,
+  Suggestion,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+
+import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
+import {
+  SuggestionsContextValue,
+  useSuggestionsContext,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+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

@@ -72,8 +72,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 +79,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/GroupAvatar.tsx

@@ -69,18 +69,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 +79,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] || []),

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

@@ -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',
-      });
-    });
-  });
 });