🐛 [CTable] 解决表格禁用行配置 tooltip 内容为空，tooltip 仍然展示的问题 (#721)

Author: liyuan-meng

src/components/c-table/js/rowTooltip.js

@@ -1,100 +1,122 @@
+/* eslint-disable react/no-access-state-in-setstate */
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { getTrEle } from '../util';
 import { getTooltipPositionInBody } from '../../tooltip/toolView';
 import '../css/business.less';
 import { tablePrefixCls } from '../constant';
-import ReactDOM from 'react-dom';
 import { getRootWindow, prefixCls } from '../../../utils';
 
 class RowTooltip extends Component {
   constructor(props) {
     super(props);
     this.state = {
       tooltipStyle: { visibility: 'hidden' },
-      tooltipMsg: this.props.tooltipConfigs[0].tooltipMsg
+      tooltipMsg: this.props.tooltipConfigs[0].tooltipMsg,
     };
   }
 
   componentDidMount() {
     document.body.addEventListener('mouseover', this.onBodyMouseOver);
     setTimeout(() => {
-      const ele = this.props.tableContainerRef?.current?.querySelector(`.${tablePrefixCls}-container`);
+      const ele = this.props.tableContainerRef?.current?.querySelector(
+        `.${tablePrefixCls}-container`,
+      );
       if (ele) {
-        ele.addEventListener('mouseover', this.onMouseOver)
+        ele.addEventListener('mouseover', this.onMouseOver);
       }
-    })
+    });
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('mouseover', this.onBodyMouseOver);
-    const ele = this.props.tableContainerRef?.current?.querySelector(`.${tablePrefixCls}-container`);
+    const ele = this.props.tableContainerRef?.current?.querySelector(
+      `.${tablePrefixCls}-container`,
+    );
     if (ele) {
       ele.removeEventListener('mouseover', this.onMouseOver);
     }
   }
 
   timeStamp = new Date().getTime();
 
-  onMouseOver = evt => {
+  onMouseOver = (evt) => {
     const targetRow = getTrEle(evt.target);
 
-    const targetTooltipConfig = this.props.tooltipConfigs.find(item => targetRow?.classList?.contains(item.tooltipRowCls));
+    const targetTooltipConfig = this.props.tooltipConfigs.find((item) => targetRow?.classList?.contains(item.tooltipRowCls));
     if (targetTooltipConfig) {
-      const tooltipEles = document.querySelectorAll(`.${tablePrefixCls}-row-tooltip`);
-      const tooltipEle = Array.from(tooltipEles).find(ele => ele.dataset.id === String(this.timeStamp));
+      const tooltipEles = document.querySelectorAll(
+        `.${tablePrefixCls}-row-tooltip`,
+      );
+      const tooltipEle = Array.from(tooltipEles).find(
+        (ele) => ele.dataset.id === String(this.timeStamp),
+      );
 
       if (tooltipEle) {
-        const tooltipStyle = getTooltipPositionInBody(tooltipEle, targetRow.querySelector(`.${prefixCls}-checkbox-disabled`), 'top-left');
+        const tooltipStyle = getTooltipPositionInBody(
+          tooltipEle,
+          targetRow.querySelector(`.${prefixCls}-checkbox-disabled`),
+          'top-left',
+        );
 
         const isInModal = document.querySelector(`.${prefixCls}-modal-mask`);
 
-        this.setState({
-          tooltipMsg: targetTooltipConfig.tooltipMsg
-        }, () => {
-          const _window = this.props.useRootWindow ? getRootWindow() : window;
-          this.setState({
-            tooltipStyle: {
-              ...this.state.tooltipStyle,
-              left: tooltipStyle.left - 7,
-              top: isInModal ? tooltipStyle.top + _window.pageYOffset - 8 : tooltipStyle.top - 8,
-              visibility: 'visible'
-            }
-          })
-        })
+        this.setState(
+          {
+            tooltipMsg: targetTooltipConfig.tooltipMsg,
+          },
+          () => {
+            const _window = this.props.useRootWindow ? getRootWindow() : window;
+            this.setState({
+              tooltipStyle: {
+                ...this.state.tooltipStyle,
+                left: tooltipStyle.left - 7,
+                top: isInModal
+                  ? tooltipStyle.top + _window.pageYOffset - 8
+                  : tooltipStyle.top - 8,
+                visibility: 'visible',
+              },
+            });
+          },
+        );
       }
     } else {
       this.setState({
         tooltipStyle: {
           ...this.state.tooltipStyle,
-          visibility: 'hidden'
-        }
-      })
+          visibility: 'hidden',
+        },
+      });
     }
-  }
+  };
 
-  onBodyMouseOver = evt => {
+  onBodyMouseOver = (evt) => {
     const targetRow = getTrEle(evt.target);
-    const targetTooltipConfig = this.props.tooltipConfigs.find(item => targetRow?.classList?.contains(item.tooltipRowCls));
+    const targetTooltipConfig = this.props.tooltipConfigs.find((item) => targetRow?.classList?.contains(item.tooltipRowCls));
     if (!targetTooltipConfig) {
       this.setState({
         tooltipStyle: {
           ...this.state.tooltipStyle,
-          visibility: 'hidden'
-        }
-      })
+          visibility: 'hidden',
+        },
+      });
     }
   };
 
   render() {
-    return (
-      ReactDOM.createPortal(
-        <span data-id={this.timeStamp} className={`${tablePrefixCls}-row-tooltip`} style={this.state.tooltipStyle}>
+    return this.state.tooltipMsg
+      ? ReactDOM.createPortal(
+        <span
+          data-id={this.timeStamp}
+          className={`${tablePrefixCls}-row-tooltip`}
+          style={this.state.tooltipStyle}
+        >
           {this.state.tooltipMsg}
         </span>,
-        document.body
+        document.body,
       )
-    )
+      : null;
   }
 }
 
@@ -104,10 +126,12 @@ RowTooltip.propTypes = {
 };
 
 RowTooltip.defaultProps = {
-  tooltipConfigs: [{
-    tooltipMsg: '不可选',
-    tooltipRowCls: `${tablePrefixCls}-row-disabled`, // 需要展示 tooltip 行的类名，
-  }]
+  tooltipConfigs: [
+    {
+      tooltipMsg: '不可选',
+      tooltipRowCls: `${tablePrefixCls}-row-disabled`, // 需要展示 tooltip 行的类名，
+    },
+  ],
 };
 
 export default RowTooltip;