@sendbird/uikit-react-native-foundation/lib/commonjs/ui/OpenChannelMessage/Message.user.og.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _uikitUtils = require("@sendbird/uikit-utils");
var _Box = _interopRequireDefault(require("../../components/Box"));
var _ImageWithPlaceholder = _interopRequireDefault(require("../../components/ImageWithPlaceholder"));
var _PressBox = _interopRequireDefault(require("../../components/PressBox"));
var _RegexText = _interopRequireDefault(require("../../components/RegexText"));
var _Text = _interopRequireDefault(require("../../components/Text"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
const OpenGraphUserMessage = props => {
  const {
    colors
  } = (0, _useUIKitTheme.default)();
  const {
    onPress,
    onLongPress,
    onPressURL,
    ...rest
  } = props;
  const color = colors.ui.openChannelMessage.default;
  return /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_PressBox.default, {
    onPress: onPress,
    onLongPress: onLongPress
  }, ({
    pressed
  }) => {
    var _props$strings;
    return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, _extends({
      pressed: pressed
    }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
      alignItems: 'flex-start'
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      body3: true,
      color: color.enabled.textMsg,
      suppressHighlighting: true,
      supportRTLAlign: true,
      originalText: props.message.message
    }, /*#__PURE__*/_react.default.createElement(_RegexText.default, {
      body3: true,
      suppressHighlighting: true,
      supportRTLAlign: true,
      originalText: props.message.message,
      color: color.enabled.textMsg,
      patterns: [{
        regex: _uikitUtils.urlRegexRough,
        replacer({
          match,
          parentProps,
          keyPrefix,
          index
        }) {
          return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({}, parentProps, {
            key: `${keyPrefix}-${index}`,
            onPress: () => onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(match),
            onLongPress: onLongPress,
            color: colors.primary,
            style: parentProps === null || parentProps === void 0 ? void 0 : parentProps.style,
            supportRTLAlign: true,
            originalText: match
          }), match);
        }
      }]
    }, props.message.message), Boolean(props.message.updatedAt) && /*#__PURE__*/_react.default.createElement(_Text.default, {
      body3: true,
      color: color.enabled.textMsgPostfix
    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.edited) ?? ' (edited)'))));
  }), props.message.ogMetaData && /*#__PURE__*/_react.default.createElement(_MessageContainer.default, _extends({}, rest, {
    grouped: true
  }), /*#__PURE__*/_react.default.createElement(_PressBox.default, {
    style: styles.ogContainer,
    onPress: () => {
      var _props$message$ogMeta;
      return ((_props$message$ogMeta = props.message.ogMetaData) === null || _props$message$ogMeta === void 0 ? void 0 : _props$message$ogMeta.url) && (onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(props.message.ogMetaData.url));
    },
    onLongPress: onLongPress
  }, ({
    pressed
  }) => props.message.ogMetaData && /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: 8,
    borderRadius: 8,
    style: styles.ogContainer,
    backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground,
    alignItems: 'flex-start'
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    numberOfLines: 1,
    caption2: true,
    color: colors.onBackground02,
    style: styles.ogUrl
  }, props.message.ogMetaData.url), /*#__PURE__*/_react.default.createElement(_Text.default, {
    numberOfLines: 2,
    body2: true,
    color: colors.primary,
    style: styles.ogTitle
  }, props.message.ogMetaData.title), Boolean(props.message.ogMetaData.description) && /*#__PURE__*/_react.default.createElement(_Text.default, {
    numberOfLines: 2,
    caption2: true,
    color: colors.onBackground01
  }, props.message.ogMetaData.description), !!props.message.ogMetaData.defaultImage && /*#__PURE__*/_react.default.createElement(_ImageWithPlaceholder.default, {
    style: styles.ogImage,
    source: {
      uri: props.message.ogMetaData.defaultImage.url
    }
  })))));
};
const styles = (0, _createStyleSheet.default)({
  ogContainer: {
    maxWidth: 296
  },
  ogUrl: {
    marginBottom: 4
  },
  ogTitle: {
    marginBottom: 8
  },
  ogImage: {
    width: '100%',
    height: 156,
    marginTop: 12
  }
});
var _default = exports.default = OpenGraphUserMessage;
//# sourceMappingURL=Message.user.og.js.map