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

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,
@@ -10,44 +12,26 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Left } from '../../icons/Left';
+import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
-import { Right } from '../../icons/Right';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
-import type { Attachment } from 'stream-chat';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 const styles = StyleSheet.create({
+  buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
   cancel: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  cancelContainer: {
-    alignItems: 'center',
-    borderRightWidth: 1,
-    flex: 1,
-    justifyContent: 'center',
-  },
   container: {
     overflow: 'hidden',
-    width: 256,
+    width: 270,
   },
   giphy: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    height: 140,
+    borderRadius: 2,
+    height: 170,
+    width: 270,
   },
   giphyContainer: {
     alignItems: 'center',
@@ -57,36 +41,47 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 68,
   },
+  giphyHeaderText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  giphyHeaderTitle: {
+    fontSize: 14,
+  },
   giphyMask: {
     bottom: 8,
     left: 8,
     position: 'absolute',
   },
-  giphyText: { fontSize: 11, fontWeight: '600' },
+  giphyMaskText: { fontSize: 13, fontWeight: '600' },
+  header: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 8,
+    width: '60%',
+  },
   margin: {
-    margin: 8,
+    margin: 1,
   },
   row: { flexDirection: 'row' },
   selectionContainer: {
-    borderRadius: 8,
+    borderBottomLeftRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
-    width: 250,
-  },
-  selector: {
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 8,
-    paddingHorizontal: 8,
+    width: 272,
   },
   send: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  sendContainer: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  shuffle: {
+    fontSize: 14,
+    fontWeight: '600',
+    paddingVertical: 16,
+  },
   shuffleButton: {
     alignItems: 'center',
     borderRadius: 16,
@@ -95,39 +90,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 32,
   },
-  title: {
-    fontSize: 14,
-    fontStyle: 'italic',
-    fontWeight: '500',
-  },
 });
 
 export type GiphyPropsWithContext<
-  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,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'additionalTouchableProps'> & {
-    attachment: Attachment<At>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'> & {
+    attachment: Attachment<StreamChatGenerics>;
   };
 
 const GiphyWithContext = <
-  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: GiphyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: GiphyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTouchableProps,
@@ -143,22 +121,22 @@ const GiphyWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, border, grey, overlay, white },
+      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
       messageSimple: {
         giphy: {
+          buttonContainer,
           cancel,
-          cancelContainer,
           container,
           giphy,
           giphyContainer,
+          giphyHeaderText,
+          giphyHeaderTitle,
           giphyMask,
-          giphyText,
+          giphyMaskText,
+          header,
           selectionContainer,
-          selector,
           send,
-          sendContainer,
-          shuffleButton,
-          title: titleStyle,
+          shuffle,
         },
       },
     },
@@ -176,51 +154,49 @@ const GiphyWithContext = <
         selectionContainer,
       ]}
     >
+      <View style={[styles.header, header]}>
+        <GiphyIcon />
+        <Text style={[styles.giphyHeaderText, giphyHeaderText]}>Giphy</Text>
+        <Text
+          style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
+        >{`/giphy ${title}`}</Text>
+      </View>
       <View style={styles.margin}>
         <Image
           resizeMode='cover'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphy]}
         />
-        <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
-            <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
-              {type?.toUpperCase()}
-            </Text>
-          </View>
-        </View>
       </View>
       <View>
-        <View style={[styles.selector, { borderBottomColor: border }, selector]}>
-          <TouchableOpacity
-            onPress={() => handleAction('image_action', 'shuffle')}
-            style={[styles.shuffleButton, { borderColor: border }, shuffleButton]}
-          >
-            <Left />
-          </TouchableOpacity>
-          <Text style={[styles.title, { color: black }, titleStyle]}>{`"${title}"`}</Text>
+        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[1].name && actions?.[1].value && handleAction) {
-                handleAction(actions[1].name, actions[1].value);
+              if (actions?.[2].name && actions?.[2].value && handleAction) {
+                handleAction(actions[2].name, actions[2].value);
               }
             }}
-            style={[styles.shuffleButton, shuffleButton]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Right />
+            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
           </TouchableOpacity>
-        </View>
-        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[2].name && actions?.[2].value && handleAction) {
-                handleAction(actions[2].name, actions[2].value);
+              if (actions?.[1].name && actions?.[1].value && handleAction) {
+                handleAction(actions[1].name, actions[1].value);
               }
             }}
-            style={[styles.cancelContainer, { borderRightColor: border }, cancelContainer]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
+            <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={() => {
@@ -228,7 +204,7 @@ const GiphyWithContext = <
                 handleAction(actions[0].name, actions[0].value);
               }
             }}
-            style={[styles.sendContainer, sendContainer]}
+            style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
           </TouchableOpacity>
@@ -273,9 +249,9 @@ const GiphyWithContext = <
           style={[styles.giphy, giphy]}
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
+          <View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
             <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
+            <Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
               {type?.toUpperCase()}
             </Text>
           </View>
@@ -285,17 +261,9 @@ const GiphyWithContext = <
   );
 };
 
-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: GiphyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: GiphyPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: GiphyPropsWithContext<StreamChatGenerics>,
+  nextProps: GiphyPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
@@ -324,37 +292,25 @@ const areEqual = <
 const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWithContext;
 
 export type GiphyProps<
-  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,
 > = Partial<
-  Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'onLongPress' | 'onPressIn'> &
-    Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'additionalTouchableProps'>
+  Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPressIn'> &
+    Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'>
 > & {
-  attachment: Attachment<At>;
+  attachment: Attachment<StreamChatGenerics>;
 };
 
 /**
  * UI component for card in attachments.
  */
 export const Giphy = <
-  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: GiphyProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: GiphyProps<StreamChatGenerics>,
 ) => {
   const { handleAction, onLongPress, onPress, onPressIn, preventPress } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { additionalTouchableProps } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessageContext<StreamChatGenerics>();
+  const { additionalTouchableProps } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedGiphy

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

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

@@ -0,0 +1,233 @@
+import React from 'react';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Gallery', () => {
+  const user1 = generateUser();
+
+  const getComponent = async (attachments = []) => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ attachments, user: user1 })],
+    });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    return (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+  };
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render two portrait images in two columns', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 700,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      // expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  it('should render portrait and landscape image in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   *
+   * ----------
+   * |        |
+   * ----------
+   * |        |
+   * ----------
+   */
+  it('should render two landscape images in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 300,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |----|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a portrait image in two columns, with portrait in its own column', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 600,
+      original_width: 300,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |         |
+   * |         |
+   * |---------|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a landscape image in two rows, with landscape in its own row', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 4 images in grid of two columns and 2 rows', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const image2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image3 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image4 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([image1, image2, image3, image4]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-0-item-1').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+});