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

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.previewTitleStyle = exports.previewLinkStyle = exports.previewImageStyle = exports.previewDataStyle = exports.messageTextBubbleStyle = exports.messagePreviewWrapperStyle = exports.messagePreviewContainerStyle = exports.messageKitTextBubbleBlockStyle = exports.linkSubtitleStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _Shared = require("../../../Shared");
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 messageKitTextBubbleBlockStyle = function messageKitTextBubbleBlockStyle(props, theme) {
  return {
    textAlign: "inherit",
    display: "inline-block",
    padding: "8px 12px",
    border: props.style.border,
    width: props.style.width,
    height: props.style.height,
    borderRadius: props.style.borderRadius,
    background: props.style.background //theme not applied jut bcz transparent
  };
};

/** emoji font according to number of emoji to be display */
exports.messageKitTextBubbleBlockStyle = messageKitTextBubbleBlockStyle;
var emojiFont = function emojiFont(str) {
  var strLength = str === null || str === void 0 ? void 0 : str.length;
  var fontSize = null;
  if (strLength) {
    var emojiRE = str === null || str === void 0 ? void 0 : str.match(/(?:[\xA9\xAE\u2122\u23E9-\u23EF\u23F3\u23F8-\u23FA\u24C2\u25B6\u2600-\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDE51\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F\uDE80-\uDEFF]|\uD83E[\uDD00-\uDDFF])/g);
    var numbers = emojiRE === null || emojiRE === void 0 ? void 0 : emojiRE.length;
    if (numbers === 1 && parseInt(strLength / 2) === numbers) {
      fontSize = "32px";
    } else if (numbers === 2 && parseInt(strLength / 2) === numbers) {
      fontSize = "24px";
    } else if (numbers === 3 && parseInt(strLength / 2) === numbers) {
      fontSize = "16px";
    }
  }
  return fontSize;
};
var messageTextBubbleStyle = function messageTextBubbleStyle(props, theme, strMessage) {
  var emojiFontSize = emojiFont(strMessage);
  var fontStyle = {};
  if (emojiFontSize) {
    fontStyle = {
      fontSize: emojiFontSize
    };
  } else {
    fontStyle = {
      font: props.style.textFont || (0, _Shared.fontHelper)(theme.typography.subtitle1)
    };
  }
  return _objectSpread(_objectSpread({
    color: props.style.textColor || theme.palette.accent900[theme.palette.mode]
  }, fontStyle), {}, {
    whiteSpace: "pre-wrap",
    wordWrap: "break-word",
    margin: "0",
    width: "auto"
  });
};

/** link previe style */
exports.messageTextBubbleStyle = messageTextBubbleStyle;
var messagePreviewContainerStyle = function messagePreviewContainerStyle(props, theme) {
  return {
    display: "inline-block",
    borderRadius: "12px",
    backgroundColor: props.style.linkPreviewBackgroundColor || theme.palette.background[theme.palette.mode],
    boxShadow: "0px 1px 2px 1px rgba(0,0,0,0.18)",
    alignSelf: "flex-start",
    width: "auto"
  };
};
exports.messagePreviewContainerStyle = messagePreviewContainerStyle;
var messagePreviewWrapperStyle = function messagePreviewWrapperStyle() {
  return {
    display: "flex",
    flexDirection: "column"
  };
};
exports.messagePreviewWrapperStyle = messagePreviewWrapperStyle;
var previewImageStyle = function previewImageStyle(img) {
  return {
    background: "url(".concat(img, ") no-repeat center center"),
    backgroundSize: "cover",
    height: "150px",
    minHeight: "50px",
    borderRadius: "12px 12px 0 0"
  };
};
exports.previewImageStyle = previewImageStyle;
var previewDataStyle = function previewDataStyle() {
  return {
    padding: "16px 16px 0 16px"
  };
};
exports.previewDataStyle = previewDataStyle;
var previewTitleStyle = function previewTitleStyle(props, theme) {
  return {
    whiteSpace: "pre-wrap",
    wordBreak: "break-word",
    textAlign: "left",
    width: "auto",
    color: props.style.linkPreviewTitleColor || theme.palette.accent[theme.palette.mode],
    font: props.style.linkPreviewTitleFont || (0, _Shared.fontHelper)(theme.typography.title2),
    marginBottom: "8px"
  };
};
exports.previewTitleStyle = previewTitleStyle;
var previewLinkStyle = function previewLinkStyle() {
  return {
    display: "flex",
    alignItems: "center",
    justifyContent: "left",
    padding: "0 16px 16px 16px"
  };
};
exports.previewLinkStyle = previewLinkStyle;
var linkSubtitleStyle = function linkSubtitleStyle(props, theme) {
  return {
    display: "inline-block",
    color: props.style.linkPreviewSubtitleColor || theme.palette.accent600[theme.palette.mode],
    font: props.style.linkPreviewSubtitleFont || (0, _Shared.fontHelper)(theme.typography.subtitle2),
    textDecoration: "none"
  };
};
exports.linkSubtitleStyle = linkSubtitleStyle;