import './name-text.css'; import { memo } from 'preact/compat'; import states from '../utils/states'; import Avatar from './avatar'; import EmojiText from './emoji-text'; const nameCollator = new Intl.Collator('en', { sensitivity: 'base', }); function NameText({ account, instance, showAvatar, showAcct, short, external, onClick, }) { const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } = account; let { username } = account; const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct]; const trimmedUsername = username.toLowerCase().trim(); const trimmedDisplayName = (displayName || '').toLowerCase().trim(); const shortenedDisplayName = trimmedDisplayName .replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1 .replace(/\s+/g, ''); // E.g. "My name" === "myname" const shortenedAlphaNumericDisplayName = shortenedDisplayName.replace( /[^a-z0-9]/gi, '', ); // Remove non-alphanumeric characters if ( !short && (trimmedUsername === trimmedDisplayName || trimmedUsername === shortenedDisplayName || trimmedUsername === shortenedAlphaNumericDisplayName || nameCollator.compare(trimmedUsername, shortenedDisplayName) === 0) ) { username = null; } return ( { if (external) return; e.preventDefault(); e.stopPropagation(); if (onClick) return onClick(e); states.showAccount = { account, instance, }; }} > {showAvatar && ( <> {' '} )} {displayName && !short ? ( <> {!showAcct && username && ( <> {' '} @{username} )} ) : short ? ( {username} ) : ( {username} )} {showAcct && ( <>
@{acct1} {acct2} )}
); } 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; });