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

package/src/components/Attachment/Gallery.tsx

@@ -1,14 +1,11 @@
-import React, { useState } from 'react';
-import {
-  Image,
-  ImageProps,
-  PixelRatio,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React, { useMemo } from 'react';
+import { Image, ImageProps, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { buildGallery } from './utils/buildGallery/buildGallery';
+
+import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -26,41 +23,23 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { makeImageCompatibleUrl } from '../../utils/utils';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
 const GalleryImage: React.FC<
   Omit<ImageProps, 'height' | 'source'> & {
-    height: number | string;
     uri: string;
   }
 > = (props) => {
-  const { height, uri, ...rest } = props;
-
-  const [error, setError] = useState(false);
+  const { uri, ...rest } = props;
 
   return (
     <Image
-      key={uri}
       {...rest}
-      onError={() => setError(true)}
       source={{
-        uri: uri.includes('&h=%2A')
-          ? error
-            ? uri
-            : uri.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`)
-          : uri,
+        uri: makeImageCompatibleUrl(uri),
       }}
+      testID='image-attachment-single'
     />
   );
 };
@@ -68,7 +47,7 @@ const GalleryImage: React.FC<
 const MemoizedGalleryImage = React.memo(
   GalleryImage,
   (prevProps, nextProps) =>
-    prevProps.height === nextProps.height && prevProps.uri === nextProps.uri,
+    getUrlWithoutParams(prevProps.uri) === getUrlWithoutParams(nextProps.uri),
 ) as typeof GalleryImage;
 
 const styles = StyleSheet.create({
@@ -80,7 +59,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { flex: 1, padding: 1 },
+  imageContainer: { padding: 1 },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -90,16 +69,10 @@ const styles = StyleSheet.create({
 });
 
 export type GalleryPropsWithContext<
-  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<ImageGalleryContextValue, 'setImage'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
   Pick<
-    MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageContextValue<StreamChatGenerics>,
     | 'alignment'
     | 'groupStyles'
     | 'images'
@@ -109,23 +82,32 @@ export type GalleryPropsWithContext<
     | 'preventPress'
     | 'threadList'
   > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'additionalTouchableProps'> &
-  Pick<OverlayContextValue, 'setBlurType' | 'setOverlay'> & {
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
+  > &
+  Pick<OverlayContextValue, 'setOverlay'> & {
+    channelId: string | undefined;
     hasThreadReplies?: boolean;
-    messageId?: string;
-    messageText?: string;
+    /**
+     * `message` prop has been introduced here as part of `legacyImageViewerSwipeBehaviour` prop.
+     * https://github.com/GetStream/stream-chat-react-native/commit/d5eac6193047916f140efe8e396a671675c9a63f
+     * messageId and messageText may seem redundant now, but to avoid breaking change as part
+     * of minor release, we are keeping those props.
+     *
+     * Also `message` type should ideally be imported from MessageContextValue and not be explicitely mentioned
+     * here, but due to some circular dependencies within the SDK, it causes "exccesive deep nesting" issue with
+     * typescript within Channel component. We should take it as a mini-project and resolve all these circular imports.
+     *
+     * TODO: Fix circular dependencies of imports
+     */
+    message?: MessageType<StreamChatGenerics>;
   };
 
 const GalleryWithContext = <
-  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: GalleryPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: GalleryPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTouchableProps,
@@ -133,14 +115,14 @@ const GalleryWithContext = <
     groupStyles,
     hasThreadReplies,
     images,
-    messageId,
-    messageText,
+    legacyImageViewerSwipeBehaviour,
+    message,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
-    setBlurType,
     setImage,
+    setImages,
     setOverlay,
     threadList,
   } = props;
@@ -148,206 +130,205 @@ const GalleryWithContext = <
   const {
     theme: {
       colors: { overlay },
-      imageGallery: { blurType },
       messageSimple: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
-          halfSize,
+          gridHeight,
+          gridWidth,
           image,
           imageContainer,
+          maxHeight,
+          maxWidth,
+          minHeight,
+          minWidth,
           moreImagesContainer,
           moreImagesText,
-          size,
-          width,
         },
       },
     },
   } = useTheme();
 
-  if (!images?.length) return null;
+  const sizeConfig = {
+    gridHeight,
+    gridWidth,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  };
 
-  // [[{ height: number; url: string; }], [{ height: number; url: string; }, { height: number; url: string; }]]
-  const galleryImages = images.slice(0, 4).reduce((returnArray, currentImage, index) => {
-    const attachmentUrl = currentImage.image_url || currentImage.thumb_url;
-    if (attachmentUrl) {
-      const url = makeImageCompatibleUrl(attachmentUrl);
-      if (images.length <= 2) {
-        returnArray[0] = [...(returnArray[0] || []), { height: size || 200, url }];
-      } else if (images.length === 3) {
-        if (index === 0) {
-          returnArray[0] = [{ height: size || 200, url }];
-        } else {
-          returnArray[1] = [...(returnArray[1] || []), { height: halfSize || 100, url }];
-        }
-      } else {
-        returnArray[index % 2] = [
-          ...(returnArray[index % 2] || []),
-          { height: halfSize || 100, url },
-        ];
-      }
-    }
-    return returnArray;
-  }, [] as { height: number | string; url: string }[][]);
+  const { height, invertedDirections, thumbnailGrid, width } = useMemo(
+    () =>
+      buildGallery({
+        images,
+        sizeConfig,
+      }),
+    [images.length],
+  );
 
-  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  if (!images?.length) return null;
+  const messageText = message?.text;
+  const messageId = message?.id;
+  const numOfColumns = thumbnailGrid.length;
 
   return (
     <View
       style={[
         styles.galleryContainer,
         {
+          height,
           width,
         },
         galleryContainer,
+        {
+          flexDirection: invertedDirections ? 'column' : 'row',
+        },
       ]}
-      testID='image-multiple-container'
+      testID='gallery-container'
     >
-      {galleryImages.map((column, colIndex) => (
-        <View
-          key={`gallery-item-column-${colIndex}`}
-          style={[
-            styles.flex,
-            {
-              flexDirection: images.length === 2 ? 'row' : 'column',
-            },
-            galleryItemColumn,
-          ]}
-        >
-          {column.map(({ height, url }, rowIndex) => {
-            const defaultOnPress = () => {
-              setImage({ messageId, url });
-              setBlurType(blurType);
-              setOverlay('gallery');
-            };
-
-            return (
-              <TouchableOpacity
-                activeOpacity={0.8}
-                disabled={preventPress}
-                key={`gallery-item-${url}/${rowIndex}/${images.length}`}
-                onLongPress={(event) => {
-                  if (onLongPress) {
-                    onLongPress({
-                      emitter: 'gallery',
-                      event,
-                    });
-                  }
-                }}
-                onPress={(event) => {
-                  if (onPress) {
-                    onPress({
-                      defaultHandler: defaultOnPress,
-                      emitter: 'gallery',
-                      event,
-                    });
-                  }
-                }}
-                onPressIn={(event) => {
-                  if (onPressIn) {
-                    onPressIn({
-                      defaultHandler: defaultOnPress,
-                      emitter: 'gallery',
-                      event,
-                    });
-                  }
-                }}
-                style={[
-                  styles.imageContainer,
-                  {
-                    height,
-                  },
-                  imageContainer,
-                ]}
-                testID='image-multiple'
-                {...additionalTouchableProps}
-              >
-                <MemoizedGalleryImage
-                  height={height}
-                  resizeMode='cover'
+      {thumbnailGrid.map((rows, colIndex) => {
+        const numOfRows = rows.length;
+        return (
+          <View
+            key={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
+            style={[
+              {
+                flexDirection: invertedDirections ? 'row' : 'column',
+              },
+              galleryItemColumn,
+            ]}
+            testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
+          >
+            {rows.map(({ height, resizeMode, url, width }, rowIndex) => {
+              const defaultOnPress = () => {
+                // Added if-else to keep the logic readable, instead of DRY.
+                // if - legacyImageViewerSwipeBehaviour is disabled
+                // else - legacyImageViewerSwipeBehaviour is enabled
+                if (!legacyImageViewerSwipeBehaviour && message) {
+                  setImages([message]);
+                  setImage({ messageId: message.id, url });
+                  setOverlay('gallery');
+                } else if (legacyImageViewerSwipeBehaviour) {
+                  setImage({ messageId: message?.id, url });
+                  setOverlay('gallery');
+                }
+              };
+              return (
+                <TouchableOpacity
+                  activeOpacity={0.8}
+                  disabled={preventPress}
+                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${images.length}`}
+                  onLongPress={(event) => {
+                    if (onLongPress) {
+                      onLongPress({
+                        emitter: 'gallery',
+                        event,
+                      });
+                    }
+                  }}
+                  onPress={(event) => {
+                    if (onPress) {
+                      onPress({
+                        defaultHandler: defaultOnPress,
+                        emitter: 'gallery',
+                        event,
+                      });
+                    }
+                  }}
+                  onPressIn={(event) => {
+                    if (onPressIn) {
+                      onPressIn({
+                        defaultHandler: defaultOnPress,
+                        emitter: 'gallery',
+                        event,
+                      });
+                    }
+                  }}
                   style={[
-                    styles.flex,
+                    styles.imageContainer,
                     {
-                      borderBottomLeftRadius:
-                        (images.length === 1 ||
-                          (images.length === 2 && rowIndex === 0) ||
-                          (images.length === 3 && colIndex === 0 && rowIndex === 0) ||
-                          (images.length === 4 && colIndex === 0 && rowIndex === 1)) &&
-                        !messageText &&
-                        ((groupStyle !== 'left_bottom' && groupStyle !== 'left_single') ||
-                          (hasThreadReplies && !threadList))
-                          ? 14
-                          : 0,
-                      borderBottomRightRadius:
-                        (images.length === 1 ||
-                          (colIndex === 1 && (images.length === 2 || rowIndex === 1))) &&
-                        !messageText &&
-                        ((groupStyle !== 'right_bottom' && groupStyle !== 'right_single') ||
-                          (hasThreadReplies && !threadList))
-                          ? 14
-                          : 0,
-                      borderTopLeftRadius: colIndex === 0 && rowIndex === 0 ? 14 : 0,
-                      borderTopRightRadius:
-                        ((colIndex === 1 || images.length === 1) && rowIndex === 0) ||
-                        (images.length === 3 && colIndex === 0 && rowIndex === 1) ||
-                        (images.length === 2 && rowIndex === 1)
-                          ? 14
-                          : 0,
+                      height,
+                      width,
                     },
-                    image,
+                    imageContainer,
                   ]}
-                  uri={url}
-                />
-                {colIndex === 1 && rowIndex === 1 && images.length > 3 ? (
-                  <View
+                  testID={`gallery-${
+                    invertedDirections ? 'row' : 'column'
+                  }-${colIndex}-item-${rowIndex}`}
+                  {...additionalTouchableProps}
+                >
+                  <MemoizedGalleryImage
+                    resizeMode={resizeMode}
                     style={[
-                      StyleSheet.absoluteFillObject,
-                      styles.moreImagesContainer,
-                      { backgroundColor: overlay },
-                      moreImagesContainer,
+                      getGalleryImageBorderRadius({
+                        alignment,
+                        colIndex,
+                        groupStyles,
+                        hasThreadReplies,
+                        height,
+                        invertedDirections,
+                        messageText,
+                        numOfColumns,
+                        numOfRows,
+                        rowIndex,
+                        sizeConfig,
+                        threadList,
+                        width,
+                      }),
+                      image,
+                      {
+                        height: height - 1,
+                        width: width - 1,
+                      },
                     ]}
-                  >
-                    <Text style={[styles.moreImagesText, moreImagesText]}>
-                      {`+${images.length - 3}`}
-                    </Text>
-                  </View>
-                ) : null}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      ))}
+                    uri={url}
+                  />
+                  {colIndex === numOfColumns - 1 &&
+                  rowIndex === numOfRows - 1 &&
+                  images.length > 4 ? (
+                    <View
+                      style={[
+                        StyleSheet.absoluteFillObject,
+                        styles.moreImagesContainer,
+                        { backgroundColor: overlay },
+                        moreImagesContainer,
+                      ]}
+                    >
+                      <Text style={[styles.moreImagesText, moreImagesText]}>
+                        {`+${images.length - 4}`}
+                      </Text>
+                    </View>
+                  ) : null}
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        );
+      })}
     </View>
   );
 };
 
-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: GalleryPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: GalleryPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: GalleryPropsWithContext<StreamChatGenerics>,
+  nextProps: GalleryPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     groupStyles: prevGroupStyles,
     hasThreadReplies: prevHasThreadReplies,
     images: prevImages,
-    messageText: prevMessageText,
+    message: prevMessage,
   } = prevProps;
   const {
     groupStyles: nextGroupStyles,
     hasThreadReplies: nextHasThreadReplies,
     images: nextImages,
-    messageText: nextMessageText,
+    message: nextMessage,
   } = nextProps;
 
-  const messageTextEqual = prevMessageText === nextMessageText;
-  if (!messageTextEqual) return false;
+  const messageEqual = prevMessage?.id === nextMessage?.id;
+  if (!messageEqual) return false;
 
   const groupStylesEqual =
     prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
@@ -360,8 +341,8 @@ const areEqual = <
     prevImages.length === nextImages.length &&
     prevImages.every(
       (image, index) =>
-        image.image_url === nextImages[index].image_url &&
-        image.thumb_url === nextImages[index].thumb_url,
+        getUrlWithoutParams(image.image_url) === getUrlWithoutParams(nextImages[index].image_url) &&
+        getUrlWithoutParams(image.thumb_url) === getUrlWithoutParams(nextImages[index].thumb_url),
     );
   if (!imagesEqual) return false;
 
@@ -371,28 +352,16 @@ const areEqual = <
 const MemoizedGallery = React.memo(GalleryWithContext, areEqual) as typeof GalleryWithContext;
 
 export type GalleryProps<
-  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<GalleryPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<GalleryPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI component for card in attachments.
  */
 export const Gallery = <
-  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: GalleryProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: GalleryProps<StreamChatGenerics>,
 ) => {
   const {
     additionalTouchableProps: propAdditionalTouchableProps,
@@ -400,19 +369,16 @@ export const Gallery = <
     groupStyles: propGroupStyles,
     hasThreadReplies,
     images: propImages,
-    messageId,
-    messageText,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
-    setBlurType: propSetBlurType,
     setImage: propSetImage,
     setOverlay: propSetOverlay,
     threadList: propThreadList,
   } = props;
 
-  const { setImage: contextSetImage } = useImageGalleryContext();
+  const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
@@ -423,10 +389,12 @@ export const Gallery = <
     onPressIn: contextOnPressIn,
     preventPress: contextPreventPress,
     threadList: contextThreadList,
-  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { additionalTouchableProps: contextAdditionalTouchableProps } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { setBlurType: contextSetBlurType, setOverlay: contextSetOverlay } = useOverlayContext();
+  } = useMessageContext<StreamChatGenerics>();
+  const {
+    additionalTouchableProps: contextAdditionalTouchableProps,
+    legacyImageViewerSwipeBehaviour,
+  } = useMessagesContext<StreamChatGenerics>();
+  const { setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
 
@@ -440,7 +408,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;
@@ -450,17 +417,18 @@ export const Gallery = <
       {...{
         additionalTouchableProps,
         alignment,
+        channelId: message?.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         images,
-        messageId: messageId || message?.id,
-        messageText: messageText || message?.text,
+        legacyImageViewerSwipeBehaviour,
+        message,
         onLongPress,
         onPress,
         onPressIn,
         preventPress,
-        setBlurType,
         setImage,
+        setImages,
         setOverlay,
         threadList,
       }}