External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update reply-quote-preview.tsx

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-06 17:36:21 +02:00
parent 84c04904f3
commit 13d3e7f271
1 changed files with 10 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/reply-quote-preview/reply-quote-preview.tsx
+10 -28
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Comment } from '@plebbit/plebbit-react-hooks'; import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -104,12 +104,10 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => { const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
const [hoveredCid, setHoveredCid] = useState<string | null>(null); const [hoveredCid, setHoveredCid] = useState<string | null>(null);
const placementRef = useRef<Placement>('bottom');
const quotelinkRef = useRef<HTMLSpanElement>(null);
const { refs, floatingStyles, update } = useFloating({ const { refs, floatingStyles, update } = useFloating({
placement: placementRef.current, placement: 'bottom',
middleware: [shift({ padding: 10 })], middleware: [shift({ padding: isBacklinkReply ? 5 : 10 })],
whileElementsMounted: autoUpdate, whileElementsMounted: autoUpdate,
}); });
@@ -120,25 +118,9 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
}; };
}, [update]); }, [update]);
const handleClickOutside = useCallback(
(event: MouseEvent) => {
if (quotelinkRef.current && !quotelinkRef.current.contains(event.target as Node)) {
setHoveredCid(null);
}
},
[quotelinkRef, setHoveredCid],
);
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [handleClickOutside]);
const replyBacklink = ( const replyBacklink = (
<span ref={quotelinkRef}> <>
<span className={styles.backlink} ref={refs.setReference} onClick={() => setHoveredCid(backlinkReply?.cid)}> <span className={styles.backlink} ref={refs.setReference} onMouseOver={() => setHoveredCid(backlinkReply?.cid)} onMouseLeave={() => setHoveredCid(null)}>
c/{backlinkReply?.shortCid}{' '} c/{backlinkReply?.shortCid}{' '}
</span> </span>
<Link to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`} className={styles.backlinkHash}> <Link to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`} className={styles.backlinkHash}>
@@ -151,13 +133,13 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
</div>, </div>,
document.body, document.body,
)} )}
</span> </>
); );
const replyQuotelink = ( const replyQuotelink = (
<span ref={quotelinkRef}> <>
<span ref={refs.setReference} className={styles.quoteLink} onClick={() => setHoveredCid(quotelinkReply?.cid)}> <span ref={refs.setReference} className={styles.quoteLink} onMouseOver={() => setHoveredCid(quotelinkReply?.cid)} onMouseLeave={() => setHoveredCid(null)}>
{quotelinkReply?.shortCid}{' '} c/{quotelinkReply?.shortCid}{' '}
</span> </span>
<Link className={styles.quoteLink} to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}> <Link className={styles.quoteLink} to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}>
# #
@@ -170,7 +152,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
</div>, </div>,
document.body, document.body,
)} )}
</span> </>
); );
return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink; return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;