cometchat-react-ui-kit2/dist/Messages/Bubbles/CometChatMessageBubble/style.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.translatedTextBlockStyle = exports.translateTextStyle = exports.translateLabelText = exports.reactionsStyle = exports.messageTimestampStyle = exports.messageSenderStyle = exports.messageRightGutterStyle = exports.messageOptionStyle = exports.messageNameTimestampStyle = exports.messageLeftGutterStyle = exports.messageKitReceiptStyle = exports.messageGutterStyle = exports.messageBlockStyle = exports.messageAvatarStyle = exports.messageActionsStyle = exports.emojiStyle = exports.deleteBubbleStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ = require("../../..");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var translatedTextBlockStyle = function translatedTextBlockStyle(alignment, theme) {
  var color = theme.palette.accent900["light"];
  var textAlign = "end";
  if (alignment === _.MessageBubbleAlignmentConstants.left) {
    color = theme.palette.accent900["dark"];
    textAlign = "start";
  }
  return {
    color: color,
    textAlign: textAlign,
    border: "0 none",
    font: (0, _.fontHelper)(theme.typography.subtitle1),
    background: "transparent",
    whiteSpace: "pre-wrap"
  };
};
exports.translatedTextBlockStyle = translatedTextBlockStyle;
var translateTextStyle = function translateTextStyle() {
  return {
    whiteSpace: "pre-wrap",
    wordWrap: "break-word",
    margin: "0",
    width: "auto",
    height: "auto",
    padding: "0px 12px"
  };
};
exports.translateTextStyle = translateTextStyle;
var translateLabelText = function translateLabelText(alignment, theme) {
  if (alignment === _.MessageBubbleAlignmentConstants.right) {
    var _theme$typography;
    return {
      textAlign: "start",
      padding: "0px 12px",
      font: (0, _.fontHelper)((_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.caption2)
    };
  } else {
    var _theme$typography2;
    return {
      padding: "0px 12px",
      font: (0, _.fontHelper)((_theme$typography2 = theme.typography) === null || _theme$typography2 === void 0 ? void 0 : _theme$typography2.caption2)
    };
  }
};
exports.translateLabelText = translateLabelText;
var deleteBubbleStyle = function deleteBubbleStyle(theme) {
  return {
    width: "100%",
    height: "auto",
    border: "1px dashed ".concat(theme.palette.accent400[theme.palette.mode]),
    background: "transparent",
    borderRadius: "12px",
    textFont: (0, _.fontHelper)(theme.typography.subtitle1),
    textColor: theme.palette.accent400[theme.palette.mode]
  };
};
exports.deleteBubbleStyle = deleteBubbleStyle;
var reactionsStyle = function reactionsStyle(theme, alignment, messageObject) {
  var iconTint = theme.palette.background[theme.palette.mode];
  if ((messageObject === null || messageObject === void 0 ? void 0 : messageObject.type) !== "text") {
    iconTint = theme.palette.accent500[theme.palette.mode];
  } else if (alignment === _.messageBubbleAlignment.left) {
    iconTint = theme.palette.accent500[theme.palette.mode];
  }
  return {
    width: "100%",
    height: "auto",
    borderRadius: "11px",
    iconTint: iconTint
  };
};
exports.reactionsStyle = reactionsStyle;
var messageOptionStyle = function messageOptionStyle(alignment, loggedInUser, messageObject, theme) {
  var _messageObject$sender;
  var position = {};
  var direction = {
    flexDirection: "row"
  };
  if (alignment === _.messageAlignment.leftAligned) {
    position = {
      right: "0px"
    };
  } else if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) !== (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender = messageObject.sender) === null || _messageObject$sender === void 0 ? void 0 : _messageObject$sender.uid)) {
    position = {
      left: "0px"
    };
  } else {
    position = {
      right: "0px"
    };
  }
  return _objectSpread(_objectSpread(_objectSpread({
    position: "absolute",
    zIndex: "1",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    top: "-28px"
  }, position), direction), {}, {
    height: "36px",
    border: "1px solid ".concat(theme.palette.accent200[theme.palette.mode]),
    background: theme.palette.background[theme.palette.mode],
    moreIconTint: theme.palette.accent600[theme.palette.mode],
    textFont: (0, _.fontHelper)(theme.typography.subtitle1),
    textColor: theme.palette.accent600[theme.palette.mode],
    iconTint: theme.palette.accent600[theme.palette.mode]
  });
};
exports.messageOptionStyle = messageOptionStyle;
var messageActionsStyle = function messageActionsStyle() {
  return {
    position: "relative"
  };
};
exports.messageActionsStyle = messageActionsStyle;
var messageGutterStyle = function messageGutterStyle() {
  return {
    padding: "8px",
    display: "flex",
    width: "auto"
  };
};
exports.messageGutterStyle = messageGutterStyle;
var messageLeftGutterStyle = function messageLeftGutterStyle() {
  return {
    display: "flex",
    padding: "5px",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "flex-end"
  };
};
exports.messageLeftGutterStyle = messageLeftGutterStyle;
var messageRightGutterStyle = function messageRightGutterStyle() {
  return {
    display: "flex",
    padding: "5px",
    flexDirection: "column",
    minWidth: "0",
    justifyContent: "flex-start",
    alignItems: "flex-start"
  };
};
exports.messageRightGutterStyle = messageRightGutterStyle;
var messageBlockStyle = function messageBlockStyle(alignment, style, messageObject, theme) {
  var backgroundColor = "";
  var alignItems = "center";
  if (messageObject.type === _.MessageTypeConstants.image || messageObject.type === _.MessageTypeConstants.audio || messageObject.type === _.MessageTypeConstants.video || messageObject.type === _.MessageTypeConstants.sticker || messageObject && messageObject.deletedAt) {
    backgroundColor = "none";
  } else if (messageObject.type === _.MessageTypeConstants.file) {
    backgroundColor = theme.palette.accent50[theme.palette.mode]; //not clear
  } else if (messageObject.type === _.MessageTypeConstants.poll) {
    backgroundColor = theme.palette.accent50[theme.palette.mode];
  } else if (messageObject.type === _.MessageTypeConstants.whiteboard) {
    backgroundColor = theme.palette.accent50[theme.palette.mode];
  } else if (messageObject.type === _.MessageTypeConstants.document) {
    backgroundColor = theme.palette.accent50[theme.palette.mode];
  } else {
    var _theme$palette;
    backgroundColor = style.background || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getPrimary());
  }
  if (alignment === _.MessageBubbleAlignmentConstants.left) {
    alignItems = "flex-start";
  }
  return {
    background: backgroundColor,
    display: "flex",
    flexDirection: "column",
    alignItems: alignItems,
    borderRadius: style.borderRadius,
    width: "fit-content",
    position: "relative"
  };
};
exports.messageBlockStyle = messageBlockStyle;
var emojiStyle = function emojiStyle(props) {
  return {
    width: "24px",
    height: "24px"
  };
};
exports.emojiStyle = emojiStyle;
var messageAvatarStyle = function messageAvatarStyle() {
  return {
    flexShrink: "0",
    position: "relative"
  };
};
exports.messageAvatarStyle = messageAvatarStyle;
var messageSenderStyle = function messageSenderStyle(style, theme) {
  return {
    display: "flex",
    alignItems: "center",
    height: "24px",
    color: style.nameTextColor || (0, _.fontHelper)(theme.typography.caption1),
    font: style.nameTextFont || theme.palette.accent500[theme.palette.mode],
    letterSpacing: "-0.1",
    lineHeight: "16"
  };
};
exports.messageSenderStyle = messageSenderStyle;
var messageKitReceiptStyle = function messageKitReceiptStyle() {
  return {
    display: "flex",
    alignItems: "center",
    height: "24px"
  };
};
exports.messageKitReceiptStyle = messageKitReceiptStyle;
var messageTimestampStyle = function messageTimestampStyle(style, theme) {
  return {
    color: style.timestampColor || theme.palette.accent[theme.palette.mode],
    font: style.timestampFont || (0, _.fontHelper)(theme.typography.caption2),
    display: "flex",
    alignItems: "center",
    height: "24px"
  };
};
exports.messageTimestampStyle = messageTimestampStyle;
var messageNameTimestampStyle = function messageNameTimestampStyle() {
  return {
    display: "flex",
    alignItems: "center",
    height: "24px"
  };
};
exports.messageNameTimestampStyle = messageNameTimestampStyle;