@uimkit/uikit-react/dist/esm/components/UIMessage/MessagePlugins.js

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

import { __assign } from 'tslib';
import React__default, { useState, useRef } from 'react';
import { Plugins } from '../Plugins/index.js';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import { useTranslationContext } from '../../context/TranslationContext.js';
import '../../context/UIKitContext.js';
import '../../context/ComponentContext.js';
import '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import { useUIMessageContext } from '../../context/UIMessageContext.js';
import { useChatStateContext } from '../../context/ChatStateContext.js';
import { useMessagePluginElement } from './hooks/useMessagePluginElement.js';
import { useMessageHandler } from './hooks/useMessageHandler.js';
import { MessageType } from '../../types/models.js';
import '../../types/events.js';
import { MESSAGE_STATUS, MESSAGE_FLOW } from '../../constants.js';
import 'i18next';

var PluginsNameEnum;
(function (PluginsNameEnum) {
    PluginsNameEnum["quote"] = "quote";
    PluginsNameEnum["forward"] = "forward";
    PluginsNameEnum["copy"] = "copy";
    PluginsNameEnum["delete"] = "delete";
    PluginsNameEnum["resend"] = "resend";
    PluginsNameEnum["revoke"] = "revoke";
})(PluginsNameEnum || (PluginsNameEnum = {}));
function MessagePlugins(props) {
    var _a, _b, _c, _d, _e, _f;
    var propsPlugins = props.plugins, propsShowNumber = props.showNumber, propsMoreIcon = props.MoreIcon, propsPluginConfig = props.config;
    var _g = useState(''), className = _g[0], setClassName = _g[1];
    var pluginsRef = useRef(null);
    var _h = useUIMessageContext('MessagePlugins'), message = _h.message, contextPlugin = _h.plugin;
    var messageListRef = useChatStateContext().messageListRef;
    var _j = useMessageHandler({ message: message }), handleDelMessage = _j.handleDelMessage, handleRevokeMessage = _j.handleRevokeMessage, handleReplyMessage = _j.handleReplyMessage, handleCopyMessage = _j.handleCopyMessage, handleResendMessage = _j.handleResendMessage, handleForWardMessage = _j.handleForWardMessage;
    var pluginConfig = {
        quote: __assign(__assign({ isShow: true }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.quote), (_a = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _a === void 0 ? void 0 : _a.quote),
        forward: __assign(__assign({ isShow: true }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.forward), (_b = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _b === void 0 ? void 0 : _b.forward),
        copy: __assign(__assign({ isShow: true, relateMessageType: [MessageType.Text] }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.copy), (_c = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _c === void 0 ? void 0 : _c.copy),
        delete: __assign(__assign({ isShow: true }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.delete), (_d = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _d === void 0 ? void 0 : _d.delete),
        revoke: __assign(__assign({ isShow: true }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.revoke), (_e = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _e === void 0 ? void 0 : _e.revoke),
        resend: __assign(__assign({ isShow: true }, propsPluginConfig === null || propsPluginConfig === void 0 ? void 0 : propsPluginConfig.resend), (_f = contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.config) === null || _f === void 0 ? void 0 : _f.resend),
    };
    var t = useTranslationContext('MessagePlugins').t;
    var handleVisible = function (data) {
        setClassName("".concat(!data.top && 'message-plugin-top', " ").concat(!data.left && 'message-plugin-left'));
    };
    var RevokeElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", null, t('message.action.revoke')),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.REVOCATION }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleRevokeMessage(e);
        },
        message: message,
        isShow: pluginConfig.revoke.isShow
            && ((message === null || message === void 0 ? void 0 : message.status) === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT),
        relateMessageType: pluginConfig.revoke.relateMessageType,
    });
    var DeleteElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", { className: "del" }, t('message.action.delete')),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.DEL }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleDelMessage(e);
        },
        message: message,
        isShow: pluginConfig.delete.isShow /* TODO && message?.status === MESSAGE_STATUS.SUCCESS*/,
        relateMessageType: pluginConfig.delete.relateMessageType,
    });
    var ReplyElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", null, t('message.action.quote')),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.QUOTE }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleReplyMessage(e);
        },
        message: message,
        isShow: pluginConfig.quote.isShow && (message === null || message === void 0 ? void 0 : message.status) === MESSAGE_STATUS.SUCCESS,
        relateMessageType: pluginConfig.quote.relateMessageType,
    });
    var CopyElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", null, t('message.action.copy')),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.COPY }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleCopyMessage(e);
        },
        message: message,
        isShow: pluginConfig.copy.isShow && (message === null || message === void 0 ? void 0 : message.status) === MESSAGE_STATUS.SUCCESS,
        relateMessageType: pluginConfig.copy.relateMessageType,
    });
    var ResendElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", null, "\u91CD\u53D1"),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.REPLY }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleResendMessage(e);
        },
        message: message,
        isShow: pluginConfig.resend.isShow && (message === null || message === void 0 ? void 0 : message.status) !== MESSAGE_STATUS.SUCCESS,
        relateMessageType: pluginConfig.resend.relateMessageType,
    });
    var ForWardElement = useMessagePluginElement({
        children: (React__default.createElement("div", { className: "message-plugin-item" },
            React__default.createElement("span", null, t('message.action.forward')),
            React__default.createElement(Icon, { width: 20, height: 20, type: IconTypes.FORWARD }))),
        handle: function (e) {
            pluginsRef.current.closeMore();
            handleForWardMessage(e);
        },
        message: message,
        isShow: pluginConfig.forward.isShow && (message === null || message === void 0 ? void 0 : message.status) === MESSAGE_STATUS.SUCCESS,
        relateMessageType: pluginConfig.forward.relateMessageType,
    });
    var defaultPlugins = [
        RevokeElement,
        ReplyElement,
        ForWardElement,
        DeleteElement,
        ResendElement,
        CopyElement,
    ];
    var plugins = (propsPlugins || (contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.plugins) || defaultPlugins).filter(function (item) { return item; });
    var MoreIcon = propsMoreIcon || (contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.MoreIcon) || React__default.createElement(Icon, { className: "icon-more", width: 16, height: 16, type: IconTypes.MORE });
    var showNumber = propsShowNumber || (contextPlugin === null || contextPlugin === void 0 ? void 0 : contextPlugin.showNumber) || 0;
    return (message === null || message === void 0 ? void 0 : message.status) !== MESSAGE_STATUS.UNSEND && (React__default.createElement(Plugins, { className: "message-plugin", customClass: className, ref: pluginsRef, plugins: plugins, showNumber: showNumber, MoreIcon: MoreIcon, root: messageListRef === null || messageListRef === void 0 ? void 0 : messageListRef.current, handleVisible: handleVisible }));
}

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