moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix warning from display-name components

This commit is contained in:
danidfra 2024-10-28 17:39:26 -03:00
parent d5c1334eeb
commit 838d86fb66
3 changed files with 3 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/display-name-inline.tsx
View File

@ -32,7 +32,7 @@ const DisplayNameInline: React.FC<IDisplayName> = ({ account, withSuffix = true
);
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
const suffix = (<span className='relative block max-w-full truncate'>@{getAcct(account, displayFqn)}</span>);
return (
<div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>

4
src/components/display-name.tsx
View File

@ -33,10 +33,10 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
</HStack>
);
const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
const suffix = (<span className='relative text-[14px] font-semibold'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
return (
<span className='display-name' data-testid='display-name'>
<span className='relative block max-w-full truncate' data-testid='display-name'>
<HoverRefWrapper accountId={account.id} inline>
{displayName}
</HoverRefWrapper>

53
src/features/ui/components/modals/zap-split/display-name-row.tsx
View File

@ -1,53 +0,0 @@
import React from 'react';
import { HStack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification-badge';
import { useSoapboxConfig } from 'soapbox/hooks';
import { getAcct } from 'soapbox/utils/accounts';
import type { Account } from 'soapbox/schemas';
interface IDisplayName {
account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
withSuffix?: boolean;
}
/**
* This component is different from other display name components because it displays the name inline.
*
* @param {IDisplayName} props - The properties for this component.
* @param {Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>} props.account - The account object contains all the metadata for an account, such as the display name, ID, and more.
* @param {boolean} [props.withSuffix=true] - Determines whether to show the account suffix (eg, @danidfra).
*
* @returns {JSX.Element} The DisplayNameRow component.
*/
const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true }) => {
const { displayFqn = false } = useSoapboxConfig();
const { verified } = account;
const displayName = (
<HStack space={1} alignItems='center' justifyContent='center' grow>
<Text
size='sm'
weight='normal'
truncate
dangerouslySetInnerHTML={{ __html: account.display_name_html }}
/>
{verified && <VerificationBadge />}
</HStack>
);
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
return (
<div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
{displayName}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className='hidden text-2xl font-bold sm:block'>-</span>
{withSuffix && suffix}
</div>
);
};
export default DisplayNameRow;