stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Attachment/utils/buildGallery/types.ts

@@ -0,0 +1,27 @@
+import type { ImageResizeMode } from 'react-native';
+
+export type Thumbnail = {
+  height: number;
+  resizeMode: ImageResizeMode;
+  url: string;
+  width: number;
+  id?: string;
+};
+
+export type GallerySizeConfig = {
+  gridHeight: number;
+  gridWidth: number;
+  maxHeight: number;
+  maxWidth: number;
+  minHeight: number;
+  minWidth: number;
+};
+
+export type ThumbnailGrid = Thumbnail[][];
+
+export type GallerySizeAndThumbnailGrid = {
+  height: number;
+  thumbnailGrid: ThumbnailGrid;
+  width: number;
+  invertedDirections?: boolean;
+};

package/src/components/Attachment/utils/getAspectRatio.ts

@@ -0,0 +1,21 @@
+import type { Attachment } from 'stream-chat';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+/**
+ * Returns the aspect ratio of an image attachment.
+ *
+ * @param image Image attachment.
+ * @returns {number}
+ */
+export function getAspectRatio<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(image: Attachment<StreamChatGenerics>) {
+  if (image.type !== 'image') {
+    throw new Error('getAspectRatio() can only be called on an image attachment');
+  }
+
+  if (!image.original_width || !image.original_height) return 1;
+
+  return image.original_width / image.original_height;
+}

package/src/components/Attachment/utils/getGalleryImageBorderRadius.ts

@@ -0,0 +1,71 @@
+import type { GallerySizeConfig } from './buildGallery/types';
+
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+
+type Params = {
+  colIndex: number;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  sizeConfig: GallerySizeConfig;
+  hasThreadReplies?: boolean;
+  height?: number;
+  invertedDirections?: boolean;
+  messageText?: string;
+  threadList?: boolean;
+  width?: number;
+} & Pick<MessageContextValue, 'groupStyles' | 'alignment'>;
+
+export function getGalleryImageBorderRadius({
+  alignment,
+  colIndex,
+  groupStyles,
+  hasThreadReplies,
+  height,
+  invertedDirections,
+  messageText,
+  numOfColumns,
+  numOfRows,
+  rowIndex,
+  sizeConfig,
+  threadList,
+  width,
+}: Params) {
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const isSingleImage = numOfColumns === 1 && numOfRows === 1;
+  const isImageSmallerThanMinContainerSize =
+    isSingleImage &&
+    height &&
+    width &&
+    ((height > width && width === sizeConfig.minWidth) ||
+      (height < width && height === sizeConfig.minHeight));
+  const topLeftEdgeExposed = colIndex === 0 && rowIndex === 0;
+  const bottomLeftEdgeExposed =
+    (!invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1) ||
+    (invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0);
+  const topRightEdgeExposed =
+    (!invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0) ||
+    (invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1);
+  const bottomRightEdgeExposed = colIndex === numOfColumns && rowIndex === numOfRows - 1;
+
+  return {
+    borderBottomLeftRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomLeftEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'left_bottom' && groupStyle !== 'left_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderBottomRightRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomRightEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'right_bottom' && groupStyle !== 'right_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 14 : 0,
+    borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 14 : 0,
+  };
+}

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -9,19 +9,20 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
+
 import BottomSheet, {
   BottomSheetFlatList,
   BottomSheetHandleProps,
   TouchableOpacity,
 } from '@gorhom/bottom-sheet';
 
+import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Asset, getPhotos } from '../../native';
 import { vh, vw } from '../../utils/utils';
 
-import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
-
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
@@ -344,6 +345,7 @@ export const AttachmentPicker = React.forwardRef(
       <>
         <BottomSheet
           containerHeight={fullScreenHeight}
+          enablePanDownToClose={true}
           handleComponent={
             /**
              * using `null` here instead of `style={{ opacity: photoError ? 0 : 1 }}`

package/src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

@@ -64,7 +64,11 @@ export const AttachmentSelectionBar: React.FC = () => {
 
   return (
     <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>
-      <TouchableOpacity hitSlop={{ bottom: 15, top: 15 }} onPress={() => setPicker('images')}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={() => setPicker('images')}
+        testID='upload-photo-touchable'
+      >
         <View style={[styles.icon, icon]}>
           <ImageSelectorIcon
             numberOfImageUploads={imageUploads.length}
@@ -73,7 +77,11 @@ export const AttachmentSelectionBar: React.FC = () => {
         </View>
       </TouchableOpacity>
       {hasFilePicker && (
-        <TouchableOpacity hitSlop={{ bottom: 15, top: 15 }} onPress={openFilePicker}>
+        <TouchableOpacity
+          hitSlop={{ bottom: 15, top: 15 }}
+          onPress={openFilePicker}
+          testID='upload-file-touchable'
+        >
           <View style={[styles.icon, icon]}>
             <FileSelectorIcon
               numberOfImageUploads={imageUploads.length}
@@ -82,7 +90,11 @@ export const AttachmentSelectionBar: React.FC = () => {
           </View>
         </TouchableOpacity>
       )}
-      <TouchableOpacity hitSlop={{ bottom: 15, top: 15 }} onPress={takeAndUploadImage}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={takeAndUploadImage}
+        testID='take-photo-touchable'
+      >
         <View style={[styles.icon, icon]}>
           <CameraSelectorIcon
             numberOfImageUploads={imageUploads.length}

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput } from 'react-native';
-import throttle from 'lodash/throttle';
+import { StyleSheet, TextInput, TextInputProps } from 'react-native';
 
-import { CommandsHeader } from './CommandsHeader';
-import { EmojisHeader } from './EmojisHeader';
+import throttle from 'lodash/throttle';
 
 import {
   ChannelContextValue,
@@ -28,21 +26,10 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import type { Emoji } from '../../emoji-data/compiled';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
 
-import type { TextInputProps } from 'react-native';
-
-import type { Emoji } from '../../emoji-data/compiled';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
 import type { Trigger } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -62,16 +49,10 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
 type AutoCompleteInputPropsWithContext<
-  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,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'giphyEnabled'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'giphyEnabled'> &
   Pick<
-    MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
     | 'autoCompleteSuggestionsLimit'
     | 'giphyActive'
@@ -87,36 +68,31 @@ type AutoCompleteInputPropsWithContext<
     | 'triggerSettings'
   > &
   Pick<
-    SuggestionsContextValue<Co, Us>,
+    SuggestionsContextValue<StreamChatGenerics>,
     '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,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AutoCompleteInputPropsWithContext<StreamChatGenerics>>;
 
 const AutoCompleteInputWithContext = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
     closeSuggestions,
+    cooldownActive = false,
     giphyActive,
     giphyEnabled,
     maxMessageLength,
@@ -161,15 +137,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);
     }
   };
 
@@ -189,13 +158,14 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionUser<Us>['name'],
+          query as SuggestionUser<StreamChatGenerics>['name'],
           text,
           (data, queryCallback) => {
             if (query === queryCallback) {
               updateSuggestionsContext({
                 data,
                 onSelect: (item) => onSelectSuggestion({ item, trigger }),
+                queryText: query,
               });
             }
           },
@@ -210,7 +180,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionCommand<Co>['name'],
+          query as SuggestionCommand<StreamChatGenerics>['name'],
           text,
           (data, queryCallback) => {
             if (query !== queryCallback) {
@@ -220,6 +190,7 @@ const AutoCompleteInputWithContext = <
             updateSuggestionsContext({
               data,
               onSelect: (item) => onSelectSuggestion({ item, trigger }),
+              queryText: query,
             });
           },
           {
@@ -235,13 +206,11 @@ const AutoCompleteInputWithContext = <
             return;
           }
 
-          updateSuggestionsContext(
-            {
-              data,
-              onSelect: (item) => onSelectSuggestion({ item, trigger }),
-            },
-            <EmojisHeader title={query} />,
-          );
+          updateSuggestionsContext({
+            data,
+            onSelect: (item) => onSelectSuggestion({ item, trigger }),
+            queryText: query,
+          });
         });
       }
     }
@@ -259,7 +228,7 @@ const AutoCompleteInputWithContext = <
     item,
     trigger,
   }: {
-    item: Suggestion<Co, Us>;
+    item: Suggestion<StreamChatGenerics>;
     trigger: Trigger;
   }) => {
     if (!trigger || !triggerSettings[trigger]) {
@@ -288,12 +257,7 @@ const AutoCompleteInputWithContext = <
 
     const textToModify = text.slice(0, selectionEnd.current);
 
-    const startOfTokenPosition = textToModify.search(
-      /**
-       * It's important to escape the trigger char for chars like [, (,...
-       */
-      new RegExp(`\\${trigger}${`[^\\${trigger}${'\\s'}]`}*$`),
-    );
+    const startOfTokenPosition = textToModify.lastIndexOf(trigger, selectionEnd.current);
 
     const newCaretPosition = computeCaretPosition(newTokenString, startOfTokenPosition);
 
@@ -335,7 +299,7 @@ const AutoCompleteInputWithContext = <
   };
 
   const handleMentions = ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
-    const lastToken = tokenMatch?.[tokenMatch.length - 1].trim();
+    const lastToken = tokenMatch?.[tokenMatch.length - 1];
     const handleMentionsTrigger =
       (lastToken && Object.keys(triggerSettings).find((trigger) => trigger === lastToken[0])) ||
       null;
@@ -401,7 +365,7 @@ const AutoCompleteInputWithContext = <
     } else if (giphyEnabled && !(await handleCommand(text))) {
       const mentionTokenMatch = text
         .slice(0, selectionEnd.current)
-        .match(/(?!^|\W)?@[^\s]*\s?[^\s]*$/g);
+        .match(/(?!^|\W)?@[^\s@]*\s?[^\s@]*$/g);
       if (mentionTokenMatch) {
         handleMentions({ tokenMatch: mentionTokenMatch });
       } else {
@@ -413,6 +377,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,
   });
@@ -439,7 +409,7 @@ const AutoCompleteInputWithContext = <
         }
       }}
       onSelectionChange={handleSelectionChange}
-      placeholder={giphyActive ? t('Search GIFs') : t('Send a message')}
+      placeholder={placeholderText}
       placeholderTextColor={grey}
       ref={setInputBoxRef}
       style={[
@@ -463,20 +433,22 @@ const AutoCompleteInputWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
 ) => {
-  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;
@@ -487,6 +459,9 @@ const areEqual = <
   const textEqual = prevText === nextText;
   if (!textEqual) return false;
 
+  const cooldownActiveEqual = prevCooldownActive === nextCooldownActive;
+  if (!cooldownActiveEqual) return false;
+
   return true;
 };
 
@@ -496,17 +471,11 @@ const MemoizedAutoCompleteInput = React.memo(
 ) as typeof AutoCompleteInputWithContext;
 
 export const AutoCompleteInput = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteInputProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AutoCompleteInputProps<StreamChatGenerics>,
 ) => {
-  const { giphyEnabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { giphyEnabled } = useChannelContext<StreamChatGenerics>();
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
@@ -521,8 +490,9 @@ export const AutoCompleteInput = <
     setShowMoreOptions,
     text,
     triggerSettings,
-  } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { closeSuggestions, openSuggestions, updateSuggestions } = useSuggestionsContext<Co, Us>();
+  } = useMessageInputContext<StreamChatGenerics>();
+  const { closeSuggestions, openSuggestions, updateSuggestions } =
+    useSuggestionsContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   return (

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 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 { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
-import type { DefaultCommandType } from '../../types/types';
+import type { DefaultStreamChatGenerics } 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,17 +15,14 @@ const styles = StyleSheet.create({
     marginRight: 8,
     width: 24,
   },
-  title: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    paddingRight: 8,
-  },
 });
 
-const Icon = <Co extends string = DefaultCommandType>({
+export const AutoCompleteSuggestionCommandIcon = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   name,
 }: {
-  name: SuggestionCommand<Co>['name'];
+  name: SuggestionCommand<StreamChatGenerics>['name'];
 }) => {
   const {
     theme: {
@@ -98,42 +85,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}}}';