@sendbird/uikit-react-native-foundation/lib/module/ui/GroupChannelMessage/MessageBubbleWithText.js

A foundational UI kit for building chat-enabled React Native apps.

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { urlRegexStrict } from '@sendbird/uikit-utils';
import Box from '../../components/Box';
import RegexText from '../../components/RegexText';
import Text from '../../components/Text';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
const MessageBubbleWithText = ({
  backgroundColor,
  message,
  onPressURL,
  onLongPress,
  strings,
  variant = 'incoming',
  regexTextPatterns = [],
  renderRegexTextChildren = msg => msg.message
}) => {
  const {
    colors
  } = useUIKitTheme();
  const color = colors.ui.groupChannelMessage[variant];
  return /*#__PURE__*/React.createElement(Box, {
    backgroundColor: backgroundColor,
    style: styles.bubble
  }, /*#__PURE__*/React.createElement(Text, {
    body3: true,
    color: color.enabled.textMsg,
    suppressHighlighting: true,
    supportRTLAlign: true,
    originalText: message.message
  }, /*#__PURE__*/React.createElement(RegexText, {
    body3: true,
    suppressHighlighting: true,
    supportRTLAlign: true,
    originalText: message.message,
    color: color.enabled.textMsg,
    patterns: [...regexTextPatterns, {
      regex: urlRegexStrict,
      replacer({
        match,
        parentProps,
        keyPrefix,
        index
      }) {
        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
          key: `${keyPrefix}-${index}`,
          onPress: () => onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(match),
          onLongPress: onLongPress,
          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
        }), match);
      }
    }]
  }, renderRegexTextChildren(message)), Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
    body3: true,
    color: color.enabled.textEdited,
    supportRTLAlign: true,
    originalText: (strings === null || strings === void 0 ? void 0 : strings.edited) ?? ' (edited)'
  }, (strings === null || strings === void 0 ? void 0 : strings.edited) ?? ' (edited)')));
};
const styles = createStyleSheet({
  bubble: {
    paddingHorizontal: 12,
    paddingVertical: 6
  },
  urlText: {
    textDecorationLine: 'underline'
  }
});
export default MessageBubbleWithText;
//# sourceMappingURL=MessageBubbleWithText.js.map