stream-chat-react-native-core 3.10.1 → 4.0.0-beta.2

package/lib/typescript/utils/utils.d.ts

@@ -1,12 +1,9 @@
 import { Emoji } from '../emoji-data/compiled';
 import type React from 'react';
 import type { DebouncedFunc } from 'lodash';
-import type { Channel, StreamChat } from 'stream-chat';
-import type { CommandsItemProps } from '../components/AutoCompleteInput/CommandsItem';
-import type { EmojisItemProps } from '../components/AutoCompleteInput/EmojisItem';
-import type { MentionsItemProps } from '../components/AutoCompleteInput/MentionsItem';
+import type { Channel, CommandResponse, StreamChat } from 'stream-chat';
 import type { MentionAllAppUsersQuery } from '../contexts/messageInputContext/MessageInputContext';
-import type { SuggestionCommand, SuggestionUser } from '../contexts/suggestionsContext/SuggestionsContext';
+import type { SuggestionCommand, SuggestionComponentType, SuggestionUser } from '../contexts/suggestionsContext/SuggestionsContext';
 import type { IconProps } from '../icons/utils/base';
 import type { DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType, UnknownType } from '../types/types';
 export declare type ReactionData = {
@@ -37,28 +34,27 @@ export declare const isMentionTrigger: (trigger: Trigger) => trigger is "@";
 export declare type Trigger = '/' | '@' | ':';
 export declare type TriggerSettings<Co extends string = DefaultCommandType, Us extends UnknownType = DefaultUserType> = {
     '/'?: {
-        component: string | React.ComponentType<Partial<CommandsItemProps<Co>>>;
-        dataProvider: (query: SuggestionCommand<Co>['name'], text: string, onReady?: (data: SuggestionCommand<Co>[], q: SuggestionCommand<Co>['name']) => void, options?: {
+        dataProvider: (query: CommandResponse<Co>['name'], text: string, onReady?: (data: CommandResponse<Co>[], q: CommandResponse<Co>['name']) => void, options?: {
             limit?: number;
         }) => SuggestionCommand<Co>[];
-        output: (entity: SuggestionCommand<Co>) => {
+        output: (entity: CommandResponse<Co>) => {
             caretPosition: string;
             key: string;
             text: string;
         };
+        type: SuggestionComponentType;
     };
     ':'?: {
-        component: string | React.ComponentType<Partial<EmojisItemProps>>;
         dataProvider: (query: Emoji['name'], _: string, onReady?: (data: Emoji[], q: Emoji['name']) => void) => Emoji[];
         output: (entity: Emoji) => {
             caretPosition: string;
             key: string;
             text: string;
         };
+        type: SuggestionComponentType;
     };
     '@'?: {
         callback: (item: SuggestionUser<Us>) => void;
-        component: string | React.ComponentType<Partial<MentionsItemProps<Us>>>;
         dataProvider: (query: SuggestionUser<Us>['name'], _: string, onReady?: (data: SuggestionUser<Us>[], q: SuggestionUser<Us>['name']) => void, options?: {
             limit?: number;
             mentionAllAppUsersEnabled?: boolean;
@@ -69,6 +65,7 @@ export declare type TriggerSettings<Co extends string = DefaultCommandType, Us e
             key: string;
             text: string;
         };
+        type: SuggestionComponentType;
     };
 };
 export declare type ACITriggerSettingsParams<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = DefaultCommandType, Ev extends UnknownType = DefaultEventType, Me extends UnknownType = DefaultMessageType, Re extends UnknownType = DefaultReactionType, Us extends UnknownType = DefaultUserType> = {
@@ -101,3 +98,4 @@ export declare const vw: (percentageWidth: number, rounded?: boolean) => number;
 export declare const vh: (percentageHeight: number, rounded?: boolean) => number;
 export declare const generateRandomId: (a?: string) => string;
 export declare const emojiRegex: RegExp;
+export declare const urlRegex: RegExp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "3.10.1",
+  "version": "4.0.0-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -77,10 +77,11 @@
     "i18next": "20.2.4",
     "lodash-es": "4.17.21",
     "metro-react-native-babel-preset": "0.66.0",
+    "mime-types": "^2.1.34",
     "path": "0.12.7",
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
-    "stream-chat": "~3.13.1"
+    "stream-chat": "^4.4.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -135,6 +136,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.64.1",
     "react-native-builder-bob": "0.18.1",
+    "react-native-fs": "2.18.0",
     "react-native-gesture-handler": "1.10.3",
     "react-native-reanimated": "2.1.0",
     "react-native-svg": "12.1.1",
@@ -142,7 +144,7 @@
     "react-native-web": "0.15.0",
     "react-styleguidist": "11.1.6",
     "react-test-renderer": "17.0.2",
-    "typescript": "4.2.4",
+    "typescript": "4.4.3",
     "uuid": "8.3.2",
     "webpack": "4.44.2"
   }

package/src/components/Attachment/Card.tsx

@@ -105,6 +105,8 @@ export type CardPropsWithContext<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     'additionalTouchableProps' | 'CardCover' | 'CardFooter' | 'CardHeader'
   > & {
+    channelId: string | undefined;
+    messageId: string | undefined;
     styles?: Partial<{
       authorName: StyleProp<TextStyle>;
       authorNameContainer: StyleProp<ViewStyle>;
@@ -318,7 +320,7 @@ export const Card = <
 >(
   props: CardProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { onLongPress, onPress, onPressIn, preventPress } =
+  const { message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { additionalTouchableProps, CardCover, CardFooter, CardHeader } =
     useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
@@ -330,6 +332,8 @@ export const Card = <
         CardCover,
         CardFooter,
         CardHeader,
+        channelId: message.cid,
+        messageId: message.id,
         onLongPress,
         onPress,
         onPressIn,

package/src/components/Attachment/Gallery.tsx

@@ -115,7 +115,9 @@ export type GalleryPropsWithContext<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
   > &
-  Pick<OverlayContextValue, 'setBlurType' | 'setOverlay'> & {
+  Pick<OverlayContextValue, 'setOverlay'> & {
+    channelId: string | undefined;
+    hasThreadReplies?: boolean;
     /**
      * `message` prop has been introduced here as part of `legacyImageViewerSwipeBehaviour` prop.
      * https://github.com/GetStream/stream-chat-react-native/commit/d5eac6193047916f140efe8e396a671675c9a63f
@@ -129,7 +131,6 @@ export type GalleryPropsWithContext<
      * TODO[major]: remove messageId and messageText
      * TODO: Fix circular dependencies of imports
      */
-    hasThreadReplies?: boolean;
     message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
     messageId?: string;
     messageText?: string;
@@ -160,7 +161,6 @@ const GalleryWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setBlurType,
     setImage,
     setImages,
     setOverlay,
@@ -170,7 +170,6 @@ const GalleryWithContext = <
   const {
     theme: {
       colors: { overlay },
-      imageGallery: { blurType },
       messageSimple: {
         gallery: {
           galleryContainer,
@@ -245,11 +244,9 @@ const GalleryWithContext = <
               if (!legacyImageViewerSwipeBehaviour && message) {
                 setImages([message]);
                 setImage({ messageId: messageId || message.id, url });
-                setBlurType(blurType);
                 setOverlay('gallery');
               } else if (legacyImageViewerSwipeBehaviour) {
                 setImage({ messageId: messageId || message?.id, url });
-                setBlurType(blurType);
                 setOverlay('gallery');
               }
             };
@@ -439,7 +436,6 @@ export const Gallery = <
     onPress: propOnPress,
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
-    setBlurType: propSetBlurType,
     setImage: propSetImage,
     setOverlay: propSetOverlay,
     threadList: propThreadList,
@@ -461,7 +457,7 @@ export const Gallery = <
     additionalTouchableProps: contextAdditionalTouchableProps,
     legacyImageViewerSwipeBehaviour,
   } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { setBlurType: contextSetBlurType, setOverlay: contextSetOverlay } = useOverlayContext();
+  const { setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
 
@@ -475,7 +471,6 @@ export const Gallery = <
   const onPress = propOnPress || contextOnPress;
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  const setBlurType = propSetBlurType || contextSetBlurType;
   const setImage = propSetImage || contextSetImage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
@@ -485,6 +480,7 @@ export const Gallery = <
       {...{
         additionalTouchableProps,
         alignment,
+        channelId: message.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         images,
@@ -496,7 +492,6 @@ export const Gallery = <
         onPress,
         onPressIn,
         preventPress,
-        setBlurType,
         setImage,
         setImages,
         setOverlay,

package/src/components/Attachment/Giphy.tsx

@@ -143,7 +143,7 @@ const GiphyWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, border, grey, overlay_dark, white },
+      colors: { accent_blue, black, border, grey, overlay, white },
       messageSimple: {
         giphy: {
           cancel,
@@ -183,7 +183,7 @@ const GiphyWithContext = <
           style={[styles.giphy, giphy]}
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay_dark }, giphyContainer]}>
+          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
             <Lightning height={16} pathFill={white} width={16} />
             <Text style={[styles.giphyText, { color: white }, giphyText]}>
               {type?.toUpperCase()}
@@ -273,7 +273,7 @@ const GiphyWithContext = <
           style={[styles.giphy, giphy]}
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay_dark }, giphyContainer]}>
+          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
             <Lightning height={16} pathFill={white} width={16} />
             <Text style={[styles.giphyText, { color: white }, giphyText]}>
               {type?.toUpperCase()}

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

@@ -14,12 +14,19 @@ import {
   generateImageAttachment,
   generateImgurAttachment,
 } from '../../../mock-builders/generator/attachment';
-
-const getAttachmentComponent = (props) => (
-  <ThemeProvider>
-    <Attachment {...props} />;
-  </ThemeProvider>
-);
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+
+const getAttachmentComponent = (props) => {
+  const message = generateMessage();
+  return (
+    <ThemeProvider>
+      <MessageProvider value={{ message }}>
+        <Attachment {...props} />
+      </MessageProvider>
+    </ThemeProvider>
+  );
+};
 const getActionComponent = (props) => (
   <ThemeProvider>
     <AttachmentActions {...props} />;

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput } from 'react-native';
+import { StyleSheet, TextInput, TextInputProps } from 'react-native';
 import throttle from 'lodash/throttle';
 
-import { CommandsHeader } from './CommandsHeader';
-import { EmojisHeader } from './EmojisHeader';
-
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import type { Emoji } from '../../emoji-data/compiled';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -30,9 +28,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
 
-import type { TextInputProps } from 'react-native';
-
-import type { Emoji } from '../../emoji-data/compiled';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -90,7 +85,13 @@ type AutoCompleteInputPropsWithContext<
     SuggestionsContextValue<Co, Us>,
     'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
   > &
-  Pick<TranslationContextValue, 't'>;
+  Pick<TranslationContextValue, 't'> & {
+    /**
+     * This is currently passed in from MessageInput to avoid rerenders
+     * that would happen if we put this in the MessageInputContext
+     */
+    cooldownActive?: boolean;
+  };
 
 export type AutoCompleteInputProps<
   At extends UnknownType = DefaultAttachmentType,
@@ -117,6 +118,7 @@ const AutoCompleteInputWithContext = <
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
     closeSuggestions,
+    cooldownActive = false,
     giphyActive,
     giphyEnabled,
     maxMessageLength,
@@ -161,15 +163,8 @@ const AutoCompleteInputWithContext = <
     const triggerSetting = triggerSettings[trigger];
     if (triggerSetting) {
       isTrackingStarted.current = true;
-      const { component: Component } = triggerSetting;
-      openSuggestions(
-        typeof Component === 'string' ? Component : <Component />,
-        trigger === ':' ? (
-          <EmojisHeader title='' />
-        ) : trigger === '/' ? (
-          <CommandsHeader />
-        ) : undefined,
-      );
+      const { type } = triggerSetting;
+      openSuggestions(type);
     }
   };
 
@@ -196,6 +191,7 @@ const AutoCompleteInputWithContext = <
               updateSuggestionsContext({
                 data,
                 onSelect: (item) => onSelectSuggestion({ item, trigger }),
+                queryText: query,
               });
             }
           },
@@ -220,6 +216,7 @@ const AutoCompleteInputWithContext = <
             updateSuggestionsContext({
               data,
               onSelect: (item) => onSelectSuggestion({ item, trigger }),
+              queryText: query,
             });
           },
           {
@@ -235,13 +232,11 @@ const AutoCompleteInputWithContext = <
             return;
           }
 
-          updateSuggestionsContext(
-            {
-              data,
-              onSelect: (item) => onSelectSuggestion({ item, trigger }),
-            },
-            <EmojisHeader title={query} />,
-          );
+          updateSuggestionsContext({
+            data,
+            onSelect: (item) => onSelectSuggestion({ item, trigger }),
+            queryText: query,
+          });
         });
       }
     }
@@ -408,6 +403,12 @@ const AutoCompleteInputWithContext = <
     }
   };
 
+  const placeholderText = giphyActive
+    ? t('Search GIFs')
+    : cooldownActive
+    ? t('Slow mode ON')
+    : t('Send a message');
+
   const handleSuggestionsThrottled = throttle(handleSuggestions, 100, {
     leading: false,
   });
@@ -434,7 +435,7 @@ const AutoCompleteInputWithContext = <
         }
       }}
       onSelectionChange={handleSelectionChange}
-      placeholder={giphyActive ? t('Search GIFs') : t('Send a message')}
+      placeholder={placeholderText}
       placeholderTextColor={grey}
       ref={setInputBoxRef}
       style={[
@@ -470,8 +471,18 @@ const areEqual = <
   prevProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { giphyActive: prevGiphyActive, t: prevT, text: prevText } = prevProps;
-  const { giphyActive: nextGiphyActive, t: nextT, text: nextText } = nextProps;
+  const {
+    cooldownActive: prevCooldownActive,
+    giphyActive: prevGiphyActive,
+    t: prevT,
+    text: prevText,
+  } = prevProps;
+  const {
+    cooldownActive: nextCooldownActive,
+    giphyActive: nextGiphyActive,
+    t: nextT,
+    text: nextText,
+  } = nextProps;
 
   const giphyActiveEqual = prevGiphyActive === nextGiphyActive;
   if (!giphyActiveEqual) return false;
@@ -482,6 +493,9 @@ const areEqual = <
   const textEqual = prevText === nextText;
   if (!textEqual) return false;
 
+  const cooldownActiveEqual = prevCooldownActive === nextCooldownActive;
+  if (!cooldownActiveEqual) return false;
+
   return true;
 };
 

package/src/components/AutoCompleteInput/{CommandsItem.tsx → AutoCompleteSuggestionCommandIcon.tsx}

@@ -1,22 +1,12 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-
 import type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
 import type { DefaultCommandType } from '../../types/types';
 
 const styles = StyleSheet.create({
-  args: {
-    fontSize: 14,
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
   iconContainer: {
     alignItems: 'center',
     borderRadius: 12,
@@ -25,14 +15,9 @@ const styles = StyleSheet.create({
     marginRight: 8,
     width: 24,
   },
-  title: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    paddingRight: 8,
-  },
 });
 
-const Icon = <Co extends string = DefaultCommandType>({
+export const AutoCompleteSuggestionCommandIcon = <Co extends string = DefaultCommandType>({
   name,
 }: {
   name: SuggestionCommand<Co>['name'];
@@ -98,42 +83,3 @@ const Icon = <Co extends string = DefaultCommandType>({
       );
   }
 };
-
-export type CommandsItemProps<Co extends string = DefaultCommandType> = {
-  /**
-   * A CommandResponse of suggested CommandTypes with these properties
-   *
-   * - args: Arguments which can be passed to the command
-   * - name: Name of the command
-   */
-  item: SuggestionCommand<Co>;
-};
-
-export const CommandsItem = <Co extends string = DefaultCommandType>({
-  item: { args, name },
-}: CommandsItemProps<Co>) => {
-  const {
-    theme: {
-      colors: { black, grey },
-      messageInput: {
-        suggestions: {
-          command: { args: argsStyle, container, title },
-        },
-      },
-    },
-  } = useTheme();
-
-  return (
-    <View style={[styles.container, container]}>
-      <Icon 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>
-  );
-};
-
-CommandsItem.displayName = 'CommandsItem{messageInput{suggestions{command}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import { Lightning } from '../../icons/Lightning';
+import { Smile } from '../../icons/Smile';
+import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
+
+export type AutoCompleteSuggestionHeaderPropsWithContext<
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+> = Pick<SuggestionsContextValue<Co, Us>, 'triggerType' | 'queryText'>;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  title: {
+    fontSize: 14,
+    paddingLeft: 8,
+  },
+});
+
+const AutoCompleteSuggestionHeaderWithContext = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>({
+  queryText,
+  triggerType,
+}: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { accent_blue, grey },
+      messageInput: {
+        suggestions: {
+          header: { container, title },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'command') {
+    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>
+    );
+  } else if (triggerType === 'emoji') {
+    return (
+      <View style={[styles.container, container]}>
+        <Smile pathFill={accent_blue} />
+        <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>
+          {t('Emoji matching') + ' "' + queryText + '"'}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'mention') {
+    return null;
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
+  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
+) => {
+  const { queryText: prevQueryText, triggerType: prevType } = prevProps;
+  const { queryText: nextQueryText, triggerType: nextType } = nextProps;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+
+  const valueEqual = prevQueryText === nextQueryText;
+  if (!valueEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionHeader = React.memo(
+  AutoCompleteSuggestionHeaderWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionHeaderWithContext;
+
+export type AutoCompleteSuggestionHeaderProps<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>;
+
+export const AutoCompleteSuggestionHeader = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionHeaderProps<Co, Us>,
+) => <MemoizedAutoCompleteSuggestionHeader {...props} />;
+
+AutoCompleteSuggestionHeader.displayName =
+  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';