@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
66 lines (63 loc) • 3.85 kB
JavaScript
import React__default, { useState, useEffect } from 'react';
import { ConversationType } from '../../types/models.js';
import '../../types/events.js';
import { Avatar } from '../Avatar/Avatar.js';
import { handleDisplayAvatar } from '../utils.js';
import { Icon } from '../Icon/Icon.js';
import { IconTypes } from '../Icon/type.js';
import { Plugins } from '../Plugins/index.js';
function UIChatHeaderDefault(props) {
var propTitle = props.title, propAvatar = props.avatar; props.isOnline; var conversation = props.conversation, isLive = props.isLive, operateIcon = props.operateIcon, pluginComponentList = props.pluginComponentList;
var _a = useState(''), title = _a[0], setTitle = _a[1];
var _b = useState(''), avatar = _b[0], setAvatar = _b[1];
useEffect(function () {
setTitle(propTitle);
if (propAvatar) {
setAvatar(propAvatar);
}
switch (conversation === null || conversation === void 0 ? void 0 : conversation.type) {
case ConversationType.Private:
handleC2C(conversation, conversation.contact);
break;
case ConversationType.Group:
handleGroup(conversation, conversation.contact);
break;
case ConversationType.System:
setTitle('系统通知');
break;
default:
setTitle('');
break;
}
}, [conversation]);
var handleC2C = function (conversation, userProfile) {
var _a, _b;
if (!propTitle) {
setTitle((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.nickname) !== null && _a !== void 0 ? _a : userProfile === null || userProfile === void 0 ? void 0 : userProfile.id);
}
if (!propAvatar) {
setAvatar(React__default.createElement(Avatar, { size: 32, image: handleDisplayAvatar((_b = conversation.contact) === null || _b === void 0 ? void 0 : _b.avatar) }));
}
};
var handleGroup = function (conversation, groupProfile) {
var _a;
if (!propTitle) {
setTitle((groupProfile === null || groupProfile === void 0 ? void 0 : groupProfile.name) || (groupProfile === null || groupProfile === void 0 ? void 0 : groupProfile.id));
}
if (!propAvatar) {
setAvatar(React__default.createElement(Avatar, { size: 32, image: handleDisplayAvatar((_a = conversation.contact) === null || _a === void 0 ? void 0 : _a.avatar, ConversationType.Group) }));
}
};
var openUIManage = function () {
// setUIManageShow(true);
};
return (React__default.createElement("header", { className: "uim-chat-header ".concat(isLive ? 'uim-chat-live-header' : ''), key: conversation === null || conversation === void 0 ? void 0 : conversation.id },
React__default.createElement("div", { className: "uim-chat-header-left ".concat((conversation === null || conversation === void 0 ? void 0 : conversation.type) === ConversationType.System ? 'system' : '') }, (conversation === null || conversation === void 0 ? void 0 : conversation.type) !== ConversationType.System && avatar),
React__default.createElement("div", { className: "header-content" },
React__default.createElement("h3", { className: "title" }, title)),
React__default.createElement("div", { className: "uim-chat-header-right" },
React__default.createElement(Plugins, { plugins: pluginComponentList, showNumber: 3 }),
React__default.createElement("div", { className: "header-handle" }, operateIcon || React__default.createElement(Icon, { className: "header-handle-more", onClick: openUIManage, type: IconTypes.ELLIPSE, width: 18, height: 5 })))));
}
export { UIChatHeaderDefault };
//# sourceMappingURL=UIChatHeaderDefault.js.map