From 08188f72ce6daf97dadd158d31960b96ef8fe50a Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 30 Sep 2022 10:17:49 +0800
Subject: [PATCH] style: Code optimization (#37804)

* style: Code optimization

* style: Code optimization

* style: Code optimization
---
 components/popover/__tests__/index.test.tsx | 27 +++----
 components/popover/index.tsx                | 83 ++++++++++++---------
 2 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx
index fc6f48610f..eb0e3c3499 100644
--- a/components/popover/__tests__/index.test.tsx
+++ b/components/popover/__tests__/index.test.tsx
@@ -43,34 +43,27 @@ describe('Popover', () => {
   });
 
   it('handles empty title/content props safely', () => {
-    const ref = React.createRef<any>();
-
-    const popover = render(
-      <Popover trigger="click" ref={ref}>
+    const { container } = render(
+      <Popover trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
+    fireEvent.click(container.querySelector('span')!);
 
-    fireEvent.click(popover.container.querySelector('span')!);
-
-    const popup = ref.current.getPopupDomNode();
-    expect(popup).toBe(null);
+    expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
+    expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
   });
 
   it('should not render popover when the title & content props is empty', () => {
-    const ref = React.createRef<any>();
-
-    const popover = render(
-      <Popover trigger="click" ref={ref} content="">
+    const { container } = render(
+      <Popover trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
+    fireEvent.click(container.querySelector('span')!);
 
-    fireEvent.click(popover.container.querySelector('span')!);
-
-    const popup = ref.current.getPopupDomNode();
-
-    expect(popup).toBe(null);
+    expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
+    expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
   });
 
   it('props#overlay do not warn anymore', () => {
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index a381fa4c72..296241babb 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import type { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
+import type { AbstractTooltipProps } from '../tooltip';
 import Tooltip from '../tooltip';
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
@@ -13,45 +13,60 @@ export interface PopoverProps extends AbstractTooltipProps {
   _overlay?: React.ReactNode;
 }
 
-const Popover = React.forwardRef<unknown, PopoverProps>(
-  ({ prefixCls: customizePrefixCls, title, content, _overlay, ...otherProps }, ref) => {
-    const { getPrefixCls } = React.useContext(ConfigContext);
+interface OverlayPorps {
+  prefixCls?: string;
+  title?: PopoverProps['title'];
+  content?: PopoverProps['content'];
+}
 
-    const getOverlay = (prefixCls: string) => {
-      if (!title && !content) return undefined;
-      return (
-        <>
-          {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-          <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-        </>
-      );
-    };
+const Overlay: React.FC<OverlayPorps> = ({ 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>
+    </>
+  );
+};
 
-    const prefixCls = getPrefixCls('popover', customizePrefixCls);
-    const rootPrefixCls = getPrefixCls();
+const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    title,
+    content,
+    _overlay,
+    placement = 'top',
+    trigger = 'hover',
+    mouseEnterDelay = 0.1,
+    mouseLeaveDelay = 0.1,
+    overlayStyle = {},
+    ...otherProps
+  } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
-    return (
-      <Tooltip
-        {...otherProps}
-        prefixCls={prefixCls}
-        ref={ref as any}
-        overlay={_overlay || getOverlay(prefixCls)}
-        transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
-      />
-    );
-  },
-);
+  const prefixCls = getPrefixCls('popover', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+
+  return (
+    <Tooltip
+      placement={placement}
+      trigger={trigger}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
+      overlayStyle={overlayStyle}
+      {...otherProps}
+      prefixCls={prefixCls}
+      ref={ref}
+      overlay={_overlay || <Overlay prefixCls={prefixCls} title={title} content={content} />}
+      transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
+    />
+  );
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Popover.displayName = 'Popover';
 }
 
-Popover.defaultProps = {
-  placement: 'top' as TooltipPlacement,
-  trigger: 'hover',
-  mouseEnterDelay: 0.1,
-  mouseLeaveDelay: 0.1,
-  overlayStyle: {},
-};
-
 export default Popover;