refactor: rewrite Overlay of PurePanel (#50097)

components/popconfirm/PurePanel.tsx

@@ -59,16 +59,17 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const [contextLocale] = useLocale('Popconfirm', defaultLocale.Popconfirm);
-  const theTitle = getRenderPropValue(title);
-  const theDescription = getRenderPropValue(description);
+
+  const titleNode = getRenderPropValue(title);
+  const descriptionNode = getRenderPropValue(description);
 
   return (
     <div className={`${prefixCls}-inner-content`} onClick={onPopupClick}>
       <div className={`${prefixCls}-message`}>
         {icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
         <div className={`${prefixCls}-message-text`}>
-          {theTitle && <div className={classNames(`${prefixCls}-title`)}>{theTitle}</div>}
-          {theDescription && <div className={`${prefixCls}-description`}>{theDescription}</div>}
+          {titleNode && <div className={`${prefixCls}-title`}>{titleNode}</div>}
+          {descriptionNode && <div className={`${prefixCls}-description`}>{descriptionNode}</div>}
         </div>
       </div>
       <div className={`${prefixCls}-buttons`}>

components/popover/PurePanel.tsx

@@ -7,18 +7,20 @@ import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
-export const getOverlay = (
-  prefixCls?: string,
-  title?: PopoverProps['title'],
-  content?: PopoverProps['content'],
-) => {
+interface OverlayProps {
+  prefixCls?: string;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+}
+
+export const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => {
   if (!title && !content) {
     return null;
   }
   return (
     <>
-      {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-      <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
+      {title && <div className={`${prefixCls}-title`}>{title}</div>}
+      {content && <div className={`${prefixCls}-inner-content`}>{content}</div>}
     </>
   );
 };
@@ -43,20 +45,22 @@ export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
     children,
   } = props;
 
+  const titleNode = getRenderPropValue(title);
+  const contentNode = getRenderPropValue(content);
+
+  const cls = classNames(
+    hashId,
+    prefixCls,
+    `${prefixCls}-pure`,
+    `${prefixCls}-placement-${placement}`,
+    className,
+  );
+
   return (
-    <div
-      className={classNames(
-        hashId,
-        prefixCls,
-        `${prefixCls}-pure`,
-        `${prefixCls}-placement-${placement}`,
-        className,
-      )}
-      style={style}
-    >
+    <div className={cls} style={style}>
       <div className={`${prefixCls}-arrow`} />
       <Popup {...props} className={hashId} prefixCls={prefixCls}>
-        {children || getOverlay(prefixCls, title, content)}
+        {children || <Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />}
       </Popup>
     </div>
   );

components/popover/index.tsx

@@ -10,7 +10,7 @@ import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
 import Tooltip from '../tooltip';
-import PurePanel from './PurePanel';
+import PurePanel, { Overlay } from './PurePanel';
 // CSSINJS
 import useStyle from './style';
 
@@ -23,19 +23,6 @@ export interface PopoverProps extends AbstractTooltipProps {
   ) => void;
 }
 
-interface OverlayProps {
-  prefixCls?: string;
-  title?: React.ReactNode;
-  content?: React.ReactNode;
-}
-
-const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
-  <>
-    {title && <div className={`${prefixCls}-title`}>{title}</div>}
-    {content && <div className={`${prefixCls}-inner-content`}>{content}</div>}
-  </>
-);
-
 const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,