You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import classNames from 'classnames';
|
|
import React from 'react';
|
|
|
|
import {
|
|
useIsPrivate,
|
|
useNicknameOrProfileNameOrShortenedPubkey,
|
|
} from '../../hooks/useParamSelector';
|
|
import { Emojify } from './Emojify';
|
|
|
|
type Props = {
|
|
pubkey: string;
|
|
name?: string | null;
|
|
profileName?: string | null;
|
|
module?: string;
|
|
boldProfileName?: boolean;
|
|
compact?: boolean;
|
|
shouldShowPubkey: boolean;
|
|
};
|
|
|
|
export const ContactName = (props: Props) => {
|
|
const { pubkey, name, profileName, module, boldProfileName, compact, shouldShowPubkey } = props;
|
|
const prefix = module || 'module-contact-name';
|
|
|
|
const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
|
|
const isPrivate = useIsPrivate(pubkey);
|
|
const shouldShowProfile = Boolean(convoName || profileName || name);
|
|
|
|
const commonStyles = {
|
|
'min-width': 0,
|
|
'text-overflow': 'ellipsis',
|
|
overflow: 'hidden',
|
|
} as React.CSSProperties;
|
|
|
|
const styles = (
|
|
boldProfileName
|
|
? {
|
|
fontWeight: 'bold',
|
|
...commonStyles,
|
|
}
|
|
: commonStyles
|
|
) as React.CSSProperties;
|
|
const textProfile = profileName || name || convoName || window.i18n('anonymous');
|
|
|
|
return (
|
|
<span
|
|
className={classNames(prefix, compact && 'compact')}
|
|
dir="auto"
|
|
data-testid={`${prefix}__profile-name`}
|
|
style={{
|
|
textOverflow: 'inherit',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: 'var(--margins-xs)',
|
|
}}
|
|
>
|
|
{shouldShowProfile ? (
|
|
<div style={styles} className={`${prefix}__profile-name`}>
|
|
<Emojify text={textProfile} sizeClass="small" isGroup={!isPrivate} />
|
|
</div>
|
|
) : null}
|
|
{shouldShowPubkey ? <div className={`${prefix}__profile-number`}>{pubkey}</div> : null}
|
|
</span>
|
|
);
|
|
};
|