signal-desktop/ts/components/conversation/ContactName.tsx

83 lines
2.2 KiB
TypeScript
Raw Normal View History

2023-01-03 19:55:46 +00:00
// Copyright 2018 Signal Messenger, LLC
2020-10-30 20:34:04 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
2024-03-12 16:29:31 +00:00
import React, { useMemo } from 'react';
2021-05-28 16:15:17 +00:00
import classNames from 'classnames';
import { Emojify } from './Emojify';
import type { ContactNameColorType } from '../../types/Colors';
2021-05-28 16:15:17 +00:00
import { getClassNamesFor } from '../../util/getClassNamesFor';
2024-03-12 16:29:31 +00:00
import type { ConversationType } from '../../state/ducks/conversations';
import { isSignalConversation as getIsSignalConversation } from '../../util/isSignalConversation';
2024-03-12 16:29:31 +00:00
export type ContactNameData = {
2021-05-28 16:15:17 +00:00
contactNameColor?: ContactNameColorType;
2021-03-03 20:09:58 +00:00
firstName?: string;
2022-11-09 02:38:19 +00:00
isSignalConversation?: boolean;
2023-03-02 06:57:35 +00:00
isMe?: boolean;
2024-03-12 16:29:31 +00:00
title: string;
};
export function useContactNameData(
conversation: ConversationType | null,
contactNameColor?: ContactNameColorType
): ContactNameData | null {
const { firstName, title, isMe } = conversation ?? {};
const isSignalConversation =
conversation != null ? getIsSignalConversation(conversation) : null;
return useMemo(() => {
if (title == null || isSignalConversation == null) {
return null;
}
return {
contactNameColor,
firstName,
isSignalConversation,
isMe,
title,
};
}, [contactNameColor, firstName, isSignalConversation, isMe, title]);
}
export type PropsType = ContactNameData & {
module?: string;
2021-03-03 20:09:58 +00:00
preferFirstName?: boolean;
onClick?: VoidFunction;
};
2022-11-18 00:45:19 +00:00
export function ContactName({
2021-05-28 16:15:17 +00:00
contactNameColor,
2021-03-03 20:09:58 +00:00
firstName,
2022-11-09 02:38:19 +00:00
isSignalConversation,
2023-03-02 06:57:35 +00:00
isMe,
2021-03-03 20:09:58 +00:00
module,
preferFirstName,
title,
onClick,
2022-11-18 00:45:19 +00:00
}: PropsType): JSX.Element {
2021-05-28 16:15:17 +00:00
const getClassName = getClassNamesFor('module-contact-name', module);
2021-03-03 20:09:58 +00:00
let text: string;
if (preferFirstName) {
text = firstName || title || '';
} else {
text = title || '';
}
const WrappingElement = onClick ? 'button' : 'span';
2020-09-14 19:51:27 +00:00
return (
<WrappingElement
2021-05-28 16:15:17 +00:00
className={classNames(
getClassName(''),
contactNameColor ? getClassName(`--${contactNameColor}`) : null
)}
dir="auto"
onClick={onClick}
2021-05-28 16:15:17 +00:00
>
2021-03-03 20:09:58 +00:00
<Emojify text={text} />
2023-03-02 06:57:35 +00:00
{(isSignalConversation || isMe) && (
<span className="ContactModal__official-badge" />
2022-11-09 02:38:19 +00:00
)}
</WrappingElement>
2020-09-14 19:51:27 +00:00
);
2022-11-18 00:45:19 +00:00
}