102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Contact, getName } from '../../types/Contact';
|
|
|
|
interface Props {
|
|
contact: Contact;
|
|
hasSignalAccount: boolean;
|
|
i18n: (key: string, values?: Array<string>) => string;
|
|
onSendMessage: () => void;
|
|
onOpenContact: () => void;
|
|
}
|
|
|
|
export class EmbeddedContact extends React.Component<Props, {}> {
|
|
public render() {
|
|
const {
|
|
contact,
|
|
hasSignalAccount,
|
|
i18n,
|
|
onOpenContact,
|
|
onSendMessage,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className="embedded-contact" onClick={onOpenContact}>
|
|
<div className="first-line">
|
|
{renderAvatar(contact)}
|
|
<div className="text-container">
|
|
{renderName(contact)}
|
|
{renderContactShorthand(contact)}
|
|
</div>
|
|
</div>
|
|
{renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
// Note: putting these below the main component so style guide picks up EmbeddedContact
|
|
|
|
function getInitials(name: string): string {
|
|
return name.trim()[0] || '#';
|
|
}
|
|
|
|
export function renderAvatar(contact: Contact) {
|
|
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>
|
|
);
|
|
}
|
|
|
|
export function renderName(contact: Contact) {
|
|
return <div className="contact-name">{getName(contact)}</div>;
|
|
}
|
|
|
|
export function renderContactShorthand(contact: Contact) {
|
|
const { number: phoneNumber, email } = contact;
|
|
const firstNumber = phoneNumber && phoneNumber[0] && phoneNumber[0].value;
|
|
const firstEmail = email && email[0] && email[0].value;
|
|
|
|
return <div className="contact-method">{firstNumber || firstEmail}</div>;
|
|
}
|
|
|
|
export function renderSendMessage(props: {
|
|
hasSignalAccount: boolean;
|
|
i18n: (key: string, values?: Array<string>) => string;
|
|
onSendMessage: () => void;
|
|
}) {
|
|
const { hasSignalAccount, i18n, onSendMessage } = 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>
|
|
);
|
|
}
|