stream-chat-react-native-core/lib/module/components/Message/MessageItemView/MessageTextContainer.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageTextContainer = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _renderText = require("./utils/renderText");
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 _useTranslatedMessage = require("../../../hooks/useTranslatedMessage");
var _theme = require("../../../theme");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageItemView/MessageTextContainer.tsx";
var _excluded = ["onlyEmojiMarkdown"];
var styles = _reactNative.StyleSheet.create({
  textContainer: {
    maxWidth: 256,
    paddingHorizontal: _theme.primitives.spacingXxs
  }
});
var MessageTextContainerWithContext = props => {
  var theme = (0, _ThemeContext.useTheme)();
  var hasInteractiveAccessibilityContent = props.hasInteractiveAccessibilityContent,
    isMyMessage = props.isMyMessage,
    markdownRules = props.markdownRules,
    _props$markdownStyles = props.markdownStyles,
    markdownStylesProp = _props$markdownStyles === void 0 ? {} : _props$markdownStyles,
    message = props.message,
    messageOverlay = props.messageOverlay,
    messageTextNumberOfLines = props.messageTextNumberOfLines,
    onLongPress = props.onLongPress,
    onlyEmojis = props.onlyEmojis,
    onPress = props.onPress,
    preventPress = props.preventPress,
    _props$styles = props.styles,
    stylesProp = _props$styles === void 0 ? {} : _props$styles;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    MessageText = _useComponentsContext.MessageText;
  var _theme$theme = theme.theme,
    _theme$theme$messageI = _theme$theme.messageItemView.content,
    markdown = _theme$theme$messageI.markdown,
    _theme$theme$messageI2 = _theme$theme$messageI.textContainer,
    onlyEmojiMarkdown = _theme$theme$messageI2.onlyEmojiMarkdown,
    textContainer = (0, _objectWithoutProperties2.default)(_theme$theme$messageI2, _excluded),
    semantics = _theme$theme.semantics;
  var translatedMessage = (0, _useTranslatedMessage.useTranslatedMessage)(message);
  if (!message.text) {
    return null;
  }
  var markdownStyles = {
    ...markdown,
    ...markdownStylesProp
  };
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    accessible: hasInteractiveAccessibilityContent || undefined,
    accessibilityRole: hasInteractiveAccessibilityContent ? 'text' : undefined,
    style: [styles.textContainer, textContainer, stylesProp.textContainer],
    testID: "message-text-container",
    children: MessageText ? (0, _jsxRuntime.jsx)(MessageText, {
      ...props,
      renderText: _renderText.renderText,
      theme: theme
    }) : (0, _renderText.renderText)({
      isMyMessage,
      semantics,
      markdownRules,
      markdownStyles: {
        ...markdownStyles,
        ...(onlyEmojis ? onlyEmojiMarkdown : {})
      },
      message: translatedMessage,
      messageOverlay,
      messageTextNumberOfLines,
      onLongPress,
      onlyEmojis,
      onPress,
      preventPress
    })
  });
};
var areEqual = (prevProps, nextProps) => {
  var prevHasInteractiveAccessibilityContent = prevProps.hasInteractiveAccessibilityContent,
    prevMarkdownStyles = prevProps.markdownStyles,
    prevMessage = prevProps.message,
    prevMyMessageTheme = prevProps.myMessageTheme,
    prevOnlyEmojis = prevProps.onlyEmojis;
  var nextHasInteractiveAccessibilityContent = nextProps.hasInteractiveAccessibilityContent,
    nextMarkdownStyles = nextProps.markdownStyles,
    nextMessage = nextProps.message,
    nextMyMessageTheme = nextProps.myMessageTheme,
    nextOnlyEmojis = nextProps.onlyEmojis;
  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
    return false;
  }
  var messageStatusEqual = prevMessage.status === nextMessage.status;
  if (!messageStatusEqual) {
    return false;
  }
  var messageTextEqual = prevMessage.text === nextMessage.text && prevMessage.i18n === nextMessage.i18n;
  if (!messageTextEqual) {
    return false;
  }
  var onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
  if (!onlyEmojisEqual) {
    return false;
  }
  var mentionedUsersEqual = prevMessage.mentioned_users?.length === nextMessage.mentioned_users?.length && (nextMessage.mentioned_users?.length === 0 || prevMessage.mentioned_users?.length && nextMessage.mentioned_users?.length && prevMessage.mentioned_users[0].name === nextMessage.mentioned_users[0].name);
  if (!mentionedUsersEqual) {
    return false;
  }
  var mentionedBroadcastEqual = prevMessage.mentioned_channel === nextMessage.mentioned_channel && prevMessage.mentioned_here === nextMessage.mentioned_here;
  if (!mentionedBroadcastEqual) {
    return false;
  }
  var joinIds = values => (values ?? []).join('|');
  var mentionedRolesEqual = joinIds(prevMessage.mentioned_roles) === joinIds(nextMessage.mentioned_roles);
  if (!mentionedRolesEqual) {
    return false;
  }
  var groupIds = m => joinIds(m.mentioned_groups?.map(g => g.id) ?? m.mentioned_group_ids);
  var mentionedGroupsEqual = groupIds(prevMessage) === groupIds(nextMessage);
  if (!mentionedGroupsEqual) {
    return false;
  }
  var markdownStylesEqual = prevMarkdownStyles === nextMarkdownStyles || Object.keys(prevMarkdownStyles || {}).length === 0 && Object.keys(nextMarkdownStyles || {}).length === 0 || JSON.stringify(prevMarkdownStyles) === JSON.stringify(nextMarkdownStyles);
  if (!markdownStylesEqual) {
    return false;
  }
  var messageThemeEqual = JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
  if (!messageThemeEqual) {
    return false;
  }
  return true;
};
var MemoizedMessageTextContainer = _react.default.memo(MessageTextContainerWithContext, areEqual);
var MessageTextContainer = props => {
  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
    hasInteractiveAccessibilityContent = _useMessageContext.hasInteractiveAccessibilityContent,
    isMyMessage = _useMessageContext.isMyMessage,
    message = _useMessageContext.message,
    onLongPress = _useMessageContext.onLongPress,
    onlyEmojis = _useMessageContext.onlyEmojis,
    onPress = _useMessageContext.onPress,
    preventPress = _useMessageContext.preventPress;
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    markdownRules = _useMessagesContext.markdownRules,
    messageTextNumberOfLines = _useMessagesContext.messageTextNumberOfLines,
    myMessageTheme = _useMessagesContext.myMessageTheme;
  return (0, _jsxRuntime.jsx)(MemoizedMessageTextContainer, {
    hasInteractiveAccessibilityContent,
    isMyMessage,
    markdownRules,
    message,
    messageTextNumberOfLines,
    myMessageTheme,
    onLongPress,
    onlyEmojis,
    onPress,
    preventPress,
    ...props
  });
};
exports.MessageTextContainer = MessageTextContainer;
MessageTextContainer.displayName = 'MessageTextContainer{messageItemView{content}}';
//# sourceMappingURL=MessageTextContainer.js.map