From e78fa585004ceff2922cf0c64478f678518c3351 Mon Sep 17 00:00:00 2001 From: sailei <826196460@qq.com> Date: Tue, 26 Dec 2023 17:56:33 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20link=E6=94=AF=E6=8C=81=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E6=98=BE=E7=A4=BA=E8=A1=8C=E6=95=B0=E5=8F=8Atooltip?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/link.md | 56 ++++++++++--- packages/amis-editor/src/plugin/Link.tsx | 79 ++++++++++++++++++- packages/amis-ui/scss/components/_link.scss | 8 ++ .../amis/__tests__/renderers/Link.test.tsx | 35 +++++++- .../__snapshots__/Link.test.tsx.snap | 76 ++++++++++++++++++ packages/amis/src/renderers/Link.tsx | 67 +++++++++++++--- 6 files changed, 295 insertions(+), 26 deletions(-) diff --git a/docs/zh-CN/components/link.md b/docs/zh-CN/components/link.md index 720885f43d3..6efc49b63c4 100755 --- a/docs/zh-CN/components/link.md +++ b/docs/zh-CN/components/link.md @@ -65,16 +65,50 @@ 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'` | | 气泡提示内容 | +| tooltipPlacement | `'top' \| 'right' \| 'bottom' \| 'left' ` | top | 气泡框位置器 | +| tooltipTrigger | `'hover' \| 'focus'` | | 触发 tootip | diff --git a/packages/amis-editor/src/plugin/Link.tsx b/packages/amis-editor/src/plugin/Link.tsx index 54dbd8b79d2..f57ababacc9 100644 --- a/packages/amis-editor/src/plugin/Link.tsx +++ b/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,82 @@ 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( + '正常提示', + '正常状态下的提示内容，不填则不弹出提示。可从数据域变量中取值。' + ) + }), + getSchemaTpl('textareaFormulaControl', { + name: 'disabledTip', + mode: 'normal', + label: tipedLabel( + '禁用提示', + '禁用状态下的提示内容，不填则弹出正常提示。可从数据域变量中取值。' + ), + clearValueOnHidden: true, + visibleOn: 'data.tooltipTrigger !== "focus"' + }), + { + type: 'button-group-select', + name: 'tooltipTrigger', + label: '触发方式', + size: 'sm', + options: [ + { + label: '鼠标悬浮', + value: 'hover' + }, + { + label: '聚焦', + value: 'focus' + } + ], + pipeIn: defaultValue('hover') + }, + { + type: 'button-group-select', + name: 'tooltipPlacement', + label: '提示位置', + size: 'sm', + options: [ + { + label: '上', + value: 'top' + }, + { + label: '右', + value: 'right' + }, + { + label: '下', + value: 'bottom' + }, + { + label: '左', + value: 'left' + } + ], + pipeIn: defaultValue('top') + } + ] + } + }, { label: tipedLabel('内容', '不填写时，自动使用目标地址值'), type: 'ae-textareaFormulaControl', diff --git a/packages/amis-ui/scss/components/_link.scss b/packages/amis-ui/scss/components/_link.scss index c8d67fd4fdf..5a9a46760e4 100644 --- a/packages/amis-ui/scss/components/_link.scss +++ b/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; +} diff --git a/packages/amis/__tests__/renderers/Link.test.tsx b/packages/amis/__tests__/renderers/Link.test.tsx index b49865dad04..ce781c6af03 100644 --- a/packages/amis/__tests__/renderers/Link.test.tsx +++ b/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(); +}); diff --git a/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap index cc6c18586ac..3760279ad6b 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap @@ -48,6 +48,24 @@ exports[`Renderer:link with href & blank & htmlTarget 1`] = ` `; +exports[`Renderer:link with maxLine 1`] = ` +
+ + + + 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. + + + +
+`; + exports[`Renderer:link with title & icon & rightIcon 1`] = `
`; + +exports[`Renderer:link with tooltip 1`] = ` +
+ + + + 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. + + +