bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: rename HoverRefWrapper component

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-09 18:04:39 +02:00
parent 83992b4d12
commit cffc9d7332
10 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/pl-fe/src/components/account-hover-card.tsx
View file

@ -12,7 +12,7 @@ import { UserPanel } from 'pl-fe/features/ui/util/async-components';
import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
import { useAccountHoverCardStore } from 'pl-fe/stores';
import { showAccountHoverCard } from './hover-ref-wrapper';
import { showAccountHoverCard } from './hover-account-wrapper';
import { ParsedContent } from './parsed-content';
import { dateFormatOptions } from './relative-timestamp';
import Scrobble from './scrobble';

6
packages/pl-fe/src/components/account.tsx
View file

@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import VerificationBadge from 'pl-fe/components/verification-badge';
import ActionButton from 'pl-fe/features/ui/components/action-button';
import { useAppSelector } from 'pl-fe/hooks';
@ -249,7 +249,7 @@ const Account = ({
{withAvatar && (
<ProfilePopper
condition={showAccountHoverCard}
wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} element='span'>{children}</HoverRefWrapper>}
wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
>
<LinkEl className='rounded-full' {...linkProps}>
<Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
@ -267,7 +267,7 @@ const Account = ({
<div className='grow overflow-hidden'>
<ProfilePopper
condition={showAccountHoverCard}
wrapper={(children) => <HoverRefWrapper accountId={account.id} element='span'>{children}</HoverRefWrapper>}
wrapper={(children) => <HoverAccountWrapper accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
>
<LinkEl {...linkProps}>
<HStack space={1} alignItems='center' grow>

8
packages/pl-fe/src/components/hover-ref-wrapper.tsx → packages/pl-fe/src/components/hover-account-wrapper.tsx
View file

@ -11,7 +11,7 @@ const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) =>
openAccountHoverCard(ref, accountId);
}, 600);
interface IHoverRefWrapper {
interface IHoverAccountWrapper {
accountId: string;
element?: 'div' | 'span' | 'bdi';
className?: string;
@ -19,7 +19,7 @@ interface IHoverRefWrapper {
}
/** Makes a profile hover card appear when the wrapped element is hovered. */
const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, element: Elem = 'div', className }) => {
const HoverAccountWrapper: React.FC<IHoverAccountWrapper> = ({ accountId, children, element: Elem = 'div', className }) => {
const dispatch = useAppDispatch();
const { openAccountHoverCard, closeAccountHoverCard } = useAccountHoverCardStore();
@ -46,7 +46,7 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, elem
return (
<Elem
ref={ref}
className={clsx('hover-ref-wrapper', className)}
className={clsx('hover-account-wrapper', className)}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
@ -56,4 +56,4 @@ const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, elem
);
};
export { HoverRefWrapper as default, showAccountHoverCard };
export { HoverAccountWrapper as default, showAccountHoverCard };

6
packages/pl-fe/src/components/parsed-content.tsx
View file

@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import HashtagLink from './hashtag-link';
import HoverRefWrapper from './hover-ref-wrapper';
import HoverAccountWrapper from './hover-account-wrapper';
import StatusMention from './status-mention';
import type { Mention } from 'pl-api';
@ -70,7 +70,7 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote })
const mention = mentions.find(({ url }) => domNode.attribs.href === url);
if (mention) {
return (
<HoverRefWrapper accountId={mention.id} element='span'>
<HoverAccountWrapper accountId={mention.id} element='span'>
<Link
to={`/@${mention.acct}`}
className='text-primary-600 hover:underline dark:text-accent-blue'
@ -79,7 +79,7 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote })
>
@{mention.username}
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
);
}
} else if (domNode.attribs['data-user']) {

10
packages/pl-fe/src/components/status-mention.tsx
View file

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import { useAccount } from 'pl-fe/api/hooks';
import HoverRefWrapper from './hover-ref-wrapper';
import HoverAccountWrapper from './hover-account-wrapper';
interface IStatusMention {
accountId: string;
@ -14,13 +14,13 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
const { account } = useAccount(accountId);
if (!account) return (
<HoverRefWrapper accountId={accountId} element='span'>
<HoverAccountWrapper accountId={accountId} element='span'>
{fallback}
</HoverRefWrapper>
</HoverAccountWrapper>
);
return (
<HoverRefWrapper accountId={accountId} element='span'>
<HoverAccountWrapper accountId={accountId} element='span'>
<Link
to={`/@${account.acct}`}
className='text-primary-600 hover:underline dark:text-accent-blue'
@ -29,7 +29,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
>
@{account.acct}
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
);
};

6
packages/pl-fe/src/components/status-reply-mentions.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { FormattedList, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import HoverStatusWrapper from 'pl-fe/components/hover-status-wrapper';
import { useModalsStore } from 'pl-fe/stores';
@ -56,9 +56,9 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
if (hoverable) {
return (
<HoverRefWrapper key={account.id} accountId={account.id} element='span'>
<HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
{link}
</HoverRefWrapper>
</HoverAccountWrapper>
);
} else {
return link;

14
packages/pl-fe/src/features/admin/components/report.tsx
View file

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
import { closeReport } from 'pl-fe/actions/admin';
import { deactivateUserModal, deleteUserModal } from 'pl-fe/actions/moderation';
import DropdownMenu from 'pl-fe/components/dropdown-menu';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import { Accordion, Avatar, Button, Stack, HStack, Text } from 'pl-fe/components/ui';
import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
import { makeGetReport } from 'pl-fe/selectors';
@ -78,7 +78,7 @@ const Report: React.FC<IReport> = ({ id }) => {
return (
<HStack space={3} className='p-3' key={report.id}>
<HoverRefWrapper accountId={targetAccount.id} element='span'>
<HoverAccountWrapper accountId={targetAccount.id} element='span'>
<Link to={`/@${acct}`} title={acct}>
<Avatar
src={targetAccount.avatar}
@ -87,7 +87,7 @@ const Report: React.FC<IReport> = ({ id }) => {
className='overflow-hidden'
/>
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
<Stack space={3} className='overflow-hidden' grow>
<Text tag='h4' weight='bold'>
@ -95,9 +95,9 @@ const Report: React.FC<IReport> = ({ id }) => {
id='admin.reports.report_title'
defaultMessage='Report on {acct}'
values={{ acct: (
<HoverRefWrapper accountId={targetAccount.id} element='span'>
<HoverAccountWrapper accountId={targetAccount.id} element='span'>
<Link to={`/@${acct}`} title={acct}>@{acct}</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
) }}
/>
</Text>
@ -131,7 +131,7 @@ const Report: React.FC<IReport> = ({ id }) => {
<HStack space={1}>
<Text theme='muted' tag='span'>&mdash;</Text>
<HoverRefWrapper accountId={account.id} element='span'>
<HoverAccountWrapper accountId={account.id} element='span'>
<Link
to={`/@${reporterAcct}`}
title={reporterAcct}
@ -139,7 +139,7 @@ const Report: React.FC<IReport> = ({ id }) => {
>
@{reporterAcct}
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
</HStack>
)}
</Stack>

6
packages/pl-fe/src/features/directory/components/account-card.tsx
View file

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
import { useAccount } from 'pl-fe/api/hooks';
import Account from 'pl-fe/components/account';
import Badge from 'pl-fe/components/badge';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import { ParsedContent } from 'pl-fe/components/parsed-content';
import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
import { Avatar, Stack, Text } from 'pl-fe/components/ui';
@ -49,7 +49,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
className='h-32 w-full rounded-t-lg object-cover'
/>
<HoverRefWrapper key={account.id} accountId={account.id} element='span'>
<HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
<Link to={`/@${account.acct}`} title={account.acct}>
<Avatar
src={account.avatar}
@ -58,7 +58,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
size={64}
/>
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
</div>
<Stack space={4} className='p-3 pt-10'>

6
packages/pl-fe/src/features/notifications/components/notification.tsx
View file

@ -5,7 +5,7 @@ import { Link, useHistory } from 'react-router-dom';
import { mentionCompose } from 'pl-fe/actions/compose';
import { reblog, favourite, unreblog, unfavourite } from 'pl-fe/actions/interactions';
import { toggleStatusMediaHidden } from 'pl-fe/actions/statuses';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import Icon from 'pl-fe/components/icon';
import RelativeTimestamp from 'pl-fe/components/relative-timestamp';
import { HStack, Text, Emoji } from 'pl-fe/components/ui';
@ -31,14 +31,14 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
};
const buildLink = (account: Pick<Account, 'acct' | 'display_name_html' | 'id'>): JSX.Element => (
<HoverRefWrapper key={account.acct} element='bdi' accountId={account.id}>
<HoverAccountWrapper key={account.acct} element='bdi' accountId={account.id}>
<Link
className='font-bold text-gray-800 hover:underline dark:text-gray-200'
title={account.acct}
to={`/@${account.acct}`}
dangerouslySetInnerHTML={{ __html: account.display_name_html }}
/>
</HoverRefWrapper>
</HoverAccountWrapper>
);
const icons: Partial<Record<NotificationType | 'reply', string>> = {

6
packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx
View file

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
import { fetchAccountFamiliarFollowers } from 'pl-fe/actions/familiar-followers';
import AvatarStack from 'pl-fe/components/avatar-stack';
import HoverRefWrapper from 'pl-fe/components/hover-ref-wrapper';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
import { HStack, Text } from 'pl-fe/components/ui';
import VerificationBadge from 'pl-fe/components/verification-badge';
import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks';
@ -45,7 +45,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
}
const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
<HoverRefWrapper accountId={account.id} key={account.id} element='span'>
<HoverAccountWrapper accountId={account.id} key={account.id} element='span'>
<Link className='mention inline-block' to={`/@${account.acct}`}>
<HStack space={1} alignItems='center' grow>
<Text
@ -58,7 +58,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
{account.verified && <VerificationBadge />}
</HStack>
</Link>
</HoverRefWrapper>
</HoverAccountWrapper>
)).toArray().filter(Boolean);
if (familiarFollowerIds.size > 2) {