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

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',
@@ -128,12 +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
      */
     message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-    messageId?: string;
-    messageText?: string;
   };
 
 const GalleryWithContext = <
@@ -155,8 +138,6 @@ const GalleryWithContext = <
     images,
     legacyImageViewerSwipeBehaviour,
     message,
-    messageId,
-    messageText: messageTextProp,
     onLongPress,
     onPress,
     onPressIn,
@@ -174,179 +155,178 @@ 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>
   );
 };
@@ -367,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];
@@ -430,8 +410,6 @@ export const Gallery = <
     groupStyles: propGroupStyles,
     hasThreadReplies,
     images: propImages,
-    messageId,
-    messageText,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
@@ -480,14 +458,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,

package/src/components/Attachment/Giphy.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -13,10 +15,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Left } from '../../icons/Left';
 import { Lightning } from '../../icons/Lightning';
 import { Right } from '../../icons/Right';
-import { makeImageCompatibleUrl } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,6 +25,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   cancel: {

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { Attachment } from '../Attachment';
-import { AttachmentActions } from '../AttachmentActions';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { v4 as uuidv4 } from 'uuid';
 
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
@@ -15,7 +15,8 @@ import {
   generateImgurAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { Attachment } from '../Attachment';
+import { AttachmentActions } from '../AttachmentActions';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -71,7 +72,10 @@ describe('Attachment', () => {
   });
 
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
-    const attachment = generateImageAttachment();
+    const attachment = generateImageAttachment({
+      og_scrape_url: uuidv4(),
+      title_link: uuidv4(),
+    });
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -80,14 +84,11 @@ describe('Attachment', () => {
   });
 
   it('should render Gallery component if image does not have title_link or og_scrape_url', async () => {
-    const attachment = generateImageAttachment({
-      og_scrape_url: undefined,
-      title_link: undefined,
-    });
+    const attachment = generateImageAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('image-multiple')).toBeTruthy();
+      expect(getByTestId('gallery-container')).toBeTruthy();
     });
   });