stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
329 lines • 16.1 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MessageItemView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _MessageBubble = require("./MessageBubble");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../../contexts/messageContext/MessageContext");
var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _useStableCallback = require("../../../hooks/useStableCallback");
var _theme = require("../../../theme");
var _types = require("../../../types/types");
var _utils = require("../../../utils/utils");
var _useMessageData2 = require("../hooks/useMessageData");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageItemView/MessageItemView.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 useStyles = ({
alignment
}) => {
var _useTheme = (0, _ThemeContext.useTheme)(),
_useTheme$theme$messa = _useTheme.theme.messageItemView,
container = _useTheme$theme$messa.container,
bubbleContentContainer = _useTheme$theme$messa.bubbleContentContainer,
bubbleErrorContainer = _useTheme$theme$messa.bubbleErrorContainer,
bubbleReactionListTopContainer = _useTheme$theme$messa.bubbleReactionListTopContainer,
bubbleWrapper = _useTheme$theme$messa.bubbleWrapper,
contentContainer = _useTheme$theme$messa.contentContainer,
repliesContainer = _useTheme$theme$messa.repliesContainer,
leftAlignItems = _useTheme$theme$messa.leftAlignItems,
rightAlignItems = _useTheme$theme$messa.rightAlignItems;
return (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
baseContainer: {
alignItems: 'flex-end',
gap: _theme.primitives.spacingXs,
flexDirection: alignment === 'left' ? 'row' : 'row-reverse',
width: '100%',
...container
},
contentContainer: {
gap: _theme.primitives.spacingXxs,
...contentContainer
},
bubbleContentContainer: {
alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
...bubbleContentContainer
},
bubbleErrorContainer: {
position: 'absolute',
top: 8,
right: -12,
...bubbleErrorContainer
},
bubbleReactionListTopContainer: {
alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
...bubbleReactionListTopContainer
},
bubbleWrapper: {
zIndex: 1,
...bubbleWrapper
},
repliesContainer: {
marginTop: -_theme.primitives.spacingXxs,
zIndex: 0,
...repliesContainer
},
leftAlignItems: {
alignItems: 'flex-start',
...leftAlignItems
},
rightAlignItems: {
alignItems: 'flex-end',
...rightAlignItems
}
}), [alignment, bubbleContentContainer, bubbleErrorContainer, bubbleReactionListTopContainer, bubbleWrapper, container, contentContainer, leftAlignItems, repliesContainer, rightAlignItems]);
};
var MessageItemViewWithContext = props => {
var _groupStyles$;
var _Dimensions$get = _reactNative.Dimensions.get('screen'),
width = _Dimensions$get.width;
var alignment = props.alignment,
channel = props.channel,
contextMenuAnchorRef = props.contextMenuAnchorRef,
customMessageSwipeAction = props.customMessageSwipeAction,
enableSwipeToReply = props.enableSwipeToReply,
groupStyles = props.groupStyles,
hasAttachmentActions = props.hasAttachmentActions,
isMyMessage = props.isMyMessage,
message = props.message,
_props$messageSwipeTo = props.messageSwipeToReplyHitSlop,
messageSwipeToReplyHitSlop = _props$messageSwipeTo === void 0 ? {
left: width,
right: width
} : _props$messageSwipeTo,
onlyEmojis = props.onlyEmojis,
otherAttachments = props.otherAttachments,
reactionListPosition = props.reactionListPosition,
reactionListType = props.reactionListType,
setQuotedMessage = props.setQuotedMessage,
threadList = props.threadList;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
MessageAuthor = _useComponentsContext.MessageAuthor,
MessageContent = _useComponentsContext.MessageContent,
MessageDeleted = _useComponentsContext.MessageDeleted,
MessageError = _useComponentsContext.MessageError,
MessageFooter = _useComponentsContext.MessageFooter,
MessageHeader = _useComponentsContext.MessageHeader,
MessageReplies = _useComponentsContext.MessageReplies,
MessageSpacer = _useComponentsContext.MessageSpacer,
ReactionListBottom = _useComponentsContext.ReactionListBottom,
ReactionListTop = _useComponentsContext.ReactionListTop;
var _useTheme2 = (0, _ThemeContext.useTheme)(),
_useTheme2$theme = _useTheme2.theme,
semantics = _useTheme2$theme.semantics,
errorContainer = _useTheme2$theme.messageItemView.content.errorContainer;
var _useMessageData = (0, _useMessageData2.useMessageData)({}),
isMessageErrorType = _useMessageData.isMessageErrorType,
isMessageTypeDeleted = _useMessageData.isMessageTypeDeleted,
isVeryLastMessage = _useMessageData.isVeryLastMessage,
messageGroupedSingleOrBottom = _useMessageData.messageGroupedSingleOrBottom;
var styles = useStyles({
alignment
});
var groupStyle = `${alignment}_${groupStyles == null || (_groupStyles$ = groupStyles[0]) == null || _groupStyles$.toLowerCase == null ? void 0 : _groupStyles$.toLowerCase()}`;
var hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
var hasStandaloneGiphyOrImgur = !hasVisibleQuotedReply && otherAttachments.length > 0 && (otherAttachments[0].type === _types.FileTypes.Giphy || otherAttachments[0].type === _types.FileTypes.Imgur);
var noBorder = onlyEmojis && !hasVisibleQuotedReply;
if (otherAttachments.length) {
if (hasStandaloneGiphyOrImgur && !isMyMessage) {
noBorder = false;
} else {
noBorder = true;
}
}
var backgroundColor = semantics.chatBgOutgoing;
if (onlyEmojis && !hasVisibleQuotedReply) {
backgroundColor = 'transparent';
} else if (hasStandaloneGiphyOrImgur) {
backgroundColor = 'transparent';
} else if (!isMyMessage) {
backgroundColor = semantics.chatBgIncoming;
}
var onSwipeActionHandler = (0, _useStableCallback.useStableCallback)(() => {
if (customMessageSwipeAction) {
customMessageSwipeAction({
channel,
message
});
return;
}
setQuotedMessage(message);
});
var itemViewContent = (0, _jsxRuntime.jsxs)(_reactNative.View, {
pointerEvents: "box-none",
style: styles.baseContainer,
testID: "message-item-view-wrapper",
children: [alignment === 'left' ? (0, _jsxRuntime.jsx)(MessageAuthor, {}) : null, isMessageTypeDeleted ? (0, _jsxRuntime.jsx)(MessageDeleted, {
date: message.created_at,
groupStyle: groupStyle
}) : (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.contentContainer, alignment === 'right' ? styles.rightAlignItems : styles.leftAlignItems, isMessageErrorType ? errorContainer : {}],
testID: "message-components",
children: [(0, _jsxRuntime.jsx)(MessageHeader, {}), (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.bubbleWrapper,
children: [reactionListPosition === 'top' && ReactionListTop ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.bubbleReactionListTopContainer,
children: (0, _jsxRuntime.jsx)(ReactionListTop, {
type: reactionListType
})
}) : null, (0, _jsxRuntime.jsxs)(_reactNative.View, {
ref: contextMenuAnchorRef,
style: styles.bubbleContentContainer,
children: [(0, _jsxRuntime.jsx)(MessageContent, {
backgroundColor: backgroundColor,
isVeryLastMessage: isVeryLastMessage,
messageGroupedSingleOrBottom: messageGroupedSingleOrBottom,
noBorder: noBorder
}), isMessageErrorType ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.bubbleErrorContainer,
children: (0, _jsxRuntime.jsx)(MessageError, {})
}) : null]
})]
}), !threadList && !!message.reply_count ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.repliesContainer,
children: (0, _jsxRuntime.jsx)(MessageReplies, {})
}) : null, reactionListPosition === 'bottom' && ReactionListBottom ? (0, _jsxRuntime.jsx)(ReactionListBottom, {
type: reactionListType
}) : null, (0, _jsxRuntime.jsx)(MessageFooter, {
date: message.created_at
})]
}), MessageSpacer ? (0, _jsxRuntime.jsx)(MessageSpacer, {}) : null]
});
return enableSwipeToReply && !isMessageTypeDeleted ? (0, _jsxRuntime.jsx)(_MessageBubble.SwipableMessageWrapper, {
messageSwipeToReplyHitSlop: messageSwipeToReplyHitSlop,
onSwipe: onSwipeActionHandler,
children: itemViewContent
}) : itemViewContent;
};
var areEqual = (prevProps, nextProps) => {
var _prevMessage$quoted_m, _nextMessage$quoted_m, _prevOtherAttachments, _nextOtherAttachments;
var prevChannel = prevProps.channel,
prevGroupStyles = prevProps.groupStyles,
prevMessage = prevProps.message,
prevMyMessageTheme = prevProps.myMessageTheme,
prevOnlyEmojis = prevProps.onlyEmojis,
prevOtherAttachments = prevProps.otherAttachments,
prevLastGroupMessage = prevProps.lastGroupMessage,
prevMembers = prevProps.members;
var nextChannel = nextProps.channel,
nextGroupStyles = nextProps.groupStyles,
nextMessage = nextProps.message,
nextMyMessageTheme = nextProps.myMessageTheme,
nextOnlyEmojis = nextProps.onlyEmojis,
nextOtherAttachments = nextProps.otherAttachments,
nextLastGroupMessage = nextProps.lastGroupMessage,
nextMembers = nextProps.members;
var groupStylesEqual = prevGroupStyles === nextGroupStyles;
if (!groupStylesEqual) {
return false;
}
var lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
if (!lastGroupMessageEqual) {
return false;
}
var membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
if (!membersEqual) {
return false;
}
var messageEqual = (0, _utils.checkMessageEquality)(prevMessage, nextMessage);
if (!messageEqual) {
return false;
}
var quotedMessageEqual = (0, _utils.checkQuotedMessageEquality)(prevMessage.quoted_message, nextMessage.quoted_message);
if (!quotedMessageEqual) {
return false;
}
var channelEqual = (prevChannel == null ? void 0 : prevChannel.state.messages.length) === (nextChannel == null ? void 0 : nextChannel.state.messages.length);
if (!channelEqual) {
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.image_url === nextMessageAttachments[index].image_url && attachment.og_scrape_url === nextMessageAttachments[index].og_scrape_url && attachment.thumb_url === nextMessageAttachments[index].thumb_url && attachment.type === nextMessageAttachments[index].type;
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 messageThemeEqual = JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
if (!messageThemeEqual) {
return false;
}
var onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
if (!onlyEmojisEqual) {
return false;
}
var otherAttachmentsEqual = prevOtherAttachments.length === nextOtherAttachments.length && (prevOtherAttachments == null || (_prevOtherAttachments = prevOtherAttachments[0]) == null || (_prevOtherAttachments = _prevOtherAttachments.actions) == null ? void 0 : _prevOtherAttachments.length) === (nextOtherAttachments == null || (_nextOtherAttachments = nextOtherAttachments[0]) == null || (_nextOtherAttachments = _nextOtherAttachments.actions) == null ? void 0 : _nextOtherAttachments.length);
if (!otherAttachmentsEqual) {
return false;
}
return true;
};
var MemoizedMessageItemView = _react.default.memo(MessageItemViewWithContext, areEqual);
var MessageItemView = props => {
var _useMessageContext = (0, _MessageContext.useMessageContext)(),
alignment = _useMessageContext.alignment,
channel = _useMessageContext.channel,
groupStyles = _useMessageContext.groupStyles,
hasAttachmentActions = _useMessageContext.hasAttachmentActions,
isMyMessage = _useMessageContext.isMyMessage,
message = _useMessageContext.message,
contextMenuAnchorRef = _useMessageContext.contextMenuAnchorRef,
onlyEmojis = _useMessageContext.onlyEmojis,
otherAttachments = _useMessageContext.otherAttachments,
setQuotedMessage = _useMessageContext.setQuotedMessage,
lastGroupMessage = _useMessageContext.lastGroupMessage,
members = _useMessageContext.members,
threadList = _useMessageContext.threadList;
var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
customMessageSwipeAction = _useMessagesContext.customMessageSwipeAction,
enableMessageGroupingByUser = _useMessagesContext.enableMessageGroupingByUser,
enableSwipeToReply = _useMessagesContext.enableSwipeToReply,
messageSwipeToReplyHitSlop = _useMessagesContext.messageSwipeToReplyHitSlop,
myMessageTheme = _useMessagesContext.myMessageTheme,
reactionListPosition = _useMessagesContext.reactionListPosition,
reactionListType = _useMessagesContext.reactionListType;
return (0, _jsxRuntime.jsx)(MemoizedMessageItemView, {
alignment,
channel,
contextMenuAnchorRef,
customMessageSwipeAction,
enableMessageGroupingByUser,
enableSwipeToReply,
groupStyles,
hasAttachmentActions,
isMyMessage,
message,
messageSwipeToReplyHitSlop,
myMessageTheme,
onlyEmojis,
otherAttachments,
reactionListPosition,
reactionListType,
setQuotedMessage,
lastGroupMessage,
members,
threadList,
...props
});
};
exports.MessageItemView = MessageItemView;
MessageItemView.displayName = 'MessageItemView{messageItemView{container}}';
//# sourceMappingURL=MessageItemView.js.map