82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
import React, { memo } from 'react';
|
|
import Navicon from 'containers/Navicon';
|
|
import Editable from 'components/ui/Editable';
|
|
import { isValidServerName } from 'state/servers';
|
|
import { isChannel } from 'utils';
|
|
|
|
const ChatTitle = ({
|
|
status,
|
|
title,
|
|
tab,
|
|
channel,
|
|
openModal,
|
|
onTitleChange,
|
|
onToggleSearch,
|
|
onToggleUserList,
|
|
onCloseClick
|
|
}) => {
|
|
let closeTitle;
|
|
if (isChannel(tab)) {
|
|
closeTitle = 'Leave';
|
|
} else if (tab.name) {
|
|
closeTitle = 'Close';
|
|
} else {
|
|
closeTitle = 'Disconnect';
|
|
}
|
|
|
|
let serverError = null;
|
|
if (!tab.name && status.error) {
|
|
serverError = (
|
|
<span className="chat-topic error">Error: {status.error}</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="chat-title-bar">
|
|
<Navicon />
|
|
<Editable
|
|
className="chat-title"
|
|
editable={!tab.name}
|
|
value={title}
|
|
validate={isValidServerName}
|
|
onChange={onTitleChange}
|
|
>
|
|
<span className="chat-title">{title}</span>
|
|
</Editable>
|
|
<div className="chat-topic-wrap">
|
|
{channel && channel.topic && (
|
|
<span
|
|
className="chat-topic"
|
|
onClick={() =>
|
|
openModal('topic', {
|
|
topic: channel.topic,
|
|
channel: channel.name
|
|
})
|
|
}
|
|
>
|
|
{channel.topic}
|
|
</span>
|
|
)}
|
|
{serverError}
|
|
</div>
|
|
<i className="icon-search" title="Search" onClick={onToggleSearch} />
|
|
<i
|
|
className="icon-cancel button-leave"
|
|
title={closeTitle}
|
|
onClick={onCloseClick}
|
|
/>
|
|
<i className="icon-user button-userlist" onClick={onToggleUserList} />
|
|
</div>
|
|
<div className="userlist-bar">
|
|
<i className="icon-user" />
|
|
<span className="chat-usercount">
|
|
{channel && channel.users.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(ChatTitle);
|