99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Contact } from '../../types/Contact';
|
|
|
|
interface Props {
|
|
contact: Contact;
|
|
hasSignalAccount: boolean;
|
|
i18n: (key: string, values?: Array<string>) => string;
|
|
onSendMessage: () => void;
|
|
onOpenContact: () => void;
|
|
}
|
|
|
|
function getInitials(name: string): string {
|
|
return name.trim()[0] || '#';
|
|
}
|
|
|
|
function getName(contact: Contact): string {
|
|
const { name, organization } = contact;
|
|
return (name && name.displayName) || organization || '';
|
|
}
|
|
|
|
export class EmbeddedContact extends React.Component<Props, {}> {
|
|
public renderAvatar() {
|
|
const { contact } = this.props;
|
|
const { avatar } = contact;
|
|
|
|
const path = avatar && avatar.avatar && avatar.avatar.path;
|
|
if (!path) {
|
|
const name = getName(contact);
|
|
const initials = getInitials(name);
|
|
return (
|
|
<div className="image-container">
|
|
<div className="default-avatar">{initials}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="image-container">
|
|
<img src={path} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
public renderName() {
|
|
const { contact } = this.props;
|
|
|
|
return <div className="contact-name">{getName(contact)}</div>;
|
|
}
|
|
|
|
public renderContactShorthand() {
|
|
const { contact } = this.props;
|
|
const { number, email } = contact;
|
|
const firstNumber = number && number[0] && number[0].value;
|
|
const firstEmail = email && email[0] && email[0].value;
|
|
|
|
return <div className="contact-method">{firstNumber || firstEmail}</div>;
|
|
}
|
|
|
|
public renderSendMessage() {
|
|
const { hasSignalAccount, i18n, onSendMessage } = this.props;
|
|
|
|
if (!hasSignalAccount) {
|
|
return null;
|
|
}
|
|
|
|
// We don't want the overall click handler for this element to fire, so we stop
|
|
// propagation before handing control to the caller's callback.
|
|
const onClick = (e: React.MouseEvent<{}>): void => {
|
|
e.stopPropagation();
|
|
onSendMessage();
|
|
};
|
|
|
|
return (
|
|
<div className="send-message" onClick={onClick}>
|
|
<button className="inner">
|
|
<div className="icon bubble-icon" />
|
|
{i18n('sendMessageToContact')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
public render() {
|
|
const { onOpenContact } = this.props;
|
|
|
|
return (
|
|
<div className="embedded-contact" onClick={onOpenContact}>
|
|
<div className="first-line">
|
|
{this.renderAvatar()}
|
|
<div className="text-container">
|
|
{this.renderName()}
|
|
{this.renderContactShorthand()}
|
|
</div>
|
|
</div>
|
|
{this.renderSendMessage()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|