@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
67 lines (64 loc) • 3.67 kB
JavaScript
import React__default, { useRef, useState } from 'react';
import 'tslib';
import '../../types/models.js';
import '../../types/events.js';
import { Avatar } from '../Avatar/Avatar.js';
import '../../context/TranslationContext.js';
import '../../context/UIKitContext.js';
import '../../context/ComponentContext.js';
import '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import '../../context/UIMessageContext.js';
import '../../context/ChatStateContext.js';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import { Plugins } from '../Plugins/index.js';
import { useDeleteContact } from '../../hooks/useDeleteContact.js';
function unMemoContactPreviewContent(props) {
var contact = props.contact, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, displayImage = props.displayImage, displayTitle = props.displayTitle, active = props.active, activeContact = props.activeContact, setActiveContact = props.setActiveContact;
var contactPreviewButton = useRef(null);
var activeClass = active ? 'conversation-preview-content--active' : '';
var _b = 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().mutate;
var moreHandle = function (type) {
switch (type) {
case 'delete':
deleteContact(contact.id);
if (contact === activeContact) {
setActiveContact(null);
}
break;
}
};
return (React__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.createElement("div", { className: "avatar" },
React__default.createElement(Avatar$1, { image: displayImage, name: contact.nickname, size: 40 })),
React__default.createElement("div", { className: "content" },
React__default.createElement("div", { className: "title" }, displayTitle)),
React__default.createElement("div", { className: "external" }, !isHover
? (React__default.createElement(React__default.Fragment, null))
: (React__default.createElement("div", { className: "".concat(isHover ? 'more--hover' : 'more') },
React__default.createElement(Plugins, { customClass: "more-handle-box", plugins: [
React__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.createElement(Icon, { className: "icon-more", width: 16, height: 16, type: IconTypes.MORE })) }))))));
}
var UIContactPreviewContent = React__default.memo(unMemoContactPreviewContent);
export { UIContactPreviewContent, unMemoContactPreviewContent };
//# sourceMappingURL=UIContactPreviewContent.js.map