@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
103 lines (96 loc) • 6.18 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
require('tslib');
require('../../context/TranslationContext.js');
var UIKitContext = require('../../context/UIKitContext.js');
require('../../context/ComponentContext.js');
require('../../context/ChatActionContext.js');
require('../../context/MessageInputContext.js');
require('../../context/UIMessageContext.js');
require('../../context/ChatStateContext.js');
var Avatar = require('../Avatar/Avatar.js');
var Icon = require('../Icon/Icon.js');
var type = require('../Icon/type.js');
var index = require('../Plugins/index.js');
var usePinConversation = require('../../hooks/usePinConversation.js');
var useDeleteConversation = require('../../hooks/useDeleteConversation.js');
require('../../types/models.js');
require('../../types/events.js');
require('react-redux');
require('redux');
require('../../store/rootReducer.js');
require('../../store/accounts/actions.js');
require('../../store/accounts/selectors.js');
require('../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/invariant.js');
require('i18next');
require('../../store/conversations/actions.js');
require('../../node_modules/.pnpm/lodash.flatten@4.4.0/node_modules/lodash.flatten/index.js');
require('../../node_modules/.pnpm/lodash.some@4.6.0/node_modules/lodash.some/index.js');
require('../../store/messages/actions.js');
require('../../store/contacts/actions.js');
require('dayjs');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function UIConversationPreviewContent(props) {
var conversation = props.conversation, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar.Avatar : _a, displayImage = props.displayImage, displayTitle = props.displayTitle, displayMessage = props.displayMessage, displayTime = props.displayTime, unread = props.unread, active = props.active, setActiveConversation = props.setActiveConversation;
var conversationPreviewButton = React.useRef(null);
var activeClass = active ? 'conversation-preview-content--active' : '';
var unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
var pinClass = conversation.pinned ? 'conversation-preview-content--pin' : '';
var _b = React.useState(false), isHover = _b[0], setIsHover = _b[1];
var onSelectConversation = function () {
if (setActiveConversation) {
setActiveConversation(conversation);
}
if (conversationPreviewButton === null || conversationPreviewButton === void 0 ? void 0 : conversationPreviewButton.current) {
conversationPreviewButton.current.blur();
}
};
var handleMouseEnter = function () {
setIsHover(true);
};
var handleMouseLeave = function () {
setIsHover(false);
};
var activeConversation = UIKitContext.useUIKit('UIConversationPreviewContent').activeConversation;
var pinConversation = usePinConversation.usePinConversation().mutate;
var deleteConversation = useDeleteConversation.useDeleteConversation().mutate;
var moreHandle = function (type) {
var id = conversation.id, pinned = conversation.pinned;
switch (type) {
case 'pin':
pinConversation(id, !pinned);
break;
case 'delete':
deleteConversation(id);
if (conversation.id === activeConversation.id) {
setActiveConversation(null);
}
break;
}
};
return (React__default["default"].createElement("button", { type: "button", "aria-selected": active, role: "option", className: "conversation-preview-container ".concat(activeClass, " ").concat(unreadClass, " ").concat(pinClass), onClick: onSelectConversation, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: conversationPreviewButton },
React__default["default"].createElement("div", { className: "avatar" },
React__default["default"].createElement(Avatar$1, { image: displayImage, name: conversation.name, size: 40 })),
React__default["default"].createElement("div", { className: "content" },
React__default["default"].createElement("div", { className: "title" }, displayTitle),
React__default["default"].createElement("div", { className: "message" }, displayMessage)),
React__default["default"].createElement("div", { className: "external" },
unread ? (React__default["default"].createElement("div", { className: "unread" }, unread <= 99 ? unread : '99+')) : (React__default["default"].createElement("div", { className: "unread" })),
!isHover
? (React__default["default"].createElement("div", { className: "time" }, displayTime))
: (React__default["default"].createElement("div", { className: "".concat(isHover ? 'more--hover' : 'more') },
React__default["default"].createElement(index.Plugins, { customClass: "more-handle-box", plugins: [
React__default["default"].createElement("div", { role: "presentation", className: "more-handle-item", onClick: function (e) {
e.stopPropagation();
moreHandle('pin');
} }, !conversation.pinned ? '置顶' : '取消置顶'),
React__default["default"].createElement("div", { className: "more-handle-item", style: { color: '#FF584C' }, onClick: function (e) {
e.stopPropagation();
moreHandle('delete');
}, role: "presentation" }, "\u5220\u9664"),
], showNumber: 0, MoreIcon: (React__default["default"].createElement(Icon.Icon, { className: "icon-more", width: 16, height: 16, type: type.IconTypes.MORE })) }))))));
}
exports.UIConversationPreviewContent = UIConversationPreviewContent;
//# sourceMappingURL=UIConversationPreviewContent.js.map