cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
227 lines (226 loc) • 14.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.smartReplyStyle = exports.messageIndicatorStyle = exports.messageDateStyle = exports.messageDateContainerStyle = exports.messageBubbleStyle = exports.listWrapperStyle = exports.emojiKeyBoardStyle = exports.emojiBoardToolTipStyle = exports.decoratorMsgTxtStyle = exports.decoratorMsgStyle = exports.decoratorMsgImgStyle = exports.chatListStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ = require("..");
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 chatListStyle = function chatListStyle(style, theme) {
var _theme$palette, _theme$palette2;
return _objectSpread({
background: 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]),
width: style === null || style === void 0 ? void 0 : style.width,
height: style === null || style === void 0 ? void 0 : style.height,
flex: "1 1 0",
order: "2",
position: "relative"
}, theme === null || theme === void 0 ? void 0 : theme.globalStyles);
};
exports.chatListStyle = chatListStyle;
var listWrapperStyle = function listWrapperStyle(style, theme) {
var _theme$palette3, _theme$palette4;
return {
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
height: style.height,
position: "absolute",
top: "0",
transition: "background .3s ease-out .1s",
width: style.width,
zIndex: "1",
paddingTop: "16px",
border: style.border,
overflowX: "hidden",
overflowY: "scroll",
background: style.background || (theme === null || theme === void 0 ? void 0 : (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.background[theme === null || theme === void 0 ? void 0 : (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.mode])
};
};
exports.listWrapperStyle = listWrapperStyle;
var messageDateContainerStyle = function messageDateContainerStyle() {
return {
margin: "16px 0",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
};
exports.messageDateContainerStyle = messageDateContainerStyle;
var messageDateStyle = function messageDateStyle(theme) {
var _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8;
return {
padding: "8px 12px",
backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.accent100[theme === null || theme === void 0 ? void 0 : (_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.mode],
color: theme === null || theme === void 0 ? void 0 : (_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.accent[theme === null || theme === void 0 ? void 0 : (_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.mode],
borderRadius: "10px"
};
};
exports.messageDateStyle = messageDateStyle;
var decoratorMsgStyle = function decoratorMsgStyle(style) {
return {
overflow: "hidden",
width: style.width,
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: "50%"
};
};
exports.decoratorMsgStyle = decoratorMsgStyle;
var emojiKeyBoardStyle = function emojiKeyBoardStyle(theme) {
var _theme$palette9, _theme$palette10, _theme$typography, _theme$palette11, _theme$palette12, _theme$palette13, _theme$palette14, _theme$palette15, _theme$palette16;
return {
width: "100%",
height: "320px",
border: "none",
background: theme === null || theme === void 0 ? void 0 : (_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.background[theme === null || theme === void 0 ? void 0 : (_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.mode],
borderRadius: "10px",
sectionHeaderFont: (0, _Shared.fontHelper)(theme === null || theme === void 0 ? void 0 : (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.caption1),
sectionHeaderColor: theme === null || theme === void 0 ? void 0 : (_theme$palette11 = theme.palette) === null || _theme$palette11 === void 0 ? void 0 : _theme$palette11.accent600[theme === null || theme === void 0 ? void 0 : (_theme$palette12 = theme.palette) === null || _theme$palette12 === void 0 ? void 0 : _theme$palette12.mode],
categoryIconTint: theme === null || theme === void 0 ? void 0 : (_theme$palette13 = theme.palette) === null || _theme$palette13 === void 0 ? void 0 : _theme$palette13.accent600[theme === null || theme === void 0 ? void 0 : (_theme$palette14 = theme.palette) === null || _theme$palette14 === void 0 ? void 0 : _theme$palette14.mode],
selectedCategoryIconTint: theme === null || theme === void 0 ? void 0 : (_theme$palette15 = theme.palette) === null || _theme$palette15 === void 0 ? void 0 : _theme$palette15.primary[theme === null || theme === void 0 ? void 0 : (_theme$palette16 = theme.palette) === null || _theme$palette16 === void 0 ? void 0 : _theme$palette16.mode]
};
};
exports.emojiKeyBoardStyle = emojiKeyBoardStyle;
var emojiBoardToolTipStyle = function emojiBoardToolTipStyle(theme) {
var _theme$palette17, _theme$palette18, _theme$palette19, _theme$palette20;
return {
border: "none",
background: theme === null || theme === void 0 ? void 0 : (_theme$palette17 = theme.palette) === null || _theme$palette17 === void 0 ? void 0 : _theme$palette17.background[theme === null || theme === void 0 ? void 0 : (_theme$palette18 = theme.palette) === null || _theme$palette18 === void 0 ? void 0 : _theme$palette18.mode],
borderRadius: "8px",
width: "315px",
height: "320px",
boxShadow: "0 0 32px ".concat(theme === null || theme === void 0 ? void 0 : (_theme$palette19 = theme.palette) === null || _theme$palette19 === void 0 ? void 0 : _theme$palette19.accent300[theme === null || theme === void 0 ? void 0 : (_theme$palette20 = theme.palette) === null || _theme$palette20 === void 0 ? void 0 : _theme$palette20.mode])
};
};
exports.emojiBoardToolTipStyle = emojiBoardToolTipStyle;
var decoratorMsgTxtStyle = function decoratorMsgTxtStyle(style, fontHelper, theme, decoratorMessage, localize) {
var _theme$palette21, _theme$palette22, _theme$typography2;
var color = {
color: theme === null || theme === void 0 ? void 0 : (_theme$palette21 = theme.palette) === null || _theme$palette21 === void 0 ? void 0 : _theme$palette21.accent400[theme === null || theme === void 0 ? void 0 : (_theme$palette22 = theme.palette) === null || _theme$palette22 === void 0 ? void 0 : _theme$palette22.mode]
};
var font = {
font: fontHelper(theme === null || theme === void 0 ? void 0 : (_theme$typography2 = theme.typography) === null || _theme$typography2 === void 0 ? void 0 : _theme$typography2.heading)
};
if ((decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === localize("no_messages_found")) {
if (style !== null && style !== void 0 && style.emptyTextColor) {
color = {
color: style === null || style === void 0 ? void 0 : style.emptyTextColor
};
}
if (style !== null && style !== void 0 && style.emptyTextFont) {
font = {
font: style === null || style === void 0 ? void 0 : style.emptyTextFont
};
}
} else if ((decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === localize("something_wrong")) {
if (style !== null && style !== void 0 && style.errorTextColor) {
color = {
color: style === null || style === void 0 ? void 0 : style.errorTextColor
};
}
if (style !== null && style !== void 0 && style.errorTextFont) {
font = {
font: style === null || style === void 0 ? void 0 : style.errorTextFont
};
}
}
return _objectSpread(_objectSpread(_objectSpread({
display: "flex",
justifyContent: "center",
margin: "0",
minHeight: "36px"
}, color), font), {}, {
wordWrap: "break-word",
padding: "0 16px",
width: "calc(100% - 32px)"
});
};
exports.decoratorMsgTxtStyle = decoratorMsgTxtStyle;
var decoratorMsgImgStyle = function decoratorMsgImgStyle(style, loadingIconURL, theme) {
var _theme$palette23, _theme$palette24;
var background = {
background: theme === null || theme === void 0 ? void 0 : (_theme$palette23 = theme.palette) === null || _theme$palette23 === void 0 ? void 0 : _theme$palette23.accent600[theme === null || theme === void 0 ? void 0 : (_theme$palette24 = theme.palette) === null || _theme$palette24 === void 0 ? void 0 : _theme$palette24.mode]
};
if (style !== null && style !== void 0 && style.loadingIconTint) {
background = {
background: style === null || style === void 0 ? void 0 : style.loadingIconTint
};
}
return _objectSpread(_objectSpread({
WebkitMask: "url(".concat(loadingIconURL, ") center center no-repeat")
}, background), {}, {
margin: "0",
height: "36px",
wordWrap: "break-word",
padding: "0 16px",
width: "calc(100% - 32px)"
});
};
exports.decoratorMsgImgStyle = decoratorMsgImgStyle;
var messageBubbleStyle = function messageBubbleStyle(alignment, loggedInUser, messageObject) {
var _messageObject$sender;
var flexAlignment = {
alignSelf: "flex-start"
};
var userNameAlignment = {
textAlign: "left"
};
var justifyContent = {
justifyContent: "flex-start"
};
if (alignment === (_.messageAlignment === null || _.messageAlignment === void 0 ? void 0 : _.messageAlignment.standard) && (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)) {
flexAlignment = {
alignSelf: "flex-end"
};
userNameAlignment = {
textAlign: "right"
};
justifyContent = {
justifyContent: "flex-end"
};
}
return _objectSpread(_objectSpread({
width: "auto",
maxWidth: "65%",
height: "auto",
userSelect: "text",
marginBottom: "8px"
}, flexAlignment), {}, {
".message_kit__sender": _objectSpread({}, userNameAlignment),
".message_kit__username_bar": _objectSpread({}, justifyContent)
});
};
exports.messageBubbleStyle = messageBubbleStyle;
var smartReplyStyle = function smartReplyStyle(theme) {
var _theme$palette25, _theme$palette26, _theme$typography3, _theme$palette27, _theme$palette28, _theme$palette29, _theme$palette30, _theme$palette31, _theme$palette32;
return {
padding: "8px 8px 16px 8px",
marginBottom: "-8px",
background: theme === null || theme === void 0 ? void 0 : (_theme$palette25 = theme.palette) === null || _theme$palette25 === void 0 ? void 0 : _theme$palette25.background[theme === null || theme === void 0 ? void 0 : (_theme$palette26 = theme.palette) === null || _theme$palette26 === void 0 ? void 0 : _theme$palette26.mode],
textFont: (0, _Shared.fontHelper)(theme === null || theme === void 0 ? void 0 : (_theme$typography3 = theme.typography) === null || _theme$typography3 === void 0 ? void 0 : _theme$typography3.subtitle2),
textBackground: theme === null || theme === void 0 ? void 0 : (_theme$palette27 = theme.palette) === null || _theme$palette27 === void 0 ? void 0 : _theme$palette27.accent900[theme === null || theme === void 0 ? void 0 : (_theme$palette28 = theme.palette) === null || _theme$palette28 === void 0 ? void 0 : _theme$palette28.mode],
textColor: theme === null || theme === void 0 ? void 0 : (_theme$palette29 = theme.palette) === null || _theme$palette29 === void 0 ? void 0 : _theme$palette29.accent[theme === null || theme === void 0 ? void 0 : (_theme$palette30 = theme.palette) === null || _theme$palette30 === void 0 ? void 0 : _theme$palette30.mode],
iconTint: theme === null || theme === void 0 ? void 0 : (_theme$palette31 = theme.palette) === null || _theme$palette31 === void 0 ? void 0 : _theme$palette31.accent600[theme === null || theme === void 0 ? void 0 : (_theme$palette32 = theme.palette) === null || _theme$palette32 === void 0 ? void 0 : _theme$palette32.mode],
display: "flex",
flexDirection: "row-reverse",
justifyContent: "space-between",
border: "1px solid #eaeaea"
};
};
exports.smartReplyStyle = smartReplyStyle;
var messageIndicatorStyle = function messageIndicatorStyle(_theme) {
return {
textFont: (0, _Shared.fontHelper)(_theme.typography.subtitle2),
textColor: _theme.palette.background[_theme.palette.mode],
border: "0",
borderRadius: "8px",
background: _theme.palette.primary[_theme.palette.mode]
};
};
exports.messageIndicatorStyle = messageIndicatorStyle;