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

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

@@ -0,0 +1,46 @@
+import type { ImageResizeMode } from 'react-native';
+
+import type { Attachment } from 'stream-chat';
+
+import type { Thumbnail } from './types';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+
+import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+
+export function buildThumbnail<At extends UnknownType = DefaultAttachmentType>({
+  height,
+  image,
+  resizeMode,
+  width,
+}: {
+  height: number;
+  image: Attachment<At>;
+  width: number;
+  resizeMode?: ImageResizeMode;
+}): Thumbnail {
+  const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
+
+  // Only resize if the original image is larger than the thumbnail container size.
+  const shouldResize =
+    originalImageHeight && originalImageWidth
+      ? originalImageHeight + originalImageWidth > height + width
+      : true;
+  const imageUrl = getUrlOfImageAttachment(image) as string;
+
+  return {
+    height,
+    resizeMode: resizeMode
+      ? resizeMode
+      : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    url: shouldResize
+      ? getResizedImageUrl({
+          height,
+          url: imageUrl,
+          width,
+        })
+      : imageUrl,
+    width,
+  };
+}

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

@@ -0,0 +1,186 @@
+import type { Attachment } from 'stream-chat';
+
+import { buildThumbnail } from './buildThumbnail';
+import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
+
+import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+
+/**
+ * Builds a grid of thumbnail images from image attachments.
+ * This function take a object parameter with following properties:
+ *
+ * @params
+ *
+ * - {number[][]} grid - Grid pattern of the gallery. Each numeric value in the array represents the flex value of corresponding image in grid.
+ * - {Attachment[]} images - Array of image attachments.
+ * - {GallerySizeConfig} sizeConfig - Theme config for the gallery.
+ * - {boolean} invertedDirections - Whether to invert the direction of the grid. By default grid is rendered with column as primary direction and row as secondary direction.
+ *
+ * @usage
+ *
+ * ```
+ * const { thumbnailGrid, invertedDirection } = buildThumbnailGrid({
+ *  grid: [[1], [1]],
+ *  images: [image1, image2],
+ *  sizeConfig: {
+ *    gridHeight: 200,
+ *    gridWidth: 200,
+ *    maxHeight: 200,
+ *    maxWidth: 200,
+ *    minHeight: 200,
+ *    minWidth: 200,
+ *  },
+ * })
+ *
+ * Rendering logic on UI:
+ *
+ * ```
+ * <View style={{ flexDirection: invertedDirection ? 'row' : 'column }}>
+ * {
+ *  thumbnailGrid.forEach(rows => {
+ *    return (
+ *      <View style={{ flexDirection: invertedDirection ? 'column' : 'row' }}>
+ *       {
+ *        rows.forEach(thumbnail => (
+ *          <Image
+ *            source={{ uri: thumbnail.url }}
+ *            resizeMode={thumbnail.resizeMode}
+ *            width={thumbnail.width}
+ *            height={thumbnail.height}
+ *          />
+ *       ))}
+ *      </View>
+ *    )});
+ * }
+ * </View>
+ * ```
+ *
+ * Lets look at different examples of grid and invertedDirections param:
+ *
+ * EXAMPLE 1:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1], [2, 1]]
+ *  invertedDirections: false
+ * }
+ * ```
+ *
+ * Resulting thumbnail grid on rendered UI:
+ *
+ *  __________________
+ * |            |     |
+ * |            |     |
+ * |------------------|
+ * |            |     |
+ * |            |     |
+ *  ------------------
+ *
+ * EXAMPLE 2:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1], [2, 1]]
+ *  invertedDirections: true
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |         |        |
+ * |         |        |
+ * |         |        |
+ * |         |        |
+ * |------------------|
+ * |         |        |
+ * |         |        |
+ *  ------------------
+ *
+ * EXAMPLE 3:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1]]
+ *  invertedDirections: false
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |                  |
+ * |                  |
+ * |                  |
+ * |                  |
+ * |------------------|
+ * |                  |
+ * |                  |
+ *  ------------------
+ *
+ * EXAMPLE 4:
+ *
+ * ```
+ * {
+ *  grid: [[2, 1]]
+ *  invertedDirections: true
+ * }
+ * ```
+ * Resulting thumbnail grid on rendered UI:
+ *  __________________
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ * |            |     |
+ *  ------------------
+ *
+ * @return {GallerySizeAndThumbnailGrid}
+ */
+export function buildThumbnailGrid<At extends UnknownType = DefaultAttachmentType>({
+  grid,
+  images,
+  invertedDirections = false,
+  sizeConfig,
+}: {
+  grid: number[][];
+  images: Attachment<At>[];
+  invertedDirections: boolean;
+  sizeConfig: GallerySizeConfig;
+}): GallerySizeAndThumbnailGrid {
+  const { gridHeight, gridWidth } = sizeConfig;
+
+  let imageIndex = 0;
+  const thumbnailGrid: ThumbnailGrid = [];
+  const numOfColumns = grid.length;
+  grid.forEach((rows, colIndex) => {
+    const totalFlexValue = rows.reduce((acc, curr) => acc + curr, 0);
+
+    rows.forEach((flexValue) => {
+      const tHeight = invertedDirections
+        ? gridHeight / numOfColumns
+        : gridHeight * (flexValue / totalFlexValue);
+
+      const tWidth = invertedDirections
+        ? gridWidth * (flexValue / totalFlexValue)
+        : gridWidth / numOfColumns;
+
+      const currentImage = images[imageIndex];
+      const thumbnail = buildThumbnail({
+        height: tHeight,
+        image: currentImage,
+        resizeMode: 'cover',
+        width: tWidth,
+      });
+
+      if (!thumbnailGrid[colIndex]) {
+        thumbnailGrid[colIndex] = [];
+      }
+
+      thumbnailGrid[colIndex].push(thumbnail);
+      imageIndex++;
+    });
+  });
+  return {
+    height: gridHeight,
+    invertedDirections,
+    thumbnailGrid,
+    width: gridWidth,
+  };
+}

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 { DefaultAttachmentType, UnknownType } from '../../../types/types';
+
+/**
+ * Returns the aspect ratio of an image attachment.
+ *
+ * @param image Image attachment.
+ * @returns {number}
+ */
+export function getAspectRatio<At extends UnknownType = DefaultAttachmentType>(
+  image: Attachment<At>,
+) {
+  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/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, TextInput, TextInputProps } from 'react-native';
+
 import throttle from 'lodash/throttle';
 
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
-import type { Emoji } from '../../emoji-data/compiled';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -26,8 +26,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
-
+import type { Emoji } from '../../emoji-data/compiled';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -38,6 +37,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
+
 import type { Trigger } from '../../utils/utils';
 
 const styles = StyleSheet.create({

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 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';
 
 const styles = StyleSheet.create({

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
 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';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
 
 export type AutoCompleteSuggestionHeaderPropsWithContext<
   Co extends string = DefaultCommandType,

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -1,17 +1,19 @@
 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 { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+
 import type {
   Suggestion,
   SuggestionCommand,
   SuggestionsContextValue,
   SuggestionUser,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
-import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Emoji } from '../../emoji-data/compiled';
+import { AtMentions } from '../../icons/AtMentions';
+import type { DefaultCommandType, DefaultUserType } from '../../types/types';
+import { Avatar } from '../Avatar/Avatar';
 
 export type AutoCompleteSuggestionItemPropsWithContext<
   Co extends string = DefaultCommandType,

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,20 +1,19 @@
 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,
-} 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';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
 
 type AutoCompleteSuggestionListComponentProps<
   Co extends string = DefaultCommandType,

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));
 

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/';
@@ -137,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 () => {