From 30507da5c378284092eea3da85ecc2d09efaf156 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Tue, 14 Jul 2020 21:11:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=BC=E5=AE=B9=E4=BC=B8=E7=BC=A9=E5=88=97?=
 =?UTF-8?q?=E6=97=B6hover=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/base/detail/input/index.tsx          | 11 ++++++++---
 .../component/base/detail/tag/index.tsx            | 11 ++++++++---
 .../component/base/detail/text-link/index.tsx      | 11 ++++++++---
 .../component/base/detail/textarea/index.tsx       | 14 ++++++++++----
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/components/apolloTable/component/base/detail/input/index.tsx b/components/apolloTable/component/base/detail/input/index.tsx
index 462666c..e56b5e4 100644
--- a/components/apolloTable/component/base/detail/input/index.tsx
+++ b/components/apolloTable/component/base/detail/input/index.tsx
@@ -5,7 +5,7 @@ import styles from './index.less';
 import { InputProps } from '../detailInterface';
 
 export const ApolloInputDetail = (props: InputProps) => {
-    const { className, origin } = props;
+    const { className, origin, columnConfig } = props;
     const value = props.formatter ? props.formatter(props.value) : props.value;
     if (!value) {
         return null;
@@ -13,17 +13,22 @@ export const ApolloInputDetail = (props: InputProps) => {
     const [dotVisible, setDotVisible] = useState(false);
     const container = useRef(null);
     const dom = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const containerTarget: any = container.current;
         const target: any = dom.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (containerTarget && target) {
-            if (target.clientWidth > containerTarget.clientWidth) {
+            if (target.clientWidth > containerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     if (origin === 'detailForm') {
         return <div className={classNames(styles.text, className)}>{value}</div>;
diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx
index 7bc7294..c45015b 100644
--- a/components/apolloTable/component/base/detail/tag/index.tsx
+++ b/components/apolloTable/component/base/detail/tag/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import s from './index.less';
 
 export const Tags = (props: any) => {
-    const { value, origin, componentAttr } = props;
+    const { value, origin, componentAttr, columnConfig } = props;
     if (!Array.isArray(value) || value.length === 0) return null;
     const { options, mode } = componentAttr || {};
     const outStyle: any = {};
@@ -40,19 +40,24 @@ export const Tags = (props: any) => {
     const [dotVisible, setDotVisible] = useState(false);
     const outer = useRef(null);
     const inner = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const outerTarget: any = outer.current;
         const innerTarget: any = inner.current;
         let visible = false;
+        const deta = columnConfig.width - detaWidth.current;
         if (outerTarget && innerTarget && origin !== 'detailForm') {
-            if (innerTarget.clientWidth > outerTarget.clientWidth) {
+            if (innerTarget.clientWidth > outerTarget.clientWidth + deta) {
                 visible = true;
             } else {
                 visible = false;
             }
         }
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
         setDotVisible(visible);
-    }, [value]);
+    }, [value, columnConfig.width]);
 
     return (
         <div className={s.container}>
diff --git a/components/apolloTable/component/base/detail/text-link/index.tsx b/components/apolloTable/component/base/detail/text-link/index.tsx
index 19f66c3..71c5fbf 100644
--- a/components/apolloTable/component/base/detail/text-link/index.tsx
+++ b/components/apolloTable/component/base/detail/text-link/index.tsx
@@ -5,7 +5,7 @@ import s from './index.less';
 import IconFont from '@/submodule/components/IconFont';
 
 export const ApolloTextLinkDetail = (props: any) => {
-    const { value, origin, formatter, changeEdit } = props;
+    const { value, origin, formatter, changeEdit, columnConfig } = props;
     const newValue = formatter ? formatter(value) : value;
     if (!newValue) return null;
     // 以逗号分隔
@@ -13,17 +13,22 @@ export const ApolloTextLinkDetail = (props: any) => {
     const [dotVisible, setDotVisible] = useState(false);
     const outer = useRef(null);
     const inner = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const outerTarget: any = outer.current;
         const innerTarget: any = inner.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (outerTarget && innerTarget && origin !== 'detailForm') {
-            if (innerTarget.clientWidth > outerTarget.clientWidth) {
+            if (innerTarget.clientWidth > outerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     const outStyle: any = {};
     const innerStyle: any = {};
diff --git a/components/apolloTable/component/base/detail/textarea/index.tsx b/components/apolloTable/component/base/detail/textarea/index.tsx
index 93a2d66..78924e3 100644
--- a/components/apolloTable/component/base/detail/textarea/index.tsx
+++ b/components/apolloTable/component/base/detail/textarea/index.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from 'antd';
 import styles from './index.less';
 import { TextAreaProps } from '../detailInterface';
 
 export const ApolloTextAreaDetail = (props: TextAreaProps) => {
-    const { className, origin, componentAttr, rowData, formatter } = props;
+    const { className, origin, componentAttr, rowData, formatter, columnConfig } = props;
     const formatValue = formatter ? formatter(props.value) : props.value;
     if (!formatValue) {
         return null;
@@ -18,17 +18,23 @@ export const ApolloTextAreaDetail = (props: TextAreaProps) => {
     const [dotVisible, setDotVisible] = useState(false);
     const container = useRef(null);
     const dom = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
+
     useEffect(() => {
         const containerTarget: any = container.current;
         const target: any = dom.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (containerTarget && target) {
-            if (target.clientWidth > containerTarget.clientWidth) {
+            if (target.clientWidth > containerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     const getMore = async () => {
         let newValue = await getDetail({ rowId: rowData.id });
-- 
2.21.0