fix(home): 定位问题

如果某个祖先元素设置了某些属性（如：filter、transform）等，会改变 fixed 的定位相对元素。 https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
XYShaoKang · Dec 3, 2022 · 10d20ef · 10d20ef
1 parent d621ff7
commit 10d20ef
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 37 deletions.
diff --git a/src/content/pages/home/DropContainer.tsx b/src/content/pages/home/DropContainer.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react'
 import styled from 'styled-components/macro'
 import { ConnectDropTarget } from 'react-dnd'
+import { Portal } from '../components/Portal'
 
 const Container = styled.div<{ active?: boolean }>`
   position: fixed;
@@ -35,14 +36,16 @@ type BlockDropContainerProps = {
 
 const DropContainer: FC<BlockDropContainerProps> = ({ drop, active }) => {
   return (
-    <Container ref={drop} active={active}>
-      拖动到此
-      <br />
-      加入黑名单
-      <SVG viewBox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
-      </SVG>
-    </Container>
+    <Portal>
+      <Container ref={drop} active={active}>
+        拖动到此
+        <br />
+        加入黑名单
+        <SVG viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
+        </SVG>
+      </Container>
+    </Portal>
   )
 }
 

diff --git a/src/content/pages/home/GlobalStyle.tsx b/src/content/pages/home/GlobalStyle.tsx
@@ -23,16 +23,5 @@ const GlobalStyle = styled.createGlobalStyle`
   .refined-leetcode-block.refined-leetcode-temp:hover {
     filter: none;
   }
-
-  /* 设置当前鼠标悬浮的帖子元素，以显示拖拽手柄和定位 */
-  .css-1pej3s6-FeedContainer:hover {
-    position: relative;
-    & > span {
-      display: block;
-    }
-  }
-  .css-1pej3s6-FeedContainer > span {
-    display: none;
-  }
 `
 export default GlobalStyle
diff --git a/src/content/pages/home/Mask.tsx b/src/content/pages/home/Mask.tsx
@@ -1,5 +1,6 @@
 import { useEffect, FC } from 'react'
 import 'styled-components/macro'
+import { Portal } from '../components/Portal'
 
 import { isValid } from './DragAndDrop'
 
@@ -19,32 +20,34 @@ const Mask: FC<MaskProps> = ({ open, setOpen }) => {
       el = e.target as HTMLElement
       if (!(el instanceof HTMLAnchorElement)) return
       if (!isValid(el.href)) return
-      setOpen(true)
+      setTimeout(() => setOpen(true), 100)
     }
     const handleDragend = () => {
       setOpen(false)
     }
-    document.body.addEventListener('drag', handleDragstart)
+    document.body.addEventListener('dragstart', handleDragstart)
     document.body.addEventListener('dragend', handleDragend)
     return () => {
-      document.body.removeEventListener('drag', handleDragstart)
+      document.body.removeEventListener('dragstart', handleDragstart)
       document.body.removeEventListener('dragend', handleDragend)
     }
   }, [])
   if (!open) return null
 
   return (
-    <div
-      css={`
-        top: 0;
-        left: 0;
-        position: fixed;
-        width: 100vw;
-        height: 100vh;
-        backdrop-filter: blur(5px);
-        z-index: 10;
-      `}
-    />
+    <Portal>
+      <div
+        css={`
+          top: 0;
+          left: 0;
+          position: fixed;
+          width: 100vw;
+          height: 100vh;
+          backdrop-filter: blur(5px);
+          z-index: 10;
+        `}
+      />
+    </Portal>
   )
 }
 

diff --git a/src/content/pages/home/PostItem.tsx b/src/content/pages/home/PostItem.tsx
@@ -3,6 +3,7 @@ import { css } from 'styled-components/macro'
 import { useDrag } from 'react-dnd'
 
 import Popper from '../components/PopperUnstyled'
+import { useHover } from '../hooks'
 
 export const ItemTypes = {
   POST: 'post',
@@ -22,15 +23,26 @@ const PostItem: FC<{
 }> = ({ setOpen }) => {
   const [container, setContainer] = useState<HTMLElement | null>(null)
   const postElements = useRef<HTMLElement[]>([])
+  const [hoverRef, hoverIcon] = useHover()
+  const [hoverContainer, setHoverContainer] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>()
 
   const handleMouseEnter = (e: MouseEvent) => {
     const el = e.target as HTMLDivElement
 
     if (el && !el.classList.contains('refined-leetcode-block')) {
-      setContainer(() => el ?? null)
+      if (timer.current) clearTimeout(timer.current)
+      setContainer(el)
+      setHoverContainer(true)
     }
   }
 
+  const handleMouseLeave = () => {
+    timer.current = setTimeout(() => {
+      setHoverContainer(false)
+    }, 100)
+  }
+
   useEffect(() => {
     postElements.current.push(
       ...document.querySelectorAll<HTMLDivElement>(
@@ -39,11 +51,13 @@ const PostItem: FC<{
     )
     postElements.current.forEach(el => {
       el.addEventListener('mouseenter', handleMouseEnter)
+      el.addEventListener('mouseleave', handleMouseLeave)
     })
 
     return () => {
       postElements.current.forEach(el => {
         el.removeEventListener('mouseenter', handleMouseEnter)
+        el.removeEventListener('mouseleave', handleMouseLeave)
       })
       postElements.current = []
     }
@@ -58,6 +72,7 @@ const PostItem: FC<{
             if (type === 'QUESTION' || type === 'SOLUTION') {
               postElements.current.push(node)
               node.addEventListener('mouseenter', handleMouseEnter)
+              node.addEventListener('mouseleave', handleMouseLeave)
             }
           }
         }
@@ -104,15 +119,17 @@ const PostItem: FC<{
     }
   }, [container, isDragging, setOpen])
 
-  if (!container) return null
+  if (!hoverContainer && !hoverIcon && !isDragging) return null
   preview(container)
 
   return (
     <Popper
       anchorEl={container}
-      container={container}
       placement="top"
-      ref={drag}
+      ref={(ref: HTMLSpanElement | null) => {
+        hoverRef(ref)
+        drag(ref)
+      }}
       offset={{ top: 36, left: 339 }}
     >
       <svg