Merge https://github.com/GetStream/stream-chat-react-native into khushal87-crns-290

khushal87 · khushal87 · commit cebd7cf7d442 · 2022-03-25T11:45:32.000+05:30
diff --git a/docusaurus/docs/reactnative/common-content/contexts/image-gallery-context/set_image.mdx b/docusaurus/docs/reactnative/common-content/contexts/image-gallery-context/set_image.mdx
@@ -1,4 +1,4 @@
-Setter for value [`image`](../../../contexts/message_input_context.mdx#image).
+Setter for value [`image`](../../../contexts/image_gallery_context.mdx#image).
 
 | Type                                                   |
 | ------------------------------------------------------ |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/image-gallery-context/set_images.mdx b/docusaurus/docs/reactnative/common-content/contexts/image-gallery-context/set_images.mdx
@@ -0,0 +1,5 @@
+Setter for value [`images`](../../../contexts/image_gallery_context.mdx#images).
+
+| Type                                                                                                                                                                         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `(messageWithImages: [MessageType](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/hooks/useMessageList.ts)[]) => void` |
diff --git a/docusaurus/docs/reactnative/common-content/core-components/overlay-provider/props/giphy_version.mdx b/docusaurus/docs/reactnative/common-content/core-components/overlay-provider/props/giphy_version.mdx
@@ -0,0 +1,6 @@
+The giphy version to render when viewing a Giphy in the Image Gallery.
+Check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.
+
+| Type   | Default        |
+| ------ | -------------- |
+| string | 'fixed_height' |
diff --git a/docusaurus/docs/reactnative/core-components/overlay_provider.mdx b/docusaurus/docs/reactnative/core-components/overlay_provider.mdx
@@ -12,6 +12,7 @@ import AttachmentPickerBottomSheetHeight from '../common-content/core-components
 import AttachmentPickerErrorButtonText from '../common-content/core-components/overlay-provider/props/attachment_picker_error_button_text.mdx';
 import AttachmentPickerErrorText from '../common-content/core-components/overlay-provider/props/attachment_picker_error_text.mdx';
 import AttachmentSelectionBarHeight from '../common-content/core-components/overlay-provider/props/attachment_selection_bar_height.mdx';
+import GiphyVersion from '../common-content/core-components/overlay-provider/props/giphy_version.mdx';
 import I18nInstance from '../common-content/core-components/overlay-provider/props/i18n_instance.mdx';
 import ImageGalleryCustomComponents from '../common-content/core-components/overlay-provider/props/image_gallery_custom_components.mdx';
 import ImageGalleryGridHandleHeight from '../common-content/core-components/overlay-provider/props/image_gallery_grid_handle_height.mdx';
@@ -153,6 +154,10 @@ This can also be set via the `setBottomInset` function provided by the `useAttac
 | ------ | ------- |
 | number | 0       |
 
+### giphyVersion
+
+<GiphyVersion />
+
 ### i18nInstance
 
 <I18nInstance />
diff --git a/docusaurus/docs/reactnative/ui-components/gallery.mdx b/docusaurus/docs/reactnative/ui-components/gallery.mdx
@@ -4,6 +4,7 @@ title: Gallery
 ---
 
 import SetImage from '../common-content/contexts/image-gallery-context/set_image.mdx';
+import SetImages from '../common-content/contexts/image-gallery-context/set_images.mdx';
 
 import Alignment from '../common-content/contexts/message-context/alignment.mdx';
 import GroupStyles from '../common-content/contexts/message-context/group_styles.mdx';
@@ -112,6 +113,10 @@ If true, onPress handler will be disabled.
 
 <SetImage />
 
+### <div class="label description">_overrides the value from [ImageGalleryContext](../contexts/image_gallery_context.mdx#setimages)_</div> setImages {#setimages}
+
+<SetImages />
+
 ### <div class="label description">_overrides the value from [OverlayContext](../contexts/overlay_context.mdx#setoverlay)_</div> setOverlay {#setoverlay}
 
 <SetOverlay />
diff --git a/docusaurus/docs/reactnative/ui-components/giphy.mdx b/docusaurus/docs/reactnative/ui-components/giphy.mdx
@@ -7,8 +7,11 @@ import HandleAction from '../common-content/contexts/message-context/handle_acti
 import OnLongPress from '../common-content/contexts/message-context/on_long_press.mdx';
 import OnPress from '../common-content/contexts/message-context/on_press.mdx';
 import OnPressIn from '../common-content/contexts/message-context/on_press_in.mdx';
+import SetImage from '../common-content/contexts/image-gallery-context/set_image.mdx';
+import SetImages from '../common-content/contexts/image-gallery-context/set_images.mdx';
 
 import AdditionalTouchableProps from '../common-content/core-components/channel/props/additional_touchable_props.mdx';
+import SetOverlay from '../common-content/contexts/overlay-context/set_overlay.mdx';
 
 Component to render giphy attachments within the [`MessageList`](./message_list.mdx).
 
@@ -43,3 +46,15 @@ Attachment object for `giphy` type attachment.
 ### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#onpressin)_</div> onPressIn {#onpressin}
 
 <OnPressIn />
+
+### <div class="label description">_overrides the value from [ImageGalleryContext](../contexts/image_gallery_context.mdx#setimage)_</div> setImage {#setimage}
+
+<SetImage />
+
+### <div class="label description">_overrides the value from [ImageGalleryContext](../contexts/image_gallery_context.mdx#setimages)_</div> setImages {#setimages}
+
+<SetImages />
+
+### <div class="label description">_overrides the value from [OverlayContext](../contexts/overlay_context.mdx#setoverlay)_</div> setOverlay {#setoverlay}
+
+<SetOverlay />
diff --git a/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj b/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj
@@ -495,7 +495,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
-				CURRENT_PROJECT_VERSION = 77;
+				CURRENT_PROJECT_VERSION = 78;
 				DEVELOPMENT_TEAM = EHV7XZLAHA;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = SampleApp/Info.plist;
@@ -525,7 +525,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 77;
+				CURRENT_PROJECT_VERSION = 78;
 				DEVELOPMENT_TEAM = EHV7XZLAHA;
 				INFOPLIST_FILE = SampleApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
diff --git a/examples/SampleApp/ios/SampleApp/Info.plist b/examples/SampleApp/ios/SampleApp/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>77</string>
+	<string>78</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true />
 	<key>NSAppTransportSecurity</key>
diff --git a/examples/SampleApp/ios/SampleAppTests/Info.plist b/examples/SampleApp/ios/SampleAppTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>77</string>
+	<string>78</string>
 </dict>
 </plist>
diff --git a/package/src/components/Attachment/Giphy.tsx b/package/src/components/Attachment/Giphy.tsx
@@ -3,6 +3,10 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import {
+  ImageGalleryContextValue,
+  useImageGalleryContext,
+} from '../../contexts/imageGalleryContext/ImageGalleryContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -11,6 +15,10 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OverlayContextValue,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
@@ -107,13 +115,20 @@ const styles = StyleSheet.create({
 
 export type GiphyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageContextValue<StreamChatGenerics>,
-  'handleAction' | 'isMyMessage' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
-> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    | 'handleAction'
+    | 'isMyMessage'
+    | 'message'
+    | 'onLongPress'
+    | 'onPress'
+    | 'onPressIn'
+    | 'preventPress'
+  > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
     attachment: Attachment<StreamChatGenerics>;
-  };
+  } & Pick<OverlayContextValue, 'setOverlay'>;
 
 const GiphyWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -123,12 +138,17 @@ const GiphyWithContext = <
   const {
     additionalTouchableProps,
     attachment,
+    giphyVersion,
     handleAction,
     isMyMessage,
+    message,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
+    setImage,
+    setImages,
+    setOverlay,
   } = props;
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
@@ -159,8 +179,14 @@ const GiphyWithContext = <
   let uri = image_url || thumb_url;
   const giphyDimensions: { height?: number; width?: number } = {};
 
+  const defaultOnPress = () => {
+    setImages([message]);
+    setImage({ messageId: message.id, url: uri });
+    setOverlay('gallery');
+  };
+
   if (type === 'giphy' && giphyData) {
-    const giphyVersionInfo = giphyData[props.giphyVersion];
+    const giphyVersionInfo = giphyData[giphyVersion];
     uri = giphyVersionInfo.url;
     giphyDimensions.height = parseFloat(giphyVersionInfo.height);
     giphyDimensions.width = parseFloat(giphyVersionInfo.width);
@@ -247,6 +273,7 @@ const GiphyWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            defaultHandler: defaultOnPress,
             emitter: 'giphy',
             event,
           });
@@ -337,10 +364,7 @@ const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWith
 
 export type GiphyProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Pick<MessageContextValue<StreamChatGenerics>, 'isMyMessage' | 'onLongPress' | 'onPressIn'> &
-    Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'>
-> & {
+> = Partial<GiphyPropsWithContext<StreamChatGenerics>> & {
   attachment: Attachment<StreamChatGenerics>;
 };
 
@@ -352,21 +376,26 @@ export const Giphy = <
 >(
   props: GiphyProps<StreamChatGenerics>,
 ) => {
-  const { handleAction, isMyMessage, onLongPress, onPress, onPressIn, preventPress } =
+  const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-
+  const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setOverlay } = useOverlayContext();
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
         giphyVersion,
         handleAction,
         isMyMessage,
+        message,
         onLongPress,
         onPress,
         onPressIn,
         preventPress,
+        setImage,
+        setImages,
+        setOverlay,
       }}
       {...props}
     />
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -53,7 +53,10 @@ import {
 } from './components/ImageGridHandle';
 
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
+import {
+  OverlayProviderProps,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -130,14 +133,15 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
      */
     imageGalleryGridSnapPoints?: [string | number, string | number];
     numberOfImageGalleryGridColumns?: number;
-  };
+  } & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion'>;
 
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: Props<StreamChatGenerics>,
 ) => {
   const {
+    giphyVersion,
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
     imageGalleryGridSnapPoints,
@@ -308,10 +312,11 @@ export const ImageGallery = <
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          getUrlOfImageAttachment(attachment),
+          (attachment.type === 'giphy' && attachment.giphy?.[giphyVersion]?.url) ||
+          (attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            getUrlOfImageAttachment(attachment)),
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {
diff --git a/package/src/contexts/overlayContext/OverlayContext.tsx b/package/src/contexts/overlayContext/OverlayContext.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Attachment } from 'stream-chat';
 
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
@@ -52,6 +53,10 @@ export type OverlayProviderProps<
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    /**
+     * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
+     * */
+    giphyVersion: keyof NonNullable<Attachment['giphy']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
@@ -81,6 +81,7 @@ export const OverlayProvider = <
       }
     },
     FileSelectorIcon = DefaultFileSelectorIcon,
+    giphyVersion = 'fixed_height',
     i18nInstance,
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
@@ -222,6 +223,7 @@ export const OverlayProvider = <
                 )}
                 {overlay === 'gallery' && (
                   <ImageGallery<StreamChatGenerics>
+                    giphyVersion={giphyVersion}
                     imageGalleryCustomComponents={imageGalleryCustomComponents}
                     imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
                     imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-Setter for value [`image`](../../../contexts/message_input_context.mdx#image).
	`1`	+Setter for value [`image`](../../../contexts/image_gallery_context.mdx#image).
`2`	`2`
`3`	`3`	`\| Type \|`
`4`	`4`	`\| ------------------------------------------------------ \|`