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

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,9 +23,6 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
-
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -39,27 +33,20 @@ import type {
   DefaultUserType,
   UnknownType,
 } 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
       {...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'
     />
@@ -69,7 +56,6 @@ const GalleryImage: React.FC<
 const MemoizedGalleryImage = React.memo(
   GalleryImage,
   (prevProps, nextProps) =>
-    prevProps.height === nextProps.height &&
     getUrlWithoutParams(prevProps.uri) === getUrlWithoutParams(nextProps.uri),
 ) as typeof GalleryImage;
 
@@ -82,7 +68,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { flex: 1, padding: 1 },
+  imageContainer: { padding: 1 },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -115,7 +101,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
@@ -126,13 +114,9 @@ export type GalleryPropsWithContext<
      * 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[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;
   };
 
 const GalleryWithContext = <
@@ -154,13 +138,10 @@ const GalleryWithContext = <
     images,
     legacyImageViewerSwipeBehaviour,
     message,
-    messageId,
-    messageText: messageTextProp,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
-    setBlurType,
     setImage,
     setImages,
     setOverlay,
@@ -170,186 +151,182 @@ 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?.()}`;
-  const messageText = messageTextProp || message?.text;
+  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 = () => {
-              // 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: messageId || message.id, url });
-                setBlurType(blurType);
-                setOverlay('gallery');
-              } else if (legacyImageViewerSwipeBehaviour) {
-                setImage({ messageId: messageId || message?.id, url });
-                setBlurType(blurType);
-                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.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>
   );
 };
@@ -370,17 +347,17 @@ const areEqual = <
     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];
@@ -433,13 +410,10 @@ 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,
@@ -461,7 +435,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 +449,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,18 +458,16 @@ export const Gallery = <
       {...{
         additionalTouchableProps,
         alignment,
+        channelId: message?.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         images,
         legacyImageViewerSwipeBehaviour,
         message,
-        messageId: messageId || message?.id,
-        messageText: messageText || message?.text,
         onLongPress,
         onPress,
         onPressIn,
         preventPress,
-        setBlurType,
         setImage,
         setImages,
         setOverlay,