stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/lib/module/components/Message/Message.js

@@ -19,9 +19,7 @@ var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
 var _KeyboardContext = require("../../contexts/keyboardContext/KeyboardContext");
 var _MessageContext = require("../../contexts/messageContext/MessageContext");
-var _MessageOverlayContext = require("../../contexts/messageOverlayContext/MessageOverlayContext");
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
-var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
@@ -30,7 +28,6 @@ var _native = require("../../native");
 var _types = require("../../types/types");
 var _utils = require("../../utils/utils");
 var _useMessageList = require("../MessageList/hooks/useMessageList");
-var _Poll = require("../Poll");
 var _jsxRuntime = require("react/jsx-runtime");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/Message.tsx";
@@ -40,13 +37,24 @@ var MessageWithContext = function MessageWithContext(props) {
   var _message$user;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isBounceDialogOpen = _useState2[0],
-    setIsBounceDialogOpen = _useState2[1];
+    messageOverlayVisible = _useState2[0],
+    setMessageOverlayVisible = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isEditedMessageOpen = _useState4[0],
-    setIsEditedMessageOpen = _useState4[1];
-  var isMessageTypeDeleted = props.message.type === 'deleted';
+    isErrorInMessage = _useState4[0],
+    setIsErrorInMessage = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    showMessageReactions = _useState6[0],
+    setShowMessageReactions = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isBounceDialogOpen = _useState8[0],
+    setIsBounceDialogOpen = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isEditedMessageOpen = _useState10[0],
+    setIsEditedMessageOpen = _useState10[1];
   var channel = props.channel,
     chatContext = props.chatContext,
     deleteMessageFromContext = props.deleteMessage,
@@ -62,7 +70,6 @@ var MessageWithContext = function MessageWithContext(props) {
     _props$groupStyles = props.groupStyles,
     groupStyles = _props$groupStyles === void 0 ? ['bottom'] : _props$groupStyles,
     handleBan = props.handleBan,
-    handleBlock = props.handleBlock,
     handleCopy = props.handleCopy,
     handleDelete = props.handleDelete,
     handleEdit = props.handleEdit,
@@ -81,26 +88,20 @@ var MessageWithContext = function MessageWithContext(props) {
     messageActionsProp = _props$messageActions === void 0 ? _messageActions.messageActions : _props$messageActions,
     MessageBounce = props.MessageBounce,
     messageContentOrderProp = props.messageContentOrder,
+    MessageMenu = props.MessageMenu,
     messagesContext = props.messagesContext,
     MessageSimple = props.MessageSimple,
-    onLongPressProp = props.onLongPress,
     onLongPressMessageProp = props.onLongPressMessage,
-    onPressProp = props.onPress,
-    onPressInProp = props.onPressIn,
     onPressInMessageProp = props.onPressInMessage,
     onPressMessageProp = props.onPressMessage,
     onThreadSelect = props.onThreadSelect,
     openThread = props.openThread,
-    OverlayReactionList = props.OverlayReactionList,
-    PollContent = props.PollContent,
     preventPress = props.preventPress,
     removeMessage = props.removeMessage,
     retrySendMessage = props.retrySendMessage,
     selectReaction = props.selectReaction,
     sendReaction = props.sendReaction,
-    setData = props.setData,
     setEditingState = props.setEditingState,
-    setOverlay = props.setOverlay,
     setQuotedMessageState = props.setQuotedMessageState,
     showAvatar = props.showAvatar,
     showMessageStatus = props.showMessageStatus,
@@ -115,46 +116,78 @@ var MessageWithContext = function MessageWithContext(props) {
   var isAIGenerated = (0, _react.useMemo)(function () {
     return isMessageAIGenerated(message);
   }, [message, isMessageAIGenerated]);
+  var isMessageTypeDeleted = message.type === 'deleted';
   var client = chatContext.client;
   var _useTheme = (0, _ThemeContext.useTheme)(),
     _useTheme$theme = _useTheme.theme,
     targetedMessageBackground = _useTheme$theme.colors.targetedMessageBackground,
     _useTheme$theme$messa = _useTheme$theme.messageSimple,
     targetedMessageContainer = _useTheme$theme$messa.targetedMessageContainer,
-    targetedMessageUnderlay = _useTheme$theme$messa.targetedMessageUnderlay,
-    unreadUnderlayColor = _useTheme$theme$messa.unreadUnderlayColor;
+    unreadUnderlayColor = _useTheme$theme$messa.unreadUnderlayColor,
+    screenPadding = _useTheme$theme.screenPadding;
+  var showMessageOverlay = function () {
+    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
+      var showMessageReactions,
+        _args = arguments;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            showMessageReactions = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+            _context.next = 3;
+            return dismissKeyboard();
+          case 3:
+            setShowMessageReactions(showMessageReactions);
+            setMessageOverlayVisible(true);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function showMessageOverlay() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var dismissOverlay = function dismissOverlay() {
+    setMessageOverlayVisible(false);
+  };
   var actionsEnabled = message.type === 'regular' && message.status === _utils.MessageStatusTypes.RECEIVED;
   var isMyMessage = client && message && client.userID === ((_message$user = message.user) == null ? void 0 : _message$user.id);
   var handleAction = function () {
-    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(name, value) {
+    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(name, value) {
       var data;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!message.id) {
-              _context.next = 5;
+              _context2.next = 10;
               break;
             }
-            _context.next = 3;
+            _context2.next = 3;
             return channel == null ? void 0 : channel.sendAction(message.id, (0, _defineProperty2["default"])({}, name, value));
           case 3:
-            data = _context.sent;
-            if (data != null && data.message) {
-              updateMessage(data.message);
-            } else {
-              removeMessage({
-                id: message.id,
-                parent_id: message.parent_id
-              });
+            data = _context2.sent;
+            if (!(data != null && data.message)) {
+              _context2.next = 8;
+              break;
             }
-          case 5:
+            updateMessage(data.message);
+            _context2.next = 10;
+            break;
+          case 8:
+            _context2.next = 10;
+            return removeMessage({
+              id: message.id,
+              parent_id: message.parent_id
+            });
+          case 10:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function handleAction(_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var onPressQuotedMessage = function onPressQuotedMessage(quotedMessage) {
@@ -174,6 +207,7 @@ var MessageWithContext = function MessageWithContext(props) {
     }
     var quotedMessage = message.quoted_message;
     if (error) {
+      setIsErrorInMessage(true);
       if ((0, _utils.isBlockedMessage)(message)) {
         return;
       }
@@ -181,7 +215,7 @@ var MessageWithContext = function MessageWithContext(props) {
         setIsBounceDialogOpen(true);
         return;
       }
-      showMessageOverlay(true, true);
+      showMessageOverlay();
     } else if (quotedMessage) {
       onPressQuotedMessage(quotedMessage);
     }
@@ -191,7 +225,7 @@ var MessageWithContext = function MessageWithContext(props) {
     if (cur.type === _types.FileTypes.File) {
       acc.files.push(cur);
       acc.other = [];
-    } else if (cur.type === _types.FileTypes.Video && !cur.og_scrape_url && (0, _native.isVideoPackageAvailable)()) {
+    } else if (cur.type === _types.FileTypes.Video && !cur.og_scrape_url && (0, _native.isVideoPlayerAvailable)()) {
       acc.videos.push({
         image_url: cur.asset_url,
         thumb_url: cur.thumb_url,
@@ -296,9 +330,9 @@ var MessageWithContext = function MessageWithContext(props) {
       client: client,
       deleteMessage: deleteMessageFromContext,
       deleteReaction: deleteReaction,
+      dismissOverlay: dismissOverlay,
       enforceUniqueReaction: enforceUniqueReaction,
       handleBan: handleBan,
-      handleBlock: handleBlock,
       handleCopy: handleCopy,
       handleDelete: handleDelete,
       handleEdit: handleEdit,
@@ -317,14 +351,12 @@ var MessageWithContext = function MessageWithContext(props) {
       selectReaction: selectReaction,
       sendReaction: sendReaction,
       setEditingState: setEditingState,
-      setOverlay: setOverlay,
       setQuotedMessageState: setQuotedMessageState,
       supportedReactions: supportedReactions,
       t: t,
       updateMessage: updateMessage
     }),
     banUser = _useMessageActions.banUser,
-    blockUser = _useMessageActions.blockUser,
     copyMessage = _useMessageActions.copyMessage,
     deleteMessage = _useMessageActions.deleteMessage,
     editMessage = _useMessageActions.editMessage,
@@ -336,96 +368,27 @@ var MessageWithContext = function MessageWithContext(props) {
     retry = _useMessageActions.retry,
     threadReply = _useMessageActions.threadReply,
     unpinMessage = _useMessageActions.unpinMessage;
-  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
-    userLanguage = _useTranslationContex.userLanguage;
-  var PollWrapper = (0, _react.useCallback)(function () {
-    var poll = message != null && message.poll_id ? client.polls.fromState(message.poll_id) : undefined;
-    return message != null && message.poll_id && poll ? (0, _jsxRuntime.jsx)(_Poll.Poll, {
-      message: message,
-      poll: poll,
-      PollContent: PollContent
-    }) : null;
-  }, [PollContent, client, message]);
-  var showMessageOverlay = function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
-      var isMessageActionsVisible,
-        error,
-        isThreadMessage,
-        dismissOverlay,
-        messageActions,
-        _args2 = arguments;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            isMessageActionsVisible = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : true;
-            error = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : errorOrFailed;
-            _context2.next = 4;
-            return dismissKeyboard();
-          case 4:
-            isThreadMessage = threadList || !!message.parent_id;
-            dismissOverlay = function dismissOverlay() {
-              return setOverlay('none');
-            };
-            messageActions = typeof messageActionsProp !== 'function' ? messageActionsProp : messageActionsProp({
-              banUser: banUser,
-              blockUser: blockUser,
-              copyMessage: copyMessage,
-              deleteMessage: deleteMessage,
-              dismissOverlay: dismissOverlay,
-              editMessage: editMessage,
-              error: error,
-              flagMessage: flagMessage,
-              isMessageActionsVisible: isMessageActionsVisible,
-              isMyMessage: isMyMessage,
-              isThreadMessage: isThreadMessage,
-              message: message,
-              messageReactions: isMessageActionsVisible === false,
-              muteUser: muteUser,
-              ownCapabilities: ownCapabilities,
-              pinMessage: pinMessage,
-              quotedReply: quotedReply,
-              retry: retry,
-              threadReply: threadReply,
-              unpinMessage: unpinMessage
-            });
-            setData({
-              alignment: alignment,
-              chatContext: chatContext,
-              clientId: client.userID,
-              files: attachments.files,
-              groupStyles: groupStyles,
-              handleReaction: ownCapabilities.sendReaction ? handleReaction : undefined,
-              images: attachments.images,
-              message: message,
-              messageActions: messageActions == null ? void 0 : messageActions.filter(Boolean),
-              messageContext: Object.assign({}, messageContext, {
-                preventPress: true
-              }),
-              messageReactionTitle: !error && !isMessageActionsVisible ? t('Message Reactions') : undefined,
-              messagesContext: Object.assign({}, messagesContext, {
-                messageContentOrder: messageContentOrder
-              }),
-              onlyEmojis: onlyEmojis,
-              otherAttachments: attachments.other,
-              OverlayReactionList: OverlayReactionList,
-              ownCapabilities: ownCapabilities,
-              Poll: PollWrapper,
-              supportedReactions: supportedReactions,
-              threadList: threadList,
-              userLanguage: userLanguage,
-              videos: attachments.videos
-            });
-            setOverlay('message');
-          case 9:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function showMessageOverlay() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var isThreadMessage = threadList || !!message.parent_id;
+  var messageActions = typeof messageActionsProp !== 'function' ? messageActionsProp : messageActionsProp({
+    banUser: banUser,
+    copyMessage: copyMessage,
+    deleteMessage: deleteMessage,
+    dismissOverlay: dismissOverlay,
+    editMessage: editMessage,
+    error: isErrorInMessage,
+    flagMessage: flagMessage,
+    isMyMessage: isMyMessage,
+    isThreadMessage: isThreadMessage,
+    message: message,
+    muteUser: muteUser,
+    ownCapabilities: ownCapabilities,
+    pinMessage: pinMessage,
+    quotedReply: quotedReply,
+    retry: retry,
+    showMessageReactions: showMessageReactions,
+    threadReply: threadReply,
+    unpinMessage: unpinMessage
+  });
   var actionHandlers = {
     copyMessage: handleCopyMessage,
     deleteMessage: handleDeleteMessage,
@@ -434,56 +397,31 @@ var MessageWithContext = function MessageWithContext(props) {
     pinMessage: handleTogglePinMessage,
     quotedReply: handleQuotedReplyMessage,
     resendMessage: handleResendMessage,
-    showMessageOverlay: showMessageOverlay,
     threadReply: handleThreadReply,
     toggleBanUser: handleToggleBanUser,
     toggleMuteUser: handleToggleMuteUser,
     toggleReaction: handleToggleReaction,
     unpinMessage: handleTogglePinMessage
   };
-  var onLongPressMessage = hasAttachmentActions || (0, _utils.isBlockedMessage)(message) ? function () {
-    return null;
-  } : onLongPressMessageProp ? function (payload) {
-    return onLongPressMessageProp({
-      actionHandlers: actionHandlers,
-      defaultHandler: (payload == null ? void 0 : payload.defaultHandler) || showMessageOverlay,
-      emitter: (payload == null ? void 0 : payload.emitter) || 'message',
-      event: payload == null ? void 0 : payload.event,
-      message: message
-    });
-  } : onLongPressProp ? function (payload) {
-    return onLongPressProp({
-      actionHandlers: actionHandlers,
-      defaultHandler: (payload == null ? void 0 : payload.defaultHandler) || showMessageOverlay,
-      emitter: (payload == null ? void 0 : payload.emitter) || 'message',
-      event: payload == null ? void 0 : payload.event
-    });
-  } : enableLongPress ? function () {
+  var _onLongPress = function onLongPress() {
+    if (hasAttachmentActions || (0, _utils.isBlockedMessage)(message) || !enableLongPress) return;
     if ((0, _utils.isBouncedMessage)(message)) {
       setIsBounceDialogOpen(true);
       return;
     }
     (0, _native.triggerHaptic)('impactMedium');
-    showMessageOverlay(true);
-  } : function () {
-    return null;
+    showMessageOverlay();
   };
   var messageContext = (0, _useCreateMessageContext.useCreateMessageContext)({
     actionsEnabled: actionsEnabled,
     alignment: alignment,
     channel: channel,
+    dismissOverlay: dismissOverlay,
     files: attachments.files,
     goToMessage: goToMessage,
     groupStyles: groupStyles,
     handleAction: handleAction,
-    handleCopyMessage: handleCopyMessage,
-    handleDeleteMessage: handleDeleteMessage,
-    handleEditMessage: handleEditMessage,
-    handleFlagMessage: handleFlagMessage,
-    handleQuotedReplyMessage: handleQuotedReplyMessage,
-    handleResendMessage: handleResendMessage,
-    handleToggleBanUser: handleToggleBanUser,
-    handleToggleMuteUser: handleToggleMuteUser,
+    handleReaction: handleReaction,
     handleToggleReaction: handleToggleReaction,
     hasReactions: hasReactions,
     images: attachments.images,
@@ -496,7 +434,21 @@ var MessageWithContext = function MessageWithContext(props) {
     message: message,
     messageContentOrder: messageContentOrder,
     myMessageTheme: messagesContext.myMessageTheme,
-    onLongPress: onLongPressMessage,
+    onLongPress: function onLongPress(payload) {
+      var onLongPressArgs = {
+        actionHandlers: actionHandlers,
+        defaultHandler: (payload == null ? void 0 : payload.defaultHandler) || _onLongPress,
+        emitter: (payload == null ? void 0 : payload.emitter) || 'message',
+        event: payload == null ? void 0 : payload.event,
+        message: message
+      };
+      var handleOnLongPress = function handleOnLongPress() {
+        if (onLongPressMessageProp) return onLongPressMessageProp(onLongPressArgs);
+        if (payload != null && payload.defaultHandler) return payload.defaultHandler();
+        return _onLongPress();
+      };
+      handleOnLongPress();
+    },
     onlyEmojis: onlyEmojis,
     onOpenThread: onOpenThread,
     onPress: function onPress(payload) {
@@ -509,26 +461,20 @@ var MessageWithContext = function MessageWithContext(props) {
         message: message
       };
       var handleOnPress = function handleOnPress() {
-        if (onPressProp) return onPressProp(onPressArgs);
         if (onPressMessageProp) return onPressMessageProp(onPressArgs);
         if (payload.defaultHandler) return payload.defaultHandler();
         return _onPress();
       };
       handleOnPress();
     },
-    onPressIn: onPressInProp || onPressInMessageProp ? function (payload) {
-      var onPressInArgs = {
+    onPressIn: onPressInMessageProp ? function (payload) {
+      if (onPressInMessageProp) return onPressInMessageProp({
         actionHandlers: actionHandlers,
         defaultHandler: payload.defaultHandler,
         emitter: payload.emitter || 'message',
         event: payload.event,
         message: message
-      };
-      var handleOnpressIn = function handleOnpressIn() {
-        if (onPressInProp) return onPressInProp(onPressInArgs);
-        if (onPressInMessageProp) return onPressInMessageProp(onPressInArgs);
-      };
-      handleOnpressIn();
+      });
     } : null,
     otherAttachments: attachments.other,
     preventPress: preventPress,
@@ -541,25 +487,29 @@ var MessageWithContext = function MessageWithContext(props) {
     videos: attachments.videos
   });
   if (!(isMessageTypeDeleted || messageContentOrder.length)) return null;
-  return (0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [message.pinned && Object.assign({}, targetedMessageContainer, {
-      backgroundColor: targetedMessageBackground
-    })],
-    testID: "message-wrapper",
+  return (0, _jsxRuntime.jsx)(_MessageContext.MessageProvider, {
+    value: messageContext,
     children: (0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [style, {
         backgroundColor: showUnreadUnderlay ? unreadUnderlayColor : undefined
       }],
-      children: (0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [isTargetedMessage ? Object.assign({
+      children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [{
+          marginTop: 2,
+          paddingHorizontal: screenPadding
+        }, (isTargetedMessage || message.pinned) && !isMessageTypeDeleted ? Object.assign({
           backgroundColor: targetedMessageBackground
-        }, targetedMessageUnderlay) : {}],
-        children: (0, _jsxRuntime.jsxs)(_MessageContext.MessageProvider, {
-          value: messageContext,
-          children: [(0, _jsxRuntime.jsx)(MessageSimple, {}), isBounceDialogOpen && (0, _jsxRuntime.jsx)(MessageBounce, {
-            setIsBounceDialogOpen: setIsBounceDialogOpen
-          })]
-        })
+        }, targetedMessageContainer) : {}],
+        testID: "message-wrapper",
+        children: [(0, _jsxRuntime.jsx)(MessageSimple, {}), isBounceDialogOpen ? (0, _jsxRuntime.jsx)(MessageBounce, {
+          setIsBounceDialogOpen: setIsBounceDialogOpen
+        }) : null, messageOverlayVisible ? (0, _jsxRuntime.jsx)(MessageMenu, {
+          dismissOverlay: dismissOverlay,
+          handleReaction: ownCapabilities.sendReaction ? handleReaction : undefined,
+          messageActions: messageActions,
+          showMessageReactions: showMessageReactions,
+          visible: messageOverlayVisible
+        }) : null]
       })
     })
   });
@@ -650,15 +600,11 @@ var Message = function Message(props) {
   var chatContext = (0, _ChatContext.useChatContext)();
   var _useKeyboardContext = (0, _KeyboardContext.useKeyboardContext)(),
     dismissKeyboard = _useKeyboardContext.dismissKeyboard;
-  var _useMessageOverlayCon = (0, _MessageOverlayContext.useMessageOverlayContext)(),
-    setData = _useMessageOverlayCon.setData;
   var messagesContext = (0, _MessagesContext.useMessagesContext)();
-  var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
-    setOverlay = _useOverlayContext.setOverlay;
   var _useThreadContext = (0, _ThreadContext.useThreadContext)(),
     openThread = _useThreadContext.openThread;
-  var _useTranslationContex2 = (0, _TranslationContext.useTranslationContext)(),
-    t = _useTranslationContex2.t;
+  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
+    t = _useTranslationContex.t;
   return (0, _jsxRuntime.jsx)(MemoizedMessage, Object.assign({}, messagesContext, {
     channel: channel,
     chatContext: chatContext,
@@ -667,8 +613,6 @@ var Message = function Message(props) {
     members: members,
     messagesContext: messagesContext,
     openThread: openThread,
-    setData: setData,
-    setOverlay: setOverlay,
     t: t
   }, props));
 };