@uimkit/uikit-react/dist/esm/components/UIConversationPreview/UIConversationPreviewContent.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

import React__default, { useRef, useState } from 'react';
import 'tslib';
import '../../context/TranslationContext.js';
import { useUIKit } from '../../context/UIKitContext.js';
import '../../context/ComponentContext.js';
import '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import '../../context/UIMessageContext.js';
import '../../context/ChatStateContext.js';
import { Avatar } from '../Avatar/Avatar.js';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import { Plugins } from '../Plugins/index.js';
import { usePinConversation } from '../../hooks/usePinConversation.js';
import { useDeleteConversation } from '../../hooks/useDeleteConversation.js';
import '../../types/models.js';
import '../../types/events.js';
import 'react-redux';
import 'redux';
import '../../store/rootReducer.js';
import '../../store/accounts/actions.js';
import '../../store/accounts/selectors.js';
import '../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/invariant.js';
import 'i18next';
import '../../store/conversations/actions.js';
import '../../node_modules/.pnpm/lodash.flatten@4.4.0/node_modules/lodash.flatten/index.js';
import '../../node_modules/.pnpm/lodash.some@4.6.0/node_modules/lodash.some/index.js';
import '../../store/messages/actions.js';
import '../../store/contacts/actions.js';
import 'dayjs';

function UIConversationPreviewContent(props) {
    var conversation = props.conversation, _a = props.Avatar, Avatar$1 = _a === void 0 ? 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 = 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 = 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 = useUIKit('UIConversationPreviewContent').activeConversation;
    var pinConversation = usePinConversation().mutate;
    var deleteConversation = 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.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.createElement("div", { className: "avatar" },
            React__default.createElement(Avatar$1, { image: displayImage, name: conversation.name, size: 40 })),
        React__default.createElement("div", { className: "content" },
            React__default.createElement("div", { className: "title" }, displayTitle),
            React__default.createElement("div", { className: "message" }, displayMessage)),
        React__default.createElement("div", { className: "external" },
            unread ? (React__default.createElement("div", { className: "unread" }, unread <= 99 ? unread : '99+')) : (React__default.createElement("div", { className: "unread" })),
            !isHover
                ? (React__default.createElement("div", { className: "time" }, displayTime))
                : (React__default.createElement("div", { className: "".concat(isHover ? 'more--hover' : 'more') },
                    React__default.createElement(Plugins, { customClass: "more-handle-box", plugins: [
                            React__default.createElement("div", { role: "presentation", className: "more-handle-item", onClick: function (e) {
                                    e.stopPropagation();
                                    moreHandle('pin');
                                } }, !conversation.pinned ? '置顶' : '取消置顶'),
                            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 })) }))))));
}

export { UIConversationPreviewContent };
//# sourceMappingURL=UIConversationPreviewContent.js.map