Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+224 −28
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e78fa58
feat: link支持最大显示行数及tooltip提示
Hsirius Dec 26, 2023
ea1e360
feat: 修改tooltip类型
Hsirius Dec 26, 2023
d20f01a
docs: 修改tooltip类型
Hsirius Jan 4, 2024
662670a
chore: 调整tooltip type
Hsirius Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 43 additions & 11 deletions docs/zh-CN/components/link.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'` | | 气泡提示内容 |
27 changes: 26 additions & 1 deletion packages/amis-editor/src/plugin/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import {
registerEditorPlugin,
BasePlugin,
getSchemaTpl,
tipedLabel
tipedLabel,
defaultValue
} from 'amis-editor-core';

export class LinkPlugin extends BasePlugin {
Expand Down Expand Up @@ -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',
Expand Down
8 changes: 8 additions & 0 deletions packages/amis-ui/scss/components/_link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
35 changes: 34 additions & 1 deletion packages/amis/__tests__/renderers/Link.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
});
76 changes: 76 additions & 0 deletions packages/amis/__tests__/renderers/__snapshots__/Link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
`;
52 changes: 37 additions & 15 deletions packages/amis/src/renderers/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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>
);
}
}
Expand Down
Loading