Migrate most React class components to function components
This commit is contained in:
parent
4c9baaef80
commit
558b5a4a38
23 changed files with 1444 additions and 1775 deletions
|
@ -73,164 +73,97 @@ function getLabelForAddress(
|
|||
}
|
||||
}
|
||||
|
||||
export class ContactDetail extends React.Component<Props> {
|
||||
public renderSendMessage({
|
||||
hasSignalAccount,
|
||||
i18n,
|
||||
onSendMessage,
|
||||
}: {
|
||||
hasSignalAccount: boolean;
|
||||
i18n: LocalizerType;
|
||||
onSendMessage: () => void;
|
||||
}): JSX.Element | null {
|
||||
if (!hasSignalAccount) {
|
||||
return null;
|
||||
}
|
||||
export function ContactDetail({
|
||||
contact,
|
||||
hasSignalAccount,
|
||||
i18n,
|
||||
onSendMessage,
|
||||
}: Props): JSX.Element {
|
||||
// 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<HTMLButtonElement>): void => {
|
||||
e.stopPropagation();
|
||||
onSendMessage();
|
||||
};
|
||||
|
||||
// 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<HTMLButtonElement>): void => {
|
||||
e.stopPropagation();
|
||||
onSendMessage();
|
||||
};
|
||||
const isIncoming = false;
|
||||
const module = 'contact-detail';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="module-contact-detail__send-message"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="module-contact-detail__send-message__inner">
|
||||
<div className="module-contact-detail__send-message__bubble-icon" />
|
||||
{i18n('icu:sendMessageToContact')}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
public renderEmail(
|
||||
items: Array<Email> | undefined,
|
||||
i18n: LocalizerType
|
||||
): Array<JSX.Element> | undefined {
|
||||
if (!items || items.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return items.map((item: Email) => {
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className="module-contact-detail__additional-contact"
|
||||
>
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForEmail(item, i18n)}
|
||||
</div>
|
||||
{item.value}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
public renderPhone(
|
||||
items: Array<Phone> | undefined,
|
||||
i18n: LocalizerType
|
||||
): Array<JSX.Element> | null | undefined {
|
||||
if (!items || items.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return items.map((item: Phone) => {
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className="module-contact-detail__additional-contact"
|
||||
>
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForPhone(item, i18n)}
|
||||
</div>
|
||||
{item.value}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
public renderAddressLine(value: string | undefined): JSX.Element | undefined {
|
||||
if (!value) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return <div>{value}</div>;
|
||||
}
|
||||
|
||||
public renderPOBox(
|
||||
poBox: string | undefined,
|
||||
i18n: LocalizerType
|
||||
): JSX.Element | null {
|
||||
if (!poBox) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{i18n('icu:poBox')} {poBox}
|
||||
return (
|
||||
<div className="module-contact-detail">
|
||||
<div className="module-contact-detail__avatar">
|
||||
{renderAvatar({ contact, i18n, size: 80 })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{renderName({ contact, isIncoming, module })}
|
||||
{renderContactShorthand({ contact, isIncoming, module })}
|
||||
|
||||
public renderAddressLineTwo(address: PostalAddress): JSX.Element | null {
|
||||
if (address.city || address.region || address.postcode) {
|
||||
return (
|
||||
<div>
|
||||
{address.city} {address.region} {address.postcode}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public renderAddresses(
|
||||
addresses: Array<PostalAddress> | undefined,
|
||||
i18n: LocalizerType
|
||||
): Array<JSX.Element> | undefined {
|
||||
if (!addresses || addresses.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return addresses.map((address: PostalAddress, index: number) => {
|
||||
return (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<div key={index} className="module-contact-detail__additional-contact">
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForAddress(address, i18n)}
|
||||
{hasSignalAccount && (
|
||||
<button
|
||||
type="button"
|
||||
className="module-contact-detail__send-message"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="module-contact-detail__send-message__inner">
|
||||
<div className="module-contact-detail__send-message__bubble-icon" />
|
||||
{i18n('icu:sendMessageToContact')}
|
||||
</div>
|
||||
{this.renderAddressLine(address.street)}
|
||||
{this.renderPOBox(address.pobox, i18n)}
|
||||
{this.renderAddressLine(address.neighborhood)}
|
||||
{this.renderAddressLineTwo(address)}
|
||||
{this.renderAddressLine(address.country)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
const { contact, hasSignalAccount, i18n, onSendMessage } = this.props;
|
||||
const isIncoming = false;
|
||||
const module = 'contact-detail';
|
||||
{contact.number?.map((phone: Phone) => {
|
||||
return (
|
||||
<div
|
||||
key={phone.value}
|
||||
className="module-contact-detail__additional-contact"
|
||||
>
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForPhone(phone, i18n)}
|
||||
</div>
|
||||
{phone.value}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
return (
|
||||
<div className="module-contact-detail">
|
||||
<div className="module-contact-detail__avatar">
|
||||
{renderAvatar({ contact, i18n, size: 80 })}
|
||||
</div>
|
||||
{renderName({ contact, isIncoming, module })}
|
||||
{renderContactShorthand({ contact, isIncoming, module })}
|
||||
{this.renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
|
||||
{this.renderPhone(contact.number, i18n)}
|
||||
{this.renderEmail(contact.email, i18n)}
|
||||
{this.renderAddresses(contact.address, i18n)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{contact.email?.map((email: Email) => {
|
||||
return (
|
||||
<div
|
||||
key={email.value}
|
||||
className="module-contact-detail__additional-contact"
|
||||
>
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForEmail(email, i18n)}
|
||||
</div>
|
||||
{email.value}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{contact.address?.map((address: PostalAddress, index: number) => {
|
||||
return (
|
||||
<div
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
key={index}
|
||||
className="module-contact-detail__additional-contact"
|
||||
>
|
||||
<div className="module-contact-detail__additional-contact__type">
|
||||
{getLabelForAddress(address, i18n)}
|
||||
</div>
|
||||
{address.street && <div>{address.street}</div>}
|
||||
{address.pobox && (
|
||||
<div>
|
||||
{i18n('icu:poBox')} {address.pobox}
|
||||
</div>
|
||||
)}
|
||||
{address.neighborhood && <div>{address.neighborhood}</div>}
|
||||
{(address.city || address.region || address.postcode) && (
|
||||
<div>
|
||||
{address.city} {address.region} {address.postcode}
|
||||
</div>
|
||||
)}
|
||||
{address.country && <div>{address.country}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue