@sendbird/uikit-react-native-foundation/lib/module/ui/OpenChannelMessage/Message.user.og.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 { urlRegexRough } from '@sendbird/uikit-utils';
import Box from '../../components/Box';
import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
import PressBox from '../../components/PressBox';
import RegexText from '../../components/RegexText';
import Text from '../../components/Text';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
import MessageContainer from './MessageContainer';
const OpenGraphUserMessage = props => {
  const {
    colors
  } = useUIKitTheme();
  const {
    onPress,
    onLongPress,
    onPressURL,
    ...rest
  } = props;
  const color = colors.ui.openChannelMessage.default;
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
    onPress: onPress,
    onLongPress: onLongPress
  }, ({
    pressed
  }) => {
    var _props$strings;
    return /*#__PURE__*/React.createElement(MessageContainer, _extends({
      pressed: pressed
    }, rest), /*#__PURE__*/React.createElement(Box, {
      alignItems: 'flex-start'
    }, /*#__PURE__*/React.createElement(Text, {
      body3: true,
      color: color.enabled.textMsg,
      suppressHighlighting: true,
      supportRTLAlign: true,
      originalText: props.message.message
    }, /*#__PURE__*/React.createElement(RegexText, {
      body3: true,
      suppressHighlighting: true,
      supportRTLAlign: true,
      originalText: props.message.message,
      color: color.enabled.textMsg,
      patterns: [{
        regex: urlRegexRough,
        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,
            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.createElement(Text, {
      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.createElement(MessageContainer, _extends({}, rest, {
    grouped: true
  }), /*#__PURE__*/React.createElement(PressBox, {
    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.createElement(Box, {
    padding: 8,
    borderRadius: 8,
    style: styles.ogContainer,
    backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground,
    alignItems: 'flex-start'
  }, /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 1,
    caption2: true,
    color: colors.onBackground02,
    style: styles.ogUrl
  }, props.message.ogMetaData.url), /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 2,
    body2: true,
    color: colors.primary,
    style: styles.ogTitle
  }, props.message.ogMetaData.title), Boolean(props.message.ogMetaData.description) && /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 2,
    caption2: true,
    color: colors.onBackground01
  }, props.message.ogMetaData.description), !!props.message.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
    style: styles.ogImage,
    source: {
      uri: props.message.ogMetaData.defaultImage.url
    }
  })))));
};
const styles = createStyleSheet({
  ogContainer: {
    maxWidth: 296
  },
  ogUrl: {
    marginBottom: 4
  },
  ogTitle: {
    marginBottom: 8
  },
  ogImage: {
    width: '100%',
    height: 156,
    marginTop: 12
  }
});
export default OpenGraphUserMessage;
//# sourceMappingURL=Message.user.og.js.map