feat: 表格列新增textOverflow属性

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

Hide file tree

Showing 6 changed files with 122 additions and 11 deletions.
diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md
@@ -3880,6 +3880,7 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，
 | filterable         | `boolean` \| [`QuickFilterConfig`](./crud#quickfilterconfig) | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 |
 | quickEdit          | `boolean` \| [`QuickEditConfig`](./crud#quickeditconfig)     | -       | 快速编辑，一般需要配合`quickSaveApi`接口使用                                |
 | quickEditEnabledOn | `SchemaExpression`                                           | -       | 开启快速编辑条件[表达式](../../docs/concepts/expression)                    |      |
+| textOverflow       | `string`                                                     | `default` | 文本溢出后展示形式，默认换行处理。可选值 `ellipsis` 溢出隐藏展示， `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.9.0` |
 
 #### QuickFilterConfig
 

diff --git a/packages/amis-editor/src/plugin/Others/TableCell.tsx b/packages/amis-editor/src/plugin/Others/TableCell.tsx
@@ -1,7 +1,11 @@
 import {Button} from 'amis';
 import React from 'react';
 import get from 'lodash/get';
-import {getI18nEnabled, registerEditorPlugin} from 'amis-editor-core';
+import {
+  getI18nEnabled,
+  registerEditorPlugin,
+  tipedLabel
+} from 'amis-editor-core';
 import {
   BasePlugin,
   BasicRendererInfo,
@@ -427,10 +431,35 @@ export class TableCellPlugin extends BasePlugin {
                   ? value.replace(/\*\s*,\s*|\s*,\s*\*/g, '')
                   : value
             },
-
+            {
+              name: 'textOverflow',
+              type: 'button-group-select',
+              label: '文本超出处理',
+              size: 'xs',
+              mode: 'inline',
+              inputClassName: 'mt-1 w-full',
+              pipeIn: defaultValue('default'),
+              options: [
+                {
+                  label: '默认',
+                  value: 'default'
+                },
+                {
+                  label: '溢出隐藏',
+                  value: 'ellipsis'
+                },
+                {
+                  label: '取消换行',
+                  value: 'noWrap'
+                }
+              ]
+            },
             getSchemaTpl('switch', {
               name: 'className',
-              label: '内容强制换行',
+              label: tipedLabel(
+                '允许任意字符间断行',
+                '开启此项，换行处理将在任意字母处断行，长英文单词或长英文字符会被切断，如url链接'
+              ),
               pipeIn: (value: any) =>
                 typeof value === 'string' && /\word\-break\b/.test(value),
               pipeOut: (value: any, originValue: any) =>

diff --git a/packages/amis-ui/scss/components/_popoverable.scss b/packages/amis-ui/scss/components/_popoverable.scss
@@ -15,6 +15,20 @@
 .#{$ns}Field--popOverAble {
   outline: none;
   position: relative;
+  .#{$ns}Field-popOverWrap {
+    &-ellipsis {
+      width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
+      display: inline-block;
+    }
+
+    &-noWrap {
+      white-space: nowrap;
+    }
+  }
 }
 
 .#{$ns}PopOverAble-popover {

diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss
@@ -13,6 +13,11 @@
     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
@@ -192,7 +192,7 @@ export const HocPopOver =
 
       closePopOverLater() {
         // 5s 后自动关闭。
-        this.timer = setTimeout(this.closePopOver, 2000);
+        this.timer = setTimeout(this.closePopOver, 500);
       }
 
       clearCloseTimer() {
@@ -341,6 +341,48 @@ export const HocPopOver =
           </Overlay>
         );
       }
+      // 便于外围扩充函数，勿动
+      getClassName() {
+        const {textOverflow} = this.props;
+        return textOverflow === 'default' ? '' : textOverflow;
+      }
+
+      renderTextOverflow() {
+        let {
+          popOverContainer,
+          classnames: cx,
+          name,
+          render,
+          classPrefix: ns
+        } = this.props;
+
+        const content = render('popover-detail', {
+          type: 'panel',
+          body: `\${${name}}`
+        }) as JSX.Element;
+
+        return (
+          <Overlay
+            container={popOverContainer}
+            placement={'right-top-center-bottom'}
+            target={() => this.target}
+            onHide={this.closePopOver}
+            rootClose
+            show
+          >
+            <PopOver
+              classPrefix={ns}
+              className={cx('PopOverAble-popover')}
+              onMouseLeave={this.getClassName() ? this.closePopOver : undefined}
+              onMouseEnter={
+                this.getClassName() ? this.clearCloseTimer : undefined
+              }
+            >
+              {content}
+            </PopOver>
+          </Overlay>
+        );
+      }
 
       render() {
         const {
@@ -349,12 +391,15 @@ export const HocPopOver =
           popOverEnable,
           className,
           noHoc,
+          width,
           classnames: cx,
           showIcon
         } = this.props;
 
+        const selectClassName = this.getClassName();
+
         if (
-          !popOver ||
+          (!popOver && !selectClassName) ||
           popOverEnabled === false ||
           noHoc ||
           popOverEnable === false
@@ -364,7 +409,7 @@ export const HocPopOver =
 
         const triggerProps: any = {};
         const trigger = (popOver as SchemaPopOverObject)?.trigger;
-        if (trigger === 'hover') {
+        if (trigger === 'hover' || selectClassName === 'ellipsis') {
           triggerProps.onMouseEnter = this.openPopOver;
           triggerProps.onMouseLeave = this.closePopOverLater;
         } else {
@@ -379,7 +424,8 @@ export const HocPopOver =
             })}
             ref={config.targetOutter ? this.targetRef : undefined}
           >
-            {(popOver as SchemaPopOverObject)?.showIcon !== false ? (
+            {(popOver as SchemaPopOverObject)?.showIcon !== false &&
+            !selectClassName ? (
               <>
                 <Component {...this.props} contentsOnly noHoc />
                 <span
@@ -395,13 +441,23 @@ export const HocPopOver =
             ) : (
               <>
                 <div
-                  className={cx('Field-popOverWrap')}
+                  className={cx(
+                    'Field-popOverWrap',
+                    selectClassName
+                      ? 'Field-popOverWrap-' + selectClassName
+                      : ''
+                  )}
                   {...triggerProps}
+                  style={{width: selectClassName && width}}
                   ref={config.targetOutter ? undefined : this.targetRef}
                 >
                   <Component {...this.props} contentsOnly noHoc />
                 </div>
-                {this.state.isOpened ? this.renderPopOver() : null}
+                {this.state.isOpened
+                  ? selectClassName === 'ellipsis'
+                    ? this.renderTextOverflow()
+                    : this.renderPopOver()
+                  : null}
               </>
             )}
           </Component>

diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx
@@ -17,6 +17,7 @@ export interface TableCellProps extends RendererProps {
   column: any;
   contentsOnly?: boolean;
   testIdBuilder?: TestIdBuilder;
+  textOverflow?: 'noWrap' | 'ellipsis' | 'default';
 }
 
 export class TableCell extends React.Component<TableCellProps> {
@@ -65,6 +66,7 @@ export class TableCell extends React.Component<TableCellProps> {
       cellAffix,
       isHead,
       colIndex,
+      textOverflow,
       row,
       showBadge,
       itemBadge,
@@ -188,7 +190,11 @@ export class TableCell extends React.Component<TableCellProps> {
           />
         ) : null}
         {cellPrefix}
-        {body}
+        {textOverflow === 'ellipsis' ? (
+          <div className={cx('TableCell-ellipsis')}>{body}</div>
+        ) : (
+          body
+        )}
         {cellAffix}
       </Component>
     );
@@ -199,10 +205,10 @@ export class TableCell extends React.Component<TableCellProps> {
   type: 'cell',
   name: 'table-cell'
 })
-@QuickEdit()
 @PopOverable({
   targetOutter: true
 })
+@QuickEdit()
 @Copyable()
 @observer
 export class TableCellRenderer extends TableCell {