@sendbird/uikit-react-native-foundation/lib/commonjs/ui/GroupChannelMessage/MessageContainer.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 _reactNative = require("react-native");
var _uikitUtils = require("@sendbird/uikit-utils");
var _Box = _interopRequireDefault(require("../../components/Box"));
var _Text = _interopRequireDefault(require("../../components/Text"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _Avatar = _interopRequireDefault(require("../Avatar"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const MessageContainer = props => {
  if (props.variant === 'incoming') {
    return /*#__PURE__*/_react.default.createElement(MessageContainer.Incoming, props);
  } else {
    return /*#__PURE__*/_react.default.createElement(MessageContainer.Outgoing, props);
  }
};
MessageContainer.Incoming = function MessageContainerIncoming({
  children,
  replyInfo,
  groupedWithNext,
  groupedWithPrev,
  message,
  onPressAvatar,
  strings,
  parentMessage
}) {
  var _message$sender;
  const {
    colors
  } = (0, _useUIKitTheme.default)();
  const color = colors.ui.groupChannelMessage.incoming;
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'flex-start'
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-end'
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    width: 26,
    marginEnd: 12
  }, (message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: onPressAvatar
  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
    size: 26,
    uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
  }))), /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexShrink: 1,
    alignItems: 'flex-start'
  }, parentMessage, !groupedWithPrev && !parentMessage && /*#__PURE__*/_react.default.createElement(_Box.default, {
    marginStart: 12,
    marginBottom: 4
  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/_react.default.createElement(_Text.default, {
    caption1: true,
    color: color.enabled.textSenderName,
    numberOfLines: 1
  }, (strings === null || strings === void 0 ? void 0 : strings.senderName) ?? message.sender.nickname)), /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    alignItems: 'flex-end'
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    style: styles.bubble
  }, children), !groupedWithNext && /*#__PURE__*/_react.default.createElement(_Box.default, {
    marginStart: 4
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    caption4: true,
    color: color.enabled.textTime
  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? (0, _uikitUtils.getMessageTimeFormat)(new Date(message.createdAt))))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    marginTop: 4
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    width: 26,
    marginEnd: 12,
    justifyContent: 'flex-start'
  }), replyInfo));
};
MessageContainer.Outgoing = function MessageContainerOutgoing({
  children,
  replyInfo,
  message,
  groupedWithNext,
  strings,
  sendingStatus,
  parentMessage
}) {
  const {
    colors
  } = (0, _useUIKitTheme.default)();
  const color = colors.ui.groupChannelMessage.outgoing;
  return /*#__PURE__*/_react.default.createElement(_Box.default, null, parentMessage, /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'center'
  }, sendingStatus && /*#__PURE__*/_react.default.createElement(_Box.default, {
    marginEnd: 4
  }, sendingStatus), !groupedWithNext && /*#__PURE__*/_react.default.createElement(_Box.default, {
    marginEnd: 4
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    caption4: true,
    color: color.enabled.textTime
  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? (0, _uikitUtils.getMessageTimeFormat)(new Date(message.createdAt))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
    style: styles.bubble
  }, children)), /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 4
  }, replyInfo));
};
const styles = (0, _createStyleSheet.default)({
  bubble: {
    maxWidth: 240,
    overflow: 'hidden',
    flexShrink: 1
  }
});
var _default = exports.default = MessageContainer;
//# sourceMappingURL=MessageContainer.js.map