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

fix(post menu): use floating ui to dynamically position dropdowns based on available space

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-28 18:02:48 +02:00
parent fae8cd1640
commit d964590f54
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post-menu/post-menu.tsx
+16 -2
View File
@@ -31,16 +31,23 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => {
const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => {
const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false);
const { refs, floatingStyles } = useFloating({
placement: 'right-start',
middleware: [flip(), shift({ padding: 10 })],
});
return (
<div
className={`${styles.postMenuItem} ${styles.dropdown}`}
onMouseOver={() => setIsImageSearchMenuOpen(true)}
onMouseLeave={() => setIsImageSearchMenuOpen(false)}
ref={refs.setReference}
onClick={onClose}
>
Image search »
{isImageSearchMenuOpen && (
<div className={styles.dropdownMenu}>
<div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
<a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Google</div>
</a>
@@ -59,16 +66,23 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => {
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
const { refs, floatingStyles } = useFloating({
placement: 'right-start',
middleware: [flip(), shift({ padding: 10 })],
});
return (
<div
className={`${styles.postMenuItem} ${styles.dropdown}`}
onMouseOver={() => setIsClientRedirectMenuOpen(true)}
onMouseLeave={() => setIsClientRedirectMenuOpen(false)}
ref={refs.setReference}
onClick={onClose}
>
View on »
{isClientRedirectMenuOpen && (
<div className={styles.dropdownMenu}>
<div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
<a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Seedit</div>
</a>