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

package/src/components/Attachment/Giphy.tsx

@@ -12,41 +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 {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
 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',
@@ -56,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,
@@ -94,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,
@@ -142,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,
         },
       },
     },
@@ -175,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={() => {
@@ -227,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>
@@ -272,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>
@@ -284,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 },
@@ -323,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__/buildGallery.test.js

@@ -97,7 +97,7 @@ describe('buildGallery', () => {
   it('thumbnail size should be smaller than the limits set by sizeConfig', () => {
     const bigImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 1200,
       original_width: 900,
     });
@@ -107,13 +107,13 @@ describe('buildGallery', () => {
       sizeConfig: defaultSizeConfig,
     });
     const t1 = tg1[0][0];
-    expect(t1.url.includes(`h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
+    expect(t1.url.includes(`&h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
     expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
     expect(t1.url.includes(`&resize=clip`)).toBe(true);
 
     const smallImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 30,
       original_width: 20,
     });
@@ -124,7 +124,7 @@ describe('buildGallery', () => {
     });
 
     const t2 = tg2[0][0];
-    expect(t2.url.includes(`h=*`)).toBe(true);
+    expect(t2.url.includes(`&h=*`)).toBe(true);
     expect(t2.url.includes(`&w=*`)).toBe(true);
     expect(t2.url.includes(`&resize=*`)).toBe(true);
   });

package/src/components/Attachment/utils/buildGallery/buildGallery.ts

@@ -8,7 +8,7 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
  * Builds and returns a gallery of optimized images to be rendered on UI.
@@ -26,11 +26,13 @@ import type { DefaultAttachmentType, UnknownType } from '../../../../types/types
  *
  * @return {GallerySizeAndThumbnailGrid}
  */
-export function buildGallery<At extends UnknownType = DefaultAttachmentType>({
+export function buildGallery<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   images,
   sizeConfig,
 }: {
-  images: Attachment<At>[];
+  images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   if (images.length === 1) {

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -4,7 +4,7 @@ import { buildThumbnail } from './buildThumbnail';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import type { DefaultAttachmentType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
 /**
@@ -19,13 +19,9 @@ function clamp(number: number, min: number, max: number) {
   return Math.min(Math.max(number, min), max);
 }
 
-function getContainerSize<At extends DefaultAttachmentType = DefaultAttachmentType>({
-  image,
-  sizeConfig,
-}: {
-  image: Attachment<At>;
-  sizeConfig: GallerySizeConfig;
-}) {
+function getContainerSize<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({ image, sizeConfig }: { image: Attachment<StreamChatGenerics>; sizeConfig: GallerySizeConfig }) {
   const { original_height: height, original_width: width } = image;
   const { gridHeight, gridWidth, maxHeight, maxWidth, minHeight, minWidth } = sizeConfig;
 
@@ -68,12 +64,12 @@ function getContainerSize<At extends DefaultAttachmentType = DefaultAttachmentTy
 }
 
 export function buildGalleryOfSingleImage<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   image,
   sizeConfig,
 }: {
-  image: Attachment<At>;
+  image: Attachment<StreamChatGenerics>;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   const container = getContainerSize({

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -4,7 +4,7 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import type { DefaultAttachmentType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
 /** function to move item to the front of the array */
@@ -20,12 +20,12 @@ function moveToFront<T>(array: T[], item: T): T[] {
 }
 
 export function buildGalleryOfThreeImages<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
   sizeConfig,
 }: {
-  images: Attachment<At>[];
+  images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   // Find the most ladscape and most portrait image.
@@ -55,9 +55,9 @@ export function buildGalleryOfThreeImages<
         landscapeImageAspectRatio: 1,
         portraitImageAspectRatio: 1,
       } as {
-        landscapeImage: Attachment<At>;
+        landscapeImage: Attachment<StreamChatGenerics>;
         landscapeImageAspectRatio: number;
-        portraitImage: Attachment<At>;
+        portraitImage: Attachment<StreamChatGenerics>;
         portraitImageAspectRatio: number;
       },
     );

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -4,14 +4,16 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
-import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
 
-export function buildGalleryOfTwoImages<At extends UnknownType = DefaultAttachmentType>({
+export function buildGalleryOfTwoImages<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   images,
   sizeConfig,
 }: {
-  images: Attachment<At>[];
+  images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   const aspectRatio1 = getAspectRatio(images[0]);

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -4,19 +4,21 @@ import type { Attachment } from 'stream-chat';
 
 import type { Thumbnail } from './types';
 
-import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
 
-export function buildThumbnail<At extends UnknownType = DefaultAttachmentType>({
+export function buildThumbnail<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   height,
   image,
   resizeMode,
   width,
 }: {
   height: number;
-  image: Attachment<At>;
+  image: Attachment<StreamChatGenerics>;
   width: number;
   resizeMode?: ImageResizeMode;
 }): Thumbnail {

package/src/components/Attachment/utils/buildGallery/buildThumbnailGrid.ts

@@ -3,7 +3,7 @@ import type { Attachment } from 'stream-chat';
 import { buildThumbnail } from './buildThumbnail';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } from './types';
 
-import type { DefaultAttachmentType, UnknownType } from '../../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
  * Builds a grid of thumbnail images from image attachments.
@@ -133,14 +133,16 @@ import type { DefaultAttachmentType, UnknownType } from '../../../../types/types
  *
  * @return {GallerySizeAndThumbnailGrid}
  */
-export function buildThumbnailGrid<At extends UnknownType = DefaultAttachmentType>({
+export function buildThumbnailGrid<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   grid,
   images,
   invertedDirections = false,
   sizeConfig,
 }: {
   grid: number[][];
-  images: Attachment<At>[];
+  images: Attachment<StreamChatGenerics>[];
   invertedDirections: boolean;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {

package/src/components/Attachment/utils/getAspectRatio.ts

@@ -1,6 +1,6 @@
 import type { Attachment } from 'stream-chat';
 
-import type { DefaultAttachmentType, UnknownType } from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 /**
  * Returns the aspect ratio of an image attachment.
@@ -8,9 +8,9 @@ import type { DefaultAttachmentType, UnknownType } from '../../../types/types';
  * @param image Image attachment.
  * @returns {number}
  */
-export function getAspectRatio<At extends UnknownType = DefaultAttachmentType>(
-  image: Attachment<At>,
-) {
+export function getAspectRatio<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(image: Attachment<StreamChatGenerics>) {
   if (image.type !== 'image') {
     throw new Error('getAspectRatio() can only be called on an image attachment');
   }