@sendbird/uikit-react-native/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { Box, ImageWithPlaceholder, PressBox, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';
import { useSendbirdChat } from './../../hooks/useContext';
const ThreadParentMessageUserOg = props => {
  var _props$renderRegexTex;
  const userMessage = props.parentMessage;
  if (!userMessage) return null;
  const {
    sbOptions
  } = useSendbirdChat();
  const {
    select,
    colors,
    palette
  } = useUIKitTheme();
  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;
  const onPressMessage = userMessage => useFreshCallback(() => {
    var _userMessage$ogMetaDa, _props$onPressURL;
    typeof ((_userMessage$ogMetaDa = userMessage.ogMetaData) === null || _userMessage$ogMetaDa === void 0 ? void 0 : _userMessage$ogMetaDa.url) === 'string' && ((_props$onPressURL = props.onPressURL) === null || _props$onPressURL === void 0 ? void 0 : _props$onPressURL.call(props, userMessage.ogMetaData.url));
  });
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
    activeOpacity: 0.85,
    onPress: onPressMessage(userMessage)
  }, /*#__PURE__*/React.createElement(Text, {
    body3: true,
    color: colors.onBackground01,
    suppressHighlighting: true
  }, /*#__PURE__*/React.createElement(RegexText, {
    body3: true,
    color: colors.onBackground01,
    patterns: [...(props.regexTextPatterns ?? []), {
      regex: urlRegexStrict,
      replacer(_ref) {
        let {
          match,
          parentProps,
          keyPrefix,
          index
        } = _ref;
        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
          key: `${keyPrefix}-${index}`,
          onPress: () => {
            var _props$onPressURL2;
            return (_props$onPressURL2 = props.onPressURL) === null || _props$onPressURL2 === void 0 ? void 0 : _props$onPressURL2.call(props, match);
          },
          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
        }), match);
      }
    }]
  }, (_props$renderRegexTex = props.renderRegexTextChildren) === null || _props$renderRegexTex === void 0 ? void 0 : _props$renderRegexTex.call(props, userMessage)), Boolean(userMessage.updatedAt) && /*#__PURE__*/React.createElement(Text, {
    body3: true,
    color: colors.onBackground02
  }, ' (edited)'))), userMessage.ogMetaData && enableOgtag && /*#__PURE__*/React.createElement(PressBox, {
    onPress: onPressMessage(userMessage),
    style: styles.container
  }, /*#__PURE__*/React.createElement(Box, null, !!userMessage.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
    style: styles.ogImage,
    source: {
      uri: userMessage.ogMetaData.defaultImage.url
    }
  }), /*#__PURE__*/React.createElement(Box, {
    style: styles.ogContainer,
    backgroundColor: select({
      dark: palette.background400,
      light: palette.background100
    })
  }, /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 3,
    body2: true,
    color: colors.onBackground01,
    style: styles.ogTitle
  }, userMessage.ogMetaData.title), !!userMessage.ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 1,
    caption2: true,
    color: colors.onBackground01,
    style: styles.ogDesc
  }, userMessage.ogMetaData.description), /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 1,
    caption2: true,
    color: colors.onBackground02
  }, userMessage.ogMetaData.url)))));
};
const styles = createStyleSheet({
  container: {
    borderRadius: 16,
    overflow: 'hidden'
  },
  ogContainer: {
    paddingHorizontal: 12,
    paddingTop: 8,
    paddingBottom: 12,
    maxWidth: 240,
    borderBottomLeftRadius: 16,
    borderBottomRightRadius: 16
  },
  ogImage: {
    width: 240,
    height: 136,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  },
  ogUrl: {
    marginBottom: 4
  },
  ogTitle: {
    marginBottom: 4
  },
  ogDesc: {
    lineHeight: 14,
    marginBottom: 8
  },
  urlText: {
    textDecorationLine: 'underline'
  }
});
export default ThreadParentMessageUserOg;
//# sourceMappingURL=ThreadParentMessage.user.og.js.map