mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

StatusReplyMentions: prevent bubbling

environments/review-mouseup-snljj4/deployments/1461
Alex Gleason 2022-11-19 15:33:30 -06:00
rodzic 4c57968914
commit f66b50361d
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 30 dodań i 29 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

59
app/soapbox/components/status-reply-mentions.tsx
Wyświetl plik

@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper'; import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper'; import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
import StopPropagation from 'soapbox/components/stop-propagation';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import type { Account, Status } from 'soapbox/types/entities'; import type { Account, Status } from 'soapbox/types/entities';
@ -18,8 +19,6 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => { const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
e.stopPropagation();
const account = status.account as Account; const account = status.account as Account;
dispatch(openModal('MENTIONS', { dispatch(openModal('MENTIONS', {
@ -50,7 +49,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
// The typical case with a reply-to and a list of mentions. // The typical case with a reply-to and a list of mentions.
const accounts = to.slice(0, 2).map(account => { const accounts = to.slice(0, 2).map(account => {
const link = ( const link = (
<Link to={`/@${account.acct}`} className='reply-mentions__account' onClick={(e) => e.stopPropagation()}>@{account.username}</Link> <Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
); );
if (hoverable) { if (hoverable) {
@ -73,32 +72,34 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
} }
return ( return (
<div className='reply-mentions'> <StopPropagation>
<FormattedMessage <div className='reply-mentions'>
id='reply_mentions.reply.hoverable' <FormattedMessage
defaultMessage='<hover>Replying to</hover> {accounts}' id='reply_mentions.reply.hoverable'
values={{ defaultMessage='<hover>Replying to</hover> {accounts}'
accounts: <FormattedList type='conjunction' value={accounts} />, values={{
hover: (children: React.ReactNode) => { accounts: <FormattedList type='conjunction' value={accounts} />,
if (hoverable) { hover: (children: React.ReactNode) => {
return ( if (hoverable) {
<HoverStatusWrapper statusId={status.in_reply_to_id} inline> return (
<span <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
key='hoverstatus' <span
className='hover:underline cursor-pointer' key='hoverstatus'
role='presentation' className='hover:underline cursor-pointer'
> role='presentation'
{children} >
</span> {children}
</HoverStatusWrapper> </span>
); </HoverStatusWrapper>
} else { );
return children; } else {
} return children;
}, }
}} },
/> }}
</div> />
</div>
</StopPropagation>
); );
}; };