npm - stream-chat-react-native-core - Versions diffs - 4.4.0-beta.2 → 4.4.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/lib/commonjs/components/MessageInput/FileUploadPreview.js CHANGED Viewed

@@ -23,8 +23,12 @@ var _MessagesContext = require("../../contexts/messagesContext/MessagesContext")
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 var _Close = require("../../icons/Close");
+var _Warning = require("../../icons/Warning");
 var _utils = require("../../utils/utils");
 var _FileAttachment = require("../Attachment/FileAttachment");
@@ -37,6 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var FILE_PREVIEW_HEIGHT = 60;
+var WARNING_ICON_SIZE = 16;
 var styles = _reactNative.StyleSheet.create({
   dismiss: {
@@ -80,9 +85,76 @@ var styles = _reactNative.StyleSheet.create({
     borderRadius: 12,
     marginLeft: 8,
     marginRight: 8
+  },
+  unsupportedFile: {
+    flexDirection: 'row',
+    paddingLeft: 10
+  },
+  unsupportedFileText: {
+    fontSize: 16
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginTop: 4
   }
 });
+var UnsupportedFileTypeOrFileSizeIndicator = function UnsupportedFileTypeOrFileSizeIndicator(_ref) {
+  var indicatorType = _ref.indicatorType,
+      item = _ref.item;
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      accent_red = _useTheme$theme$color.accent_red,
+      grey = _useTheme$theme$color.grey,
+      fileSizeText = _useTheme$theme.messageInput.fileUploadPreview.fileSizeText;
+  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
+      t = _useTranslationContex.t;
+  return indicatorType === _utils.ProgressIndicatorTypes.NOT_SUPPORTED ? _react["default"].createElement(_reactNative.View, {
+    style: styles.unsupportedFile,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 95,
+      columnNumber: 5
+    }
+  }, _react["default"].createElement(_Warning.Warning, {
+    height: WARNING_ICON_SIZE,
+    pathFill: accent_red,
+    style: styles.warningIconStyle,
+    width: WARNING_ICON_SIZE,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 7
+    }
+  }), _react["default"].createElement(_reactNative.Text, {
+    style: [styles.unsupportedFileText, {
+      color: grey
+    }],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 7
+    }
+  }, t('File type not supported'))) : _react["default"].createElement(_reactNative.Text, {
+    style: [styles.fileSizeText, {
+      color: grey
+    }, fileSizeText],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 107,
+      columnNumber: 5
+    }
+  }, (0, _FileAttachment.getFileSizeDisplayText)(item.file.size));
+};
 var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props) {
   var FileAttachmentIcon = props.FileAttachmentIcon,
       fileUploads = props.fileUploads,
@@ -95,39 +167,36 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       flatListWidth = _useState2[0],
       setFlatListWidth = _useState2[1];
-  var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme = _useTheme.theme,
-      _useTheme$theme$color = _useTheme$theme.colors,
-      black = _useTheme$theme$color.black,
-      grey = _useTheme$theme$color.grey,
-      grey_whisper = _useTheme$theme$color.grey_whisper,
-      overlay = _useTheme$theme$color.overlay,
-      _useTheme$theme$messa = _useTheme$theme.messageInput.fileUploadPreview,
-      dismiss = _useTheme$theme$messa.dismiss,
-      fileContainer = _useTheme$theme$messa.fileContainer,
-      fileContentContainer = _useTheme$theme$messa.fileContentContainer,
-      filenameText = _useTheme$theme$messa.filenameText,
-      fileSizeText = _useTheme$theme$messa.fileSizeText,
-      fileTextContainer = _useTheme$theme$messa.fileTextContainer,
-      flatList = _useTheme$theme$messa.flatList;
-  var renderItem = function renderItem(_ref) {
-    var index = _ref.index,
-        item = _ref.item;
-    var indicatorType = item.state === _utils.FileState.UPLOADING ? _utils.ProgressIndicatorTypes.IN_PROGRESS : item.state === _utils.FileState.UPLOAD_FAILED ? _utils.ProgressIndicatorTypes.RETRY : undefined;
+  var _useTheme2 = (0, _ThemeContext.useTheme)(),
+      _useTheme2$theme = _useTheme2.theme,
+      _useTheme2$theme$colo = _useTheme2$theme.colors,
+      black = _useTheme2$theme$colo.black,
+      grey_whisper = _useTheme2$theme$colo.grey_whisper,
+      overlay = _useTheme2$theme$colo.overlay,
+      _useTheme2$theme$mess = _useTheme2$theme.messageInput.fileUploadPreview,
+      dismiss = _useTheme2$theme$mess.dismiss,
+      fileContainer = _useTheme2$theme$mess.fileContainer,
+      fileContentContainer = _useTheme2$theme$mess.fileContentContainer,
+      filenameText = _useTheme2$theme$mess.filenameText,
+      fileTextContainer = _useTheme2$theme$mess.fileTextContainer,
+      flatList = _useTheme2$theme$mess.flatList;
+  var renderItem = function renderItem(_ref2) {
+    var index = _ref2.index,
+        item = _ref2.item;
+    var indicatorType = (0, _utils.getIndicatorTypeForFileState)(item.state);
     return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_UploadProgressIndicator.UploadProgressIndicator, {
       action: function action() {
         uploadFile({
           newFile: item
         });
       },
-      active: item.state !== _utils.FileState.UPLOADED && item.state !== _utils.FileState.FINISHED,
       style: styles.overlay,
       type: indicatorType,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 109,
+        lineNumber: 152,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -140,7 +209,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 117,
+        lineNumber: 159,
         columnNumber: 11
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -148,7 +217,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 132,
+        lineNumber: 174,
         columnNumber: 13
       }
     }, _react["default"].createElement(FileAttachmentIcon, {
@@ -156,7 +225,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133,
+        lineNumber: 175,
         columnNumber: 15
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -164,7 +233,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 134,
+        lineNumber: 176,
         columnNumber: 15
       }
     }, _react["default"].createElement(_reactNative.Text, {
@@ -176,20 +245,19 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 135,
+        lineNumber: 177,
         columnNumber: 17
       }
-    }, item.file.name || ''), _react["default"].createElement(_reactNative.Text, {
-      style: [styles.fileSizeText, {
-        color: grey
-      }, fileSizeText],
+    }, item.file.name || ''), indicatorType !== null && _react["default"].createElement(UnsupportedFileTypeOrFileSizeIndicator, {
+      indicatorType: indicatorType,
+      item: item,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 153,
-        columnNumber: 17
+        lineNumber: 196,
+        columnNumber: 19
       }
-    }, (0, _FileAttachment.getFileSizeDisplayText)(item.file.size)))))), _react["default"].createElement(_reactNative.TouchableOpacity, {
+    }))))), _react["default"].createElement(_reactNative.TouchableOpacity, {
       onPress: function onPress() {
         removeFile(item.id);
       },
@@ -200,14 +268,14 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 160,
+        lineNumber: 205,
         columnNumber: 9
       }
     }, _react["default"].createElement(_Close.Close, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 167,
+        lineNumber: 212,
         columnNumber: 11
       }
     })));
@@ -235,8 +303,8 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
     keyExtractor: function keyExtractor(item) {
       return item.id;
     },
-    onLayout: function onLayout(_ref2) {
-      var width = _ref2.nativeEvent.layout.width;
+    onLayout: function onLayout(_ref3) {
+      var width = _ref3.nativeEvent.layout.width;
       setFlatListWidth(width);
     },
     ref: flatListRef,
@@ -245,7 +313,7 @@ var FileUploadPreviewWithContext = function FileUploadPreviewWithContext(props)
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 182,
+      lineNumber: 227,
       columnNumber: 5
     }
   }) : null;
@@ -279,7 +347,7 @@ var FileUploadPreview = function FileUploadPreview(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 241,
+      lineNumber: 287,
       columnNumber: 5
     }
   }));

package/lib/commonjs/components/MessageInput/FileUploadPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["FileUploadPreview.tsx"],"names":["FILE_PREVIEW_HEIGHT","styles","StyleSheet","create","dismiss","borderRadius","height","position","right","top","width","fileContainer","borderWidth","flexDirection","justifyContent","marginBottom","padding","fileContentContainer","filenameText","fontSize","fontWeight","paddingLeft","fileSizeText","fileTextContainer","flatList","maxHeight","overlay","marginLeft","marginRight","FileUploadPreviewWithContext","props","FileAttachmentIcon","fileUploads","removeFile","uploadFile","flatListRef","flatListWidth","setFlatListWidth","theme","colors","black","grey","grey_whisper","messageInput","fileUploadPreview","renderItem","index","item","indicatorType","state","FileState","UPLOADING","ProgressIndicatorTypes","IN_PROGRESS","UPLOAD_FAILED","RETRY","undefined","newFile","UPLOADED","FINISHED","length","borderColor","file","type","color","name","size","id","backgroundColor","fileUploadsLength","current","setTimeout","scrollToEnd","_","offset","nativeEvent","layout","areEqual","prevProps","nextProps","prevFileUploads","nextFileUploads","every","prevFileUpload","MemoizedFileUploadPreview","React","memo","FileUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n FileUpload,\n MessageInputContextValue,\n useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n MessagesContextValue,\n useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { Close } from '../../icons/Close';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { FileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nimport { getFileSizeDisplayText } from '../Attachment/FileAttachment';\n\nconst FILE_PREVIEW_HEIGHT = 60;\n\nconst styles = StyleSheet.create({\n dismiss: {\n borderRadius: 24,\n height: 24,\n position: 'absolute',\n right: 14,\n top: 4,\n width: 24,\n },\n fileContainer: {\n borderRadius: 12,\n borderWidth: 1,\n flexDirection: 'row',\n height: FILE_PREVIEW_HEIGHT,\n justifyContent: 'space-between',\n marginBottom: 8,\n padding: 8,\n },\n fileContentContainer: { flexDirection: 'row' },\n filenameText: {\n fontSize: 14,\n fontWeight: 'bold',\n paddingLeft: 10,\n },\n fileSizeText: {\n fontSize: 12,\n paddingLeft: 10,\n },\n fileTextContainer: {\n height: '100%',\n justifyContent: 'space-around',\n },\n flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },\n overlay: {\n borderRadius: 12,\n marginLeft: 8,\n marginRight: 8,\n },\n});\n\ntype FileUploadPreviewPropsWithContext<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n MessageInputContextValue<StreamChatGenerics>,\n 'fileUploads' \| 'removeFile' \| 'uploadFile'\n> &\n Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;\n\nconst FileUploadPreviewWithContext = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n const { FileAttachmentIcon, fileUploads, removeFile, uploadFile } = props;\n\n const flatListRef = useRef<FlatList<FileUpload> \| null>(null);\n const [flatListWidth, setFlatListWidth] = useState(0);\n\n const {\n theme: {\n colors: { black, grey, grey_whisper, overlay },\n messageInput: {\n fileUploadPreview: {\n dismiss,\n fileContainer,\n fileContentContainer,\n filenameText,\n fileSizeText,\n fileTextContainer,\n flatList,\n },\n },\n },\n } = useTheme();\n\n const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {\n const indicatorType =\n item.state === FileState.UPLOADING\n ? ProgressIndicatorTypes.IN_PROGRESS\n : item.state === FileState.UPLOAD_FAILED\n ? ProgressIndicatorTypes.RETRY\n : undefined;\n\n return (\n <>\n <UploadProgressIndicator\n action={() => {\n uploadFile({ newFile: item });\n }}\n active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}\n style={styles.overlay}\n type={indicatorType}\n >\n <View\n style={[\n styles.fileContainer,\n index === fileUploads.length - 1\n ? {\n marginBottom: 0,\n }\n : {},\n {\n borderColor: grey_whisper,\n width: flatListWidth - 16,\n },\n fileContainer,\n ]}\n >\n <View style={[styles.fileContentContainer, fileContentContainer]}>\n <FileAttachmentIcon mimeType={item.file.type} />\n <View style={[styles.fileTextContainer, fileTextContainer]}>\n <Text\n numberOfLines={1}\n style={[\n styles.filenameText,\n {\n color: black,\n width:\n flatListWidth -\n 16 - // 16 = horizontal padding\n 40 - // 40 = file icon size\n 24 - // 24 = close icon size\n 24, // 24 = internal padding\n },\n filenameText,\n ]}\n >\n {item.file.name \|\| ''}\n </Text>\n <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>\n {getFileSizeDisplayText(item.file.size)}\n </Text>\n </View>\n </View>\n </View>\n </UploadProgressIndicator>\n <TouchableOpacity\n onPress={() => {\n removeFile(item.id);\n }}\n style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n testID='remove-file-upload-preview'\n >\n <Close />\n </TouchableOpacity>\n </>\n );\n };\n\n const fileUploadsLength = fileUploads.length;\n\n useEffect(() => {\n if (fileUploadsLength && flatListRef.current) {\n setTimeout(() => flatListRef.current?.scrollToEnd(), 1);\n }\n }, [fileUploadsLength]);\n\n return fileUploadsLength ? (\n <FlatList\n data={fileUploads}\n getItemLayout={(_, index) => ({\n index,\n length: FILE_PREVIEW_HEIGHT + 8,\n offset: (FILE_PREVIEW_HEIGHT + 8) * index,\n })}\n keyExtractor={(item) => item.id}\n onLayout={({\n nativeEvent: {\n layout: { width },\n },\n }) => {\n setFlatListWidth(width);\n }}\n ref={flatListRef}\n renderItem={renderItem}\n style={[styles.flatList, flatList]}\n />\n ) : null;\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n const { fileUploads: prevFileUploads } = prevProps;\n const { fileUploads: nextFileUploads } = nextProps;\n\n return (\n prevFileUploads.length === nextFileUploads.length &&\n prevFileUploads.every(\n (prevFileUpload, index) => prevFileUpload.state === nextFileUploads[index].state,\n )\n );\n};\n\nconst MemoizedFileUploadPreview = React.memo(\n FileUploadPreviewWithContext,\n areEqual,\n) as typeof FileUploadPreviewWithContext;\n\nexport type FileUploadPreviewProps<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\n/*\n FileUploadPreview\n * UI Component to preview the files set for upload\n */\nexport const FileUploadPreview = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: FileUploadPreviewProps<StreamChatGenerics>,\n) => {\n const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();\n const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();\n\n return (\n <MemoizedFileUploadPreview\n {...{ FileAttachmentIcon, fileUploads, removeFile, uploadFile }}\n {...props}\n />\n );\n};\n\nFileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';\n"]}
1	+ {"version":3,"sources":["FileUploadPreview.tsx"],"names":["FILE_PREVIEW_HEIGHT","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","height","position","right","top","width","fileContainer","borderWidth","flexDirection","justifyContent","marginBottom","padding","fileContentContainer","filenameText","fontSize","fontWeight","paddingLeft","fileSizeText","fileTextContainer","flatList","maxHeight","overlay","marginLeft","marginRight","unsupportedFile","unsupportedFileText","warningIconStyle","marginTop","UnsupportedFileTypeOrFileSizeIndicator","indicatorType","item","theme","colors","accent_red","grey","messageInput","fileUploadPreview","t","ProgressIndicatorTypes","NOT_SUPPORTED","color","file","size","FileUploadPreviewWithContext","props","FileAttachmentIcon","fileUploads","removeFile","uploadFile","flatListRef","flatListWidth","setFlatListWidth","black","grey_whisper","renderItem","index","state","newFile","length","borderColor","type","name","id","backgroundColor","fileUploadsLength","current","setTimeout","scrollToEnd","_","offset","nativeEvent","layout","areEqual","prevProps","nextProps","prevFileUploads","nextFileUploads","every","prevFileUpload","MemoizedFileUploadPreview","React","memo","FileUploadPreview","displayName"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AAKA;;AAIA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;AAEA,IAAMA,mBAAmB,GAAG,EAA5B;AACA,IAAMC,iBAAiB,GAAG,EAA1B;;AAEA,IAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,YAAY,EAAE,EADP;AAEPC,IAAAA,MAAM,EAAE,EAFD;AAGPC,IAAAA,QAAQ,EAAE,UAHH;AAIPC,IAAAA,KAAK,EAAE,EAJA;AAKPC,IAAAA,GAAG,EAAE,CALE;AAMPC,IAAAA,KAAK,EAAE;AANA,GADsB;AAS/BC,EAAAA,aAAa,EAAE;AACbN,IAAAA,YAAY,EAAE,EADD;AAEbO,IAAAA,WAAW,EAAE,CAFA;AAGbC,IAAAA,aAAa,EAAE,KAHF;AAIbP,IAAAA,MAAM,EAAEP,mBAJK;AAKbe,IAAAA,cAAc,EAAE,eALH;AAMbC,IAAAA,YAAY,EAAE,CAND;AAObC,IAAAA,OAAO,EAAE;AAPI,GATgB;AAkB/BC,EAAAA,oBAAoB,EAAE;AAAEJ,IAAAA,aAAa,EAAE;AAAjB,GAlBS;AAmB/BK,EAAAA,YAAY,EAAE;AACZC,IAAAA,QAAQ,EAAE,EADE;AAEZC,IAAAA,UAAU,EAAE,MAFA;AAGZC,IAAAA,WAAW,EAAE;AAHD,GAnBiB;AAwB/BC,EAAAA,YAAY,EAAE;AACZH,IAAAA,QAAQ,EAAE,EADE;AAEZE,IAAAA,WAAW,EAAE;AAFD,GAxBiB;AA4B/BE,EAAAA,iBAAiB,EAAE;AACjBjB,IAAAA,MAAM,EAAE,MADS;AAEjBQ,IAAAA,cAAc,EAAE;AAFC,GA5BY;AAgC/BU,EAAAA,QAAQ,EAAE;AAAET,IAAAA,YAAY,EAAE,EAAhB;AAAoBU,IAAAA,SAAS,EAAE1B,mBAAmB,GAAG,GAAtB,GAA4B;AAA3D,GAhCqB;AAiC/B2B,EAAAA,OAAO,EAAE;AACPrB,IAAAA,YAAY,EAAE,EADP;AAEPsB,IAAAA,UAAU,EAAE,CAFL;AAGPC,IAAAA,WAAW,EAAE;AAHN,GAjCsB;AAsC/BC,EAAAA,eAAe,EAAE;AACfhB,IAAAA,aAAa,EAAE,KADA;AAEfQ,IAAAA,WAAW,EAAE;AAFE,GAtCc;AA0C/BS,EAAAA,mBAAmB,EAAE;AACnBX,IAAAA,QAAQ,EAAE;AADS,GA1CU;AA6C/BY,EAAAA,gBAAgB,EAAE;AAChB1B,IAAAA,YAAY,EAAE,EADE;AAEhB2B,IAAAA,SAAS,EAAE;AAFK;AA7Ca,CAAlB,CAAf;;AAmDA,IAAMC,sCAAsC,GAAG,SAAzCA,sCAAyC,OAMzC;AAAA,MALJC,aAKI,QALJA,aAKI;AAAA,MAJJC,IAII,QAJJA,IAII;;AACJ,kBAOI,6BAPJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,UAFd,yBAEcA,UAFd;AAAA,MAE0BC,IAF1B,yBAE0BA,IAF1B;AAAA,MAI2BjB,YAJ3B,mBAGIkB,YAHJ,CAIMC,iBAJN,CAI2BnB,YAJ3B;;AASA,8BAAc,gDAAd;AAAA,MAAQoB,CAAR,yBAAQA,CAAR;;AACA,SAAOR,aAAa,KAAKS,8BAAuBC,aAAzC,GACL,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE3C,MAAM,CAAC4B,eAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,gBAAD;AACE,IAAA,MAAM,EAAE7B,iBADV;AAEE,IAAA,QAAQ,EAAEsC,UAFZ;AAGE,IAAA,KAAK,EAAErC,MAAM,CAAC8B,gBAHhB;AAIE,IAAA,KAAK,EAAE/B,iBAJT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAOE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACC,MAAM,CAAC6B,mBAAR,EAA6B;AAAEe,MAAAA,KAAK,EAAEN;AAAT,KAA7B,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGG,CAAC,CAAC,yBAAD,CADJ,CAPF,CADK,GAaL,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACzC,MAAM,CAACqB,YAAR,EAAsB;AAAEuB,MAAAA,KAAK,EAAEN;AAAT,KAAtB,EAAuCjB,YAAvC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACG,4CAAuBa,IAAI,CAACW,IAAL,CAAUC,IAAjC,CADH,CAbF;AAiBD,CAlCD;;AA4CA,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA+B,CAGnCC,KAHmC,EAIhC;AACH,MAAQC,kBAAR,GAAoED,KAApE,CAAQC,kBAAR;AAAA,MAA4BC,WAA5B,GAAoEF,KAApE,CAA4BE,WAA5B;AAAA,MAAyCC,UAAzC,GAAoEH,KAApE,CAAyCG,UAAzC;AAAA,MAAqDC,UAArD,GAAoEJ,KAApE,CAAqDI,UAArD;AAEA,MAAMC,WAAW,GAAG,mBAAoC,IAApC,CAApB;;AACA,kBAA0C,qBAAS,CAAT,CAA1C;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAEA,mBAcI,6BAdJ;AAAA,oCACEpB,KADF;AAAA,+CAEIC,MAFJ;AAAA,MAEcoB,KAFd,yBAEcA,KAFd;AAAA,MAEqBC,YAFrB,yBAEqBA,YAFrB;AAAA,MAEmChC,OAFnC,yBAEmCA,OAFnC;AAAA,+CAGIc,YAHJ,CAIMC,iBAJN;AAAA,MAKQrC,OALR,yBAKQA,OALR;AAAA,MAMQO,aANR,yBAMQA,aANR;AAAA,MAOQM,oBAPR,yBAOQA,oBAPR;AAAA,MAQQC,YARR,yBAQQA,YARR;AAAA,MASQK,iBATR,yBASQA,iBATR;AAAA,MAUQC,QAVR,yBAUQA,QAVR;;AAgBA,MAAMmC,UAAU,GAAG,SAAbA,UAAa,QAA0D;AAAA,QAAvDC,KAAuD,SAAvDA,KAAuD;AAAA,QAAhDzB,IAAgD,SAAhDA,IAAgD;AAC3E,QAAMD,aAAa,GAAG,yCAA6BC,IAAI,CAAC0B,KAAlC,CAAtB;AAEA,WACE,kEACE,gCAAC,gDAAD;AACE,MAAA,MAAM,EAAE,kBAAM;AACZR,QAAAA,UAAU,CAAC;AAAES,UAAAA,OAAO,EAAE3B;AAAX,SAAD,CAAV;AACD,OAHH;AAIE,MAAA,KAAK,EAAElC,MAAM,CAACyB,OAJhB;AAKE,MAAA,IAAI,EAAEQ,aALR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOE,gCAAC,iBAAD;AACE,MAAA,KAAK,EAAE,CACLjC,MAAM,CAACU,aADF,EAELiD,KAAK,KAAKT,WAAW,CAACY,MAAZ,GAAqB,CAA/B,GACI;AACEhD,QAAAA,YAAY,EAAE;AADhB,OADJ,GAII,EANC,EAOL;AACEiD,QAAAA,WAAW,EAAEN,YADf;AAEEhD,QAAAA,KAAK,EAAE6C,aAAa,GAAG;AAFzB,OAPK,EAWL5C,aAXK,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAeE,gCAAC,iBAAD;AAAM,MAAA,KAAK,EAAE,CAACV,MAAM,CAACgB,oBAAR,EAA8BA,oBAA9B,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACE,gCAAC,kBAAD;AAAoB,MAAA,QAAQ,EAAEkB,IAAI,CAACW,IAAL,CAAUmB,IAAxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADF,EAEE,gCAAC,iBAAD;AAAM,MAAA,KAAK,EAAE,CAAChE,MAAM,CAACsB,iBAAR,EAA2BA,iBAA3B,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACE,gCAAC,iBAAD;AACE,MAAA,aAAa,EAAE,CADjB;AAEE,MAAA,KAAK,EAAE,CACLtB,MAAM,CAACiB,YADF,EAEL;AACE2B,QAAAA,KAAK,EAAEY,KADT;AAEE/C,QAAAA,KAAK,EACH6C,aAAa,GACb,EADA,GAEA,EAFA,GAGA,EAHA,GAIA;AAPJ,OAFK,EAWLrC,YAXK,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAgBGiB,IAAI,CAACW,IAAL,CAAUoB,IAAV,IAAkB,EAhBrB,CADF,EAmBGhC,aAAa,KAAK,IAAlB,IACC,gCAAC,sCAAD;AACE,MAAA,aAAa,EAAEA,aADjB;AAEE,MAAA,IAAI,EAAEC,IAFR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MApBJ,CAFF,CAfF,CAPF,CADF,EAsDE,gCAAC,6BAAD;AACE,MAAA,OAAO,EAAE,mBAAM;AACbiB,QAAAA,UAAU,CAACjB,IAAI,CAACgC,EAAN,CAAV;AACD,OAHH;AAIE,MAAA,KAAK,EAAE,CAAClE,MAAM,CAACG,OAAR,EAAiB;AAAEgE,QAAAA,eAAe,EAAE1C;AAAnB,OAAjB,EAA+CtB,OAA/C,CAJT;AAKE,MAAA,MAAM,EAAC,4BALT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOE,gCAAC,YAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAPF,CAtDF,CADF;AAkED,GArED;;AAuEA,MAAMiE,iBAAiB,GAAGlB,WAAW,CAACY,MAAtC;AAEA,wBAAU,YAAM;AACd,QAAIM,iBAAiB,IAAIf,WAAW,CAACgB,OAArC,EAA8C;AAC5CC,MAAAA,UAAU,CAAC;AAAA;;AAAA,uCAAMjB,WAAW,CAACgB,OAAlB,qBAAM,qBAAqBE,WAArB,EAAN;AAAA,OAAD,EAA2C,CAA3C,CAAV;AACD;AACF,GAJD,EAIG,CAACH,iBAAD,CAJH;AAMA,SAAOA,iBAAiB,GACtB,gCAAC,qBAAD;AACE,IAAA,IAAI,EAAElB,WADR;AAEE,IAAA,aAAa,EAAE,uBAACsB,CAAD,EAAIb,KAAJ;AAAA,aAAe;AAC5BA,QAAAA,KAAK,EAALA,KAD4B;AAE5BG,QAAAA,MAAM,EAAEhE,mBAAmB,GAAG,CAFF;AAG5B2E,QAAAA,MAAM,EAAE,CAAC3E,mBAAmB,GAAG,CAAvB,IAA4B6D;AAHR,OAAf;AAAA,KAFjB;AAOE,IAAA,YAAY,EAAE,sBAACzB,IAAD;AAAA,aAAUA,IAAI,CAACgC,EAAf;AAAA,KAPhB;AAQE,IAAA,QAAQ,EAAE,yBAIJ;AAAA,UAFQzD,KAER,SAHJiE,WAGI,CAFFC,MAEE,CAFQlE,KAER;AACJ8C,MAAAA,gBAAgB,CAAC9C,KAAD,CAAhB;AACD,KAdH;AAeE,IAAA,GAAG,EAAE4C,WAfP;AAgBE,IAAA,UAAU,EAAEK,UAhBd;AAiBE,IAAA,KAAK,EAAE,CAAC1D,MAAM,CAACuB,QAAR,EAAkBA,QAAlB,CAjBT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADsB,GAoBpB,IApBJ;AAqBD,CA9HD;;AAgIA,IAAMqD,QAAQ,GAAG,SAAXA,QAAW,CACfC,SADe,EAEfC,SAFe,EAGZ;AACH,MAAqBC,eAArB,GAAyCF,SAAzC,CAAQ3B,WAAR;AACA,MAAqB8B,eAArB,GAAyCF,SAAzC,CAAQ5B,WAAR;AAEA,SACE6B,eAAe,CAACjB,MAAhB,KAA2BkB,eAAe,CAAClB,MAA3C,IACAiB,eAAe,CAACE,KAAhB,CACE,UAACC,cAAD,EAAiBvB,KAAjB;AAAA,WAA2BuB,cAAc,CAACtB,KAAf,KAAyBoB,eAAe,CAACrB,KAAD,CAAf,CAAuBC,KAA3E;AAAA,GADF,CAFF;AAMD,CAbD;;AAeA,IAAMuB,yBAAyB,GAAGC,kBAAMC,IAAN,CAChCtC,4BADgC,EAEhC6B,QAFgC,CAAlC;;AAaO,IAAMU,iBAAiB,GAAG,SAApBA,iBAAoB,CAG/BtC,KAH+B,EAI5B;AACH,8BAAgD,kDAAhD;AAAA,MAAQE,WAAR,yBAAQA,WAAR;AAAA,MAAqBC,UAArB,yBAAqBA,UAArB;AAAA,MAAiCC,UAAjC,yBAAiCA,UAAjC;;AAEA,4BAA+B,0CAA/B;AAAA,MAAQH,kBAAR,uBAAQA,kBAAR;;AAEA,SACE,gCAAC,yBAAD;AACQA,IAAAA,kBAAkB,EAAlBA,kBADR;AAC4BC,IAAAA,WAAW,EAAXA,WAD5B;AACyCC,IAAAA,UAAU,EAAVA,UADzC;AACqDC,IAAAA,UAAU,EAAVA;AADrD,KAEMJ,KAFN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADF;AAMD,CAfM;;;AAiBPsC,iBAAiB,CAACC,WAAlB,GAAgC,oDAAhC","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n FileUpload,\n MessageInputContextValue,\n useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n MessagesContextValue,\n useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\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';\nimport { getFileSizeDisplayText } from '../Attachment/FileAttachment';\n\nconst FILE_PREVIEW_HEIGHT = 60;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n dismiss: {\n borderRadius: 24,\n height: 24,\n position: 'absolute',\n right: 14,\n top: 4,\n width: 24,\n },\n fileContainer: {\n borderRadius: 12,\n borderWidth: 1,\n flexDirection: 'row',\n height: FILE_PREVIEW_HEIGHT,\n justifyContent: 'space-between',\n marginBottom: 8,\n padding: 8,\n },\n fileContentContainer: { flexDirection: 'row' },\n filenameText: {\n fontSize: 14,\n fontWeight: 'bold',\n paddingLeft: 10,\n },\n fileSizeText: {\n fontSize: 12,\n paddingLeft: 10,\n },\n fileTextContainer: {\n height: '100%',\n justifyContent: 'space-around',\n },\n flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },\n overlay: {\n borderRadius: 12,\n marginLeft: 8,\n marginRight: 8,\n },\n unsupportedFile: {\n flexDirection: 'row',\n paddingLeft: 10,\n },\n unsupportedFileText: {\n fontSize: 16,\n },\n warningIconStyle: {\n borderRadius: 24,\n marginTop: 4,\n },\n});\n\nconst UnsupportedFileTypeOrFileSizeIndicator = ({\n indicatorType,\n item,\n}: {\n indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes];\n item: FileUpload;\n}) => {\n const {\n theme: {\n colors: { accent_red, grey },\n messageInput: {\n fileUploadPreview: { fileSizeText },\n },\n },\n } = useTheme();\n\n const { t } = useTranslationContext();\n return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n <View style={styles.unsupportedFile}>\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.unsupportedFileText, { color: grey }]}>\n {t('File type not supported')}\n </Text>\n </View>\n ) : (\n <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>\n {getFileSizeDisplayText(item.file.size)}\n </Text>\n );\n};\n\ntype FileUploadPreviewPropsWithContext<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n MessageInputContextValue<StreamChatGenerics>,\n 'fileUploads' \| 'removeFile' \| 'uploadFile'\n> &\n Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;\n\nconst FileUploadPreviewWithContext = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n const { FileAttachmentIcon, fileUploads, removeFile, uploadFile } = props;\n\n const flatListRef = useRef<FlatList<FileUpload> \| null>(null);\n const [flatListWidth, setFlatListWidth] = useState(0);\n\n const {\n theme: {\n colors: { black, grey_whisper, overlay },\n messageInput: {\n fileUploadPreview: {\n dismiss,\n fileContainer,\n fileContentContainer,\n filenameText,\n fileTextContainer,\n flatList,\n },\n },\n },\n } = useTheme();\n\n const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {\n const indicatorType = getIndicatorTypeForFileState(item.state);\n\n return (\n <>\n <UploadProgressIndicator\n action={() => {\n uploadFile({ newFile: item });\n }}\n style={styles.overlay}\n type={indicatorType}\n >\n <View\n style={[\n styles.fileContainer,\n index === fileUploads.length - 1\n ? {\n marginBottom: 0,\n }\n : {},\n {\n borderColor: grey_whisper,\n width: flatListWidth - 16,\n },\n fileContainer,\n ]}\n >\n <View style={[styles.fileContentContainer, fileContentContainer]}>\n <FileAttachmentIcon mimeType={item.file.type} />\n <View style={[styles.fileTextContainer, fileTextContainer]}>\n <Text\n numberOfLines={1}\n style={[\n styles.filenameText,\n {\n color: black,\n width:\n flatListWidth -\n 16 - // 16 = horizontal padding\n 40 - // 40 = file icon size\n 24 - // 24 = close icon size\n 24, // 24 = internal padding\n },\n filenameText,\n ]}\n >\n {item.file.name \|\| ''}\n </Text>\n {indicatorType !== null && (\n <UnsupportedFileTypeOrFileSizeIndicator\n indicatorType={indicatorType}\n item={item}\n />\n )}\n </View>\n </View>\n </View>\n </UploadProgressIndicator>\n <TouchableOpacity\n onPress={() => {\n removeFile(item.id);\n }}\n style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n testID='remove-file-upload-preview'\n >\n <Close />\n </TouchableOpacity>\n </>\n );\n };\n\n const fileUploadsLength = fileUploads.length;\n\n useEffect(() => {\n if (fileUploadsLength && flatListRef.current) {\n setTimeout(() => flatListRef.current?.scrollToEnd(), 1);\n }\n }, [fileUploadsLength]);\n\n return fileUploadsLength ? (\n <FlatList\n data={fileUploads}\n getItemLayout={(_, index) => ({\n index,\n length: FILE_PREVIEW_HEIGHT + 8,\n offset: (FILE_PREVIEW_HEIGHT + 8) * index,\n })}\n keyExtractor={(item) => item.id}\n onLayout={({\n nativeEvent: {\n layout: { width },\n },\n }) => {\n setFlatListWidth(width);\n }}\n ref={flatListRef}\n renderItem={renderItem}\n style={[styles.flatList, flatList]}\n />\n ) : null;\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n const { fileUploads: prevFileUploads } = prevProps;\n const { fileUploads: nextFileUploads } = nextProps;\n\n return (\n prevFileUploads.length === nextFileUploads.length &&\n prevFileUploads.every(\n (prevFileUpload, index) => prevFileUpload.state === nextFileUploads[index].state,\n )\n );\n};\n\nconst MemoizedFileUploadPreview = React.memo(\n FileUploadPreviewWithContext,\n areEqual,\n) as typeof FileUploadPreviewWithContext;\n\nexport type FileUploadPreviewProps<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\n/*\n FileUploadPreview\n * UI Component to preview the files set for upload\n */\nexport const FileUploadPreview = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: FileUploadPreviewProps<StreamChatGenerics>,\n) => {\n const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();\n\n const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();\n\n return (\n <MemoizedFileUploadPreview\n {...{ FileAttachmentIcon, fileUploads, removeFile, uploadFile }}\n {...props}\n />\n );\n};\n\nFileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';\n"]}

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

@@ -17,14 +17,19 @@ var _MessageInputContext = require("../../contexts/messageInputContext/MessageIn
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 var _Close = require("../../icons/Close");
+var _Warning = require("../../icons/Warning");
 var _utils = require("../../utils/utils");
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/ImageUploadPreview.tsx";
 var IMAGE_PREVIEW_SIZE = 100;
+var WARNING_ICON_SIZE = 16;
 var styles = _reactNative.StyleSheet.create({
   dismiss: {
@@ -33,18 +38,46 @@ var styles = _reactNative.StyleSheet.create({
     right: 8,
     top: 8
   },
+  fileSizeText: {
+    fontSize: 12,
+    paddingLeft: 10
+  },
   flatList: {
     paddingBottom: 12
   },
+  iconContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
   itemContainer: {
     flexDirection: 'row',
     height: IMAGE_PREVIEW_SIZE,
     marginLeft: 8
   },
+  unsupportedImage: {
+    borderRadius: 20,
+    bottom: 8,
+    flexDirection: 'row',
+    marginLeft: 3,
+    position: 'absolute'
+  },
   upload: {
     borderRadius: 10,
     height: IMAGE_PREVIEW_SIZE,
     width: IMAGE_PREVIEW_SIZE
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginLeft: 4,
+    marginTop: 4
+  },
+  warningText: {
+    alignItems: 'center',
+    color: 'black',
+    fontSize: 10,
+    justifyContent: 'center',
+    paddingRight: 8
   }
 });
@@ -55,27 +88,81 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
-      _useTheme$theme$color = _useTheme$theme.colors,
-      overlay = _useTheme$theme$color.overlay,
-      white = _useTheme$theme$color.white,
+      overlay = _useTheme$theme.colors.overlay,
       _useTheme$theme$messa = _useTheme$theme.messageInput.imageUploadPreview,
       dismiss = _useTheme$theme$messa.dismiss,
       flatList = _useTheme$theme$messa.flatList,
       itemContainer = _useTheme$theme$messa.itemContainer,
       upload = _useTheme$theme$messa.upload;
-  var renderItem = function renderItem(_ref) {
-    var index = _ref.index,
-        item = _ref.item;
+  var UnsupportedImageTypeIndicator = function UnsupportedImageTypeIndicator(_ref) {
+    var indicatorType = _ref.indicatorType;
+    var _useTheme2 = (0, _ThemeContext.useTheme)(),
+        _useTheme2$theme$colo = _useTheme2.theme.colors,
+        accent_red = _useTheme2$theme$colo.accent_red,
+        overlay = _useTheme2$theme$colo.overlay,
+        white = _useTheme2$theme$colo.white;
+    var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
+        t = _useTranslationContex.t;
+    return indicatorType === _utils.ProgressIndicatorTypes.NOT_SUPPORTED ? _react["default"].createElement(_reactNative.View, {
+      style: [styles.unsupportedImage, {
+        backgroundColor: overlay
+      }],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 111,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_reactNative.View, {
+      style: [styles.iconContainer],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 112,
+        columnNumber: 9
+      }
+    }, _react["default"].createElement(_Warning.Warning, {
+      height: WARNING_ICON_SIZE,
+      pathFill: accent_red,
+      style: styles.warningIconStyle,
+      width: WARNING_ICON_SIZE,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 113,
+        columnNumber: 11
+      }
+    }), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.warningText, {
+        color: white
+      }],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 119,
+        columnNumber: 11
+      }
+    }, t('Not supported')))) : null;
+  };
+  var renderItem = function renderItem(_ref2) {
+    var index = _ref2.index,
+        item = _ref2.item;
+    var indicatorType = (0, _utils.getIndicatorTypeForFileState)(item.state);
+    var itemMarginForIndex = index === imageUploads.length - 1 ? {
+      marginRight: 8
+    } : {};
     return _react["default"].createElement(_reactNative.View, {
-      style: [styles.itemContainer, index === imageUploads.length - 1 ? {
-        marginRight: 8
-      } : {}, itemContainer],
+      style: [styles.itemContainer, itemMarginForIndex, itemContainer],
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 66,
-        columnNumber: 5
+        lineNumber: 130,
+        columnNumber: 7
       }
     }, _react["default"].createElement(_UploadProgressIndicator.UploadProgressIndicator, {
       action: function action() {
@@ -83,14 +170,13 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
           newImage: item
         });
       },
-      active: item.state !== _utils.FileState.UPLOADED && item.state !== _utils.FileState.FINISHED,
       style: styles.upload,
-      type: item.state === _utils.FileState.UPLOADING ? _utils.ProgressIndicatorTypes.IN_PROGRESS : item.state === _utils.FileState.UPLOAD_FAILED ? _utils.ProgressIndicatorTypes.RETRY : undefined,
+      type: indicatorType,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 73,
-        columnNumber: 7
+        lineNumber: 131,
+        columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.Image, {
       resizeMode: "cover",
@@ -101,8 +187,8 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 87,
-        columnNumber: 9
+        lineNumber: 138,
+        columnNumber: 11
       }
     })), _react["default"].createElement(_reactNative.TouchableOpacity, {
       onPress: function onPress() {
@@ -115,18 +201,25 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 93,
-        columnNumber: 7
+        lineNumber: 144,
+        columnNumber: 9
       }
     }, _react["default"].createElement(_Close.Close, {
-      pathFill: white,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 100,
+        lineNumber: 151,
+        columnNumber: 11
+      }
+    })), _react["default"].createElement(UnsupportedImageTypeIndicator, {
+      indicatorType: indicatorType,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 153,
         columnNumber: 9
       }
-    })));
+    }));
   };
   return imageUploads.length > 0 ? _react["default"].createElement(_reactNative.FlatList, {
@@ -147,7 +240,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 106,
+      lineNumber: 159,
       columnNumber: 5
     }
   }) : null;
@@ -177,7 +270,7 @@ var ImageUploadPreview = function ImageUploadPreview(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 152,
+      lineNumber: 205,
       columnNumber: 5
     }
   }));

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","flatList","paddingBottom","itemContainer","flexDirection","height","marginLeft","upload","width","ImageUploadPreviewWithContext","props","imageUploads","removeImage","uploadImage","theme","colors","overlay","white","messageInput","imageUploadPreview","renderItem","index","item","length","marginRight","newImage","state","FileState","UPLOADED","FINISHED","UPLOADING","ProgressIndicatorTypes","IN_PROGRESS","UPLOAD_FAILED","RETRY","undefined","uri","file","url","id","backgroundColor","_","offset","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList, Image, StyleSheet, TouchableOpacity, View } 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 { Close } from '../../icons/Close';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { FileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nconst IMAGE_PREVIEW_SIZE = 100;\n\nconst styles = StyleSheet.create({\n dismiss: {\n borderRadius: 24,\n position: 'absolute',\n right: 8,\n top: 8,\n },\n flatList: { paddingBottom: 12 },\n itemContainer: {\n flexDirection: 'row',\n height: IMAGE_PREVIEW_SIZE,\n marginLeft: 8,\n },\n upload: {\n borderRadius: 10,\n height: IMAGE_PREVIEW_SIZE,\n width: IMAGE_PREVIEW_SIZE,\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\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 colors: { overlay, white },\n messageInput: {\n imageUploadPreview: { dismiss, flatList, itemContainer, upload },\n },\n },\n } = useTheme();\n\n const renderItem = ({ index, item }: { index: number; item: ImageUpload }) => (\n <View\n style={[\n styles.itemContainer,\n index === imageUploads.length - 1 ? { marginRight: 8 } : {},\n itemContainer,\n ]}\n >\n <UploadProgressIndicator\n action={() => {\n uploadImage({ newImage: item });\n }}\n active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}\n style={styles.upload}\n type={\n item.state === FileState.UPLOADING\n ? ProgressIndicatorTypes.IN_PROGRESS\n : item.state === FileState.UPLOAD_FAILED\n ? ProgressIndicatorTypes.RETRY\n : undefined\n }\n >\n <Image\n resizeMode='cover'\n source={{ uri: item.file.uri \|\| item.url }}\n style={[styles.upload, upload]}\n />\n </UploadProgressIndicator>\n <TouchableOpacity\n onPress={() => {\n removeImage(item.id);\n }}\n style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n testID='remove-image-upload-preview'\n >\n <Close pathFill={white} />\n </TouchableOpacity>\n </View>\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\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"]}
1	+ {"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","fileSizeText","fontSize","paddingLeft","flatList","paddingBottom","iconContainer","alignItems","flexDirection","justifyContent","itemContainer","height","marginLeft","unsupportedImage","bottom","upload","width","warningIconStyle","marginTop","warningText","color","paddingRight","ImageUploadPreviewWithContext","props","imageUploads","removeImage","uploadImage","theme","overlay","colors","messageInput","imageUploadPreview","UnsupportedImageTypeIndicator","indicatorType","accent_red","white","t","ProgressIndicatorTypes","NOT_SUPPORTED","backgroundColor","renderItem","index","item","state","itemMarginForIndex","length","marginRight","newImage","uri","file","url","id","_","offset","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } 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 paddingLeft: 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 marginLeft: 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 marginLeft: 4,\n marginTop: 4,\n },\n warningText: {\n alignItems: 'center',\n color: 'black',\n fontSize: 10,\n justifyContent: 'center',\n paddingRight: 8,\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 colors: { overlay },\n messageInput: {\n imageUploadPreview: { dismiss, 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 <TouchableOpacity\n onPress={() => {\n removeImage(item.id);\n }}\n style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n testID='remove-image-upload-preview'\n >\n <Close />\n </TouchableOpacity>\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\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"]}