@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
76 lines (69 loc) • 4.17 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
require('tslib');
require('../../types/models.js');
require('../../types/events.js');
var Avatar = require('../Avatar/Avatar.js');
require('../../context/TranslationContext.js');
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 Icon = require('../Icon/Icon.js');
var type = require('../Icon/type.js');
var index = require('../Plugins/index.js');
var useDeleteContact = require('../../hooks/useDeleteContact.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function unMemoContactPreviewContent(props) {
var contact = props.contact, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar.Avatar : _a, displayImage = props.displayImage, displayTitle = props.displayTitle, active = props.active, activeContact = props.activeContact, setActiveContact = props.setActiveContact;
var contactPreviewButton = React.useRef(null);
var activeClass = active ? 'conversation-preview-content--active' : '';
var _b = React.useState(false), isHover = _b[0], setIsHover = _b[1];
var onSelectContact = function () {
if (setActiveContact) {
setActiveContact(contact);
}
if (contactPreviewButton === null || contactPreviewButton === void 0 ? void 0 : contactPreviewButton.current) {
contactPreviewButton.current.blur();
}
};
var handleMouseEnter = function () {
setIsHover(true);
};
var handleMouseLeave = function () {
setIsHover(false);
};
var deleteContact = useDeleteContact.useDeleteContact().mutate;
var moreHandle = function (type) {
switch (type) {
case 'delete':
deleteContact(contact.id);
if (contact === activeContact) {
setActiveContact(null);
}
break;
}
};
return (React__default["default"].createElement("button", { type: "button", "aria-selected": active, role: "option", className: "contact-preview-container ".concat(activeClass), onClick: onSelectContact, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: contactPreviewButton },
React__default["default"].createElement("div", { className: "avatar" },
React__default["default"].createElement(Avatar$1, { image: displayImage, name: contact.nickname, size: 40 })),
React__default["default"].createElement("div", { className: "content" },
React__default["default"].createElement("div", { className: "title" }, displayTitle)),
React__default["default"].createElement("div", { className: "external" }, !isHover
? (React__default["default"].createElement(React__default["default"].Fragment, null))
: (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", { 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 })) }))))));
}
var UIContactPreviewContent = React__default["default"].memo(unMemoContactPreviewContent);
exports.UIContactPreviewContent = UIContactPreviewContent;
exports.unMemoContactPreviewContent = unMemoContactPreviewContent;
//# sourceMappingURL=UIContactPreviewContent.js.map