stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

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

@@ -17,11 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _AttachmentSelectionBar = require("../AttachmentPicker/components/AttachmentSelectionBar");
-
-var _AutoCompleteInput = require("../AutoCompleteInput/AutoCompleteInput");
-
-var _SuggestionsList = require("../AutoCompleteInput/SuggestionsList");
+var _useCountdown2 = require("./hooks/useCountdown");
 
 var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
 
@@ -31,6 +27,8 @@ var _MessageInputContext = require("../../contexts/messageInputContext/MessageIn
 
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 
+var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
+
 var _SuggestionsContext = require("../../contexts/suggestionsContext/SuggestionsContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
@@ -41,6 +39,10 @@ var _TranslationContext = require("../../contexts/translationContext/Translation
 
 var _icons = require("../../icons");
 
+var _AttachmentSelectionBar = require("../AttachmentPicker/components/AttachmentSelectionBar");
+
+var _AutoCompleteInput = require("../AutoCompleteInput/AutoCompleteInput");
+
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/MessageInput.tsx";
 
@@ -129,10 +131,12 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
   var additionalTextInputProps = props.additionalTextInputProps,
       asyncIds = props.asyncIds,
       asyncUploads = props.asyncUploads,
+      AutoCompleteSuggestionList = props.AutoCompleteSuggestionList,
       clearEditingState = props.clearEditingState,
       clearQuotedMessageState = props.clearQuotedMessageState,
       closeAttachmentPicker = props.closeAttachmentPicker,
-      componentType = props.componentType,
+      cooldownEndsAt = props.cooldownEndsAt,
+      CooldownTimer = props.CooldownTimer,
       disabled = props.disabled,
       editing = props.editing,
       FileUploadPreview = props.FileUploadPreview,
@@ -149,7 +153,6 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       mentionedUsers = props.mentionedUsers,
       numberOfUploads = props.numberOfUploads,
       quotedMessage = props.quotedMessage,
-      quotedRepliesEnabled = props.quotedRepliesEnabled,
       removeImage = props.removeImage,
       Reply = props.Reply,
       resetInput = props.resetInput,
@@ -160,10 +163,10 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       setShowMoreOptions = props.setShowMoreOptions,
       ShowThreadMessageInChannelButton = props.ShowThreadMessageInChannelButton,
       suggestions = props.suggestions,
-      suggestionsTitle = props.suggestionsTitle,
       t = props.t,
       thread = props.thread,
       threadList = props.threadList,
+      triggerType = props.triggerType,
       uploadNewImage = props.uploadNewImage,
       watchers = props.watchers;
 
@@ -196,7 +199,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       optionsContainer = _useTheme$theme$messa.optionsContainer,
       replyContainer = _useTheme$theme$messa.replyContainer,
       sendButtonContainer = _useTheme$theme$messa.sendButtonContainer,
-      suggestionsListContainer = _useTheme$theme$messa.suggestionsListContainer;
+      suggestionListContainer = _useTheme$theme$messa.suggestionsListContainer.container;
 
   var _useAttachmentPickerC = (0, _AttachmentPickerContext.useAttachmentPickerContext)(),
       attachmentPickerBottomSheetHeight = _useAttachmentPickerC.attachmentPickerBottomSheetHeight,
@@ -207,6 +210,9 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       setMaxNumberOfFiles = _useAttachmentPickerC.setMaxNumberOfFiles,
       setSelectedImages = _useAttachmentPickerC.setSelectedImages;
 
+  var _useCountdown = (0, _useCountdown2.useCountdown)(cooldownEndsAt),
+      cooldownRemainingSeconds = _useCountdown.seconds;
+
   (0, _react.useEffect)(function () {
     setMaxNumberOfFiles(maxNumberOfFiles != null ? maxNumberOfFiles : 10);
     return closeAttachmentPicker;
@@ -372,7 +378,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 437,
+      lineNumber: 450,
       columnNumber: 7
     }
   }, (editing || quotedMessage) && _react["default"].createElement(_reactNative.View, {
@@ -380,7 +386,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 446,
+      lineNumber: 459,
       columnNumber: 11
     }
   }, editing ? _react["default"].createElement(_icons.Edit, {
@@ -388,7 +394,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 448,
+      lineNumber: 461,
       columnNumber: 15
     }
   }) : _react["default"].createElement(_icons.CurveLineLeftUp, {
@@ -396,7 +402,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 450,
+      lineNumber: 463,
       columnNumber: 15
     }
   }), _react["default"].createElement(_reactNative.Text, {
@@ -406,7 +412,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 452,
+      lineNumber: 465,
       columnNumber: 13
     }
   }, editing ? t('Editing Message') : t('Reply to Message')), _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -421,16 +427,12 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       if (quotedMessage) {
         clearQuotedMessageState();
       }
-
-      if (inputBoxRef.current) {
-        inputBoxRef.current.blur();
-      }
     },
     testID: "close-button",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 455,
+      lineNumber: 468,
       columnNumber: 13
     }
   }, _react["default"].createElement(_icons.CircleClose, {
@@ -438,7 +440,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 471,
+      lineNumber: 481,
       columnNumber: 15
     }
   }))), _react["default"].createElement(_reactNative.View, {
@@ -446,7 +448,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 475,
+      lineNumber: 485,
       columnNumber: 9
     }
   }, Input ? _react["default"].createElement(Input, {
@@ -455,7 +457,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 477,
+      lineNumber: 487,
       columnNumber: 13
     }
   }) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -463,14 +465,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 483,
+      lineNumber: 493,
       columnNumber: 15
     }
   }, InputButtons && _react["default"].createElement(InputButtons, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 484,
+      lineNumber: 494,
       columnNumber: 34
     }
   })), _react["default"].createElement(_reactNative.View, {
@@ -481,29 +483,29 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 486,
+      lineNumber: 496,
       columnNumber: 15
     }
-  }, (typeof editing !== 'boolean' && quotedRepliesEnabled && (editing == null ? void 0 : editing.quoted_message) || quotedMessage) && _react["default"].createElement(_reactNative.View, {
+  }, (typeof editing !== 'boolean' && (editing == null ? void 0 : editing.quoted_message) || quotedMessage) && _react["default"].createElement(_reactNative.View, {
     style: [styles.replyContainer, replyContainer],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 500,
+      lineNumber: 507,
       columnNumber: 19
     }
   }, _react["default"].createElement(Reply, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 501,
+      lineNumber: 508,
       columnNumber: 21
     }
   })), imageUploads.length ? _react["default"].createElement(ImageUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 504,
+      lineNumber: 511,
       columnNumber: 40
     }
   }) : null, imageUploads.length && fileUploads.length ? _react["default"].createElement(_reactNative.View, {
@@ -514,14 +516,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 506,
+      lineNumber: 513,
       columnNumber: 19
     }
   }) : null, fileUploads.length ? _react["default"].createElement(FileUploadPreview, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 516,
+      lineNumber: 523,
       columnNumber: 39
     }
   }) : null, _react["default"].createElement(_reactNative.View, {
@@ -532,7 +534,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 517,
+      lineNumber: 524,
       columnNumber: 17
     }
   }, giphyActive && _react["default"].createElement(_reactNative.View, {
@@ -542,7 +544,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 528,
+      lineNumber: 535,
       columnNumber: 21
     }
   }, _react["default"].createElement(_icons.Lightning, {
@@ -552,7 +554,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 535,
+      lineNumber: 542,
       columnNumber: 23
     }
   }), _react["default"].createElement(_reactNative.Text, {
@@ -562,15 +564,16 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 536,
+      lineNumber: 543,
       columnNumber: 23
     }
   }, "GIPHY")), _react["default"].createElement(_AutoCompleteInput.AutoCompleteInput, {
     additionalTextInputProps: additionalTextInputProps,
+    cooldownActive: !!cooldownRemainingSeconds,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 539,
+      lineNumber: 546,
       columnNumber: 19
     }
   }), giphyActive && _react["default"].createElement(_reactNative.TouchableOpacity, {
@@ -583,7 +586,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 543,
+      lineNumber: 551,
       columnNumber: 21
     }
   }, _react["default"].createElement(_icons.CircleClose, {
@@ -593,7 +596,7 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 551,
+      lineNumber: 559,
       columnNumber: 23
     }
   })))), _react["default"].createElement(_reactNative.View, {
@@ -601,45 +604,54 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 556,
+      lineNumber: 564,
       columnNumber: 15
     }
-  }, _react["default"].createElement(SendButton, {
+  }, cooldownRemainingSeconds ? _react["default"].createElement(CooldownTimer, {
+    seconds: cooldownRemainingSeconds,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 566,
+      columnNumber: 19
+    }
+  }) : _react["default"].createElement(SendButton, {
     disabled: disabled || sending.current || !isValidMessage(),
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 557,
-      columnNumber: 17
+      lineNumber: 568,
+      columnNumber: 19
     }
   })))), _react["default"].createElement(ShowThreadMessageInChannelButton, {
     threadList: threadList,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 562,
+      lineNumber: 574,
       columnNumber: 9
     }
-  })), componentType && suggestions ? _react["default"].createElement(_reactNative.View, {
-    style: [styles.suggestionsListContainer, {
+  })), triggerType && suggestions ? _react["default"].createElement(_reactNative.View, {
+    style: [suggestionListContainer, styles.suggestionsListContainer, {
       backgroundColor: white,
       bottom: height
-    }, suggestionsListContainer],
+    }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 565,
+      lineNumber: 578,
       columnNumber: 9
     }
-  }, _react["default"].createElement(_SuggestionsList.SuggestionsList, {
+  }, _react["default"].createElement(AutoCompleteSuggestionList, {
     active: !!suggestions,
-    componentType: componentType,
-    suggestions: suggestions,
-    suggestionsTitle: suggestionsTitle,
+    data: suggestions.data,
+    onSelect: suggestions.onSelect,
+    queryText: suggestions.queryText,
+    triggerType: triggerType,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 572,
+      lineNumber: 585,
       columnNumber: 11
     }
   })) : null, selectedPicker && _react["default"].createElement(_reactNative.View, {
@@ -650,14 +662,14 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 581,
+      lineNumber: 595,
       columnNumber: 9
     }
   }, _react["default"].createElement(_AttachmentSelectionBar.AttachmentSelectionBar, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 593,
+      lineNumber: 607,
       columnNumber: 11
     }
   })));
@@ -677,7 +689,6 @@ var areEqual = function areEqual(prevProps, nextProps) {
       prevSending = prevProps.sending,
       prevShowMoreOptions = prevProps.showMoreOptions,
       prevSuggestions = prevProps.suggestions,
-      prevSuggestionsTitle = prevProps.suggestionsTitle,
       prevT = prevProps.t,
       prevThread = prevProps.thread,
       prevThreadList = prevProps.threadList;
@@ -694,7 +705,6 @@ var areEqual = function areEqual(prevProps, nextProps) {
       nextSending = nextProps.sending,
       nextShowMoreOptions = nextProps.showMoreOptions,
       nextSuggestions = nextProps.suggestions,
-      nextSuggestionsTitle = nextProps.suggestionsTitle,
       nextT = nextProps.t,
       nextThread = nextProps.thread,
       nextThreadList = nextProps.threadList;
@@ -731,8 +741,6 @@ var areEqual = function areEqual(prevProps, nextProps) {
     return name === nextSuggestions.data[index].name;
   }) : !!prevSuggestions === !!nextSuggestions;
   if (!suggestionsEqual) return false;
-  var suggestionsTitleEqual = prevSuggestionsTitle === nextSuggestionsTitle;
-  if (!suggestionsTitleEqual) return false;
   var threadEqual = (prevThread == null ? void 0 : prevThread.id) === (nextThread == null ? void 0 : nextThread.id) && (prevThread == null ? void 0 : prevThread.text) === (nextThread == null ? void 0 : nextThread.text) && (prevThread == null ? void 0 : prevThread.reply_count) === (nextThread == null ? void 0 : nextThread.reply_count);
   if (!threadEqual) return false;
   var threadListEqual = prevThreadList === nextThreadList;
@@ -743,6 +751,8 @@ var areEqual = function areEqual(prevProps, nextProps) {
 var MemoizedMessageInput = _react["default"].memo(MessageInputWithContext, areEqual);
 
 var MessageInput = function MessageInput(props) {
+  var ownCapabilities = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)();
+
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
       _useChannelContext$di = _useChannelContext.disabled,
       disabled = _useChannelContext$di === void 0 ? false : _useChannelContext$di,
@@ -756,6 +766,8 @@ var MessageInput = function MessageInput(props) {
       clearEditingState = _useMessageInputConte.clearEditingState,
       clearQuotedMessageState = _useMessageInputConte.clearQuotedMessageState,
       closeAttachmentPicker = _useMessageInputConte.closeAttachmentPicker,
+      cooldownEndsAt = _useMessageInputConte.cooldownEndsAt,
+      CooldownTimer = _useMessageInputConte.CooldownTimer,
       editing = _useMessageInputConte.editing,
       FileUploadPreview = _useMessageInputConte.FileUploadPreview,
       fileUploads = _useMessageInputConte.fileUploads,
@@ -775,6 +787,7 @@ var MessageInput = function MessageInput(props) {
       SendButton = _useMessageInputConte.SendButton,
       sending = _useMessageInputConte.sending,
       sendMessageAsync = _useMessageInputConte.sendMessageAsync,
+      SendMessageDisallowedIndicator = _useMessageInputConte.SendMessageDisallowedIndicator,
       setGiphyActive = _useMessageInputConte.setGiphyActive,
       setShowMoreOptions = _useMessageInputConte.setShowMoreOptions,
       showMoreOptions = _useMessageInputConte.showMoreOptions,
@@ -782,13 +795,14 @@ var MessageInput = function MessageInput(props) {
       uploadNewImage = _useMessageInputConte.uploadNewImage;
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
-      quotedRepliesEnabled = _useMessagesContext.quotedRepliesEnabled,
       Reply = _useMessagesContext.Reply;
 
   var _useSuggestionsContex = (0, _SuggestionsContext.useSuggestionsContext)(),
-      componentType = _useSuggestionsContex.componentType,
+      AutoCompleteSuggestionHeader = _useSuggestionsContex.AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem = _useSuggestionsContex.AutoCompleteSuggestionItem,
+      AutoCompleteSuggestionList = _useSuggestionsContex.AutoCompleteSuggestionList,
       suggestions = _useSuggestionsContex.suggestions,
-      suggestionsTitle = _useSuggestionsContex.suggestionsTitle;
+      triggerType = _useSuggestionsContex.triggerType;
 
   var _useThreadContext = (0, _ThreadContext.useThreadContext)(),
       thread = _useThreadContext.thread;
@@ -796,14 +810,29 @@ var MessageInput = function MessageInput(props) {
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
       t = _useTranslationContex.t;
 
+  if (!ownCapabilities.sendMessage && SendMessageDisallowedIndicator) {
+    return _react["default"].createElement(SendMessageDisallowedIndicator, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 822,
+        columnNumber: 12
+      }
+    });
+  }
+
   return _react["default"].createElement(MemoizedMessageInput, (0, _extends2["default"])({
     additionalTextInputProps: additionalTextInputProps,
     asyncIds: asyncIds,
     asyncUploads: asyncUploads,
+    AutoCompleteSuggestionHeader: AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem: AutoCompleteSuggestionItem,
+    AutoCompleteSuggestionList: AutoCompleteSuggestionList,
     clearEditingState: clearEditingState,
     clearQuotedMessageState: clearQuotedMessageState,
     closeAttachmentPicker: closeAttachmentPicker,
-    componentType: componentType,
+    cooldownEndsAt: cooldownEndsAt,
+    CooldownTimer: CooldownTimer,
     disabled: disabled,
     editing: editing,
     FileUploadPreview: FileUploadPreview,
@@ -820,7 +849,6 @@ var MessageInput = function MessageInput(props) {
     mentionedUsers: mentionedUsers,
     numberOfUploads: numberOfUploads,
     quotedMessage: quotedMessage,
-    quotedRepliesEnabled: quotedRepliesEnabled,
     removeImage: removeImage,
     Reply: Reply,
     resetInput: resetInput,
@@ -832,16 +860,16 @@ var MessageInput = function MessageInput(props) {
     showMoreOptions: showMoreOptions,
     ShowThreadMessageInChannelButton: ShowThreadMessageInChannelButton,
     suggestions: suggestions,
-    suggestionsTitle: suggestionsTitle,
     t: t,
     thread: thread,
+    triggerType: triggerType,
     uploadNewImage: uploadNewImage,
     watchers: watchers
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 802,
+      lineNumber: 826,
       columnNumber: 5
     }
   }));