stream-chat-react-native-core 4.5.0 → 4.6.0

package/lib/module/components/MessageInput/MessageInput.js

@@ -132,6 +132,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       mentionedUsers = props.mentionedUsers,
       numberOfUploads = props.numberOfUploads,
       quotedMessage = props.quotedMessage,
+      removeFile = props.removeFile,
       removeImage = props.removeImage,
       Reply = props.Reply,
       resetInput = props.resetInput,
@@ -143,6 +144,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       thread = props.thread,
       threadList = props.threadList,
       triggerType = props.triggerType,
+      uploadNewFile = props.uploadNewFile,
       uploadNewImage = props.uploadNewImage,
       watchers = props.watchers;
 
@@ -173,9 +175,11 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       attachmentPickerBottomSheetHeight = _useAttachmentPickerC.attachmentPickerBottomSheetHeight,
       attachmentSelectionBarHeight = _useAttachmentPickerC.attachmentSelectionBarHeight,
       bottomInset = _useAttachmentPickerC.bottomInset,
+      selectedFiles = _useAttachmentPickerC.selectedFiles,
       selectedImages = _useAttachmentPickerC.selectedImages,
       selectedPicker = _useAttachmentPickerC.selectedPicker,
       setMaxNumberOfFiles = _useAttachmentPickerC.setMaxNumberOfFiles,
+      setSelectedFiles = _useAttachmentPickerC.setSelectedFiles,
       setSelectedImages = _useAttachmentPickerC.setSelectedImages;
 
   var _useCountdown = (0, _useCountdown2.useCountdown)(cooldownEndsAt),
@@ -191,8 +195,15 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       hasResetImages = _useState4[0],
       setHasResetImages = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      hasResetFiles = _useState6[0],
+      setHasResetFiles = _useState6[1];
+
   var selectedImagesLength = hasResetImages ? selectedImages.length : 0;
   var imageUploadsLength = hasResetImages ? imageUploads.length : 0;
+  var selectedFilesLength = hasResetFiles ? selectedFiles.length : 0;
+  var fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
   var imagesForInput = !!thread && !!threadList || !thread && !threadList;
   (0, _react.useEffect)(function () {
     setSelectedImages([]);
@@ -207,11 +218,29 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       return setSelectedImages([]);
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    setSelectedFiles([]);
+
+    if (fileUploads.length) {
+      fileUploads.forEach(function (file) {
+        return removeFile(file.id);
+      });
+    }
+
+    return function () {
+      return setSelectedFiles([]);
+    };
+  }, []);
   (0, _react.useEffect)(function () {
     if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
       setHasResetImages(true);
     }
   }, [imageUploadsLength, selectedImagesLength]);
+  (0, _react.useEffect)(function () {
+    if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
+      setHasResetFiles(true);
+    }
+  }, [fileUploadsLength, selectedFilesLength]);
   (0, _react.useEffect)(function () {
     if (imagesForInput === false && imageUploads.length) {
       imageUploads.forEach(function (image) {
@@ -219,30 +248,61 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       });
     }
   }, [imagesForInput]);
+
+  var uploadImagesHandler = function uploadImagesHandler() {
+    var imagesToUpload = selectedImages.filter(function (selectedImage) {
+      var uploadedImage = imageUploads.find(function (imageUpload) {
+        return imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri;
+      });
+      return !uploadedImage;
+    });
+    imagesToUpload.forEach(function (image) {
+      return uploadNewImage(image);
+    });
+  };
+
+  var removeImagesHandler = function removeImagesHandler() {
+    var imagesToRemove = imageUploads.filter(function (imageUpload) {
+      return !selectedImages.find(function (selectedImage) {
+        return selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url;
+      });
+    });
+    imagesToRemove.forEach(function (image) {
+      return removeImage(image.id);
+    });
+  };
+
   (0, _react.useEffect)(function () {
     if (imagesForInput) {
       if (selectedImagesLength > imageUploadsLength) {
-        var imagesToUpload = selectedImages.filter(function (selectedImage) {
-          var uploadedImage = imageUploads.find(function (imageUpload) {
-            return imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri;
-          });
-          return !uploadedImage;
-        });
-        imagesToUpload.forEach(function (image) {
-          return uploadNewImage(image);
-        });
-      } else if (selectedImagesLength < imageUploadsLength) {
-        var imagesToRemove = imageUploads.filter(function (imageUpload) {
-          return !selectedImages.find(function (selectedImage) {
-            return selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url;
-          });
-        });
-        imagesToRemove.forEach(function (image) {
-          return removeImage(image.id);
-        });
+        uploadImagesHandler();
+      } else {
+        removeImagesHandler();
       }
     }
   }, [selectedImagesLength]);
+  (0, _react.useEffect)(function () {
+    if (selectedFilesLength > fileUploadsLength) {
+      var filesToUpload = selectedFiles.filter(function (selectedFile) {
+        var uploadedFile = fileUploads.find(function (fileUpload) {
+          return fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri;
+        });
+        return !uploadedFile;
+      });
+      filesToUpload.forEach(function (file) {
+        return uploadNewFile(file);
+      });
+    } else {
+      var filesToRemove = fileUploads.filter(function (fileUpload) {
+        return !selectedFiles.find(function (selectedFile) {
+          return selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url;
+        });
+      });
+      filesToRemove.forEach(function (file) {
+        return removeFile(file.id);
+      });
+    }
+  }, [selectedFilesLength]);
   (0, _react.useEffect)(function () {
     if (imagesForInput) {
       if (imageUploadsLength < selectedImagesLength) {
@@ -265,6 +325,27 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       }
     }
   }, [imageUploadsLength]);
+  (0, _react.useEffect)(function () {
+    if (fileUploadsLength < selectedFilesLength) {
+      var updatedSelectedFiles = selectedFiles.filter(function (selectedFile) {
+        var uploadedFile = fileUploads.find(function (fileUpload) {
+          return fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri;
+        });
+        return uploadedFile;
+      });
+      setSelectedFiles(updatedSelectedFiles);
+    } else if (fileUploadsLength > selectedFilesLength) {
+      setSelectedFiles(fileUploads.map(function (fileUpload) {
+        return {
+          duration: fileUpload.file.duration,
+          name: fileUpload.file.name,
+          size: fileUpload.file.size,
+          type: fileUpload.file.type,
+          uri: fileUpload.file.uri
+        };
+      }));
+    }
+  }, [fileUploadsLength]);
   var editingExists = !!editing;
   (0, _react.useEffect)(function () {
     if (editing && inputBoxRef.current) {
@@ -346,21 +427,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 396,
+      lineNumber: 479,
       columnNumber: 7
     }
   }, editing && _react["default"].createElement(InputEditingStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 404,
+      lineNumber: 487,
       columnNumber: 21
     }
   }), quotedMessage && _react["default"].createElement(InputReplyStateHeader, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 405,
+      lineNumber: 488,
       columnNumber: 27
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -368,7 +449,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 406,
+      lineNumber: 489,
       columnNumber: 9
     }
   }, Input ? _react["default"].createElement(Input, {
@@ -377,7 +458,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 408,
+      lineNumber: 491,
       columnNumber: 13
     }
   }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -385,14 +466,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 414,
+      lineNumber: 497,
       columnNumber: 15
     }
   }, InputButtons && _react["default"].createElement(InputButtons, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 415,
+      lineNumber: 498,
       columnNumber: 34
     }
   })), _react["default"].createElement(_reactNative.View, {
@@ -403,7 +484,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 417,
+      lineNumber: 500,
       columnNumber: 15
     }
   }, (typeof editing !== 'boolean' && (editing == null ? void 0 : editing.quoted_message) || quotedMessage) && _react["default"].createElement(_reactNative.View, {
@@ -411,21 +492,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 428,
+      lineNumber: 511,
       columnNumber: 19
     }
   }, _react["default"].createElement(Reply, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 429,
+      lineNumber: 512,
       columnNumber: 21
     }
   })), imageUploads.length ? _react["default"].createElement(ImageUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 432,
+      lineNumber: 515,
       columnNumber: 40
     }
   }) : null, imageUploads.length && fileUploads.length ? _react["default"].createElement(_reactNative.View, {
@@ -436,21 +517,21 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 434,
+      lineNumber: 517,
       columnNumber: 19
     }
   }) : null, fileUploads.length ? _react["default"].createElement(FileUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 444,
+      lineNumber: 527,
       columnNumber: 39
     }
   }) : null, giphyActive ? _react["default"].createElement(InputGiphySearch, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 446,
+      lineNumber: 529,
       columnNumber: 19
     }
   }) : _react["default"].createElement(_reactNative.View, {
@@ -458,7 +539,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 448,
+      lineNumber: 531,
       columnNumber: 19
     }
   }, _react["default"].createElement(_AutoCompleteInput.AutoCompleteInput, {
@@ -467,7 +548,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 449,
+      lineNumber: 532,
       columnNumber: 21
     }
   }))), _react["default"].createElement(_reactNative.View, {
@@ -475,7 +556,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 456,
+      lineNumber: 539,
       columnNumber: 15
     }
   }, cooldownRemainingSeconds ? _react["default"].createElement(CooldownTimer, {
@@ -483,7 +564,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 458,
+      lineNumber: 541,
       columnNumber: 19
     }
   }) : _react["default"].createElement(SendButton, {
@@ -491,7 +572,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 460,
+      lineNumber: 543,
       columnNumber: 19
     }
   })))), _react["default"].createElement(ShowThreadMessageInChannelButton, {
@@ -499,7 +580,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 466,
+      lineNumber: 549,
       columnNumber: 9
     }
   })), triggerType && suggestions ? _react["default"].createElement(_reactNative.View, {
@@ -510,7 +591,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 470,
+      lineNumber: 553,
       columnNumber: 9
     }
   }, _react["default"].createElement(AutoCompleteSuggestionList, {
@@ -522,7 +603,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 477,
+      lineNumber: 560,
       columnNumber: 11
     }
   })) : null, selectedPicker && _react["default"].createElement(_reactNative.View, {
@@ -533,14 +614,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 487,
+      lineNumber: 570,
       columnNumber: 9
     }
   }, _react["default"].createElement(_AttachmentSelectionBar.AttachmentSelectionBar, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 499,
+      lineNumber: 582,
       columnNumber: 11
     }
   })));
@@ -656,6 +737,7 @@ var MessageInput = function MessageInput(props) {
       mentionedUsers = _useMessageInputConte.mentionedUsers,
       numberOfUploads = _useMessageInputConte.numberOfUploads,
       quotedMessage = _useMessageInputConte.quotedMessage,
+      removeFile = _useMessageInputConte.removeFile,
       removeImage = _useMessageInputConte.removeImage,
       resetInput = _useMessageInputConte.resetInput,
       SendButton = _useMessageInputConte.SendButton,
@@ -666,6 +748,7 @@ var MessageInput = function MessageInput(props) {
       setShowMoreOptions = _useMessageInputConte.setShowMoreOptions,
       showMoreOptions = _useMessageInputConte.showMoreOptions,
       ShowThreadMessageInChannelButton = _useMessageInputConte.ShowThreadMessageInChannelButton,
+      uploadNewFile = _useMessageInputConte.uploadNewFile,
       uploadNewImage = _useMessageInputConte.uploadNewImage;
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
@@ -689,7 +772,7 @@ var MessageInput = function MessageInput(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 697,
+        lineNumber: 782,
         columnNumber: 12
       }
     });
@@ -726,6 +809,7 @@ var MessageInput = function MessageInput(props) {
     mentionedUsers: mentionedUsers,
     numberOfUploads: numberOfUploads,
     quotedMessage: quotedMessage,
+    removeFile: removeFile,
     removeImage: removeImage,
     Reply: Reply,
     resetInput: resetInput,
@@ -740,13 +824,14 @@ var MessageInput = function MessageInput(props) {
     t: t,
     thread: thread,
     triggerType: triggerType,
+    uploadNewFile: uploadNewFile,
     uploadNewImage: uploadNewImage,
     watchers: watchers
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 701,
+      lineNumber: 786,
       columnNumber: 5
     }
   }));