refactor: tooltip string refs to callback (#7493)

components/tooltip/__tests__/tooltip.test.js

@@ -22,33 +22,33 @@ describe('Tooltip', () => {
     const div = wrapper.find('div').at(0);
     div.simulate('mouseenter');
     expect(onVisibleChange).not.toHaveBeenCalled();
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
 
     div.simulate('mouseleave');
     expect(onVisibleChange).not.toHaveBeenCalled();
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
 
     // update `title` value.
     wrapper.setProps({ title: 'Have a nice day!' });
     wrapper.simulate('mouseenter');
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(true);
+    expect(wrapper.instance().tooltip.props.visible).toBe(true);
 
     wrapper.simulate('mouseleave');
     expect(onVisibleChange).toHaveBeenLastCalledWith(false);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
 
     // add `visible` props.
     wrapper.setProps({ visible: false });
     wrapper.simulate('mouseenter');
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     const lastCount = onVisibleChange.mock.calls.length;
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
 
     // always trigger onVisibleChange
     wrapper.simulate('mouseleave');
     expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
   });
 
   it('should hide when mouse leave native disabled button', () => {
@@ -68,11 +68,11 @@ describe('Tooltip', () => {
     const button = wrapper.find('span').at(0);
     button.simulate('mouseenter');
     expect(onVisibleChange).toBeCalledWith(true);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(true);
+    expect(wrapper.instance().tooltip.props.visible).toBe(true);
 
     button.simulate('mouseleave');
     expect(onVisibleChange).toBeCalledWith(false);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
   });
 
   it('should hide when mouse leave antd disabled Button', () => {
@@ -92,11 +92,11 @@ describe('Tooltip', () => {
     const button = wrapper.find('span').at(0);
     button.simulate('mouseenter');
     expect(onVisibleChange).toBeCalledWith(true);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(true);
+    expect(wrapper.instance().tooltip.props.visible).toBe(true);
 
     button.simulate('mouseleave');
     expect(onVisibleChange).toBeCalledWith(false);
-    expect(wrapper.ref('tooltip').prop('visible')).toBe(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
   });
 
   it('should render disabled Button style properly', () => {

components/tooltip/index.tsx

@@ -59,9 +59,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
     autoAdjustOverflow: true,
   };
 
-  refs: {
-    tooltip: any;
-  };
+  tooltip: any;
 
   constructor(props: TooltipProps) {
     super(props);
@@ -88,7 +86,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
   }
 
   getPopupDomNode() {
-    return this.refs.tooltip.getPopupDomNode();
+    return this.tooltip.getPopupDomNode();
   }
 
   getPlacements() {
@@ -182,6 +180,10 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
     domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
   }
 
+  saveTooltip = (node) => {
+    this.tooltip = node;
+  }
+
   render() {
     const { props, state } = this;
     const { prefixCls, title, overlay, openClassName, getPopupContainer, getTooltipContainer } = props;
@@ -204,7 +206,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
       <RcTooltip
         {...this.props}
         getTooltipContainer={getPopupContainer || getTooltipContainer}
-        ref="tooltip"
+        ref={this.saveTooltip}
         builtinPlacements={this.getPlacements()}
         overlay={overlay || title || ''}
         visible={visible}