From ada945054d8ca92e7ac904a32115912eafc42a81 Mon Sep 17 00:00:00 2001 From: Tom Date: Thu, 25 May 2023 15:40:16 +0200 Subject: [PATCH] implement createPortal in board view for post menu --- src/components/views/Board.jsx | 304 +++++++++++++++++---------------- 1 file changed, 154 insertions(+), 150 deletions(-) diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 76227bf6..bf6fb50e 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1,4 +1,5 @@ import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { confirmAlert } from 'react-confirm-alert'; @@ -10,6 +11,7 @@ import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled'; import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; +import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import EditModal from '../modals/EditModal'; import ImageBanner from '../ImageBanner'; import ModerationModal from '../modals/ModerationModal'; @@ -81,10 +83,11 @@ const Board = () => { const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [selectedFeed, setSelectedFeed] = useState(feed); const [deletePost, setDeletePost] = useState(false); - const [rotatedStates, setRotatedStates] = useState({}); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isModerator, setIsModerator] = useState(false); const [commentCid, setCommentCid] = useState(null); + const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [openMenuCid, setOpenMenuCid] = useState(null); const [errorMessage, setErrorMessage] = useState(null); const [successMessage, setSuccessMessage] = useState(null); @@ -105,11 +108,8 @@ const Board = () => { }, [account?.author.address, subplebbit.roles]); - const handleOptionClick = (threadCid) => { - setRotatedStates(prevState => ({ - ...prevState, - [threadCid]: false - })); + const handleOptionClick = () => { + setOpenMenuCid(null); }; @@ -831,89 +831,91 @@ const Board = () => { title="Post menu" ref={el => threadMenuRefs.current[thread.cid] = el} className='post-menu-button' - rotated={rotatedStates[thread.cid]} + rotated={openMenuCid === thread.cid} onClick={() => { const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); - const menu = document.querySelector(`.post-menu-thread-${thread.cid}`); - menu.style.top = `calc(${rect.top + window.scrollY}px - 258px)`; - menu.style.left = `${rect.left}px`; - - setRotatedStates(prevState => ({ - ...prevState, - [thread.cid]: !prevState[thread.cid] - })); + setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); + setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); }} > ▶ -
- +
+ , document.body + )}