refactor(popover): rewrite with hook (#23535)

* refactor(popover): rewrite with hook

* Update index.tsx

components/popover/__tests__/index.test.js

@@ -9,18 +9,20 @@ describe('Popover', () => {
   mountTest(Popover);
 
   it('should show overlay when trigger is clicked', async () => {
+    const ref = React.createRef();
+
     const popover = mount(
-      <Popover content="console.log('hello world')" title="code" trigger="click">
+      <Popover ref={ref} content="console.log('hello world')" title="code" trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
 
-    expect(popover.instance().getPopupDomNode()).toBe(null);
+    expect(ref.current.getPopupDomNode()).toBe(null);
 
     popover.find('span').simulate('click');
     await sleep(100);
 
-    const popup = popover.instance().getPopupDomNode();
+    const popup = ref.current.getPopupDomNode();
     expect(popup).not.toBe(null);
     expect(popup.className).toContain('ant-popover-placement-top');
     expect(popup.innerHTML).toMatchSnapshot();
@@ -29,16 +31,17 @@ describe('Popover', () => {
   it('shows content for render functions', () => {
     const renderTitle = () => 'some-title';
     const renderContent = () => 'some-content';
+    const ref = React.createRef();
 
     const popover = mount(
-      <Popover content={renderContent} title={renderTitle} trigger="click">
+      <Popover ref={ref} content={renderContent} title={renderTitle} trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
 
     popover.find('span').simulate('click');
 
-    const popup = popover.instance().getPopupDomNode();
+    const popup = ref.current.getPopupDomNode();
     expect(popup).not.toBe(null);
     expect(popup.innerHTML).toContain('some-title');
     expect(popup.innerHTML).toContain('some-content');
@@ -46,15 +49,17 @@ describe('Popover', () => {
   });
 
   it('handles empty title/content props safely', () => {
+    const ref = React.createRef();
+
     const popover = mount(
-      <Popover trigger="click">
+      <Popover trigger="click" ref={ref}>
         <span>show me your code</span>
       </Popover>,
     );
 
     popover.find('span').simulate('click');
 
-    const popup = popover.instance().getPopupDomNode();
+    const popup = ref.current.getPopupDomNode();
     expect(popup).not.toBe(null);
     expect(popup.innerHTML).toMatchSnapshot();
   });

components/popover/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
 
 export interface PopoverProps extends AbstractTooltipProps {
@@ -8,51 +8,40 @@ export interface PopoverProps extends AbstractTooltipProps {
   content?: React.ReactNode | RenderFunction;
 }
 
-export default class Popover extends React.Component<PopoverProps, {}> {
-  static defaultProps = {
-    placement: 'top' as TooltipPlacement,
-    transitionName: 'zoom-big',
-    trigger: 'hover',
-    mouseEnterDelay: 0.1,
-    mouseLeaveDelay: 0.1,
-    overlayStyle: {},
-  };
+const Popover = React.forwardRef<unknown, PopoverProps>(
+  ({ prefixCls: customizePrefixCls, title, content, ...otherProps }, ref) => {
+    const { getPrefixCls } = React.useContext(ConfigContext);
 
-  private tooltip: Tooltip;
+    const getOverlay = (prefixCls: string) => {
+      return (
+        <>
+          {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
+          <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
+        </>
+      );
+    };
 
-  getPopupDomNode() {
-    return this.tooltip.getPopupDomNode();
-  }
-
-  getOverlay(prefixCls: string) {
-    const { title, content } = this.props;
-    return (
-      <>
-        {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-        <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-      </>
-    );
-  }
-
-  saveTooltip = (node: any) => {
-    this.tooltip = node;
-  };
-
-  renderPopover = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, ...props } = this.props;
-    delete props.title;
     const prefixCls = getPrefixCls('popover', customizePrefixCls);
     return (
       <Tooltip
-        {...props}
+        {...otherProps}
         prefixCls={prefixCls}
-        ref={this.saveTooltip}
-        overlay={this.getOverlay(prefixCls)}
+        ref={ref as any}
+        overlay={getOverlay(prefixCls)}
       />
     );
-  };
+  },
+);
 
-  render() {
-    return <ConfigConsumer>{this.renderPopover}</ConfigConsumer>;
-  }
-}
+Popover.displayName = 'Popover';
+
+Popover.defaultProps = {
+  placement: 'top' as TooltipPlacement,
+  transitionName: 'zoom-big',
+  trigger: 'hover',
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  overlayStyle: {},
+};
+
+export default Popover;