feat: 新增文本未超出，不呼出功能

baidu · Nov 22, 2024 · c2be963 · c2be963
1 parent 35901fd
commit c2be963
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     );