feat: link支持最大显示行数及tooltip提示

docs/zh-CN/components/link.md

@@ -65,16 +65,48 @@ order: 55
 }
 ```
 
+## 最大显示行数
+
+```schema
+{
+ "type": "page",
+ "body": {
+ "type": "link",
+ "href": "https://www.baidu.com",
+ "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.",
+ "blank": true,
+ "maxLine": 2
+ }
+}
+```
+
+## 显示提示文字
+
+```schema
+{
+ "type": "page",
+ "body": {
+ "type": "link",
+ "href": "https://www.baidu.com",
+ "body": "百度一下，你就知道",
+ "blank": true,
+ "tooltip": "百度一下"
+ }
+}
+```
+
 ## 属性表
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ |
-| type | `string` | | 如果在 Table、Card 和 List 中，为`"link"`；在 Form 中用作静态展示，为`"static-link"` |
-| body | `string` | | 标签内文本 |
-| href | `string` | | 链接地址 |
-| blank | `boolean` | | 是否在新标签页打开 |
-| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 |
-| title | `string` | | a 标签的 title |
-| disabled | `boolean` | | 禁用超链接 |
-| icon | `string` | | 超链接图标，以加强显示 |
-| rightIcon | `string` | | 右侧图标 |
+| 属性名 | 类型 | 默认值 | 说明 |
+| ---------- | -------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------ |
+| type | `string` | | 如果在 Table、Card 和 List 中，为`"link"`；在 Form 中用作静态展示，为`"static-link"` |
+| body | `string` | | 标签内文本 |
+| href | `string` | | 链接地址 |
+| blank | `boolean` | | 是否在新标签页打开 |
+| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 |
+| title | `string` | | a 标签的 title |
+| disabled | `boolean` | | 禁用超链接 |
+| icon | `string` | | 超链接图标，以加强显示 |
+| rightIcon | `string` | | 右侧图标 |
+| maxLine | `number` | | 最大显示行数 |
+| tooltip | `'string' \| 'TooltipObject'` | | 气泡提示内容 |

packages/amis-editor/src/plugin/Link.tsx

@@ -2,7 +2,8 @@ import {
  registerEditorPlugin,
  BasePlugin,
  getSchemaTpl,
- tipedLabel
+ tipedLabel,
+ defaultValue
 } from 'amis-editor-core';
 
 export class LinkPlugin extends BasePlugin {
@@ -49,6 +50,30 @@ export class LinkPlugin extends BasePlugin {
  type: 'input-text'
  }
  }),
+ {
+ type: 'input-number',
+ label: '最大显示行数',
+ name: 'maxLine',
+ min: 0
+ },
+ {
+ type: 'ae-switch-more',
+ formType: 'extend',
+ mode: 'normal',
+ label: '气泡提示',
+ form: {
+ body: [
+ getSchemaTpl('textareaFormulaControl', {
+ name: 'tooltip',
+ mode: 'normal',
+ label: tipedLabel(
+ '正常提示',
+ '正常状态下的提示内容，不填则不弹出提示。可从数据域变量中取值。'
+ )
+ })
+ ]
+ }
+ },
  {
  label: tipedLabel('内容', '不填写时，自动使用目标地址值'),
  type: 'ae-textareaFormulaControl',

packages/amis-ui/scss/components/_link.scss

@@ -20,3 +20,11 @@
  vertical-align: text-top;
  }
 }
+
+.max-line {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ word-break: break-word;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}

packages/amis/__tests__/renderers/Link.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {render} from '@testing-library/react';
+import {render, fireEvent} from '@testing-library/react';
 import '../../src';
 import {render as amisRender} from '../../src';
 import {makeEnv} from '../helper';
@@ -100,3 +100,36 @@ test('Renderer:link with title & icon & rightIcon', async () => {
 
  expect(container).toMatchSnapshot();
 });
+
+test('Renderer:link with maxLine', async () => {
+ const {container} = render(
+ amisRender({
+ type: 'link',
+ href: 'https://www.baidu.com',
+ body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.',
+ maxLine: 2
+ })
+ );
+
+ const link = container.querySelector('.cxd-Link');
+ expect(link).toHaveClass('max-line');
+
+ expect(container).toMatchSnapshot();
+});
+
+test('Renderer:link with tooltip', async () => {
+ const {container, getByText, findByText} = render(
+ amisRender({
+ type: 'link',
+ href: 'https://www.baidu.com',
+ body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.',
+ tooltip: '百度一下'
+ })
+ );
+
+ fireEvent.mouseOver(getByText(/Lorem/));
+
+ await findByText('百度一下');
+
+ expect(container).toMatchSnapshot();
+});

packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap

@@ -48,6 +48,24 @@ exports[`Renderer:link with href & blank & htmlTarget 1`] = `
 </div>
 `;
 
+exports[`Renderer:link with maxLine 1`] = `
+<div>
+ <a
+ class="cxd-Link max-line"
+ href="https://www.baidu.com"
+ target="_blank"
+ >
+ <span
+ class="cxd-TplField"
+ >
+ <span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
+ </span>
+ </span>
+ </a>
+</div>
+`;
+
 exports[`Renderer:link with title & icon & rightIcon 1`] = `
 <div>
  <a
@@ -72,3 +90,61 @@ exports[`Renderer:link with title & icon & rightIcon 1`] = `
  </a>
 </div>
 `;
+
+exports[`Renderer:link with tooltip 1`] = `
+<div>
+ <a
+ class="cxd-Link"
+ href="https://www.baidu.com"
+ style="position: relative;"
+ target="_blank"
+ >
+ <span
+ class="cxd-TplField"
+ >
+ <span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
+ </span>
+ </span>
+ <div
+ class="resize-sensor"
+ style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+ >
+
+
+ <div
+ class="resize-sensor-expand"
+ style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+ >
+
+
+ <div
+ style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+ />
+
+
+ </div>
+
+
+ <div
+ class="resize-sensor-shrink"
+ style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+ >
+
+
+ <div
+ style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+ />
+
+
+ </div>
+
+
+ <div
+ class="resize-sensor-appear"
+ style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+ />
+ </div>
+ </a>
+</div>
+`;

packages/amis/src/renderers/Link.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import {Renderer, RendererProps} from 'amis-core';
 import {BaseSchema, SchemaTpl} from '../Schema';
+import TooltipWrapper, {
+ TooltipObject
+} from 'amis-ui/lib/components/TooltipWrapper';
 import {autobind, createObject, getPropValue} from 'amis-core';
 import {filter} from 'amis-core';
 import {BadgeObject, withBadge} from 'amis-ui';
@@ -50,11 +53,18 @@ export interface LinkSchema extends BaseSchema {
  * 右侧图标
  */
  rightIcon?: string;
+
+ /**
+ * 最大显示行数
+ */
+ maxLine?: number;
 }
 
 export interface LinkProps
  extends RendererProps,
- Omit<LinkSchema, 'type' | 'className'> {}
+ Omit<LinkSchema, 'type' | 'className'> {
+ tooltip?: string | TooltipObject;
+}
 
 export class LinkCmpt extends React.Component<LinkProps, object> {
  static defaultProps = {
@@ -94,28 +104,40 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
  translate: __,
  title,
  icon,
- rightIcon
+ rightIcon,
+ maxLine,
+ tooltip
  } = this.props;
 
  let value =
  (typeof href === 'string' && href
  ? filter(href, data, '| raw')
  : undefined) || getPropValue(this.props);
 
+ // 显示行数处理
+ let customStyles: React.CSSProperties = {};
+ let cln = '';
+ if (maxLine && maxLine > 0) {
+ cln = 'max-line';
+ customStyles.WebkitLineClamp = +maxLine;
+ }
+
  return (
- <Link
- className={className}
- style={style}
- href={value}
- disabled={disabled}
- title={title}
- htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}
- icon={icon}
- rightIcon={rightIcon}
- onClick={this.handleClick}
- >
- {body ? render('body', body) : value || __('link')}
- </Link>
+ <TooltipWrapper tooltip={tooltip}>
+ <Link
+ className={cx(className, cln)}
+ style={Object.assign({}, style, customStyles)}
+ href={value}
+ disabled={disabled}
+ title={title}
+ htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}
+ icon={icon}
+ rightIcon={rightIcon}
+ onClick={this.handleClick}
+ >
+ {body ? render('body', body) : value || __('link')}
+ </Link>
+ </TooltipWrapper>
  );
  }
 }