cometchat-react-ui-kit2/dist/Messages/CometChatEmojiKeyboard/style.js

CometChat UI Kit for React App

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.listStyle = exports.getListStyle = exports.emojiTabLsitStyle = exports.emojiListStyle = exports.emojiContainerStyle = exports.emojiCategoryWrapper = exports.emojiCategoryTitle = void 0;
var _Shared = require("../../Shared");
var emojiContainerStyle = function emojiContainerStyle(props, theme) {
  var _props$style, _theme$palette, _theme$palette2;
  return {
    padding: "0px",
    overflowY: "scroll",
    width: props.style.width,
    height: props.style.height,
    background: (props === null || props === void 0 ? void 0 : (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.background) || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.background[theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.mode]),
    borderRadius: "12px"
  };
};
exports.emojiContainerStyle = emojiContainerStyle;
var emojiListStyle = function emojiListStyle() {
  return {
    display: "flex",
    flexWrap: "wrap"
  };
};
exports.emojiListStyle = emojiListStyle;
var emojiCategoryWrapper = function emojiCategoryWrapper() {
  return {
    justifyContent: "center",
    alignItems: "center"
  };
};
exports.emojiCategoryWrapper = emojiCategoryWrapper;
var emojiCategoryTitle = function emojiCategoryTitle(props, theme) {
  var color = theme.palette.accent500[theme.palette.mode];
  var font = (0, _Shared.fontHelper)(theme.typography.caption1);
  return {
    textAlign: "left",
    paddingLeft: "16px",
    paddingTop: "8px",
    font: props.style.sectionHeaderFont || font,
    color: props.style.sectionHeaderColor || color
  };
};
exports.emojiCategoryTitle = emojiCategoryTitle;
var emojiTabLsitStyle = function emojiTabLsitStyle(props, theme) {
  var _props$style2, _theme$palette3;
  return {
    width: props.style.width,
    zIndex: "3",
    display: "flex",
    flexWrap: "wrap",
    padding: "5px 2px",
    position: "sticky",
    bottom: "0px",
    alignItems: "center",
    justifyContent: "space-between",
    background: (props === null || props === void 0 ? void 0 : (_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.categoryBackground) || (theme === null || theme === void 0 ? void 0 : (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.getBackground())
  };
};

/**Child props style */
exports.emojiTabLsitStyle = emojiTabLsitStyle;
var getListStyle = function getListStyle(theme) {
  var _theme$palette4, _theme$palette5;
  return {
    iconWidth: "24px",
    iconHeight: "24px",
    cursor: "pointer",
    alignItems: "center",
    justifyContent: "center",
    iconTint: theme === null || theme === void 0 ? void 0 : (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.accent600[theme === null || theme === void 0 ? void 0 : (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.mode],
    background: "transparent"
  };
};
exports.getListStyle = getListStyle;
var listStyle = function listStyle(props, theme) {
  var _props$style3, _theme$palette6;
  var font = (0, _Shared.fontHelper)(theme.typography.heading);
  return {
    padding: "3px",
    display: "flex",
    cursor: "pointer",
    borderRadius: "3px",
    alignItems: "center",
    justifyContent: "center",
    textFont: font,
    background: ((_props$style3 = props.style) === null || _props$style3 === void 0 ? void 0 : _props$style3.background) || (theme === null || theme === void 0 ? void 0 : (_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.getBackground())
  };
};
exports.listStyle = listStyle;