From 47d10868b2dfa22f40acece81123583b0b121728 Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Sun, 29 Dec 2024 14:04:29 +0800
Subject: [PATCH 1/2] refactor: try use function component

---
 src/components/popover/popover.tsx | 10 +++----
 src/components/popover/wrapper.tsx | 46 ++++++++++++++----------------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 719a74154f..e30b9248d5 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -34,7 +34,7 @@ import {
 import { Arrow } from './arrow'
 import { DeprecatedPlacement, Placement } from './index'
 import { normalizePlacement } from './normalize-placement'
-import { Wrapper } from './wrapper'
+import { Wrapper, WrapperRef } from './wrapper'
 
 const classPrefix = `adm-popover`
 
@@ -86,7 +86,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
     [visible]
   )
 
-  const targetRef = useRef<Wrapper>(null)
+  const wrapperRef = useRef<WrapperRef>(null)
   const floatingRef = useRef<HTMLDivElement>(null)
   const arrowRef = useRef<HTMLDivElement>(null)
 
@@ -113,7 +113,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
   const [targetElement, setTargetElement] = useState<Element | null>(null)
 
   async function update() {
-    const target = targetRef.current?.element ?? null
+    const target = wrapperRef.current?.element ?? null
     const floating = floatingRef.current
     const arrowElement = arrowRef.current
     setTargetElement(target)
@@ -198,7 +198,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
       if (!props.trigger) return
       setVisible(false)
     },
-    [() => targetRef.current?.element, floatingRef],
+    [() => wrapperRef.current?.element, floatingRef],
     ['click', 'touchmove']
   )
 
@@ -206,7 +206,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
 
   return (
     <>
-      <Wrapper ref={targetRef}>{props.children}</Wrapper>
+      <Wrapper ref={wrapperRef}>{props.children}</Wrapper>
       {shouldRender && renderToContainer(props.getContainer, floating)}
     </>
   )
diff --git a/src/components/popover/wrapper.tsx b/src/components/popover/wrapper.tsx
index f4d08aefef..9d15d25db2 100644
--- a/src/components/popover/wrapper.tsx
+++ b/src/components/popover/wrapper.tsx
@@ -1,29 +1,25 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import { findDOMNode } from 'react-dom'
+import type { ReactElement, ReactNode } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 
-export class Wrapper extends React.Component<
-  {
-    children?: ReactNode
-  },
-  {}
-> {
-  element: Element | null = null
-  componentDidMount() {
-    this.componentDidUpdate()
-  }
+interface WrapperProps {
+  children?: ReactNode
+}
 
-  componentDidUpdate() {
-    // eslint-disable-next-line
-    const node = findDOMNode(this)
-    if (node instanceof Element) {
-      this.element = node
-    } else {
-      this.element = null
-    }
-  }
+export interface WrapperRef {
+  element: Element | null
+}
 
-  render() {
-    return React.Children.only(this.props.children)
+export const Wrapper = forwardRef<WrapperRef, WrapperProps>(
+  ({ children }, ref) => {
+    const elementRef = useRef<HTMLElement>(null)
+
+    useImperativeHandle(ref, () => ({
+      element: elementRef.current,
+    }))
+
+    const child = React.Children.only(children) as ReactElement<any, any>
+    return React.cloneElement(child, {
+      ref: elementRef,
+    })
   }
-}
+)

From 09f568c7d925986414265ea37be1905177a01197 Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Sun, 29 Dec 2024 17:02:46 +0800
Subject: [PATCH 2/2] refactor: wrapper

---
 src/components/popover/wrapper.tsx | 32 +++++++++++++++++-------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/popover/wrapper.tsx b/src/components/popover/wrapper.tsx
index 9d15d25db2..55b4ec3e0c 100644
--- a/src/components/popover/wrapper.tsx
+++ b/src/components/popover/wrapper.tsx
@@ -1,25 +1,29 @@
-import type { ReactElement, ReactNode } from 'react'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-
-interface WrapperProps {
-  children?: ReactNode
-}
+import React, { ReactElement, useImperativeHandle, useRef } from 'react'
 
 export interface WrapperRef {
-  element: Element | null
+  element: Element
 }
 
-export const Wrapper = forwardRef<WrapperRef, WrapperProps>(
+export const Wrapper = React.forwardRef<WrapperRef, { children: ReactElement }>(
   ({ children }, ref) => {
-    const elementRef = useRef<HTMLElement>(null)
+    const childRef = useRef<any>(null)
 
     useImperativeHandle(ref, () => ({
-      element: elementRef.current,
+      element: childRef.current,
     }))
 
-    const child = React.Children.only(children) as ReactElement<any, any>
-    return React.cloneElement(child, {
-      ref: elementRef,
-    })
+    return (
+      <>
+        <span
+          style={{ display: 'none' }}
+          ref={el => {
+            if (el) {
+              childRef.current = el.nextElementSibling
+            }
+          }}
+        />
+        {React.Children.only(children)}
+      </>
+    )
   }
 )