stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
860 lines • 37 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Message = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _reactNativeTeleport = require("react-native-teleport");
var _useCreateMessageContext = require("./hooks/useCreateMessageContext");
var _useMessageActionHandlers = require("./hooks/useMessageActionHandlers");
var _useMessageActions2 = require("./hooks/useMessageActions");
var _useMessageDeliveryData = require("./hooks/useMessageDeliveryData");
var _useMessageReadData = require("./hooks/useMessageReadData");
var _useProcessReactions2 = require("./hooks/useProcessReactions");
var _messageOverlayConstants = require("./messageOverlayConstants");
var _MessageOverlayWrapper = require("./MessageOverlayWrapper");
var _measureInWindow = require("./utils/measureInWindow");
var _messageActions = require("./utils/messageActions");
var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
var _ChatContext = require("../../contexts/chatContext/ChatContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _KeyboardContext = require("../../contexts/keyboardContext/KeyboardContext");
var _MessageComposerAPIContext = require("../../contexts/messageComposerContext/MessageComposerAPIContext");
var _MessageContext = require("../../contexts/messageContext/MessageContext");
var _MessageListItemContext = require("../../contexts/messageListItemContext/MessageListItemContext");
var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _hooks = require("../../hooks");
var _native = require("../../native");
var _stateStore = require("../../state-store");
var _theme = require("../../theme");
var _types = require("../../types/types");
var _utils = require("../../utils/utils");
var _KeyboardCompatibleView = require("../KeyboardCompatibleView/KeyboardCompatibleView");
var _UIComponents = require("../UIComponents");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/Message.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var createMessageOverlayId = messageId => `message-overlay-${messageId != null ? messageId : 'unknown'}-${(0, _utils.generateRandomId)()}`;
var MessageWithContext = props => {
var _message$user, _message$attachments, _channel$state$messag, _bubbleRect$current;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
showMessageReactions = _useState2[0],
setShowMessageReactions = _useState2[1];
var _useState3 = (0, _react.useState)(undefined),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
selectedReaction = _useState4[0],
setSelectedReaction = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isBounceDialogOpen = _useState6[0],
setIsBounceDialogOpen = _useState6[1];
var channel = props.channel,
chatContext = props.chatContext,
deleteMessageFromContext = props.deleteMessage,
deleteReaction = props.deleteReaction,
deliveredToCount = props.deliveredToCount,
dismissKeyboardOnMessageTouch = props.dismissKeyboardOnMessageTouch,
_props$enableLongPres = props.enableLongPress,
enableLongPress = _props$enableLongPres === void 0 ? true : _props$enableLongPres,
enforceUniqueReaction = props.enforceUniqueReaction,
_props$forceAlignMess = props.forceAlignMessages,
forceAlignMessages = _props$forceAlignMess === void 0 ? false : _props$forceAlignMess,
goToMessage = props.goToMessage,
_props$groupStyles = props.groupStyles,
groupStyles = _props$groupStyles === void 0 ? ['bottom'] : _props$groupStyles,
handleBan = props.handleBan,
handleCopy = props.handleCopy,
handleDelete = props.handleDelete,
handleDeleteForMe = props.handleDeleteForMe,
handleEdit = props.handleEdit,
handleFlag = props.handleFlag,
handleMarkUnread = props.handleMarkUnread,
handleMute = props.handleMute,
handlePinMessage = props.handlePinMessage,
handleQuotedReply = props.handleQuotedReply,
handleReactionProp = props.handleReaction,
handleRetry = props.handleRetry,
handleThreadReply = props.handleThreadReply,
handleBlockUser = props.handleBlockUser,
isTargetedMessage = props.isTargetedMessage,
members = props.members,
message = props.message,
_props$messageActions = props.messageActions,
messageActionsProp = _props$messageActions === void 0 ? _messageActions.messageActions : _props$messageActions,
_props$messageOverlay = props.messageOverlayTargetId,
messageOverlayTargetId = _props$messageOverlay === void 0 ? _messageOverlayConstants.DEFAULT_MESSAGE_OVERLAY_TARGET_ID : _props$messageOverlay,
messageContentOrderProp = props.messageContentOrder,
messagesContext = props.messagesContext,
onLongPressMessageProp = props.onLongPressMessage,
onPressInMessageProp = props.onPressInMessage,
onPressMessageProp = props.onPressMessage,
onThreadSelect = props.onThreadSelect,
openThread = props.openThread,
preventPress = props.preventPress,
removeMessage = props.removeMessage,
retrySendMessage = props.retrySendMessage,
selectReaction = props.selectReaction,
sendReaction = props.sendReaction,
setEditingState = props.setEditingState,
showAvatar = props.showAvatar,
showMessageStatus = props.showMessageStatus,
style = props.style,
supportedReactions = props.supportedReactions,
t = props.t,
_props$threadList = props.threadList,
threadList = _props$threadList === void 0 ? false : _props$threadList,
updateMessage = props.updateMessage,
readBy = props.readBy,
setQuotedMessage = props.setQuotedMessage;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
MessageActionList = _useComponentsContext.MessageActionList,
MessageBlocked = _useComponentsContext.MessageBlocked,
MessageBounce = _useComponentsContext.MessageBounce,
MessageItemView = _useComponentsContext.MessageItemView,
MessageReactionPicker = _useComponentsContext.MessageReactionPicker,
MessageUserReactions = _useComponentsContext.MessageUserReactions;
var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
var isMessageAIGenerated = messagesContext.isMessageAIGenerated;
var isAIGenerated = (0, _react.useMemo)(() => isMessageAIGenerated(message), [message, isMessageAIGenerated]);
var messageOverlayId = (0, _react.useMemo)(() => createMessageOverlayId(message.id), [message.id]);
var isMessageTypeDeleted = message.type === 'deleted';
var client = chatContext.client;
var rectRef = (0, _react.useRef)(undefined);
var bubbleRect = (0, _react.useRef)(undefined);
var contextMenuAnchorRef = (0, _react.useRef)(null);
var messageOverlayTargetsRef = (0, _react.useRef)({});
var registerMessageOverlayTarget = (0, _hooks.useStableCallback)(({
id,
view
}) => {
messageOverlayTargetsRef.current[id] = view;
});
var unregisterMessageOverlayTarget = (0, _hooks.useStableCallback)(id => {
delete messageOverlayTargetsRef.current[id];
});
var showMessageOverlay = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
(0, _KeyboardCompatibleView.dismissKeyboard)();
try {
var activeTargetView = messageOverlayTargetsRef.current[messageOverlayTargetId];
if (!activeTargetView) {
throw new Error(`No message overlay target is registered for target id "${messageOverlayTargetId}".`);
}
var layout = yield (0, _measureInWindow.measureInWindow)({
current: activeTargetView
}, insets);
var bubbleLayout = yield (0, _measureInWindow.measureInWindow)(contextMenuAnchorRef, insets).catch(() => layout);
rectRef.current = layout;
bubbleRect.current = bubbleLayout;
(0, _stateStore.setOverlayMessageH)(layout);
(0, _stateStore.openOverlay)({
id: messageOverlayId,
messageId: message.id
});
} catch (e) {
console.error(e);
}
}));
var showReactionsOverlay = (0, _hooks.useStableCallback)(reactionType => {
setShowMessageReactions(true);
setSelectedReaction(reactionType);
});
var _useMessageListItemCo = (0, _MessageListItemContext.useMessageListItemContext)(),
setNativeScrollability = _useMessageListItemCo.setNativeScrollability;
var dismissOverlay = () => {
(0, _stateStore.closeOverlay)();
};
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 _ref2 = (0, _asyncToGenerator2.default)(function* (name, value) {
if (message.id) {
var data = yield channel == null ? void 0 : channel.sendAction(message.id, {
[name]: value
});
if (data != null && data.message) {
updateMessage(data.message);
} else {
yield removeMessage({
id: message.id,
parent_id: message.parent_id
});
}
}
});
return function handleAction(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
var errorOrFailed = message.type === 'error' || message.status === _utils.MessageStatusTypes.FAILED;
var onPress = (error = errorOrFailed) => {
if (dismissKeyboardOnMessageTouch) {
(0, _KeyboardCompatibleView.dismissKeyboard)();
}
if (error) {
if ((0, _utils.isBlockedMessage)(message)) {
return;
}
if ((0, _utils.isBouncedMessage)(message)) {
setIsBounceDialogOpen(true);
return;
}
showMessageOverlay();
}
};
var alignment = forceAlignMessages && (forceAlignMessages === 'left' || forceAlignMessages === 'right') ? forceAlignMessages : isMyMessage ? 'right' : 'left';
var overlayItemAlignment = _reactNative.I18nManager.isRTL ? alignment === 'right' ? 'left' : 'right' : alignment;
var attachments = !isMessageTypeDeleted && Array.isArray(message.attachments) ? message.attachments.reduce((acc, cur) => {
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.isVideoPlayerAvailable)()) {
acc.videos.push({
...cur,
image_url: cur.asset_url,
thumb_url: cur.thumb_url,
type: _types.FileTypes.Video
});
acc.other = [];
} else if (cur.type === _types.FileTypes.Video && !cur.og_scrape_url) {
acc.files.push(cur);
acc.other = [];
} else if (cur.type === _types.FileTypes.Audio || cur.type === _types.FileTypes.VoiceRecording) {
acc.files.push(cur);
} else if (cur.type === _types.FileTypes.Image && !cur.title_link && !cur.og_scrape_url) {
if (cur.image_url || cur.thumb_url) {
acc.images.push(cur);
acc.other = [];
}
} else if (cur.type === _types.FileTypes.Image && (cur.og_scrape_url || cur.title_link)) {
acc.files.push(cur);
} else if (!acc.files.length && !acc.images.length && !acc.videos.length) {
acc.other.push(cur);
}
return acc;
}, {
files: [],
images: [],
other: [],
videos: []
}) : {
files: [],
images: [],
other: [],
videos: []
};
var hasAttachmentActions = !isMessageTypeDeleted && Array.isArray(message.attachments) && message.attachments.some(attachment => attachment.actions && attachment.actions.length);
var messageContentOrder = messageContentOrderProp.filter(content => {
if (content === 'quoted_reply') {
return !!message.quoted_message && !hasAttachmentActions;
}
switch (content) {
case 'attachments':
return !!attachments.other.length;
case 'files':
return !!attachments.files.length;
case 'gallery':
return !!attachments.images.length || !!attachments.videos.length;
case 'poll':
return !!message.poll_id;
case 'ai_text':
return isAIGenerated;
case 'location':
return !!message.shared_location;
case 'text':
default:
return !!message.text;
}
});
var emojiOnlyText = (0, _react.useMemo)(() => {
if (!message.text) {
return false;
}
return (0, _utils.hasOnlyEmojis)(message.text);
}, [message.text]);
var onlyEmojis = !attachments.files.length && !attachments.images.length && !attachments.other.length && emojiOnlyText;
var onOpenThread = () => {
if (onThreadSelect) {
onThreadSelect(message);
}
if (openThread) {
openThread(message);
}
};
var _useProcessReactions = (0, _useProcessReactions2.useProcessReactions)({
latest_reactions: message.latest_reactions,
own_reactions: message.own_reactions,
reaction_groups: message.reaction_groups
}),
existingReactions = _useProcessReactions.existingReactions,
hasReactions = _useProcessReactions.hasReactions;
var reactions = hasReactions ? existingReactions : [];
var ownCapabilities = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)();
var _useMessageActionHand = (0, _useMessageActionHandlers.useMessageActionHandlers)({
channel,
client,
deleteMessage: deleteMessageFromContext,
deleteReaction,
enforceUniqueReaction,
message,
retrySendMessage,
sendReaction,
setEditingState,
setQuotedMessage,
supportedReactions
}),
handleCopyMessage = _useMessageActionHand.handleCopyMessage,
handleDeleteMessage = _useMessageActionHand.handleDeleteMessage,
handleDeleteForMeMessage = _useMessageActionHand.handleDeleteForMeMessage,
handleEditMessage = _useMessageActionHand.handleEditMessage,
handleFlagMessage = _useMessageActionHand.handleFlagMessage,
handleMarkUnreadMessage = _useMessageActionHand.handleMarkUnreadMessage,
handleQuotedReplyMessage = _useMessageActionHand.handleQuotedReplyMessage,
handleResendMessage = _useMessageActionHand.handleResendMessage,
handleToggleBanUser = _useMessageActionHand.handleToggleBanUser,
handleToggleMuteUser = _useMessageActionHand.handleToggleMuteUser,
handleTogglePinMessage = _useMessageActionHand.handleTogglePinMessage,
handleToggleReaction = _useMessageActionHand.handleToggleReaction;
var _useMessageActions = (0, _useMessageActions2.useMessageActions)({
channel,
client,
deleteMessage: deleteMessageFromContext,
deleteReaction,
dismissOverlay,
enforceUniqueReaction,
handleBan,
handleCopy,
handleDelete,
handleDeleteForMe,
handleEdit,
handleFlag,
handleMarkUnread,
handleMute,
handlePinMessage,
handleQuotedReply,
handleReaction: handleReactionProp,
handleRetry,
handleThreadReply,
handleBlockUser,
message,
onThreadSelect,
openThread,
removeMessage,
retrySendMessage,
selectReaction,
sendReaction,
setEditingState,
setQuotedMessage,
supportedReactions,
t,
updateMessage
}),
banUser = _useMessageActions.banUser,
copyMessage = _useMessageActions.copyMessage,
deleteMessage = _useMessageActions.deleteMessage,
deleteForMeMessage = _useMessageActions.deleteForMeMessage,
editMessage = _useMessageActions.editMessage,
flagMessage = _useMessageActions.flagMessage,
handleReaction = _useMessageActions.handleReaction,
markUnread = _useMessageActions.markUnread,
muteUser = _useMessageActions.muteUser,
pinMessage = _useMessageActions.pinMessage,
quotedReply = _useMessageActions.quotedReply,
retry = _useMessageActions.retry,
threadReply = _useMessageActions.threadReply,
unpinMessage = _useMessageActions.unpinMessage,
blockUser = _useMessageActions.blockUser;
var isThreadMessage = threadList || !!message.parent_id;
var messageActions = typeof messageActionsProp !== 'function' ? messageActionsProp : messageActionsProp({
banUser,
copyMessage,
deleteForMeMessage,
deleteMessage,
dismissOverlay,
editMessage,
error: errorOrFailed,
flagMessage,
isMyMessage,
isThreadMessage,
markUnread,
message,
muteUser,
ownCapabilities,
pinMessage,
quotedReply,
retry,
threadReply,
unpinMessage,
updateMessage,
blockUser
});
var actionHandlers = {
copyMessage: handleCopyMessage,
deleteForMeMessage: handleDeleteForMeMessage,
deleteMessage: handleDeleteMessage,
editMessage: handleEditMessage,
flagMessage: handleFlagMessage,
markUnread: handleMarkUnreadMessage,
pinMessage: handleTogglePinMessage,
quotedReply: handleQuotedReplyMessage,
resendMessage: handleResendMessage,
threadReply: handleThreadReply,
toggleBanUser: handleToggleBanUser,
toggleMuteUser: handleToggleMuteUser,
toggleReaction: handleToggleReaction,
unpinMessage: handleTogglePinMessage
};
var onLongPress = () => {
setNativeScrollability(false);
if (hasAttachmentActions || (0, _utils.isBlockedMessage)(message) || !enableLongPress) {
return;
}
if ((0, _utils.isBouncedMessage)(message)) {
setIsBounceDialogOpen(true);
return;
}
_native.NativeHandlers.triggerHaptic('impactMedium');
showMessageOverlay();
};
var frozenMessage = (0, _react.useRef)(message);
var _useIsOverlayActive = (0, _stateStore.useIsOverlayActive)(messageOverlayId),
overlayActive = _useIsOverlayActive.active;
var messageHasOnlySingleAttachment = !message.text && !message.quoted_message && ((_message$attachments = message.attachments) == null ? void 0 : _message$attachments.length) === 1;
var messageContext = (0, _useCreateMessageContext.useCreateMessageContext)({
actionsEnabled,
alignment,
channel,
contextMenuAnchorRef,
deliveredToCount,
dismissOverlay,
files: attachments.files,
goToMessage,
groupStyles,
handleAction,
hasAttachmentActions,
handleReaction,
handleToggleReaction,
hasReactions,
images: attachments.images,
isMessageAIGenerated,
isMyMessage,
lastGroupMessage: (groupStyles == null ? void 0 : groupStyles[0]) === 'single' || (groupStyles == null ? void 0 : groupStyles[0]) === 'bottom',
members,
message: overlayActive ? frozenMessage.current : message,
messageOverlayId,
messageContentOrder,
messageHasOnlySingleAttachment,
myMessageTheme: messagesContext.myMessageTheme,
onLongPress: payload => {
var onLongPressArgs = {
actionHandlers,
additionalInfo: payload == null ? void 0 : payload.additionalInfo,
defaultHandler: (payload == null ? void 0 : payload.defaultHandler) || onLongPress,
emitter: (payload == null ? void 0 : payload.emitter) || 'message',
event: payload == null ? void 0 : payload.event,
message
};
var handleOnLongPress = () => {
if (onLongPressMessageProp) {
return onLongPressMessageProp(onLongPressArgs);
}
if (payload != null && payload.defaultHandler) {
return payload.defaultHandler();
}
return onLongPress();
};
handleOnLongPress();
},
onlyEmojis,
onOpenThread,
onPress: payload => {
var onPressArgs = {
actionHandlers,
additionalInfo: payload.additionalInfo,
defaultHandler: payload.defaultHandler || onPress,
emitter: payload.emitter || 'message',
event: payload.event,
message
};
var handleOnPress = () => {
if (errorOrFailed) {
onPress(true);
return;
}
if (onPressMessageProp) {
return onPressMessageProp(onPressArgs);
}
if (payload.defaultHandler) {
return payload.defaultHandler();
}
return onPress();
};
handleOnPress();
},
onPressIn: onPressInMessageProp ? payload => {
if (onPressInMessageProp) {
return onPressInMessageProp({
actionHandlers,
additionalInfo: payload.additionalInfo,
defaultHandler: payload.defaultHandler,
emitter: payload.emitter || 'message',
event: payload.event,
message
});
}
} : null,
onThreadSelect,
otherAttachments: attachments.other,
preventPress: overlayActive ? true : preventPress,
registerMessageOverlayTarget,
unregisterMessageOverlayTarget,
reactions,
readBy,
setQuotedMessage,
showAvatar,
showMessageOverlay,
showReactionsOverlay,
showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
threadList,
videos: attachments.videos
});
var messageOverlayRuntimeContext = (0, _react.useMemo)(() => ({
overlayTargetRectRef: rectRef,
messageOverlayTargetId,
overlayActive
}), [messageOverlayTargetId, overlayActive]);
var prevActive = (0, _react.useRef)(overlayActive);
(0, _react.useEffect)(() => {
if (!overlayActive && prevActive.current && setNativeScrollability) {
setNativeScrollability(true);
}
prevActive.current = overlayActive;
}, [setNativeScrollability, overlayActive]);
(0, _react.useEffect)(() => {
if (!overlayActive) {
frozenMessage.current = message;
}
}, [overlayActive, message]);
var groupKey = (groupStyles == null ? void 0 : groupStyles[0]) === 'single' || (groupStyles == null ? void 0 : groupStyles[0]) === 'top' || (groupStyles == null ? void 0 : groupStyles[0]) === 'middle' || (groupStyles == null ? void 0 : groupStyles[0]) === 'bottom' ? groupStyles[0] : undefined;
var isVeryLastBubble = messagesContext.enableMessageGroupingByUser && (channel == null || (_channel$state$messag = channel.state.messages[channel.state.messages.length - 1]) == null ? void 0 : _channel$state$messag.id) === message.id;
var styles = useStyles({
groupKey,
highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
isVeryLastBubble
});
var rect = rectRef.current;
var overlayItemsAnchorRect = (_bubbleRect$current = bubbleRect.current) != null ? _bubbleRect$current : rect;
if (!(isMessageTypeDeleted || messageContentOrder.length)) {
return null;
}
if ((0, _utils.isBlockedMessage)(message)) {
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.blockedMessageContainer,
children: (0, _jsxRuntime.jsx)(MessageBlocked, {
message: message
})
});
}
return (0, _jsxRuntime.jsx)(_MessageContext.MessageProvider, {
value: messageContext,
children: (0, _jsxRuntime.jsx)(_MessageContext.MessageOverlayRuntimeProvider, {
value: messageOverlayRuntimeContext,
children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [style, styles.wrapper],
testID: "message-wrapper",
children: [(0, _jsxRuntime.jsx)(_reactNativeTeleport.Portal, {
hostName: overlayActive && rect ? 'top-item' : undefined,
children: overlayActive && rect && overlayItemsAnchorRect ? (0, _jsxRuntime.jsx)(_reactNative.View, {
onLayout: e => {
var _e$nativeEvent$layout = e.nativeEvent.layout,
w = _e$nativeEvent$layout.width,
h = _e$nativeEvent$layout.height;
(0, _stateStore.setOverlayTopH)({
h,
w,
x: overlayItemAlignment === 'right' ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w : overlayItemsAnchorRect.x,
y: rect.y - h
});
},
children: (0, _jsxRuntime.jsx)(MessageReactionPicker, {
dismissOverlay: dismissOverlay,
handleReaction: ownCapabilities.sendReaction ? handleReaction : undefined
})
}) : null
}), (0, _jsxRuntime.jsx)(_MessageOverlayWrapper.MessageOverlayWrapper, {
targetId: _messageOverlayConstants.DEFAULT_MESSAGE_OVERLAY_TARGET_ID,
children: (0, _jsxRuntime.jsx)(MessageItemView, {})
}), showMessageReactions ? (0, _jsxRuntime.jsx)(_UIComponents.BottomSheetModal, {
lazy: true,
onClose: () => setShowMessageReactions(false),
visible: showMessageReactions,
height: 424,
children: (0, _jsxRuntime.jsx)(MessageUserReactions, {
message: message,
selectedReaction: selectedReaction
})
}) : null, (0, _jsxRuntime.jsx)(_reactNativeTeleport.Portal, {
hostName: overlayActive && rect ? 'bottom-item' : undefined,
children: overlayActive && rect && overlayItemsAnchorRect ? (0, _jsxRuntime.jsx)(_reactNative.View, {
onLayout: e => {
var _e$nativeEvent$layout2 = e.nativeEvent.layout,
w = _e$nativeEvent$layout2.width,
h = _e$nativeEvent$layout2.height;
(0, _stateStore.setOverlayBottomH)({
h,
w,
x: overlayItemAlignment === 'right' ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w : overlayItemsAnchorRect.x,
y: rect.y + rect.h
});
},
children: (0, _jsxRuntime.jsx)(MessageActionList, {
dismissOverlay: dismissOverlay,
messageActions: messageActions
})
}) : null
}), isBounceDialogOpen ? (0, _jsxRuntime.jsx)(MessageBounce, {
setIsBounceDialogOpen: setIsBounceDialogOpen
}) : null]
})
})
});
};
var areEqual = (prevProps, nextProps) => {
var _prevMessage$user, _nextMessage$user, _prevMessage$quoted_m, _nextMessage$quoted_m;
var prevMutedUsers = prevProps.chatContext.mutedUsers,
prevDeliveredBy = prevProps.deliveredToCount,
prevGoToMessage = prevProps.goToMessage,
prevGroupStyles = prevProps.groupStyles,
isAttachmentEqual = prevProps.isAttachmentEqual,
prevIsTargetedMessage = prevProps.isTargetedMessage,
prevMessageOverlayTargetId = prevProps.messageOverlayTargetId,
prevMembers = prevProps.members,
prevMessage = prevProps.message,
prevMessagesContext = prevProps.messagesContext,
prevShowUnreadUnderlay = prevProps.showUnreadUnderlay,
prevReadBy = prevProps.readBy,
prevT = prevProps.t;
var nextMutedUsers = nextProps.chatContext.mutedUsers,
nextDeliveredBy = nextProps.deliveredToCount,
nextGoToMessage = nextProps.goToMessage,
nextGroupStyles = nextProps.groupStyles,
nextIsTargetedMessage = nextProps.isTargetedMessage,
nextMessageOverlayTargetId = nextProps.messageOverlayTargetId,
nextMembers = nextProps.members,
nextMessage = nextProps.message,
nextMessagesContext = nextProps.messagesContext,
nextShowUnreadUnderlay = nextProps.showUnreadUnderlay,
nextReadBy = nextProps.readBy,
nextT = nextProps.t;
var deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
if (!deliveredByEqual) {
return false;
}
var readByEqual = prevReadBy === nextReadBy;
if (!readByEqual) {
return false;
}
var membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
if (!membersEqual) {
return false;
}
var repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
if (!repliesEqual) {
return false;
}
var goToMessageChangedAndMatters = nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
if (goToMessageChangedAndMatters) {
return false;
}
var groupStylesEqual = prevGroupStyles === nextGroupStyles;
if (!groupStylesEqual) {
return false;
}
var messageOverlayTargetIdEqual = prevMessageOverlayTargetId === nextMessageOverlayTargetId;
if (!messageOverlayTargetIdEqual) {
return false;
}
var messageEqual = (0, _utils.checkMessageEquality)(prevMessage, nextMessage);
if (!messageEqual) {
return false;
}
var quotedMessageEqual = (0, _utils.checkMessageEquality)(prevMessage.quoted_message, nextMessage.quoted_message);
if (!quotedMessageEqual) {
return false;
}
var messageUserBannedEqual = ((_prevMessage$user = prevMessage.user) == null ? void 0 : _prevMessage$user.banned) === ((_nextMessage$user = nextMessage.user) == null ? void 0 : _nextMessage$user.banned);
if (!messageUserBannedEqual) {
return false;
}
var prevMessageAttachments = prevMessage.attachments;
var nextMessageAttachments = nextMessage.attachments;
var attachmentsEqual = Array.isArray(prevMessageAttachments) && Array.isArray(nextMessageAttachments) && prevMessageAttachments.length === nextMessageAttachments.length && prevMessageAttachments.every((attachment, index) => {
var attachmentKeysEqual = attachment.type === _types.FileTypes.Image ? attachment.image_url === nextMessageAttachments[index].image_url && attachment.thumb_url === nextMessageAttachments[index].thumb_url : attachment.type === nextMessageAttachments[index].type;
if (isAttachmentEqual) {
return attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index]);
}
return attachmentKeysEqual;
}) || prevMessageAttachments === nextMessageAttachments;
if (!attachmentsEqual) {
return false;
}
var quotedMessageAttachmentsEqual = ((_prevMessage$quoted_m = prevMessage.quoted_message) == null || (_prevMessage$quoted_m = _prevMessage$quoted_m.attachments) == null ? void 0 : _prevMessage$quoted_m.length) === ((_nextMessage$quoted_m = nextMessage.quoted_message) == null || (_nextMessage$quoted_m = _nextMessage$quoted_m.attachments) == null ? void 0 : _nextMessage$quoted_m.length);
if (!quotedMessageAttachmentsEqual) {
return false;
}
var latestReactionsEqual = Array.isArray(prevMessage.latest_reactions) && Array.isArray(nextMessage.latest_reactions) ? prevMessage.latest_reactions.length === nextMessage.latest_reactions.length && prevMessage.latest_reactions.every(({
type
}, index) => {
var _nextMessage$latest_r;
return type === ((_nextMessage$latest_r = nextMessage.latest_reactions) == null ? void 0 : _nextMessage$latest_r[index].type);
}) : prevMessage.latest_reactions === nextMessage.latest_reactions;
if (!latestReactionsEqual) {
return false;
}
var mutedUserSame = prevMutedUsers.length === nextMutedUsers.length || prevMutedUsers.some(mutedUser => {
var _prevMessage$user2;
return mutedUser.target.id === ((_prevMessage$user2 = prevMessage.user) == null ? void 0 : _prevMessage$user2.id);
}) === nextMutedUsers.some(mutedUser => {
var _nextMessage$user2;
return mutedUser.target.id === ((_nextMessage$user2 = nextMessage.user) == null ? void 0 : _nextMessage$user2.id);
});
if (!mutedUserSame) {
return false;
}
var showUnreadUnderlayEqual = prevShowUnreadUnderlay === nextShowUnreadUnderlay;
if (!showUnreadUnderlayEqual) {
return false;
}
var tEqual = prevT === nextT;
if (!tEqual) {
return false;
}
var targetedMessageEqual = prevIsTargetedMessage === nextIsTargetedMessage;
if (!targetedMessageEqual) {
return false;
}
var prevMyMessageTheme = JSON.stringify(prevMessagesContext == null ? void 0 : prevMessagesContext.myMessageTheme);
var nextMyMessageTheme = JSON.stringify(nextMessagesContext == null ? void 0 : nextMessagesContext.myMessageTheme);
var messageThemeEqual = prevMyMessageTheme === nextMyMessageTheme;
if (!messageThemeEqual) {
return false;
}
var prevSharedLocation = prevMessage.shared_location;
var nextSharedLocation = nextMessage.shared_location;
var sharedLocationEqual = (prevSharedLocation == null ? void 0 : prevSharedLocation.latitude) === (nextSharedLocation == null ? void 0 : nextSharedLocation.latitude) && (prevSharedLocation == null ? void 0 : prevSharedLocation.longitude) === (nextSharedLocation == null ? void 0 : nextSharedLocation.longitude) && (prevSharedLocation == null ? void 0 : prevSharedLocation.end_at) === (nextSharedLocation == null ? void 0 : nextSharedLocation.end_at);
if (!sharedLocationEqual) {
return false;
}
return true;
};
var MemoizedMessage = _react.default.memo(MessageWithContext, areEqual);
var Message = props => {
var message = props.message;
var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
channel = _useChannelContext.channel,
enforceUniqueReaction = _useChannelContext.enforceUniqueReaction,
members = _useChannelContext.members;
var chatContext = (0, _ChatContext.useChatContext)();
var _useKeyboardContext = (0, _KeyboardContext.useKeyboardContext)(),
dismissKeyboard = _useKeyboardContext.dismissKeyboard;
var messagesContext = (0, _MessagesContext.useMessagesContext)();
var _useThreadContext = (0, _ThreadContext.useThreadContext)(),
openThread = _useThreadContext.openThread;
var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex.t;
var readBy = (0, _useMessageReadData.useMessageReadData)({
message
});
var deliveredTo = (0, _useMessageDeliveryData.useMessageDeliveredData)({
message
});
var _useMessageComposerAP = (0, _MessageComposerAPIContext.useMessageComposerAPIContext)(),
setQuotedMessage = _useMessageComposerAP.setQuotedMessage,
setEditingState = _useMessageComposerAP.setEditingState;
return (0, _jsxRuntime.jsx)(MemoizedMessage, {
...messagesContext,
channel,
chatContext,
deliveredToCount: deliveredTo.length,
dismissKeyboard,
enforceUniqueReaction,
members,
messagesContext,
openThread,
readBy: readBy.length,
setEditingState,
setQuotedMessage,
t,
...props
});
};
exports.Message = Message;
var useStyles = ({
groupKey,
highlightedMessage,
isVeryLastBubble
}) => {
var _useTheme = (0, _ThemeContext.useTheme)(),
_useTheme$theme = _useTheme.theme,
messageItemView = _useTheme$theme.messageItemView,
screenPadding = _useTheme$theme.screenPadding,
semantics = _useTheme$theme.semantics;
return (0, _react.useMemo)(() => {
var groupStylesMap = {
single: {
paddingVertical: _theme.primitives.spacingXs,
...messageItemView.messageGroupedSingleStyles
},
top: {
paddingTop: _theme.primitives.spacingXs,
paddingBottom: _theme.primitives.spacingXxs,
...messageItemView.messageGroupedTopStyles
},
middle: {
paddingBottom: _theme.primitives.spacingXxs,
...messageItemView.messageGroupedMiddleStyles
},
bottom: {
paddingBottom: _theme.primitives.spacingXs,
...messageItemView.messageGroupedBottomStyles
}
};
var wrapper = {
paddingHorizontal: screenPadding,
...(highlightedMessage ? {
backgroundColor: semantics.backgroundCoreHighlight,
...messageItemView.targetedMessageContainer
} : {}),
...messageItemView.wrapper
};
if (groupKey) {
wrapper = {
...wrapper,
...groupStylesMap[groupKey]
};
}
if (isVeryLastBubble) {
wrapper = {
...wrapper,
marginBottom: _theme.primitives.spacingSm,
...messageItemView.lastMessageContainer
};
}
return _reactNative.StyleSheet.create({
wrapper,
blockedMessageContainer: {
alignItems: 'center',
...messageItemView.blockedMessageContainer
}
});
}, [messageItemView, screenPadding, semantics, highlightedMessage, groupKey, isVeryLastBubble]);
};
//# sourceMappingURL=Message.js.map