stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
491 lines • 23.7 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MessageContent = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _MessageTextContainer = require("./MessageTextContainer");
var _useA11yLabel = require("../../../a11y/hooks/useA11yLabel");
var _contexts = require("../../../contexts");
var _ComponentsContext = require("../../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../../contexts/messageContext/MessageContext");
var _MessageListItemContext = require("../../../contexts/messageListItemContext/MessageListItemContext");
var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../../contexts/translationContext/TranslationContext");
var _theme = require("../../../theme");
var _types = require("../../../types/types");
var _utils = require("../../../utils/utils");
var _Poll = require("../../Poll/Poll");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageItemView/MessageContent.tsx";
var _excluded = ["borderBottomLeftRadius", "borderBottomRightRadius", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius"];
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 useReplyStyles = () => {
var _useTheme = (0, _ThemeContext.useTheme)(),
semantics = _useTheme.theme.semantics;
var _useMessageContext = (0, _MessageContext.useMessageContext)(),
isMyMessage = _useMessageContext.isMyMessage;
return (0, _react.useMemo)(() => {
return _reactNative.StyleSheet.create({
container: {
minWidth: 256,
backgroundColor: isMyMessage ? semantics.chatBgAttachmentOutgoing : semantics.chatBgAttachmentIncoming,
paddingLeft: _theme.primitives.spacingSm
},
leftContainer: {
borderLeftColor: isMyMessage ? semantics.chatReplyIndicatorOutgoing : semantics.chatReplyIndicatorIncoming
}
});
}, [semantics, isMyMessage]);
};
var MessageContentWithContext = props => {
var additionalPressableProps = props.additionalPressableProps,
alignment = props.alignment,
backgroundColor = props.backgroundColor,
enableMessageGroupingByUser = props.enableMessageGroupingByUser,
groupStyles = props.groupStyles,
goToMessage = props.goToMessage,
hasInteractiveAccessibilityContent = props.hasInteractiveAccessibilityContent,
isMessageAIGenerated = props.isMessageAIGenerated,
isMyMessage = props.isMyMessage,
isVeryLastMessage = props.isVeryLastMessage,
message = props.message,
messageContentOrder = props.messageContentOrder,
_props$messageGrouped = props.messageGroupedSingleOrBottom,
messageGroupedSingleOrBottom = _props$messageGrouped === void 0 ? false : _props$messageGrouped,
noBorder = props.noBorder,
onLongPress = props.onLongPress,
onPress = props.onPress,
onPressIn = props.onPressIn,
otherAttachments = props.otherAttachments,
preventPress = props.preventPress,
hidePaddingTop = props.hidePaddingTop,
hidePaddingHorizontal = props.hidePaddingHorizontal,
hidePaddingBottom = props.hidePaddingBottom;
var _useChatContext = (0, _contexts.useChatContext)(),
client = _useChatContext.client;
var accessibilityHint = (0, _useA11yLabel.useA11yLabel)('a11y/Double tap and hold to activate contextual menu');
var a11ySenderLabel = (0, _useA11yLabel.useA11yLabel)(isMyMessage ? 'a11y/Message from you' : 'a11y/Message from {{sender}}', isMyMessage ? undefined : {
sender: message.user?.name || message.user?.id || ''
});
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
Attachment = _useComponentsContext.Attachment,
FileAttachmentGroup = _useComponentsContext.FileAttachmentGroup,
Gallery = _useComponentsContext.Gallery,
MessageContentBottomView = _useComponentsContext.MessageContentBottomView,
MessageContentLeadingView = _useComponentsContext.MessageContentLeadingView,
MessageContentTopView = _useComponentsContext.MessageContentTopView,
MessageContentTrailingView = _useComponentsContext.MessageContentTrailingView,
MessageLocation = _useComponentsContext.MessageLocation,
Reply = _useComponentsContext.Reply,
StreamingMessageView = _useComponentsContext.StreamingMessageView;
var replyStyles = useReplyStyles();
var _useTheme2 = (0, _ThemeContext.useTheme)(),
_useTheme2$theme$mess = _useTheme2.theme.messageItemView.content,
_useTheme2$theme$mess2 = _useTheme2$theme$mess.container,
borderBottomLeftRadius = _useTheme2$theme$mess2.borderBottomLeftRadius,
borderBottomRightRadius = _useTheme2$theme$mess2.borderBottomRightRadius,
borderRadius = _useTheme2$theme$mess2.borderRadius,
borderTopLeftRadius = _useTheme2$theme$mess2.borderTopLeftRadius,
borderTopRightRadius = _useTheme2$theme$mess2.borderTopRightRadius,
container = (0, _objectWithoutProperties2.default)(_useTheme2$theme$mess2, _excluded),
containerInner = _useTheme2$theme$mess.containerInner,
contentContainer = _useTheme2$theme$mess.contentContainer,
lastMessageContainer = _useTheme2$theme$mess.lastMessageContainer,
messageGroupedSingleOrBottomContainer = _useTheme2$theme$mess.messageGroupedSingleOrBottomContainer,
messageGroupedTopContainer = _useTheme2$theme$mess.messageGroupedTopContainer,
replyContainer = _useTheme2$theme$mess.replyContainer;
var isAIGenerated = (0, _react.useMemo)(() => isMessageAIGenerated(message), [message, isMessageAIGenerated]);
var bubbleColorAndRadius = (0, _react.useMemo)(() => {
var groupPosition = groupStyles?.[0];
var isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
var computedBottomLeftRadius = _theme.components.messageBubbleRadiusGroupBottom;
var computedBottomRightRadius = _theme.components.messageBubbleRadiusGroupBottom;
if (isBottomOrSingle) {
if (alignment === 'right') {
computedBottomRightRadius = _theme.components.messageBubbleRadiusTail;
} else {
computedBottomLeftRadius = _theme.components.messageBubbleRadiusTail;
}
}
var style = {
backgroundColor,
borderBottomLeftRadius: borderBottomLeftRadius ?? computedBottomLeftRadius,
borderBottomRightRadius: borderBottomRightRadius ?? computedBottomRightRadius
};
if (borderRadius !== undefined) style.borderRadius = borderRadius;
if (borderTopLeftRadius !== undefined) style.borderTopLeftRadius = borderTopLeftRadius;
if (borderTopRightRadius !== undefined) style.borderTopRightRadius = borderTopRightRadius;
return style;
}, [alignment, backgroundColor, borderBottomLeftRadius, borderBottomRightRadius, borderRadius, borderTopLeftRadius, borderTopRightRadius, groupStyles]);
var _useMessageListItemCo = (0, _MessageListItemContext.useMessageListItemContext)(),
setNativeScrollability = _useMessageListItemCo.setNativeScrollability;
var hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
var gap = _theme.primitives.spacingXs;
var messageTextContainerStyles = (0, _react.useMemo)(() => {
return {
textContainer: {
marginTop: -gap
}
};
}, [gap]);
var contentBody = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [{
gap,
paddingTop: hidePaddingTop ? 0 : _theme.primitives.spacingXs,
paddingHorizontal: hidePaddingHorizontal ? 0 : _theme.primitives.spacingXs,
paddingBottom: hidePaddingBottom ? 0 : _theme.primitives.spacingXs
}, contentContainer],
children: messageContentOrder.map((messageContentType, messageContentOrderIndex) => {
switch (messageContentType) {
case 'quoted_reply':
return message.quoted_message && (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
disabled: !goToMessage || preventPress,
onLongPress: event => {
if (onLongPress) {
onLongPress({
emitter: 'messageContent',
event
});
}
},
onPress: event => {
if (!message.quoted_message || !goToMessage) {
return;
}
if (onPress) {
onPress({
defaultHandler: () => goToMessage(message.quoted_message.id),
emitter: 'messageContent',
event
});
return;
}
goToMessage(message.quoted_message.id);
},
onPressIn: event => {
if (onPressIn) {
onPressIn({
emitter: 'messageContent',
event
});
}
},
style: [styles.replyContainer, replyContainer],
children: (0, _jsxRuntime.jsx)(Reply, {
mode: "reply",
styles: replyStyles
})
}, `quoted_reply_${messageContentOrderIndex}`);
case 'attachments':
return otherAttachments.map((attachment, attachmentIndex) => (0, _jsxRuntime.jsx)(Attachment, {
attachment: attachment
}, `attachment-${attachmentIndex}`));
case 'files':
return (0, _jsxRuntime.jsx)(FileAttachmentGroup, {}, `file_attachment_group_${messageContentOrderIndex}`);
case 'gallery':
return (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.galleryContainer,
children: (0, _jsxRuntime.jsx)(Gallery, {})
}, `gallery_${messageContentOrderIndex}`);
case 'poll':
{
var pollId = message.poll_id;
var poll = pollId && client.polls.fromState(pollId);
return pollId && poll ? (0, _jsxRuntime.jsx)(_Poll.Poll, {
message: message,
poll: poll
}, `poll_${messageContentOrderIndex}`) : null;
}
case 'location':
return MessageLocation ? (0, _jsxRuntime.jsx)(MessageLocation, {
message: message
}, `message_location_${messageContentOrderIndex}`) : null;
case 'ai_text':
return isAIGenerated ? (0, _jsxRuntime.jsx)(StreamingMessageView, {}, `ai_message_text_container_${messageContentOrderIndex}`) : null;
case 'text':
{
var suppressed = otherAttachments.length && otherAttachments[0].actions || isAIGenerated;
return suppressed ? null : (0, _jsxRuntime.jsx)(_MessageTextContainer.MessageTextContainer, {
styles: messageContentOrderIndex === 0 ? undefined : messageTextContainerStyles
}, `message_text_container_${messageContentOrderIndex}`);
}
default:
return null;
}
})
})
});
var a11yPressableLabel = (0, _react.useMemo)(() => {
if (!a11ySenderLabel) return undefined;
return message.text && !hasInteractiveAccessibilityContent ? `${a11ySenderLabel}. ${message.text}` : a11ySenderLabel;
}, [a11ySenderLabel, hasInteractiveAccessibilityContent, message.text]);
return (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
accessibilityLabel: a11yPressableLabel,
accessibilityHint: accessibilityHint,
accessible: hasInteractiveAccessibilityContent ? false : undefined,
disabled: preventPress,
onLongPress: event => {
if (onLongPress) {
onLongPress({
emitter: 'messageContent',
event
});
}
},
onPress: event => {
if (onPress) {
onPress({
emitter: 'messageContent',
event
});
}
},
onPressIn: event => {
if (onPressIn) {
onPressIn({
emitter: 'messageContent',
event
});
}
},
style: container,
...additionalPressableProps,
onPressOut: event => {
setNativeScrollability(true);
if (additionalPressableProps?.onPressOut) {
additionalPressableProps.onPressOut(event);
}
},
children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.containerInner, bubbleColorAndRadius, noBorder ? styles.noBorder : null, containerInner, messageGroupedSingleOrBottom ? isVeryLastMessage && enableMessageGroupingByUser ? lastMessageContainer : messageGroupedSingleOrBottomContainer : messageGroupedTopContainer],
testID: "message-content-wrapper",
children: [a11ySenderLabel && _reactNative.Platform.OS !== 'android' && hasInteractiveAccessibilityContent ? (0, _jsxRuntime.jsx)(_reactNative.View, {
accessibilityLabel: a11ySenderLabel,
accessibilityHint: accessibilityHint,
accessible: true,
pointerEvents: "none",
style: _reactNative.StyleSheet.absoluteFill
}) : null, MessageContentTopView ? (0, _jsxRuntime.jsx)(MessageContentTopView, {}) : null, hasContentSideViews ? (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.contentRow, alignment === 'right' ? styles.rightAlignContentRow : undefined],
testID: "message-content-row",
children: [MessageContentLeadingView ? (0, _jsxRuntime.jsx)(MessageContentLeadingView, {}) : null, (0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.contentBody,
children: contentBody
}), MessageContentTrailingView ? (0, _jsxRuntime.jsx)(MessageContentTrailingView, {}) : null]
}) : contentBody, MessageContentBottomView ? (0, _jsxRuntime.jsx)(MessageContentBottomView, {}) : null]
})
});
};
var areEqual = (prevProps, nextProps) => {
var prevAlignment = prevProps.alignment,
prevBackgroundColor = prevProps.backgroundColor,
prevPreventPress = prevProps.preventPress,
prevGoToMessage = prevProps.goToMessage,
prevGroupStyles = prevProps.groupStyles,
prevHasInteractiveAccessibilityContent = prevProps.hasInteractiveAccessibilityContent,
isAttachmentEqual = prevProps.isAttachmentEqual,
prevMessage = prevProps.message,
prevMessageContentOrder = prevProps.messageContentOrder,
prevMyMessageTheme = prevProps.myMessageTheme,
prevOtherAttachments = prevProps.otherAttachments,
prevT = prevProps.t;
var nextAlignment = nextProps.alignment,
nextBackgroundColor = nextProps.backgroundColor,
nextPreventPress = nextProps.preventPress,
nextGoToMessage = nextProps.goToMessage,
nextGroupStyles = nextProps.groupStyles,
nextHasInteractiveAccessibilityContent = nextProps.hasInteractiveAccessibilityContent,
nextMessage = nextProps.message,
nextMessageContentOrder = nextProps.messageContentOrder,
nextMyMessageTheme = nextProps.myMessageTheme,
nextOtherAttachments = nextProps.otherAttachments,
nextT = nextProps.t;
if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
return false;
}
if (prevBackgroundColor !== nextBackgroundColor) {
return false;
}
if (prevAlignment !== nextAlignment) {
return false;
}
if (prevPreventPress !== nextPreventPress) {
return false;
}
var goToMessageChangedAndMatters = nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
if (goToMessageChangedAndMatters) {
return false;
}
var otherAttachmentsEqual = prevOtherAttachments.length === nextOtherAttachments.length && prevOtherAttachments?.[0]?.actions?.length === nextOtherAttachments?.[0]?.actions?.length;
if (!otherAttachmentsEqual) {
return false;
}
var groupStylesEqual = prevGroupStyles === nextGroupStyles;
if (!groupStylesEqual) {
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 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;
if (isAttachmentEqual) {
return attachmentKeysEqual && !!isAttachmentEqual(attachment, nextMessageAttachments[index]);
}
return attachmentKeysEqual;
}) : prevMessageAttachments === nextMessageAttachments;
if (!attachmentsEqual) {
return false;
}
var quotedMessageAttachmentsEqual = prevMessage.quoted_message?.attachments?.length === nextMessage.quoted_message?.attachments?.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) => type === nextMessage.latest_reactions?.[index].type) : prevMessage.latest_reactions === nextMessage.latest_reactions;
if (!latestReactionsEqual) {
return false;
}
var messageContentOrderEqual = prevMessageContentOrder.length === nextMessageContentOrder.length && prevMessageContentOrder.every((messageContentType, index) => messageContentType === nextMessageContentOrder[index]);
if (!messageContentOrderEqual) {
return false;
}
var tEqual = prevT === nextT;
if (!tEqual) {
return false;
}
var messageThemeEqual = JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
if (!messageThemeEqual) {
return false;
}
var prevSharedLocation = prevMessage.shared_location;
var nextSharedLocation = nextMessage.shared_location;
var sharedLocationEqual = prevSharedLocation?.latitude === nextSharedLocation?.latitude && prevSharedLocation?.longitude === nextSharedLocation?.longitude && prevSharedLocation?.end_at === nextSharedLocation?.end_at;
if (!sharedLocationEqual) {
return false;
}
return true;
};
var MemoizedMessageContent = _react.default.memo(MessageContentWithContext, areEqual);
var MessageContent = props => {
var _useMessageContext2 = (0, _MessageContext.useMessageContext)(),
alignment = _useMessageContext2.alignment,
files = _useMessageContext2.files,
goToMessage = _useMessageContext2.goToMessage,
groupStyles = _useMessageContext2.groupStyles,
hasInteractiveAccessibilityContent = _useMessageContext2.hasInteractiveAccessibilityContent,
images = _useMessageContext2.images,
isMessageAIGenerated = _useMessageContext2.isMessageAIGenerated,
isMyMessage = _useMessageContext2.isMyMessage,
message = _useMessageContext2.message,
messageContentOrder = _useMessageContext2.messageContentOrder,
onLongPress = _useMessageContext2.onLongPress,
onPress = _useMessageContext2.onPress,
onPressIn = _useMessageContext2.onPressIn,
otherAttachments = _useMessageContext2.otherAttachments,
preventPress = _useMessageContext2.preventPress,
threadList = _useMessageContext2.threadList,
videos = _useMessageContext2.videos;
var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
additionalPressableProps = _useMessagesContext.additionalPressableProps,
enableMessageGroupingByUser = _useMessagesContext.enableMessageGroupingByUser,
isAttachmentEqual = _useMessagesContext.isAttachmentEqual,
myMessageTheme = _useMessagesContext.myMessageTheme;
var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex.t;
var isSingleFile = files.length === 1;
var messageHasPoll = messageContentOrder.includes('poll');
var messageHasSingleMedia = messageContentOrder.length === 1 && messageContentOrder.includes('gallery') && images.length + videos.length === 1;
var messageHasSingleFile = messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
var messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
var messageHasStandaloneGiphyOrImgur = !message.quoted_message && otherAttachments.filter(file => file.type === _types.FileTypes.Giphy || file.type === _types.FileTypes.Imgur).length > 0;
var hidePaddingTop = messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasOnlyText || messageHasStandaloneGiphyOrImgur;
var hidePaddingHorizontal = messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasStandaloneGiphyOrImgur;
var hidePaddingBottom = messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasOnlyText || messageHasStandaloneGiphyOrImgur || messageContentOrder.length > 1 && messageContentOrder[messageContentOrder.length - 1] === 'text';
return (0, _jsxRuntime.jsx)(MemoizedMessageContent, {
additionalPressableProps,
alignment,
enableMessageGroupingByUser,
goToMessage,
groupStyles,
hasInteractiveAccessibilityContent,
isAttachmentEqual,
isMessageAIGenerated,
isMyMessage,
message,
messageContentOrder,
myMessageTheme,
onLongPress,
onPress,
onPressIn,
otherAttachments,
preventPress,
t,
threadList,
hidePaddingTop,
hidePaddingHorizontal,
hidePaddingBottom,
...props
});
};
exports.MessageContent = MessageContent;
var styles = _reactNative.StyleSheet.create({
container: {
flexShrink: 1
},
containerInner: {
borderTopLeftRadius: _theme.components.messageBubbleRadiusGroupBottom,
borderTopRightRadius: _theme.components.messageBubbleRadiusGroupBottom,
overflow: 'hidden',
borderWidth: 0
},
contentBody: {
flexShrink: 1,
minWidth: 0
},
contentRow: {
flexDirection: 'row'
},
rightAlignContentRow: {
flexDirection: 'row-reverse'
},
leftAlignContent: {
justifyContent: 'flex-start'
},
leftAlignItems: {
alignItems: 'flex-start'
},
replyBorder: {
borderLeftWidth: 1,
bottom: 0,
position: 'absolute'
},
replyContainer: {
alignSelf: 'center'
},
galleryContainer: {},
noBorder: {
borderWidth: 0
},
rightAlignContent: {
justifyContent: 'flex-end'
},
rightAlignItems: {
alignItems: 'flex-end'
},
textWrapper: {}
});
//# sourceMappingURL=MessageContent.js.map