cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
428 lines (427 loc) • 21.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.stickyButtonStyle = exports.stickyAttachmentStyle = exports.stickyAttachButtonStyle = exports.stickerKeyboardStyle = exports.stickerBtnStyle = exports.stickerBtnIconStyle = exports.sendButtonStyle = exports.sendBtnIconStyle = exports.reactionBtnStyle = exports.reactionBtnIconStyle = exports.popoverForCreatePollStyle = exports.messagePreviewStyle = exports.messageInputStyle = exports.inputStickyStyle = exports.inputInnerStyle = exports.filePickerStyle = exports.fileListStyle = exports.fileItemStyle = exports.fileInputStyle = exports.emojiKeyBoardStyle = exports.emojiButtonStyle = exports.emojiBtnIconStyle = exports.emojiBoardPopoverStyle = exports.createPollStyle = exports.composerInputStyle = exports.chatComposerStyle = exports.attchButtonIconStyle = exports.attachmentIconStyle = exports.actionSheetStyle = exports.actionSheetPopoverStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _Shared = require("../../Shared");
var _ = require("../");
var _MessagePreviewStyles = require("../CometChatMessagePreview/MessagePreviewStyles");
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 chatComposerStyle = function chatComposerStyle(style, theme) {
return {
width: style.width,
height: style.height,
bodrer: style.border,
background: style.background || theme.palette.getAccent50(),
order: "3",
flex: "none",
position: "relative",
boxSizing: "border-box",
zIndex: "1",
padding: "8px 16px"
};
};
exports.chatComposerStyle = chatComposerStyle;
var composerInputStyle = function composerInputStyle(style) {
return {
display: "flex",
minHeight: "72px",
flexDirection: "row",
alignItems: "flex-end",
boxSizing: "border-box",
width: style.width,
bodrer: style.border,
borderRadius: style.inputBorderRadius
};
};
exports.composerInputStyle = composerInputStyle;
var inputInnerStyle = function inputInnerStyle(style, theme) {
return {
outline: "none",
display: "flex",
flex: "1 1 auto",
minHeight: "72px",
flexDirection: "column",
boxSizing: "border-box",
width: style.width,
border: style.inputBorder,
background: style.inputBackground || theme.palette.getAccent50(),
borderRadius: style.inputBorderRadius
};
};
exports.inputInnerStyle = inputInnerStyle;
var messageInputStyle = function messageInputStyle(style, disabled, theme) {
var disabledState = disabled ? {
pointerEvents: "none",
opacity: "0.4"
} : {};
return _objectSpread(_objectSpread({
lineHeight: "20px",
padding: "16px",
width: "calc(100% - 32px)",
outline: "none",
overflowX: "hidden",
overflowY: "auto",
position: "relative",
whiteSpace: "pre-wrap",
wordWrap: "break-word",
zIndex: "1",
userSelect: "text",
background: "transparent",
borderRadius: "inherit",
boxSizing: "border-box"
}, disabledState), {}, {
height: style.height,
font: (style === null || style === void 0 ? void 0 : style.placeholderTextFont) || (0, _Shared.fontHelper)(theme.typography.subtitle1),
color: (style === null || style === void 0 ? void 0 : style.placeholderTextColor) || theme.palette.getAccent600()
});
};
exports.messageInputStyle = messageInputStyle;
var inputStickyStyle = function inputStickyStyle(disabled, attachments, theme) {
var disabledState = disabled ? {
pointerEvents: "none"
} : {};
var flexDirectionProp = attachments === null ? {
flexDirection: "row-reverse"
} : {};
return _objectSpread(_objectSpread({
padding: "8px 16px",
borderTop: "1px solid ".concat(theme.palette.getAccent50()),
display: "flex",
justifyContent: "space-between"
}, flexDirectionProp), disabledState);
};
exports.inputStickyStyle = inputStickyStyle;
var stickyAttachmentStyle = function stickyAttachmentStyle() {
return {
display: "flex",
width: "auto"
};
};
exports.stickyAttachmentStyle = stickyAttachmentStyle;
var attachmentIconStyle = function attachmentIconStyle() {
return {
margin: "auto 0",
width: "24px",
height: "20px",
cursor: "pointer"
};
};
exports.attachmentIconStyle = attachmentIconStyle;
var filePickerStyle = function filePickerStyle(state) {
var active = state.showFilePicker ? {
width: "calc(100% - 20px)",
opacity: "1"
} : {};
return _objectSpread({
width: "0",
borderRadius: "8px",
overflow: "hidden",
zIndex: "1",
opacity: "0",
transition: "width 0.5s linear"
}, active);
};
exports.filePickerStyle = filePickerStyle;
var fileListStyle = function fileListStyle() {
return {
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "0 0 0 16px"
};
};
exports.fileListStyle = fileListStyle;
var fileItemStyle = function fileItemStyle() {
return {
height: "24px",
cursor: "pointer",
display: "flex",
alignItems: "center",
margin: "0 16px 0 0",
justifyContent: "center"
};
};
exports.fileItemStyle = fileItemStyle;
var stickyAttachButtonStyle = function stickyAttachButtonStyle() {
return {
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
width: "24px"
};
};
exports.stickyAttachButtonStyle = stickyAttachButtonStyle;
var attchButtonIconStyle = function attchButtonIconStyle(style, attachmentIconURL, theme) {
return {
width: "24px",
height: "24px",
display: "inline-block",
WebkitMask: "url(".concat(attachmentIconURL, ") center center no-repeat"),
background: style.attachmentIconTint || theme.palette.getAccent500(),
zIndex: 4
};
};
exports.attchButtonIconStyle = attchButtonIconStyle;
var stickyButtonStyle = function stickyButtonStyle() {
return {
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
width: "auto"
};
};
exports.stickyButtonStyle = stickyButtonStyle;
var emojiButtonStyle = function emojiButtonStyle() {
return {
height: "24px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0 0 0 16px"
};
};
exports.emojiButtonStyle = emojiButtonStyle;
var emojiBtnIconStyle = function emojiBtnIconStyle(style, emojiIconURL, theme) {
return {
width: "24px",
height: "24px",
display: "inline-block",
zIndex: 4,
WebkitMask: "url(".concat(emojiIconURL, ") center center no-repeat"),
background: style.emojiIconTint || theme.palette.getAccent500()
};
};
exports.emojiBtnIconStyle = emojiBtnIconStyle;
var sendButtonStyle = function sendButtonStyle() {
return {
height: "24px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0 0 0 16px"
};
};
exports.sendButtonStyle = sendButtonStyle;
var sendBtnIconStyle = function sendBtnIconStyle(style, sendButtonIconURL, theme) {
return {
width: "24px",
height: "24px",
display: "inline-block",
WebkitMask: "url(".concat(sendButtonIconURL, ") center center no-repeat"),
background: style.sendButtonIconTint || theme.palette.getAccent400()
};
};
exports.sendBtnIconStyle = sendBtnIconStyle;
var reactionBtnStyle = function reactionBtnStyle() {
return {
cursor: "pointer",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0 0 0 16px",
zIndex: 4
};
};
exports.reactionBtnStyle = reactionBtnStyle;
var reactionBtnIconStyle = function reactionBtnIconStyle() {
return {
height: "20px",
width: "20px"
};
};
exports.reactionBtnIconStyle = reactionBtnIconStyle;
var stickerBtnStyle = function stickerBtnStyle() {
return {
cursor: "pointer",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0 0 0 16px"
};
};
exports.stickerBtnStyle = stickerBtnStyle;
var stickerBtnIconStyle = function stickerBtnIconStyle(style, stickerIcon, theme) {
return {
width: "24px",
height: "24px",
display: "inline-block",
WebkitMask: "url(".concat(stickerIcon, ") center center no-repeat"),
background: style.stickerIconTint || theme.palette.getAccent500()
};
};
exports.stickerBtnIconStyle = stickerBtnIconStyle;
var fileInputStyle = function fileInputStyle() {
return {
visibility: "hidden",
position: "absolute",
width: "0"
};
};
exports.fileInputStyle = fileInputStyle;
var stickerKeyboardStyle = function stickerKeyboardStyle(theme, stickerConfig) {
return _objectSpread({}, new _.StickerKeyboardStyles({
width: stickerConfig.style.width,
height: stickerConfig.style.height,
background: stickerConfig.style.background,
border: stickerConfig.style.border,
borderRadius: stickerConfig.style.borderRadius,
activeBackground: stickerConfig.style.activeBackground,
categoryBackground: stickerConfig.style.categoryBackground || theme.palette.getBackground(),
textFont: stickerConfig.style.textFont || (0, _Shared.fontHelper)(theme.typography.heading),
textColor: stickerConfig.style.textColor || theme.palette.getAccent400(),
emptyTextFont: stickerConfig.style.emptyTextFont || (0, _Shared.fontHelper)(theme.typography.text1),
emptyTextColor: stickerConfig.style.emptyTextColor || theme.palette.getAccent600(),
errorTextFont: stickerConfig.style.errorTextFont || (0, _Shared.fontHelper)(theme.typography.text1),
errorTextColor: stickerConfig.style.errorTextColor || theme.palette.getAccent600(),
loadingTextColor: stickerConfig.style.loadingTextColor || theme.palette.getAccent600(),
loadingTextFont: stickerConfig.style.Font || (0, _Shared.fontHelper)(theme.typography.text1)
}));
};
exports.stickerKeyboardStyle = stickerKeyboardStyle;
var emojiBoardPopoverStyle = function emojiBoardPopoverStyle(theme, emojiConfig) {
return _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
width: emojiConfig.style.width,
height: emojiConfig.style.height,
background: emojiConfig.style.background || theme.palette.getBackground(),
border: emojiConfig.style.border,
borderRadius: emojiConfig.style.borderRadius,
activeBackground: emojiConfig.style.activeBackground
})), {}, {
boxShadow: "0 0 32px ".concat(theme.palette.getAccent300())
});
};
exports.emojiBoardPopoverStyle = emojiBoardPopoverStyle;
var emojiKeyBoardStyle = function emojiKeyBoardStyle(theme, emojiConfig) {
var _theme$palette;
return _objectSpread({}, new _.EmojiKeyboardStyles({
width: "100%",
height: "100%",
background: "transparent",
border: "none",
borderRadius: emojiConfig.style.borderRadius,
activeBackground: "",
sectionHeaderFont: emojiConfig.style.sectionHeaderFont || (0, _Shared.fontHelper)(theme.typography.caption1),
sectionHeaderColor: emojiConfig.style.sectionHeaderColor || theme.palette.getAccent600(),
categoryIconTint: emojiConfig.style.categiryIconTint || theme.palette.getAccent600(),
selectedCategoryIconTint: emojiConfig.style.selectedCategoryIconTint || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getPrimary()),
categoryBackground: emojiConfig.style.background || theme.palette.getBackground()
}));
};
exports.emojiKeyBoardStyle = emojiKeyBoardStyle;
var messagePreviewStyle = function messagePreviewStyle(theme, messagePreviewConfig) {
var _theme$palette2;
return _objectSpread({}, new _MessagePreviewStyles.MessagePreviewStyles({
border: messagePreviewConfig.style.border || "3px solid ".concat(theme.palette.accent100[theme.palette.mode]),
background: messagePreviewConfig.style.background || theme.palette.background[theme.palette.mode],
borderRadius: messagePreviewConfig.style.borderRadius,
messagePreviewTitleFont: messagePreviewConfig.style.messagePreviewTitleFont || (0, _Shared.fontHelper)(theme.typography.caption1),
messagePreviewTitleColor: messagePreviewConfig.style.messagePreviewTitleColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.getAccent()),
messagePreviewSubtitleColor: messagePreviewConfig.style.messsagePreviewSubtitleColor || theme.palette.accent600[theme.palette.mode],
messagePreviewSubtitleFont: messagePreviewConfig.style.messagePreviewSubtitleFont || (0, _Shared.fontHelper)(theme.typography.subtitle2),
closeIconTint: messagePreviewConfig.style.closeIconTint || theme.palette.accent500[theme.palette.mode]
}));
};
exports.messagePreviewStyle = messagePreviewStyle;
var actionSheetPopoverStyle = function actionSheetPopoverStyle(theme) {
return _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
width: "295px",
height: "350px",
background: theme.palette.getBackground(),
border: "none",
borderRadius: "8px",
activeBackground: theme.palette.getPrimary()
})), {}, {
boxShadow: "0 0 32px ".concat(theme.palette.getAccent300()),
position: "relative"
});
};
exports.actionSheetPopoverStyle = actionSheetPopoverStyle;
var actionSheetStyle = function actionSheetStyle(theme) {
return _objectSpread({}, new _Shared.ActionSheetStyles({
width: "100%",
height: "100%",
background: "transparent",
border: "none",
borderRadius: "8px",
activeBackground: "",
titleColor: theme.palette.getAccent(),
titleFont: (0, _Shared.fontHelper)(theme.typography.title2),
layoutModeIconTint: theme.palette.getAccent100()
}));
};
exports.actionSheetStyle = actionSheetStyle;
var createPollStyle = function createPollStyle(theme, createPollConfig) {
var _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10;
return _objectSpread({
position: "fixed"
}, new _.CreatePollStyles({
width: "100%",
height: "100%",
background: "transparent",
border: "none",
borderRadius: createPollConfig.style.borderRadius,
activeBackground: "",
boxShadow: createPollConfig.style.boxShadow || "".concat(theme.palette.getAccent50(), " 0 16px 32px, ").concat(theme.palette.getAccent50(), " 0 0 0 1px"),
titleFont: createPollConfig.style.titleFont || (0, _Shared.fontHelper)(theme.typography.heading),
titleColor: createPollConfig.style.titleColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.getAccent()),
closeIconTint: createPollConfig.style.closeIconTint || (theme === null || theme === void 0 ? void 0 : (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.getPrimary()),
errorTextFont: createPollConfig.style.errorTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle2),
errorTextColor: createPollConfig.style.errorTextColor || theme.palette.getError(),
questionInputBorder: createPollConfig.style.questionInputBorder || "1px solid ".concat(theme.palette.getAccent50()),
questionInputBorderRadius: createPollConfig.style.questionInputBorderRadius,
questionInputBoxShadow: createPollConfig.style.questionInputBoxShadow || "".concat(theme.palette.getAccent50(), " 0 0 0 1px"),
questionInputBackground: createPollConfig.style.questionInputBackground || theme.palette.getAccent50(),
questionPlaceholderTextFont: createPollConfig.style.questionPlaceholderTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
questionPlaceholderTextColor: createPollConfig.style.questionPlaceholderTextColor || theme.palette.getAccent600(),
questionInputTextFont: createPollConfig.style.questionInputTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
questionInputTextColor: createPollConfig.style.questionInputTextColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.getAccent()),
answerHelpTextFont: createPollConfig.style.answerHelpTextFont || (0, _Shared.fontHelper)(theme.typography.caption1),
answerHelpTextColor: createPollConfig.style.answerHelpTextColor || theme.palette.getAccent500(),
answerInputBoxShadow: createPollConfig.style.answerInputBoxShadow || "".concat(theme.palette.getAccent50(), " 0 0 0 1px"),
answerInputBackground: createPollConfig.style.answerInputBackground || theme.palette.getAccent50(),
answerInputTextFont: createPollConfig.style.answerInputTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
answerInputTextColor: createPollConfig.style.answerInputTextColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.getAccent()),
answerInputBorder: createPollConfig.style.answerInputBorder || "1px solid ".concat(theme.palette.getAccent50()),
answerInputBorderRadius: createPollConfig.style.answerInputBorderRadius,
answerPlaceholderTextFont: createPollConfig.style.answerPlaceholderTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
answerPlaceholderTextColor: createPollConfig.style.answerPlaceholderTextColor || theme.palette.getAccent600(),
addAnswerButtonTextColor: createPollConfig.style.addAnswerButtonTextColor || (theme === null || theme === void 0 ? void 0 : (_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.getPrimary()),
addAnswerButtonTextFont: createPollConfig.style.addAnswerButtonTextFont || (0, _Shared.fontHelper)(theme.typography.text1),
addAnswerIconTint: createPollConfig.style.addAnswerIconTint || (theme === null || theme === void 0 ? void 0 : (_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.getPrimary()),
createPollButtonBorder: createPollConfig.style.createPollButtonBorder || "1px solid ".concat(theme === null || theme === void 0 ? void 0 : (_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.getPrimary()),
createPollButtonBorderRadius: createPollConfig.style.createPollButtonBorderRadius,
createPollButtonBackground: createPollConfig.style.createPollButtonBackground || (theme === null || theme === void 0 ? void 0 : (_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.getPrimary()),
createPollButtonTextFont: createPollConfig.style.createPollButtonTextFont || (0, _Shared.fontHelper)(theme.typography.subtitle1),
createPollButtonTextColor: createPollConfig.style.createPollButtonTextColor || theme.palette.getBackground()
}));
};
exports.createPollStyle = createPollStyle;
var popoverForCreatePollStyle = function popoverForCreatePollStyle(theme, createPollConfig) {
var _createPollConfig$sty, _createPollConfig$sty2, _theme$palette11, _createPollConfig$sty3, _theme$palette12, _createPollConfig$sty4, _theme$palette13;
return _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
width: createPollConfig === null || createPollConfig === void 0 ? void 0 : (_createPollConfig$sty = createPollConfig.style) === null || _createPollConfig$sty === void 0 ? void 0 : _createPollConfig$sty.width,
height: createPollConfig === null || createPollConfig === void 0 ? void 0 : (_createPollConfig$sty2 = createPollConfig.style) === null || _createPollConfig$sty2 === void 0 ? void 0 : _createPollConfig$sty2.height,
background: createPollConfig.style.background || (theme === null || theme === void 0 ? void 0 : (_theme$palette11 = theme.palette) === null || _theme$palette11 === void 0 ? void 0 : _theme$palette11.getBackground()),
border: (createPollConfig === null || createPollConfig === void 0 ? void 0 : (_createPollConfig$sty3 = createPollConfig.style) === null || _createPollConfig$sty3 === void 0 ? void 0 : _createPollConfig$sty3.border) || "1px solid ".concat(theme === null || theme === void 0 ? void 0 : (_theme$palette12 = theme.palette) === null || _theme$palette12 === void 0 ? void 0 : _theme$palette12.getAccent50()),
borderRadius: createPollConfig === null || createPollConfig === void 0 ? void 0 : (_createPollConfig$sty4 = createPollConfig.style) === null || _createPollConfig$sty4 === void 0 ? void 0 : _createPollConfig$sty4.borderRadius,
activeBackground: ""
})), {}, {
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)",
boxShadow: "0 0 32px ".concat(theme === null || theme === void 0 ? void 0 : (_theme$palette13 = theme.palette) === null || _theme$palette13 === void 0 ? void 0 : _theme$palette13.getAccent300())
});
};
exports.popoverForCreatePollStyle = popoverForCreatePollStyle;