stream-chat-react-native-core 5.5.1 → 5.6.0-beta.1

package/lib/commonjs/components/MessageInput/ImageUploadPreview.js

@@ -13,6 +13,8 @@ var _reactNative = require("react-native");
 
 var _UploadProgressIndicator = require("./UploadProgressIndicator");
 
+var _contexts = require("../../contexts");
+
 var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
@@ -81,7 +83,8 @@ var styles = _reactNative.StyleSheet.create({
 });
 
 var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props) {
-  var imageUploads = props.imageUploads,
+  var enableOfflineSupport = props.enableOfflineSupport,
+      imageUploads = props.imageUploads,
       removeImage = props.removeImage,
       uploadImage = props.uploadImage;
 
@@ -110,7 +113,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 117,
+        lineNumber: 119,
         columnNumber: 7
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -118,7 +121,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118,
+        lineNumber: 120,
         columnNumber: 9
       }
     }, _react["default"].createElement(_Warning.Warning, {
@@ -129,7 +132,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 119,
+        lineNumber: 121,
         columnNumber: 11
       }
     }), _react["default"].createElement(_reactNative.Text, {
@@ -139,7 +142,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 125,
+        lineNumber: 127,
         columnNumber: 11
       }
     }, t('Not supported')))) : null;
@@ -148,7 +151,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
   var renderItem = function renderItem(_ref2) {
     var index = _ref2.index,
         item = _ref2.item;
-    var indicatorType = (0, _utils.getIndicatorTypeForFileState)(item.state);
+    var indicatorType = (0, _utils.getIndicatorTypeForFileState)(item.state, enableOfflineSupport);
     var itemMarginForIndex = index === imageUploads.length - 1 ? {
       marginRight: 8
     } : {};
@@ -157,7 +160,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 136,
+        lineNumber: 138,
         columnNumber: 7
       }
     }, _react["default"].createElement(_UploadProgressIndicator.UploadProgressIndicator, {
@@ -171,7 +174,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 137,
+        lineNumber: 139,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.Image, {
@@ -183,7 +186,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 144,
+        lineNumber: 146,
         columnNumber: 11
       }
     })), _react["default"].createElement(DismissUpload, {
@@ -193,7 +196,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 150,
+        lineNumber: 152,
         columnNumber: 9
       }
     }), _react["default"].createElement(UnsupportedImageTypeIndicator, {
@@ -201,7 +204,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 155,
+        lineNumber: 157,
         columnNumber: 9
       }
     }));
@@ -225,7 +228,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 161,
+      lineNumber: 163,
       columnNumber: 5
     }
   }) : null;
@@ -252,7 +255,7 @@ var DismissUpload = function DismissUpload(_ref3) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189,
+      lineNumber: 191,
       columnNumber: 5
     }
   }, _react["default"].createElement(_Close.Close, {
@@ -260,7 +263,7 @@ var DismissUpload = function DismissUpload(_ref3) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 194,
+      lineNumber: 196,
       columnNumber: 7
     }
   }));
@@ -277,6 +280,9 @@ var areEqual = function areEqual(prevProps, nextProps) {
 var MemoizedImageUploadPreviewWithContext = _react["default"].memo(ImageUploadPreviewWithContext, areEqual);
 
 var ImageUploadPreview = function ImageUploadPreview(props) {
+  var _useChatContext = (0, _contexts.useChatContext)(),
+      enableOfflineSupport = _useChatContext.enableOfflineSupport;
+
   var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
       imageUploads = _useMessageInputConte.imageUploads,
       removeImage = _useMessageInputConte.removeImage,
@@ -285,12 +291,13 @@ var ImageUploadPreview = function ImageUploadPreview(props) {
   return _react["default"].createElement(MemoizedImageUploadPreviewWithContext, (0, _extends2["default"])({
     imageUploads: imageUploads,
     removeImage: removeImage,
-    uploadImage: uploadImage
+    uploadImage: uploadImage,
+    enableOfflineSupport: enableOfflineSupport
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 230,
+      lineNumber: 233,
       columnNumber: 5
     }
   }));

package/lib/commonjs/components/MessageInput/ImageUploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","fileSizeText","fontSize","paddingHorizontal","flatList","paddingBottom","iconContainer","alignItems","flexDirection","justifyContent","itemContainer","height","marginLeft","unsupportedImage","bottom","marginHorizontal","upload","width","warningIconStyle","marginTop","warningText","color","ImageUploadPreviewWithContext","props","imageUploads","removeImage","uploadImage","theme","messageInput","imageUploadPreview","UnsupportedImageTypeIndicator","indicatorType","colors","accent_red","overlay","white","t","ProgressIndicatorTypes","NOT_SUPPORTED","backgroundColor","renderItem","index","item","state","itemMarginForIndex","length","marginRight","newImage","uri","file","url","id","_","offset","DismissUpload","onPress","dismissIconColor","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  FlatList,\n  Image,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  TouchableOpacityProps,\n  View,\n} from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n  ImageUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nconst IMAGE_PREVIEW_SIZE = 100;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    position: 'absolute',\n    right: 8,\n    top: 8,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  flatList: { paddingBottom: 12 },\n  iconContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n  itemContainer: {\n    flexDirection: 'row',\n    height: IMAGE_PREVIEW_SIZE,\n    marginLeft: 8,\n  },\n  unsupportedImage: {\n    borderRadius: 20,\n    bottom: 8,\n    flexDirection: 'row',\n    marginHorizontal: 3,\n    position: 'absolute',\n  },\n  upload: {\n    borderRadius: 10,\n    height: IMAGE_PREVIEW_SIZE,\n    width: IMAGE_PREVIEW_SIZE,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 6,\n  },\n  warningText: {\n    alignItems: 'center',\n    color: 'black',\n    fontSize: 10,\n    justifyContent: 'center',\n    marginHorizontal: 4,\n  },\n});\n\ntype ImageUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'imageUploads' | 'removeImage' | 'uploadImage'\n>;\n\nexport type ImageUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\ntype ImageUploadPreviewItem = { index: number; item: ImageUpload };\n\nconst ImageUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = props;\n\n  const {\n    theme: {\n      messageInput: {\n        imageUploadPreview: { flatList, itemContainer, upload },\n      },\n    },\n  } = useTheme();\n\n  const UnsupportedImageTypeIndicator = ({\n    indicatorType,\n  }: {\n    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;\n  }) => {\n    const {\n      theme: {\n        colors: { accent_red, overlay, white },\n      },\n    } = useTheme();\n\n    const { t } = useTranslationContext();\n    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>\n        <View style={[styles.iconContainer]}>\n          <Warning\n            height={WARNING_ICON_SIZE}\n            pathFill={accent_red}\n            style={styles.warningIconStyle}\n            width={WARNING_ICON_SIZE}\n          />\n          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>\n        </View>\n      </View>\n    ) : null;\n  };\n\n  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state);\n    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};\n\n    return (\n      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>\n        <UploadProgressIndicator\n          action={() => {\n            uploadImage({ newImage: item });\n          }}\n          style={styles.upload}\n          type={indicatorType}\n        >\n          <Image\n            resizeMode='cover'\n            source={{ uri: item.file.uri || item.url }}\n            style={[styles.upload, upload]}\n          />\n        </UploadProgressIndicator>\n        <DismissUpload\n          onPress={() => {\n            removeImage(item.id);\n          }}\n        />\n        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />\n      </View>\n    );\n  };\n\n  return imageUploads.length > 0 ? (\n    <FlatList\n      data={imageUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: IMAGE_PREVIEW_SIZE + 8,\n        offset: (IMAGE_PREVIEW_SIZE + 8) * index,\n      })}\n      horizontal\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\ntype DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;\n\nconst DismissUpload = ({ onPress }: DismissUploadProps) => {\n  const {\n    theme: {\n      colors: { overlay, white },\n      messageInput: {\n        imageUploadPreview: { dismiss, dismissIconColor },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <TouchableOpacity\n      onPress={onPress}\n      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n      testID='remove-image-upload-preview'\n    >\n      <Close pathFill={dismissIconColor || white} />\n    </TouchableOpacity>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads: prevImageUploads } = prevProps;\n  const { imageUploads: nextImageUploads } = nextProps;\n\n  return (\n    prevImageUploads.length === nextImageUploads.length &&\n    prevImageUploads.every(\n      (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,\n    )\n  );\n};\n\nconst MemoizedImageUploadPreviewWithContext = React.memo(\n  ImageUploadPreviewWithContext,\n  areEqual,\n) as typeof ImageUploadPreviewWithContext;\n\n/**\n * UI Component to preview the images set for upload\n */\nexport const ImageUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedImageUploadPreviewWithContext\n      {...{ imageUploads, removeImage, uploadImage }}\n      {...props}\n    />\n  );\n};\n\nImageUploadPreview.displayName = 'ImageUploadPreview{messageInput{imageUploadPreview}}';\n"]}
+{"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","fileSizeText","fontSize","paddingHorizontal","flatList","paddingBottom","iconContainer","alignItems","flexDirection","justifyContent","itemContainer","height","marginLeft","unsupportedImage","bottom","marginHorizontal","upload","width","warningIconStyle","marginTop","warningText","color","ImageUploadPreviewWithContext","props","enableOfflineSupport","imageUploads","removeImage","uploadImage","theme","messageInput","imageUploadPreview","UnsupportedImageTypeIndicator","indicatorType","colors","accent_red","overlay","white","t","ProgressIndicatorTypes","NOT_SUPPORTED","backgroundColor","renderItem","index","item","state","itemMarginForIndex","length","marginRight","newImage","uri","file","url","id","_","offset","DismissUpload","onPress","dismissIconColor","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  FlatList,\n  Image,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  TouchableOpacityProps,\n  View,\n} from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport { ChatContextValue, useChatContext } from '../../contexts';\nimport {\n  ImageUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nconst IMAGE_PREVIEW_SIZE = 100;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    position: 'absolute',\n    right: 8,\n    top: 8,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  flatList: { paddingBottom: 12 },\n  iconContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n  itemContainer: {\n    flexDirection: 'row',\n    height: IMAGE_PREVIEW_SIZE,\n    marginLeft: 8,\n  },\n  unsupportedImage: {\n    borderRadius: 20,\n    bottom: 8,\n    flexDirection: 'row',\n    marginHorizontal: 3,\n    position: 'absolute',\n  },\n  upload: {\n    borderRadius: 10,\n    height: IMAGE_PREVIEW_SIZE,\n    width: IMAGE_PREVIEW_SIZE,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 6,\n  },\n  warningText: {\n    alignItems: 'center',\n    color: 'black',\n    fontSize: 10,\n    justifyContent: 'center',\n    marginHorizontal: 4,\n  },\n});\n\ntype ImageUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'imageUploads' | 'removeImage' | 'uploadImage'\n> &\n  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;\n\nexport type ImageUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\ntype ImageUploadPreviewItem = { index: number; item: ImageUpload };\n\nconst ImageUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;\n\n  const {\n    theme: {\n      messageInput: {\n        imageUploadPreview: { flatList, itemContainer, upload },\n      },\n    },\n  } = useTheme();\n\n  const UnsupportedImageTypeIndicator = ({\n    indicatorType,\n  }: {\n    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;\n  }) => {\n    const {\n      theme: {\n        colors: { accent_red, overlay, white },\n      },\n    } = useTheme();\n\n    const { t } = useTranslationContext();\n    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>\n        <View style={[styles.iconContainer]}>\n          <Warning\n            height={WARNING_ICON_SIZE}\n            pathFill={accent_red}\n            style={styles.warningIconStyle}\n            width={WARNING_ICON_SIZE}\n          />\n          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>\n        </View>\n      </View>\n    ) : null;\n  };\n\n  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);\n    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};\n\n    return (\n      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>\n        <UploadProgressIndicator\n          action={() => {\n            uploadImage({ newImage: item });\n          }}\n          style={styles.upload}\n          type={indicatorType}\n        >\n          <Image\n            resizeMode='cover'\n            source={{ uri: item.file.uri || item.url }}\n            style={[styles.upload, upload]}\n          />\n        </UploadProgressIndicator>\n        <DismissUpload\n          onPress={() => {\n            removeImage(item.id);\n          }}\n        />\n        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />\n      </View>\n    );\n  };\n\n  return imageUploads.length > 0 ? (\n    <FlatList\n      data={imageUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: IMAGE_PREVIEW_SIZE + 8,\n        offset: (IMAGE_PREVIEW_SIZE + 8) * index,\n      })}\n      horizontal\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\ntype DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;\n\nconst DismissUpload = ({ onPress }: DismissUploadProps) => {\n  const {\n    theme: {\n      colors: { overlay, white },\n      messageInput: {\n        imageUploadPreview: { dismiss, dismissIconColor },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <TouchableOpacity\n      onPress={onPress}\n      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n      testID='remove-image-upload-preview'\n    >\n      <Close pathFill={dismissIconColor || white} />\n    </TouchableOpacity>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads: prevImageUploads } = prevProps;\n  const { imageUploads: nextImageUploads } = nextProps;\n\n  return (\n    prevImageUploads.length === nextImageUploads.length &&\n    prevImageUploads.every(\n      (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,\n    )\n  );\n};\n\nconst MemoizedImageUploadPreviewWithContext = React.memo(\n  ImageUploadPreviewWithContext,\n  areEqual,\n) as typeof ImageUploadPreviewWithContext;\n\n/**\n * UI Component to preview the images set for upload\n */\nexport const ImageUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();\n  const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedImageUploadPreviewWithContext\n      {...{ imageUploads, removeImage, uploadImage }}\n      {...{ enableOfflineSupport }}\n      {...props}\n    />\n  );\n};\n\nImageUploadPreview.displayName = 'ImageUploadPreview{messageInput{imageUploadPreview}}';\n"]}

package/lib/commonjs/components/MessageInput/MessageInput.js

@@ -19,6 +19,8 @@ var _reactNative = require("react-native");
 
 var _useCountdown2 = require("./hooks/useCountdown");
 
+var _contexts = require("../../contexts");
+
 var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
 
 var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
@@ -126,6 +128,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       InputEditingStateHeader = props.InputEditingStateHeader,
       InputGiphySearch = props.InputGiphySearch,
       InputReplyStateHeader = props.InputReplyStateHeader,
+      isOnline = props.isOnline,
       isValidMessage = props.isValidMessage,
       maxNumberOfFiles = props.maxNumberOfFiles,
       members = props.members,
@@ -427,21 +430,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 479,
+      lineNumber: 482,
       columnNumber: 7
     }
   }, editing && _react["default"].createElement(InputEditingStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 487,
+      lineNumber: 490,
       columnNumber: 21
     }
   }), quotedMessage && _react["default"].createElement(InputReplyStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 488,
+      lineNumber: 491,
       columnNumber: 27
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -449,7 +452,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 489,
+      lineNumber: 492,
       columnNumber: 9
     }
   }, Input ? _react["default"].createElement(Input, {
@@ -458,7 +461,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 491,
+      lineNumber: 494,
       columnNumber: 13
     }
   }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -466,14 +469,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 497,
+      lineNumber: 500,
       columnNumber: 15
     }
   }, InputButtons && _react["default"].createElement(InputButtons, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 498,
+      lineNumber: 501,
       columnNumber: 34
     }
   })), _react["default"].createElement(_reactNative.View, {
@@ -484,7 +487,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 500,
+      lineNumber: 503,
       columnNumber: 15
     }
   }, (typeof editing !== 'boolean' && (editing == null ? void 0 : editing.quoted_message) || quotedMessage) && _react["default"].createElement(_reactNative.View, {
@@ -492,21 +495,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 511,
+      lineNumber: 514,
       columnNumber: 19
     }
   }, _react["default"].createElement(Reply, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 512,
+      lineNumber: 515,
       columnNumber: 21
     }
   })), imageUploads.length ? _react["default"].createElement(ImageUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 515,
+      lineNumber: 518,
       columnNumber: 40
     }
   }) : null, imageUploads.length && fileUploads.length ? _react["default"].createElement(_reactNative.View, {
@@ -517,21 +520,22 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 517,
+      lineNumber: 520,
       columnNumber: 19
     }
   }) : null, fileUploads.length ? _react["default"].createElement(FileUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 527,
+      lineNumber: 530,
       columnNumber: 39
     }
   }) : null, giphyActive ? _react["default"].createElement(InputGiphySearch, {
+    disabled: !isOnline,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 529,
+      lineNumber: 532,
       columnNumber: 19
     }
   }) : _react["default"].createElement(_reactNative.View, {
@@ -539,7 +543,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 531,
+      lineNumber: 534,
       columnNumber: 19
     }
   }, _react["default"].createElement(_AutoCompleteInput.AutoCompleteInput, {
@@ -548,7 +552,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 532,
+      lineNumber: 535,
       columnNumber: 21
     }
   }))), _react["default"].createElement(_reactNative.View, {
@@ -556,7 +560,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 539,
+      lineNumber: 542,
       columnNumber: 15
     }
   }, cooldownRemainingSeconds ? _react["default"].createElement(CooldownTimer, {
@@ -564,15 +568,15 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 541,
+      lineNumber: 544,
       columnNumber: 19
     }
   }) : _react["default"].createElement(SendButton, {
-    disabled: disabled || sending.current || !isValidMessage(),
+    disabled: disabled || sending.current || !isValidMessage() || giphyActive && !isOnline,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 543,
+      lineNumber: 546,
       columnNumber: 19
     }
   })))), _react["default"].createElement(ShowThreadMessageInChannelButton, {
@@ -580,7 +584,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 549,
+      lineNumber: 556,
       columnNumber: 9
     }
   })), triggerType && suggestions ? _react["default"].createElement(_reactNative.View, {
@@ -591,7 +595,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 553,
+      lineNumber: 560,
       columnNumber: 9
     }
   }, _react["default"].createElement(AutoCompleteSuggestionList, {
@@ -603,7 +607,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 560,
+      lineNumber: 567,
       columnNumber: 11
     }
   })) : null, selectedPicker && _react["default"].createElement(_reactNative.View, {
@@ -614,14 +618,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 570,
+      lineNumber: 577,
       columnNumber: 9
     }
   }, _react["default"].createElement(_AttachmentSelectionBar.AttachmentSelectionBar, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 582,
+      lineNumber: 589,
       columnNumber: 11
     }
   })));
@@ -635,6 +639,7 @@ var areEqual = function areEqual(prevProps, nextProps) {
       prevFileUploads = prevProps.fileUploads,
       prevGiphyActive = prevProps.giphyActive,
       prevImageUploads = prevProps.imageUploads,
+      prevIsOnline = prevProps.isOnline,
       prevIsValidMessage = prevProps.isValidMessage,
       prevMentionedUsers = prevProps.mentionedUsers,
       prevQuotedMessage = prevProps.quotedMessage,
@@ -651,6 +656,7 @@ var areEqual = function areEqual(prevProps, nextProps) {
       nextFileUploads = nextProps.fileUploads,
       nextGiphyActive = nextProps.giphyActive,
       nextImageUploads = nextProps.imageUploads,
+      nextIsOnline = nextProps.isOnline,
       nextIsValidMessage = nextProps.isValidMessage,
       nextMentionedUsers = nextProps.mentionedUsers,
       nextQuotedMessage = nextProps.quotedMessage,
@@ -678,6 +684,8 @@ var areEqual = function areEqual(prevProps, nextProps) {
   if (!sendingEqual) return false;
   var showMoreOptionsEqual = prevShowMoreOptions === nextShowMoreOptions;
   if (!showMoreOptionsEqual) return false;
+  var isOnlineEqual = prevIsOnline === nextIsOnline;
+  if (!isOnlineEqual) return false;
   var isValidMessageEqual = prevIsValidMessage() === nextIsValidMessage();
   if (!isValidMessageEqual) return false;
   var asyncUploadsEqual = Object.keys(prevAsyncUploads).every(function (key) {
@@ -703,6 +711,9 @@ var areEqual = function areEqual(prevProps, nextProps) {
 var MemoizedMessageInput = _react["default"].memo(MessageInputWithContext, areEqual);
 
 var MessageInput = function MessageInput(props) {
+  var _useChatContext = (0, _contexts.useChatContext)(),
+      isOnline = _useChatContext.isOnline;
+
   var ownCapabilities = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)();
 
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
@@ -772,7 +783,7 @@ var MessageInput = function MessageInput(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 782,
+        lineNumber: 795,
         columnNumber: 12
       }
     });
@@ -803,6 +814,7 @@ var MessageInput = function MessageInput(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
+    isOnline: isOnline,
     isValidMessage: isValidMessage,
     maxNumberOfFiles: maxNumberOfFiles,
     members: members,
@@ -831,7 +843,7 @@ var MessageInput = function MessageInput(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 786,
+      lineNumber: 799,
       columnNumber: 5
     }
   }));