cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
463 lines (449 loc) • 41.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatConversationListItem = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../../../");
var _Chats = require("../../../Chats");
var _CometChatGroupConstants = require("../../../Groups/CometChatGroupConstants");
var _Shared = require("../../../Shared/");
var _passwordIcon = _interopRequireDefault(require("./resources/passwordIcon.svg"));
var _privateIcon = _interopRequireDefault(require("./resources/privateIcon.svg"));
var styles = _interopRequireWildcard(require("./style"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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; }
/**
*
* @version 1.0.0
* @author CometChatTeam
* @description CometChatConversationsListItem is comprised of title, subtitle, avatar, badgecount and more.
* with additonal CometChat SDK conversation object.
*
*/
var ConversationListItem = function ConversationListItem(props) {
/**
* Props destructuring
*/
var isActive = props.isActive,
conversationObject = props.conversationObject,
conversationInputData = props.conversationInputData,
style = props.style,
showTypingIndicator = props.showTypingIndicator,
typingIndicatorText = props.typingIndicatorText,
hideThreadIndicator = props.hideThreadIndicator,
threadIndicatorText = props.threadIndicatorText,
hideGroupActions = props.hideGroupActions,
hideDeletedMessages = props.hideDeletedMessages,
conversationOptions = props.conversationOptions,
avatarConfiguration = props.avatarConfiguration,
statusIndicatorConfiguration = props.statusIndicatorConfiguration,
badgeCountConfiguration = props.badgeCountConfiguration,
messageReceiptConfiguration = props.messageReceiptConfiguration,
dateConfiguration = props.dateConfiguration,
theme = props.theme;
/**
* Component internal state
*/
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isHovering = _useState2[0],
setIsHovering = _useState2[1];
/**
* Component private scoping
*/
var _avatarConfiguration = new _.AvatarConfiguration(avatarConfiguration !== null && avatarConfiguration !== void 0 ? avatarConfiguration : {});
var _statusIndicatorConfiguration = new _.StatusIndicatorConfiguration(statusIndicatorConfiguration !== null && statusIndicatorConfiguration !== void 0 ? statusIndicatorConfiguration : {});
var _badgeCountConfiguration = new _.BadgeCountConfiguration(badgeCountConfiguration !== null && badgeCountConfiguration !== void 0 ? badgeCountConfiguration : {});
var _messageReceiptConfiguration = new _.MessageReceiptConfiguration(messageReceiptConfiguration !== null && messageReceiptConfiguration !== void 0 ? messageReceiptConfiguration : {});
var _dateConfiguration = new _.DateConfiguration(dateConfiguration !== null && dateConfiguration !== void 0 ? dateConfiguration : {});
var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
var _isActive = isHovering || isActive;
/**
* Component internal handlers/methods
*/
var toggleConversationOptions = function toggleConversationOptions() {
setIsHovering(!isHovering);
};
var showToolTip = function showToolTip(event) {
var elem = event.target;
var scrollWidth = elem.scrollWidth;
var clientWidth = elem.clientWidth;
if (scrollWidth <= clientWidth) {
return false;
}
elem.setAttribute("title", elem.textContent);
};
var hideToolTip = function hideToolTip(event) {
var elem = event.target;
var scrollWidth = elem.scrollWidth;
var clientWidth = elem.clientWidth;
if (scrollWidth <= clientWidth) {
return false;
}
elem.removeAttribute("title");
};
var clickHandler = function clickHandler() {
_.CometChatConversationEvents.emit(_.CometChatConversationEvents.onItemClick, conversationObject);
};
var getId = function getId() {
return conversationInputData.id && conversationObject.conversationId ? conversationObject.conversationId : "";
};
/**
* Calculate input data for child component
*/
if (conversationInputData && !conversationInputData.subtitle()) {
conversationInputData.subtitle = function (conversation) {
var _conversation$lastMes, _conversation$lastMes2;
if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes = conversation.lastMessage) === null || _conversation$lastMes === void 0 ? void 0 : _conversation$lastMes.receiverType) === _.ReceiverTypeConstants.user || (conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes2 = conversation.lastMessage) === null || _conversation$lastMes2 === void 0 ? void 0 : _conversation$lastMes2.receiverType) === _.ReceiverTypeConstants.group) {
var _conversation$lastMes3, _conversation$lastMes5, _conversation$lastMes6, _conversation$lastMes7, _conversation$lastMes8, _conversation$lastMes9, _conversation$lastMes10, _conversation$lastMes11, _conversation$lastMes12, _conversation$lastMes13;
if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes3 = conversation.lastMessage) === null || _conversation$lastMes3 === void 0 ? void 0 : _conversation$lastMes3.type) === _.MessageTypeConstants.text) {
var _conversation$lastMes4;
return conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes4 = conversation.lastMessage) === null || _conversation$lastMes4 === void 0 ? void 0 : _conversation$lastMes4.text;
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes5 = conversation.lastMessage) === null || _conversation$lastMes5 === void 0 ? void 0 : _conversation$lastMes5.type) === _.MessageTypeConstants.image) {
return (0, _.localize)("MESSAGE_IMAGE");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes6 = conversation.lastMessage) === null || _conversation$lastMes6 === void 0 ? void 0 : _conversation$lastMes6.type) === _.MessageTypeConstants.poll) {
return (0, _.localize)("CUSTOM_MESSAGE_POLL");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes7 = conversation.lastMessage) === null || _conversation$lastMes7 === void 0 ? void 0 : _conversation$lastMes7.type) === _.MessageTypeConstants.file) {
return (0, _.localize)("MESSAGE_FILE");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes8 = conversation.lastMessage) === null || _conversation$lastMes8 === void 0 ? void 0 : _conversation$lastMes8.type) === _.MessageTypeConstants.video) {
return (0, _.localize)("MESSAGE_VIDEO");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes9 = conversation.lastMessage) === null || _conversation$lastMes9 === void 0 ? void 0 : _conversation$lastMes9.type) === _.MessageTypeConstants.audio) {
return (0, _.localize)("MESSAGE_AUDIO");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes10 = conversation.lastMessage) === null || _conversation$lastMes10 === void 0 ? void 0 : _conversation$lastMes10.type) === _.MessageTypeConstants.whiteboard) {
return (0, _.localize)("CUSTOM_MESSAGE_WHITEBOARD");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes11 = conversation.lastMessage) === null || _conversation$lastMes11 === void 0 ? void 0 : _conversation$lastMes11.type) === _.MessageTypeConstants.sticker) {
return (0, _.localize)("CUSTOM_MESSAGE_STICKER");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes12 = conversation.lastMessage) === null || _conversation$lastMes12 === void 0 ? void 0 : _conversation$lastMes12.type) === _.MessageTypeConstants.document) {
return (0, _.localize)("CUSTOM_MESSAGE_DOCUMENT");
} else if ((conversation === null || conversation === void 0 ? void 0 : (_conversation$lastMes13 = conversation.lastMessage) === null || _conversation$lastMes13 === void 0 ? void 0 : _conversation$lastMes13.category) === _.MessageCategoryConstants.action && hideGroupActions === false) {
//TODO: what if actionMessages are set to true
return "";
}
} else if (!(conversation !== null && conversation !== void 0 && conversation.lastMessage)) {
return (0, _.localize)("NO_MESSAGES_FOUND");
}
};
}
/**
* Component template scoping
*/
var getAvatar = function getAvatar() {
var _avatarConfiguration$, _theme$palette, _avatarConfiguration$2, _avatarConfiguration$3, _avatarConfiguration$4, _avatarConfiguration$5, _avatarConfiguration$6, _avatarConfiguration$7, _theme$palette2, _avatarConfiguration$8, _theme$typography, _theme$palette3, _avatarConfiguration$9, _avatarConfiguration$10, _avatarConfiguration$11, _theme$palette4;
var outerViewWidth = _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$ = _avatarConfiguration.style) === null || _avatarConfiguration$ === void 0 ? void 0 : _avatarConfiguration$.outerViewWidth;
var outerView = "".concat(outerViewWidth, " solid ").concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette = _theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getPrimary());
var borderWidth = _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$2 = _avatarConfiguration.style) === null || _avatarConfiguration$2 === void 0 ? void 0 : _avatarConfiguration$2.borderWidth;
var avatarStyle = new _Shared.AvatarStyles({
width: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$3 = _avatarConfiguration.style) === null || _avatarConfiguration$3 === void 0 ? void 0 : _avatarConfiguration$3.width,
height: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$4 = _avatarConfiguration.style) === null || _avatarConfiguration$4 === void 0 ? void 0 : _avatarConfiguration$4.height,
outerViewSpacing: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$5 = _avatarConfiguration.style) === null || _avatarConfiguration$5 === void 0 ? void 0 : _avatarConfiguration$5.outerViewSpacing,
outerView: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$6 = _avatarConfiguration.style) === null || _avatarConfiguration$6 === void 0 ? void 0 : _avatarConfiguration$6.outerView) || outerView,
textColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$7 = _avatarConfiguration.style) === null || _avatarConfiguration$7 === void 0 ? void 0 : _avatarConfiguration$7.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette2 = _theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.getAccent900()),
textFont: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$8 = _avatarConfiguration.style) === null || _avatarConfiguration$8 === void 0 ? void 0 : _avatarConfiguration$8.textFont) || (0, _.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography = _theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.name),
border: "".concat(borderWidth, " solid ").concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette3 = _theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.getAccent600()),
borderRadius: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$9 = _avatarConfiguration.style) === null || _avatarConfiguration$9 === void 0 ? void 0 : _avatarConfiguration$9.borderRadius,
backgroundSize: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$10 = _avatarConfiguration.style) === null || _avatarConfiguration$10 === void 0 ? void 0 : _avatarConfiguration$10.backgroundSize,
backgroundColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$11 = _avatarConfiguration.style) === null || _avatarConfiguration$11 === void 0 ? void 0 : _avatarConfiguration$11.backgroundColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette4 = _theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.getAccent600())
});
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.thumbnail) {
if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationType && (conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.conversationType) === (_.ReceiverTypeConstants === null || _.ReceiverTypeConstants === void 0 ? void 0 : _.ReceiverTypeConstants.user)) {
var _conversationObject$c, _conversationObject$c3;
if (conversationObject !== null && conversationObject !== void 0 && (_conversationObject$c = conversationObject.conversationWith) !== null && _conversationObject$c !== void 0 && _conversationObject$c.avatar) {
var _conversationObject$c2;
return /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
image: conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c2 = conversationObject.conversationWith) === null || _conversationObject$c2 === void 0 ? void 0 : _conversationObject$c2.avatar,
style: avatarStyle
});
} else if (conversationObject !== null && conversationObject !== void 0 && (_conversationObject$c3 = conversationObject.conversationWith) !== null && _conversationObject$c3 !== void 0 && _conversationObject$c3.name) {
var _conversationObject$c4;
return /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
name: conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c4 = conversationObject.conversationWith) === null || _conversationObject$c4 === void 0 ? void 0 : _conversationObject$c4.name,
style: avatarStyle
});
}
} else if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationType && (conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.conversationType) === (_.ReceiverTypeConstants === null || _.ReceiverTypeConstants === void 0 ? void 0 : _.ReceiverTypeConstants.group)) {
var _conversationObject$c6;
if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationWith.icon) {
var _conversationObject$c5;
return /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
image: conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c5 = conversationObject.conversationWith) === null || _conversationObject$c5 === void 0 ? void 0 : _conversationObject$c5.icon,
style: avatarStyle
});
} else if (conversationObject !== null && conversationObject !== void 0 && (_conversationObject$c6 = conversationObject.conversationWith) !== null && _conversationObject$c6 !== void 0 && _conversationObject$c6.name) {
var _conversationObject$c7;
return /*#__PURE__*/_react["default"].createElement(_.CometChatAvatar, {
name: conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c7 = conversationObject.conversationWith) === null || _conversationObject$c7 === void 0 ? void 0 : _conversationObject$c7.name,
style: avatarStyle
});
}
}
}
};
var getPresence = function getPresence() {
var _statusIndicatorConfi, _statusIndicatorConfi2, _statusIndicatorConfi3, _theme$palette5, _statusIndicatorConfi4, _conversationObject$c10;
var presence;
var statusIndicatorStyles = new _Shared.StatusIndicatorStyles({
width: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi === void 0 ? void 0 : _statusIndicatorConfi.width,
height: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi2 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi2 === void 0 ? void 0 : _statusIndicatorConfi2.height,
border: (_statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi3 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi3 === void 0 ? void 0 : _statusIndicatorConfi3.border) || "2px solid ".concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette5 = _theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.getBackground()),
borderRadius: _statusIndicatorConfiguration === null || _statusIndicatorConfiguration === void 0 ? void 0 : (_statusIndicatorConfi4 = _statusIndicatorConfiguration.style) === null || _statusIndicatorConfi4 === void 0 ? void 0 : _statusIndicatorConfi4.borderRadius
});
if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationType && (conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.conversationType) === (_.ReceiverTypeConstants === null || _.ReceiverTypeConstants === void 0 ? void 0 : _.ReceiverTypeConstants.group)) {
var _conversationObject$c8, _conversationObject$c9;
if ((conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c8 = conversationObject.conversationWith) === null || _conversationObject$c8 === void 0 ? void 0 : _conversationObject$c8.type) === (_.GroupTypeConstants === null || _.GroupTypeConstants === void 0 ? void 0 : _.GroupTypeConstants["private"])) {
presence = /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
backgroundImage: _privateIcon["default"],
style: _objectSpread(_objectSpread({}, statusIndicatorStyles), {}, {
backgroundColor: _CometChatGroupConstants.groupTypeColorCode === null || _CometChatGroupConstants.groupTypeColorCode === void 0 ? void 0 : _CometChatGroupConstants.groupTypeColorCode["private"]
})
});
} else if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationWith && (conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c9 = conversationObject.conversationWith) === null || _conversationObject$c9 === void 0 ? void 0 : _conversationObject$c9.type) === (_.GroupTypeConstants === null || _.GroupTypeConstants === void 0 ? void 0 : _.GroupTypeConstants.password)) {
presence = /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
backgroundImage: _passwordIcon["default"],
style: _objectSpread(_objectSpread({}, statusIndicatorStyles), {}, {
backgroundColor: _CometChatGroupConstants.groupTypeColorCode === null || _CometChatGroupConstants.groupTypeColorCode === void 0 ? void 0 : _CometChatGroupConstants.groupTypeColorCode.password
})
});
}
} else if (conversationObject !== null && conversationObject !== void 0 && conversationObject.conversationType && (conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.conversationType) === (_.ReceiverTypeConstants === null || _.ReceiverTypeConstants === void 0 ? void 0 : _.ReceiverTypeConstants.user) && (conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c10 = conversationObject.conversationWith) === null || _conversationObject$c10 === void 0 ? void 0 : _conversationObject$c10.status) === _.UserStatusConstants.online) {
var _theme$palette6;
presence = /*#__PURE__*/_react["default"].createElement(_.CometChatStatusIndicator, {
style: _objectSpread(_objectSpread({}, statusIndicatorStyles), {}, {
backgroundColor: _theme === null || _theme === void 0 ? void 0 : (_theme$palette6 = _theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.getSuccess()
})
});
}
return presence;
};
var getTime = function getTime() {
var _dateConfiguration$st, _theme$palette7, _theme$palette8, _dateConfiguration$st2, _theme$typography2, _conversationObject$l;
var pattern = (_dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.pattern) || "dayDateTimeFormat";
var customPattern = _dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.customPattern;
var dateStyle = new _Shared.DateStyles(_objectSpread(_objectSpread({}, _dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.style), {}, {
textColor: (_dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : (_dateConfiguration$st = _dateConfiguration.style) === null || _dateConfiguration$st === void 0 ? void 0 : _dateConfiguration$st.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette7 = _theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.accent500[_theme === null || _theme === void 0 ? void 0 : (_theme$palette8 = _theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.mode]),
textFont: (_dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : (_dateConfiguration$st2 = _dateConfiguration.style) === null || _dateConfiguration$st2 === void 0 ? void 0 : _dateConfiguration$st2.textFont) || (0, _.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography2 = _theme.typography) === null || _theme$typography2 === void 0 ? void 0 : _theme$typography2.caption2)
}));
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.timestamp && conversationObject !== null && conversationObject !== void 0 && (_conversationObject$l = conversationObject.lastMessage) !== null && _conversationObject$l !== void 0 && _conversationObject$l.updatedAt) {
var _conversationObject$l2;
return /*#__PURE__*/_react["default"].createElement(_.CometChatDate, {
timestamp: conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$l2 = conversationObject.lastMessage) === null || _conversationObject$l2 === void 0 ? void 0 : _conversationObject$l2.updatedAt,
pattern: pattern,
customPattern: customPattern,
style: dateStyle
});
}
return null;
};
var getTypingIndicator = function getTypingIndicator() {
if (showTypingIndicator && typingIndicatorText !== null && typingIndicatorText !== void 0 && typingIndicatorText.trim().length) {
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.typingTextStyle(style),
className: "item__typingtext"
}, typingIndicatorText.trim());
} else return null;
};
var getTitle = function getTitle() {
var _conversationObject$c11;
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.title && conversationObject !== null && conversationObject !== void 0 && (_conversationObject$c11 = conversationObject.conversationWith) !== null && _conversationObject$c11 !== void 0 && _conversationObject$c11.name) {
var _conversationObject$c12;
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.titleStyle(style),
className: "item__innerTitle",
onMouseEnter: showToolTip,
onMouseLeave: hideToolTip
}, conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$c12 = conversationObject.conversationWith) === null || _conversationObject$c12 === void 0 ? void 0 : _conversationObject$c12.name);
} else return null;
};
var getSubtitle = function getSubtitle() {
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.subtitle) {
var _conversationInputDat;
//TODO: This condition is not required, what if they start a conversation and leave without sending a message
// if (
// conversationObject &&
// conversationObject?.lastMessage &&
// (
// conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user ||
// conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.group
// )
// ) {
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.subTitleStyle(style),
className: "subtitle__text",
onMouseEnter: showToolTip,
onMouseLeave: hideToolTip
}, (_conversationInputDat = conversationInputData === null || conversationInputData === void 0 ? void 0 : conversationInputData.subtitle(conversationObject, props)) !== null && _conversationInputDat !== void 0 ? _conversationInputDat : (0, _.localize)('EMPTY_CHAT'));
// }
}
};
var getUnreadCount = function getUnreadCount() {
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.unreadCount && conversationObject && conversationObject !== null && conversationObject !== void 0 && conversationObject.unreadMessageCount) {
var _badgeCountConfigurat, _theme$typography3, _badgeCountConfigurat2, _theme$palette9, _badgeCountConfigurat3, _theme$palette10, _badgeCountConfigurat4, _badgeCountConfigurat5, _badgeCountConfigurat6, _badgeCountConfigurat7;
var badgecountStyles = new _Shared.BadgeCountStyles({
textFont: (_badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat = _badgeCountConfiguration.style) === null || _badgeCountConfigurat === void 0 ? void 0 : _badgeCountConfigurat.textFont) || (0, _.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography3 = _theme.typography) === null || _theme$typography3 === void 0 ? void 0 : _theme$typography3.caption1),
textColor: (_badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat2 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat2 === void 0 ? void 0 : _badgeCountConfigurat2.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette9 = _theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.getBackground()),
background: (_badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat3 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat3 === void 0 ? void 0 : _badgeCountConfigurat3.background) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette10 = _theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.getPrimary()),
width: _badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat4 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat4 === void 0 ? void 0 : _badgeCountConfigurat4.width,
height: _badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat5 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat5 === void 0 ? void 0 : _badgeCountConfigurat5.height,
border: _badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat6 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat6 === void 0 ? void 0 : _badgeCountConfigurat6.border,
borderRadius: _badgeCountConfiguration === null || _badgeCountConfiguration === void 0 ? void 0 : (_badgeCountConfigurat7 = _badgeCountConfiguration.style) === null || _badgeCountConfigurat7 === void 0 ? void 0 : _badgeCountConfigurat7.borderRadius
});
return /*#__PURE__*/_react["default"].createElement(_.CometChatBadgeCount, {
count: conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.unreadMessageCount,
style: badgecountStyles
});
}
return null;
};
var getReceiptType = function getReceiptType() {
var _conversationObject$l3, _conversationObject$l4, _conversationObject$c13, _conversationObject$l5, _conversationObject$l6, _conversationObject$l7;
var messageWaitIcon = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.messageWaitIcon;
var messageSentIcon = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.messageSentIcon;
var messageDeliveredIcon = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.messageDeliveredIcon;
var messageReadIcon = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.messageReadIcon;
var messageErrorIcon = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.messageErrorIcon;
if (
// conversationInputData?.readreceipt &&
// conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user &&
// conversationObject?.lastMessage?.sender?.uid === loggedInUser?.uid
// &&
conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.readReceipt && (conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$l3 = conversationObject.lastMessage) === null || _conversationObject$l3 === void 0 ? void 0 : (_conversationObject$l4 = _conversationObject$l3.sender) === null || _conversationObject$l4 === void 0 ? void 0 : _conversationObject$l4.uid) != (conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.conversationWith.uid) && !(conversationObject !== null && conversationObject !== void 0 && (_conversationObject$c13 = conversationObject.conversationWith) !== null && _conversationObject$c13 !== void 0 && _conversationObject$c13.guid) && !(conversationObject !== null && conversationObject !== void 0 && (_conversationObject$l5 = conversationObject.lastMessage) !== null && _conversationObject$l5 !== void 0 && _conversationObject$l5.deletedAt) &&
// !isTyping &&
(conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$l6 = conversationObject.lastMessage) === null || _conversationObject$l6 === void 0 ? void 0 : _conversationObject$l6.category) != "call" && (conversationObject === null || conversationObject === void 0 ? void 0 : (_conversationObject$l7 = conversationObject.lastMessage) === null || _conversationObject$l7 === void 0 ? void 0 : _conversationObject$l7.type) != "DIRECT_CALL") {
var receiptKey = conversationObject === null || conversationObject === void 0 ? void 0 : conversationObject.lastMessage;
if (receiptKey !== null && receiptKey !== void 0 && receiptKey.error) {
var _messageReceiptConfig;
return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReceipt, {
messageErrorIcon: messageErrorIcon,
messageObject: receiptKey,
style: new _Shared.MessageReceiptStyles((_messageReceiptConfig = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.style) !== null && _messageReceiptConfig !== void 0 ? _messageReceiptConfig : {})
});
} else if (receiptKey !== null && receiptKey !== void 0 && receiptKey.readAt) {
var _messageReceiptConfig2;
return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReceipt, {
messageReadIcon: messageReadIcon,
messageObject: receiptKey,
style: new _Shared.MessageReceiptStyles((_messageReceiptConfig2 = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.style) !== null && _messageReceiptConfig2 !== void 0 ? _messageReceiptConfig2 : {})
});
} else if (receiptKey !== null && receiptKey !== void 0 && receiptKey.deliveredAt) {
var _messageReceiptConfig3;
return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReceipt, {
messageDeliveredIcon: messageDeliveredIcon,
messageObject: receiptKey,
style: new _Shared.MessageReceiptStyles((_messageReceiptConfig3 = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.style) !== null && _messageReceiptConfig3 !== void 0 ? _messageReceiptConfig3 : {})
});
} else if (receiptKey !== null && receiptKey !== void 0 && receiptKey.sentAt) {
var _messageReceiptConfig4;
return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReceipt, {
messageSentIcon: messageSentIcon,
messageObject: receiptKey,
style: new _Shared.MessageReceiptStyles((_messageReceiptConfig4 = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.style) !== null && _messageReceiptConfig4 !== void 0 ? _messageReceiptConfig4 : {})
});
} else {
var _messageReceiptConfig5;
return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReceipt, {
messageWaitIcon: messageWaitIcon,
messageObject: receiptKey,
style: new _Shared.MessageReceiptStyles((_messageReceiptConfig5 = _messageReceiptConfiguration === null || _messageReceiptConfiguration === void 0 ? void 0 : _messageReceiptConfiguration.style) !== null && _messageReceiptConfig5 !== void 0 ? _messageReceiptConfig5 : {})
});
}
}
return null;
};
var getThreadIndicator = function getThreadIndicator() {
var _conversationObject$l8;
if (hideThreadIndicator === false && threadIndicatorText && conversationObject !== null && conversationObject !== void 0 && (_conversationObject$l8 = conversationObject.lastMessage) !== null && _conversationObject$l8 !== void 0 && _conversationObject$l8.parentMessageId) {
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.itemThreadIndicatorStyle(style),
className: "item__thread"
}, threadIndicatorText);
}
return null;
};
var getAvatarWithPresence = function getAvatarWithPresence() {
if (conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.thumbnail || conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.status) {
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.itemThumbnailStyle(),
className: "item__thumbnail"
}, conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.thumbnail ? getAvatar() : null, conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.status ? getPresence() : null);
} else return null;
};
/**
* Component template
*/
return /*#__PURE__*/_react["default"].createElement("div", {
"data-id": getId(),
style: styles.listItemStyle(style, _theme, _isActive),
dir: _.CometChatLocalize.getDir(),
className: "list__item",
onMouseEnter: toggleConversationOptions,
onMouseLeave: toggleConversationOptions,
onClick: clickHandler
}, getAvatarWithPresence(), /*#__PURE__*/_react["default"].createElement("div", {
style: styles.itemDetailStyle(style, _theme),
className: "item__details"
}, /*#__PURE__*/_react["default"].createElement("div", {
style: styles.itemTitleStyle(),
className: "item__title"
}, getTitle(), conversationInputData.timestamp && !isHovering ? getTime() : null), getThreadIndicator(), /*#__PURE__*/_react["default"].createElement("div", {
style: styles.itemSubTitleStyle(),
className: "item__subtitle"
}, conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.readreceipt ? getReceiptType() : null, conversationInputData !== null && conversationInputData !== void 0 && conversationInputData.subtitle && !(typingIndicatorText !== null && typingIndicatorText !== void 0 && typingIndicatorText.trim().length) ? getSubtitle() : null, showTypingIndicator ? getTypingIndicator() : null, conversationInputData.unreadCount && !isHovering ? getUnreadCount() : null)), isHovering ? /*#__PURE__*/_react["default"].createElement(_.CometChatMenuList, {
style: styles.subMenuStyles(style, _theme),
isOpen: isHovering,
list: conversationOptions,
mainMenuLimit: 1,
data: conversationObject
}) : null);
};
/**
* Component default props types
*/
ConversationListItem.defaultProps = {
style: {
width: "100%",
height: "100%",
background: "transparent",
activeBackground: "gray",
border: "1px solid gray",
borderRadius: "50%",
titleColor: "rgba(20,20,20)",
titleFont: "600 15px Inter, sans-serif",
subtitleColor: "rgba(20, 20, 20, 60%)",
subtitleFont: "400 13px Inter, sans-serif",
typingIndicatorTextColor: "rgba(20, 20, 20, 60%)",
typingIndicatorTextFont: "400 13px Inter, sans-serif",
threadIndicatorTextColor: "rgba(20, 20, 20, 60%)",
threadIndicatorTextFont: "400 13px Inter, sans-serif"
}
};
/**
* Component default props types
*/
ConversationListItem.propTypes = {
style: _propTypes["default"].object,
conversationInputData: _propTypes["default"].object,
showTypingIndicator: _propTypes["default"].bool,
typingIndicatorText: _propTypes["default"].string,
hideThreadIndicator: _propTypes["default"].bool,
hideGroupActions: _propTypes["default"].bool,
hideDeletedMessages: _propTypes["default"].bool,
threadIndicatorText: _propTypes["default"].string,
isActive: _propTypes["default"].bool,
conversationOptions: _propTypes["default"].array,
conversationObject: _propTypes["default"].object,
avatarConfiguration: _propTypes["default"].object,
statusIndicatorConfiguration: _propTypes["default"].object,
badgeCountConfiguration: _propTypes["default"].object,
messageReceiptConfiguration: _propTypes["default"].object,
dateConfiguration: _propTypes["default"].object,
loggedInUser: _propTypes["default"].object
};
var CometChatConversationListItem = /*#__PURE__*/_react["default"].memo(ConversationListItem);
exports.CometChatConversationListItem = CometChatConversationListItem;