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

package/src/components/AutoCompleteInput/CommandsHeader.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Lightning } from '../../icons/Lightning';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    padding: 8,
-  },
-  title: {
-    fontSize: 14,
-    paddingLeft: 8,
-  },
-});
-
-export const CommandsHeader: React.FC = () => {
-  const {
-    theme: {
-      colors: { accent_blue, grey },
-      messageInput: {
-        suggestions: {
-          commandsHeader: { container, title },
-        },
-      },
-    },
-  } = useTheme();
-  const { t } = useTranslationContext();
-
-  return (
-    <View style={[styles.container, container]}>
-      <Lightning pathFill={accent_blue} />
-      <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
-        {t('Instant Commands')}
-      </Text>
-    </View>
-  );
-};
-
-CommandsHeader.displayName = 'CommandsHeader{messageInput{suggestions{commandsHeader}}}';

package/src/components/AutoCompleteInput/EmojisHeader.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Smile } from '../../icons/Smile';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    padding: 8,
-  },
-  title: {
-    fontSize: 14,
-    paddingLeft: 8,
-  },
-});
-
-export type EmojisHeaderProps = { title: string };
-
-export const EmojisHeader: React.FC<EmojisHeaderProps> = ({ title = '' }) => {
-  const {
-    theme: {
-      colors: { accent_blue, grey },
-      messageInput: {
-        suggestions: {
-          emojisHeader: { container, title: titleStyle },
-        },
-      },
-    },
-  } = useTheme();
-  const { t } = useTranslationContext();
-
-  return (
-    <View style={[styles.container, container]}>
-      <Smile pathFill={accent_blue} />
-      <Text style={[styles.title, { color: grey }, titleStyle]} testID='emojis-header-title'>
-        {t('Emoji matching') + ` "${title}"`}
-      </Text>
-    </View>
-  );
-};
-
-EmojisHeader.displayName = 'EmojisHeader{messageInput{suggestions{emojisHeader}}}';

package/src/components/AutoCompleteInput/EmojisItem.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { Emoji } from '../../emoji-data/compiled';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 10,
-  },
-  text: {
-    fontSize: 14,
-  },
-});
-
-export type EmojisItemProps = {
-  /**
-   * A EmojiResponse of suggested EmojiTypes with these properties
-   *
-   * - name: Name of emoji
-   * - unicode: Emoji unicode value
-   */
-  item: Emoji;
-};
-
-export const EmojisItem: React.FC<EmojisItemProps> = ({ item: { name, unicode } }) => {
-  const {
-    theme: {
-      colors: { black },
-      messageInput: {
-        suggestions: {
-          emoji: { container, text },
-        },
-      },
-    },
-  } = useTheme();
-
-  return (
-    <View style={[styles.container, container]}>
-      <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>
-  );
-};
-
-EmojisItem.displayName = 'EmojisItem{messageInput{suggestions{emoji}}}';

package/src/components/AutoCompleteInput/MentionsItem.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { Avatar } from '../Avatar/Avatar';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { AtMentions } from '../../icons/AtMentions';
-
-import type { SuggestionUser } from '../../contexts/suggestionsContext/SuggestionsContext';
-import type { DefaultUserType } from '../../types/types';
-
-const styles = StyleSheet.create({
-  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',
-  },
-});
-
-export type MentionsItemProps<Us extends DefaultUserType = DefaultUserType> = {
-  /**
-   * A UserResponse of suggested UserTypes with these properties
-   *
-   * - id: User ID of the suggested mention user
-   * - image: Image to be shown as the Avatar for the user
-   * - name: Name of the suggested mention user
-   */
-  item: SuggestionUser<Us>;
-};
-
-export const MentionsItem = <Us extends DefaultUserType = DefaultUserType>({
-  item: { id, image, name, online },
-}: MentionsItemProps<Us>) => {
-  const {
-    theme: {
-      colors: { accent_blue, black, grey },
-      messageInput: {
-        suggestions: {
-          mention: { avatarSize, column, container, name: nameStyle, tag },
-        },
-      },
-    },
-  } = useTheme();
-
-  return (
-    <View style={[styles.container, container]}>
-      <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>
-        <Text style={[styles.tag, { color: grey }, tag]}>{`@${id}`}</Text>
-      </View>
-      <AtMentions pathFill={accent_blue} />
-    </View>
-  );
-};
-
-MentionsItem.displayName = 'MentionsItem{messageInput{suggestions{mention}}}';

package/src/components/AutoCompleteInput/SuggestionsList.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { FlatList, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native';
-
-import { CommandsItem } from './CommandsItem';
-import { EmojisItem } from './EmojisItem';
-import { MentionsItem } from './MentionsItem';
-
-import {
-  isSuggestionCommand,
-  isSuggestionEmoji,
-  isSuggestionUser,
-  Suggestion,
-  SuggestionComponentType,
-  Suggestions,
-} from '../../contexts/suggestionsContext/SuggestionsContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
-import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
-
-const styles = StyleSheet.create({
-  emojiItem: { paddingVertical: 10 },
-});
-
-const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
-  const { children, ...touchableOpacityProps } = props;
-  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
-};
-
-SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
-
-const isString = <Co extends string = DefaultCommandType, Us extends UnknownType = DefaultUserType>(
-  component: SuggestionComponentType<Co, Us>,
-): component is string => typeof component === 'string';
-
-export type SuggestionsListProps<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = {
-  active: boolean;
-  componentType: SuggestionComponentType<Co, Us>;
-  suggestions: Suggestions<Co, Us>;
-  suggestionsTitle?: React.ReactElement;
-};
-
-export const SuggestionsList = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
->(
-  props: SuggestionsListProps<Co, Us>,
-) => {
-  const {
-    active,
-    componentType: Component,
-    suggestions: { data, onSelect },
-    suggestionsTitle: SuggestionsTitle,
-  } = props;
-
-  const {
-    theme: {
-      messageInput: {
-        suggestions: {
-          container: { maxHeight },
-          item: itemStyle,
-        },
-      },
-    },
-  } = useTheme();
-
-  const renderItem = ({ index, item }: { index: number; item: Suggestion<Co, Us> }) => {
-    if (isString(Component)) {
-      switch (Component) {
-        case 'MentionsItem':
-          if (isSuggestionUser(item)) {
-            return (
-              <SuggestionsItem
-                onPress={() => onSelect(item)}
-                style={[
-                  {
-                    paddingBottom: index === data.length - 1 ? 8 : 0,
-                    paddingTop: index === 0 ? 8 : 0,
-                  },
-                  itemStyle,
-                ]}
-              >
-                <MentionsItem item={item} />
-              </SuggestionsItem>
-            );
-          }
-          return null;
-        case 'CommandsItem':
-          if (isSuggestionCommand(item)) {
-            return (
-              <SuggestionsItem onPress={() => onSelect(item)} style={[itemStyle]}>
-                <CommandsItem item={item} />
-              </SuggestionsItem>
-            );
-          }
-          return null;
-        case 'EmojisItem':
-          if (isSuggestionEmoji(item)) {
-            return (
-              <SuggestionsItem onPress={() => onSelect(item)} style={[styles.emojiItem, itemStyle]}>
-                <EmojisItem item={item} />
-              </SuggestionsItem>
-            );
-          }
-          return null;
-        default:
-          return null;
-      }
-    }
-
-    return (
-      <SuggestionsItem onPress={() => onSelect(item)}>
-        {React.cloneElement(Component, { item })}
-      </SuggestionsItem>
-    );
-  };
-
-  if (!active || data.length === 0) return null;
-
-  return (
-    <FlatList
-      data={data}
-      keyboardShouldPersistTaps='always'
-      keyExtractor={(item, index) =>
-        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
-      }
-      ListHeaderComponent={SuggestionsTitle ? SuggestionsTitle : undefined}
-      renderItem={renderItem}
-      style={{
-        maxHeight,
-      }}
-    />
-  );
-};
-
-SuggestionsList.displayName = 'SuggestionsList{messageInput{suggestions}}';

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
-
-import { CommandsItem } from '../CommandsItem';
-
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-
-const args = 'a string list of args';
-const name = 'giphy';
-
-describe('CommandsItem', () => {
-  it('should render CommandsItem with no avatar image but a name', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider>
-        <CommandsItem item={{ args, name }} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('commands-item-title')).toBeTruthy();
-      expect(queryByTestId('commands-item-args')).toBeTruthy();
-      expect(getByTestId('commands-item-title')).toHaveTextContent('Giphy');
-      expect(getByTestId('commands-item-args')).toHaveTextContent(args);
-    });
-  });
-});

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

@@ -1,62 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
-
-import { MentionsItem } from '../MentionsItem';
-
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-
-describe('MentionsItem', () => {
-  it('should render MentionsItem with an avatar image with no name and no mention name', async () => {
-    const { queryByTestId } = render(
-      <ThemeProvider>
-        <MentionsItem
-          item={{
-            image: 'https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg',
-          }}
-        />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image')).toBeTruthy();
-      expect(queryByTestId('avatar-text')).toBeFalsy();
-      expect(queryByTestId('mentions-item-name')).toBeTruthy();
-    });
-  });
-
-  it('should render MentionsItem with no avatar image but a name', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider>
-        <MentionsItem item={{ name: 'Test User' }} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image').props.source).toMatchObject({
-        uri: 'https://getstream.io/random_png/?name=T U&size=40',
-      });
-      expect(queryByTestId('mentions-item-name')).toBeTruthy();
-      expect(getByTestId('mentions-item-name')).toHaveTextContent('Test User');
-    });
-  });
-
-  it('should render MentionsItem with avatar image and name as id', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider>
-        <MentionsItem
-          item={{
-            id: 'Test User',
-            image: 'https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg',
-          }}
-        />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image')).toBeTruthy();
-      expect(queryByTestId('avatar-text')).toBeFalsy();
-      expect(queryByTestId('mentions-item-name')).toBeTruthy();
-      expect(getByTestId('mentions-item-name')).toHaveTextContent('Test User');
-    });
-  });
-});