refactor(popconfirm): rewrite with hook (#23536)

* refactor(popconfirm): rewrite with hook

* fix lint

components/alert/__tests__/index.test.tsx

@@ -90,9 +90,10 @@ describe('Alert', () => {
   });
 
   it('could be used with Popconfirm', async () => {
+    const ref = React.createRef<any>();
     jest.useRealTimers();
     const wrapper = mount(
-      <Popconfirm title="xxx">
+      <Popconfirm ref={ref} title="xxx">
         <Alert
           message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
           type="warning"
@@ -101,7 +102,7 @@ describe('Alert', () => {
     );
     wrapper.find('.ant-alert').simulate('click');
     await sleep(0);
-    expect(wrapper.find<Popconfirm>(Popconfirm).instance().getPopupDomNode()).toBeTruthy();
+    expect(ref.current.getPopupDomNode()).toBeTruthy();
     jest.useFakeTimers();
   });
 });

components/popconfirm/__tests__/index.test.js

@@ -40,18 +40,19 @@ describe('Popconfirm', () => {
   });
 
   it('should show overlay when trigger is clicked', async () => {
+    const ref = React.createRef();
     const popconfirm = mount(
-      <Popconfirm title="code">
+      <Popconfirm ref={ref} title="code">
         <span>show me your code</span>
       </Popconfirm>,
     );
 
-    expect(popconfirm.instance().getPopupDomNode()).toBe(null);
+    expect(ref.current.getPopupDomNode()).toBe(null);
 
     popconfirm.find('span').simulate('click');
     await sleep(100);
 
-    const popup = popconfirm.instance().getPopupDomNode();
+    const popup = ref.current.getPopupDomNode();
     expect(popup).not.toBe(null);
     expect(popup.className).toContain('ant-popover-placement-top');
     expect(popup.innerHTML).toMatchSnapshot();
@@ -60,36 +61,39 @@ describe('Popconfirm', () => {
 
   it('shows content for render functions', async () => {
     const makeRenderFunction = content => () => content;
+    const ref = React.createRef();
 
     const popconfirm = mount(
-      <Popconfirm title={makeRenderFunction('some-title')}>
+      <Popconfirm ref={ref} title={makeRenderFunction('some-title')}>
         <span>show me your code</span>
       </Popconfirm>,
     );
 
-    expect(popconfirm.instance().getPopupDomNode()).toBe(null);
+    expect(ref.current.getPopupDomNode()).toBe(null);
 
     popconfirm.find('span').simulate('click');
     await sleep(100);
 
-    const popup = popconfirm.instance().getPopupDomNode();
+    const popup = ref.current.getPopupDomNode();
     expect(popup).not.toBe(null);
     expect(popup.innerHTML).toContain('some-title');
     expect(popup.innerHTML).toMatchSnapshot();
   });
 
   it('should be controlled by visible', () => {
+    const ref = React.createRef();
     jest.useFakeTimers();
     const popconfirm = mount(
-      <Popconfirm title="code">
+      <Popconfirm ref={ref} title="code">
         <span>show me your code</span>
       </Popconfirm>,
     );
-    expect(popconfirm.instance().getPopupDomNode()).toBeFalsy();
+    expect(ref.current.getPopupDomNode()).toBeFalsy();
     popconfirm.setProps({ visible: true });
-    expect(popconfirm.instance().getPopupDomNode()).toBeTruthy();
-    expect(popconfirm.instance().getPopupDomNode().className).not.toContain('ant-popover-hidden');
+    expect(ref.current.getPopupDomNode()).toBeTruthy();
+    expect(ref.current.getPopupDomNode().className).not.toContain('ant-popover-hidden');
     popconfirm.setProps({ visible: false });
+    popconfirm.update(); // https://github.com/enzymejs/enzyme/issues/2305
     jest.runAllTimers();
     expect(popconfirm.find('Trigger').props().popupVisible).toBe(false);
     jest.useRealTimers();
@@ -115,10 +119,7 @@ describe('Popconfirm', () => {
     expect(confirm).toHaveBeenCalled();
     expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
     triggerNode.simulate('click');
-    popconfirm
-      .find('.ant-btn')
-      .at(0)
-      .simulate('click');
+    popconfirm.find('.ant-btn').at(0).simulate('click');
     expect(cancel).toHaveBeenCalled();
     expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
   });
@@ -154,22 +155,25 @@ describe('Popconfirm', () => {
   });
 
   it('should support defaultVisible', () => {
-    const popconfirm = mount(
-      <Popconfirm title="code" defaultVisible>
+    const ref = React.createRef();
+    mount(
+      <Popconfirm ref={ref} title="code" defaultVisible>
         <span>show me your code</span>
       </Popconfirm>,
     );
-    expect(popconfirm.instance().getPopupDomNode()).toBeTruthy();
+    expect(ref.current.getPopupDomNode()).toBeTruthy();
   });
 
   it('should not open in disabled', () => {
+    const ref = React.createRef();
+
     const popconfirm = mount(
-      <Popconfirm title="code" disabled>
+      <Popconfirm ref={ref} title="code" disabled>
         <span>click me</span>
       </Popconfirm>,
     );
     const triggerNode = popconfirm.find('span').at(0);
     triggerNode.simulate('click');
-    expect(popconfirm.instance().getPopupDomNode()).toBeFalsy();
+    expect(ref.current.getPopupDomNode()).toBeFalsy();
   });
 });

components/popconfirm/index.tsx

@@ -5,7 +5,7 @@ import Button from '../button';
 import { ButtonType, NativeButtonProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
 
 export interface PopconfirmProps extends AbstractTooltipProps {
@@ -31,92 +31,57 @@ export interface PopconfirmLocale {
   cancelText: string;
 }
 
-class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
-  static defaultProps = {
-    transitionName: 'zoom-big',
-    placement: 'top' as PopconfirmProps['placement'],
-    trigger: 'click' as PopconfirmProps['trigger'],
-    okType: 'primary' as PopconfirmProps['okType'],
-    icon: <ExclamationCircleFilled />,
-    disabled: false,
-  };
+const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
+  const [visible, setVisible] = React.useState(props.visible);
 
-  static getDerivedStateFromProps(nextProps: PopconfirmProps) {
-    if ('visible' in nextProps) {
-      return { visible: nextProps.visible };
+  React.useEffect(() => {
+    if ('visible' in props) {
+      setVisible(props.visible);
     }
-    if ('defaultVisible' in nextProps) {
-      return { visible: nextProps.defaultVisible };
+  }, [props.visible]);
+
+  React.useEffect(() => {
+    if ('defaultVisible' in props) {
+      setVisible(props.defaultVisible);
     }
-    return null;
-  }
+  }, [props.defaultVisible]);
 
-  private tooltip: any;
+  const settingVisible = (value: boolean, e?: React.MouseEvent<HTMLButtonElement>) => {
+    if (!('visible' in props)) {
+      setVisible(value);
+    }
 
-  constructor(props: PopconfirmProps) {
-    super(props);
-
-    this.state = {
-      visible: props.visible,
-    };
-  }
-
-  getPopupDomNode() {
-    return this.tooltip.getPopupDomNode();
-  }
-
-  onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
-    this.setVisible(false, e);
-
-    const { onConfirm } = this.props;
-    if (onConfirm) {
-      onConfirm.call(this, e);
+    if (props.onVisibleChange) {
+      props.onVisibleChange(value, e);
     }
   };
 
-  onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
-    this.setVisible(false, e);
+  const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
+    settingVisible(false, e);
 
-    const { onCancel } = this.props;
-    if (onCancel) {
-      onCancel.call(this, e);
+    if (props.onConfirm) {
+      props.onConfirm.call(this, e);
     }
   };
 
-  onVisibleChange = (visible: boolean) => {
-    const { disabled } = this.props;
+  const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
+    settingVisible(false, e);
+
+    if (props.onCancel) {
+      props.onCancel.call(this, e);
+    }
+  };
+
+  const onVisibleChange = (value: boolean) => {
+    const { disabled } = props;
     if (disabled) {
       return;
     }
-    this.setVisible(visible);
+    settingVisible(value);
   };
 
-  setVisible(visible: boolean, e?: React.MouseEvent<HTMLButtonElement>) {
-    const { props } = this;
-    if (!('visible' in props)) {
-      this.setState({ visible });
-    }
-
-    const { onVisibleChange } = props;
-    if (onVisibleChange) {
-      onVisibleChange(visible, e);
-    }
-  }
-
-  saveTooltip = (node: any) => {
-    this.tooltip = node;
-  };
-
-  renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => {
-    const {
-      okButtonProps,
-      cancelButtonProps,
-      title,
-      cancelText,
-      okText,
-      okType,
-      icon,
-    } = this.props;
+  const renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => {
+    const { okButtonProps, cancelButtonProps, title, cancelText, okText, okType, icon } = props;
     return (
       <div className={`${prefixCls}-inner-content`}>
         <div className={`${prefixCls}-message`}>
@@ -124,10 +89,10 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
           <div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
         </div>
         <div className={`${prefixCls}-buttons`}>
-          <Button onClick={this.onCancel} size="small" {...cancelButtonProps}>
+          <Button onClick={onCancel} size="small" {...cancelButtonProps}>
             {cancelText || popconfirmLocale.cancelText}
           </Button>
-          <Button onClick={this.onConfirm} type={okType} size="small" {...okButtonProps}>
+          <Button onClick={onConfirm} type={okType} size="small" {...okButtonProps}>
             {okText || popconfirmLocale.okText}
           </Button>
         </div>
@@ -135,32 +100,37 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
     );
   };
 
-  renderConfirm = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, placement, ...restProps } = this.props;
-    const prefixCls = getPrefixCls('popover', customizePrefixCls);
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
-    const overlay = (
-      <LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
-        {(popconfirmLocale: PopconfirmLocale) => this.renderOverlay(prefixCls, popconfirmLocale)}
-      </LocaleReceiver>
-    );
+  const { prefixCls: customizePrefixCls, placement, ...restProps } = props;
+  const prefixCls = getPrefixCls('popover', customizePrefixCls);
 
-    return (
-      <Tooltip
-        {...restProps}
-        prefixCls={prefixCls}
-        placement={placement}
-        onVisibleChange={this.onVisibleChange}
-        visible={this.state.visible}
-        overlay={overlay}
-        ref={this.saveTooltip}
-      />
-    );
-  };
+  const overlay = (
+    <LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
+      {(popconfirmLocale: PopconfirmLocale) => renderOverlay(prefixCls, popconfirmLocale)}
+    </LocaleReceiver>
+  );
 
-  render() {
-    return <ConfigConsumer>{this.renderConfirm}</ConfigConsumer>;
-  }
-}
+  return (
+    <Tooltip
+      {...restProps}
+      prefixCls={prefixCls}
+      placement={placement}
+      onVisibleChange={onVisibleChange}
+      visible={visible}
+      overlay={overlay}
+      ref={ref as any}
+    />
+  );
+});
+
+Popconfirm.defaultProps = {
+  transitionName: 'zoom-big',
+  placement: 'top' as PopconfirmProps['placement'],
+  trigger: 'click' as PopconfirmProps['trigger'],
+  okType: 'primary' as PopconfirmProps['okType'],
+  icon: <ExclamationCircleFilled />,
+  disabled: false,
+};
 
 export default Popconfirm;