phanpy/src/components/name-text.jsx

118 lines
3.1 KiB
React
Raw Normal View History

2022-12-10 12:14:48 +03:00
import './name-text.css';
import { memo } from 'preact/compat';
2022-12-10 12:14:48 +03:00
import states from '../utils/states';
import Avatar from './avatar';
import EmojiText from './emoji-text';
2022-12-10 12:14:48 +03:00
2023-12-21 19:26:29 +03:00
const nameCollator = new Intl.Collator('en', {
sensitivity: 'base',
});
function NameText({
account,
instance,
showAvatar,
showAcct,
short,
external,
onClick,
}) {
2023-04-10 19:26:43 +03:00
const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } =
account;
let { username } = account;
2023-07-16 05:36:33 +03:00
const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
2022-12-10 12:14:48 +03:00
const trimmedUsername = username.toLowerCase().trim();
const trimmedDisplayName = (displayName || '').toLowerCase().trim();
2023-02-15 16:40:58 +03:00
const shortenedDisplayName = trimmedDisplayName
.replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1
2023-10-04 16:23:21 +03:00
.replace(/\s+/g, ''); // E.g. "My name" === "myname"
const shortenedAlphaNumericDisplayName = shortenedDisplayName.replace(
/[^a-z0-9@\.]/gi,
2023-10-04 16:23:21 +03:00
'',
); // Remove non-alphanumeric characters
if (
(!short &&
(trimmedUsername === trimmedDisplayName ||
trimmedUsername === shortenedDisplayName ||
trimmedUsername === shortenedAlphaNumericDisplayName ||
nameCollator.compare(trimmedUsername, shortenedDisplayName) === 0)) ||
shortenedAlphaNumericDisplayName === acct.toLowerCase()
) {
username = null;
}
2022-12-10 12:14:48 +03:00
return (
<a
class={`name-text ${showAcct ? 'show-acct' : ''} ${short ? 'short' : ''}`}
2022-12-10 12:14:48 +03:00
href={url}
2022-12-15 14:45:25 +03:00
target={external ? '_blank' : null}
2024-03-18 06:48:15 +03:00
title={
displayName
? `${displayName} (${acct2 ? '' : '@'}${acct})`
: `${acct2 ? '' : '@'}${acct}`
}
2022-12-10 12:14:48 +03:00
onClick={(e) => {
if (external) return;
if (e.shiftKey) return; // Save link? 🤷‍♂️
2022-12-10 12:14:48 +03:00
e.preventDefault();
e.stopPropagation();
if (onClick) return onClick(e);
if (e.metaKey || e.ctrlKey || e.shiftKey || e.which === 2) {
const internalURL = `#/${instance}/a/${id}`;
window.open(internalURL, '_blank');
return;
}
states.showAccount = {
account,
instance,
};
2022-12-10 12:14:48 +03:00
}}
>
{showAvatar && (
<>
2023-04-10 19:26:43 +03:00
<Avatar url={avatarStatic || avatar} squircle={bot} />{' '}
2022-12-10 12:14:48 +03:00
</>
)}
{displayName && !short ? (
<>
<b>
<EmojiText text={displayName} emojis={emojis} />
</b>
{!showAcct && username && (
2022-12-10 12:14:48 +03:00
<>
{' '}
<i>@{username}</i>
</>
)}
</>
) : short ? (
<i>{username}</i>
2022-12-10 12:14:48 +03:00
) : (
<b>{username}</b>
2022-12-10 12:14:48 +03:00
)}
{showAcct && (
<>
<br />
2023-07-16 05:36:33 +03:00
<i>
2024-03-18 06:48:15 +03:00
{acct2 ? '' : '@'}
{acct1}
{!!acct2 && <span class="ib">{acct2}</span>}
2023-07-16 05:36:33 +03:00
</i>
2022-12-10 12:14:48 +03:00
</>
)}
</a>
);
2022-12-16 08:27:04 +03:00
}
2024-01-25 16:28:41 +03:00
export default memo(NameText, (oldProps, newProps) => {
// Only care about account.id, the other props usually don't change
const { account } = oldProps;
const { account: newAccount } = newProps;
return account?.acct === newAccount?.acct;
});