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

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,40 +23,21 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 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 +47,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 +59,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { flex: 1, padding: 1 },
+  imageContainer: { padding: 1 },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -92,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' | 'setImages'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
   Pick<
-    MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageContextValue<StreamChatGenerics>,
     | 'alignment'
     | 'groupStyles'
     | 'images'
@@ -112,7 +83,7 @@ export type GalleryPropsWithContext<
     | 'threadList'
   > &
   Pick<
-    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessagesContextValue<StreamChatGenerics>,
     'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
@@ -128,24 +99,15 @@ 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
      */
-    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-    messageId?: string;
-    messageText?: string;
+    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,
@@ -155,8 +117,6 @@ const GalleryWithContext = <
     images,
     legacyImageViewerSwipeBehaviour,
     message,
-    messageId,
-    messageText: messageTextProp,
     onLongPress,
     onPress,
     onPressIn,
@@ -174,210 +134,201 @@ const GalleryWithContext = <
         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 });
-                setOverlay('gallery');
-              } else if (legacyImageViewerSwipeBehaviour) {
-                setImage({ messageId: 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.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];
@@ -401,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,
@@ -430,8 +369,6 @@ export const Gallery = <
     groupStyles: propGroupStyles,
     hasThreadReplies,
     images: propImages,
-    messageId,
-    messageText,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
@@ -441,7 +378,7 @@ export const Gallery = <
     threadList: propThreadList,
   } = props;
 
-  const { setImage: contextSetImage, setImages } = useImageGalleryContext();
+  const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
@@ -452,11 +389,11 @@ export const Gallery = <
     onPressIn: contextOnPressIn,
     preventPress: contextPreventPress,
     threadList: contextThreadList,
-  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessageContext<StreamChatGenerics>();
   const {
     additionalTouchableProps: contextAdditionalTouchableProps,
     legacyImageViewerSwipeBehaviour,
-  } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessagesContext<StreamChatGenerics>();
   const { setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
@@ -480,14 +417,12 @@ export const Gallery = <
       {...{
         additionalTouchableProps,
         alignment,
-        channelId: message.cid,
+        channelId: message?.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         images,
         legacyImageViewerSwipeBehaviour,
         message,
-        messageId: messageId || message?.id,
-        messageText: messageText || message?.text,
         onLongPress,
         onPress,
         onPressIn,