From c2be963037cbd98cc0453bdc62b6939ee049e492 Mon Sep 17 00:00:00 2001
From: fujianchao <fujianchao@baidu.com>
Date: Fri, 22 Nov 2024 15:13:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E6=9C=AA=E8=B6=85=E5=87=BA=EF=BC=8C=E4=B8=8D=E5=91=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amis-ui/scss/components/_popoverable.scss |  6 ++++
 packages/amis-ui/scss/components/_table.scss  |  5 ----
 packages/amis/src/renderers/PopOver.tsx       | 30 +++++++++++++++----
 .../amis/src/renderers/Table/TableCell.tsx    |  8 +----
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/amis-ui/scss/components/_popoverable.scss b/packages/amis-ui/scss/components/_popoverable.scss
index 4fcaa1b3c81..d7361c794f6 100644
--- a/packages/amis-ui/scss/components/_popoverable.scss
+++ b/packages/amis-ui/scss/components/_popoverable.scss
@@ -15,6 +15,12 @@
 .#{$ns}Field--popOverAble {
   outline: none;
   position: relative;
+
+  &--flex {
+    display: flex;
+    align-items: center;
+  }
+
   .#{$ns}Field-popOverWrap {
     &-ellipsis {
       width: 200px;
diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss
index ccb62c5be9b..72d0749c772 100644
--- a/packages/amis-ui/scss/components/_table.scss
+++ b/packages/amis-ui/scss/components/_table.scss
@@ -13,11 +13,6 @@
     margin-bottom: var(--gap-sm);
   }
 
-  .#{$ns}TableCell-ellipsis {
-    display: flex;
-    align-items: center;
-  }
-
   &-fixedTop {
     position: sticky;
     top: var(--affix-offset-top);
diff --git a/packages/amis/src/renderers/PopOver.tsx b/packages/amis/src/renderers/PopOver.tsx
index f563fef2afc..795df49386d 100644
--- a/packages/amis/src/renderers/PopOver.tsx
+++ b/packages/amis/src/renderers/PopOver.tsx
@@ -125,6 +125,7 @@ export interface PopOverProps extends RendererProps {
   popOver: boolean | SchemaPopOverObject;
   onPopOverOpened: (popover: any) => void;
   onPopOverClosed: (popover: any) => void;
+  textOverflow?: 'noWrap' | 'ellipsis' | 'default';
 }
 
 export interface PopOverState {
@@ -142,6 +143,7 @@ export const HocPopOver =
     let lastOpenedInstance: PopOverComponent | null = null;
     class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
       target: HTMLElement;
+      sonTarget: HTMLElement;
       timer: ReturnType<typeof setTimeout>;
       static ComposedComponent = Component;
       constructor(props: PopOverProps) {
@@ -152,6 +154,7 @@ export const HocPopOver =
         this.closePopOverLater = this.closePopOverLater.bind(this);
         this.clearCloseTimer = this.clearCloseTimer.bind(this);
         this.targetRef = this.targetRef.bind(this);
+        this.sonTargetRef = this.sonTargetRef.bind(this);
         // this.handleClickOutside = this.handleClickOutside.bind(this);
         this.state = {
           isOpened: false
@@ -162,6 +165,10 @@ export const HocPopOver =
         this.target = ref;
       }
 
+      sonTargetRef(ref: any) {
+        this.sonTarget = ref;
+      }
+
       openPopOver() {
         const onPopOverOpened = this.props.onPopOverOpened;
         lastOpenedInstance?.closePopOver();
@@ -355,7 +362,11 @@ export const HocPopOver =
           render,
           classPrefix: ns
         } = this.props;
-
+        const e = this.sonTarget;
+        // 如果内容不超出，不需要弹出
+        if (e && e.offsetWidth >= e.scrollWidth) {
+          return null;
+        }
         const content = render('popover-detail', {
           type: 'panel',
           body: `\${${name}}`
@@ -420,12 +431,13 @@ export const HocPopOver =
           <Component
             {...this.props}
             className={cx(`Field--popOverAble`, className, {
-              in: this.state.isOpened
+              'in': this.state.isOpened,
+              'Field--popOverAble--flex':
+                width && selectClassName === 'ellipsis'
             })}
             ref={config.targetOutter ? this.targetRef : undefined}
           >
-            {(popOver as SchemaPopOverObject)?.showIcon !== false &&
-            !selectClassName ? (
+            {(popOver as SchemaPopOverObject)?.showIcon !== false && popOver ? (
               <>
                 <Component {...this.props} contentsOnly noHoc />
                 <span
@@ -449,12 +461,18 @@ export const HocPopOver =
                   )}
                   {...triggerProps}
                   style={{width: selectClassName && width}}
-                  ref={config.targetOutter ? undefined : this.targetRef}
+                  ref={
+                    config.targetOutter
+                      ? selectClassName === 'ellipsis'
+                        ? this.sonTargetRef
+                        : undefined
+                      : this.targetRef
+                  }
                 >
                   <Component {...this.props} contentsOnly noHoc />
                 </div>
                 {this.state.isOpened
-                  ? selectClassName === 'ellipsis'
+                  ? selectClassName === 'ellipsis' && !popOver
                     ? this.renderTextOverflow()
                     : this.renderPopOver()
                   : null}
diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx
index 991845d93c0..f34dba8e828 100644
--- a/packages/amis/src/renderers/Table/TableCell.tsx
+++ b/packages/amis/src/renderers/Table/TableCell.tsx
@@ -17,7 +17,6 @@ export interface TableCellProps extends RendererProps {
   column: any;
   contentsOnly?: boolean;
   testIdBuilder?: TestIdBuilder;
-  textOverflow?: 'noWrap' | 'ellipsis' | 'default';
 }
 
 export class TableCell extends React.Component<TableCellProps> {
@@ -66,7 +65,6 @@ export class TableCell extends React.Component<TableCellProps> {
       cellAffix,
       isHead,
       colIndex,
-      textOverflow,
       row,
       showBadge,
       itemBadge,
@@ -190,11 +188,7 @@ export class TableCell extends React.Component<TableCellProps> {
           />
         ) : null}
         {cellPrefix}
-        {textOverflow === 'ellipsis' ? (
-          <div className={cx('TableCell-ellipsis')}>{body}</div>
-        ) : (
-          body
-        )}
+        {body}
         {cellAffix}
       </Component>
     );