test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 01:11:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Card 高亮失效修复 (#4383)

Browse Source
This commit is contained in:
RickCole 2022-05-19 13:32:18 +08:00 committed by GitHub
parent b0dc88576f
commit 0601d81774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 225 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
__tests__/renderers/Card.test.tsx
View File

@ -197,3 +197,89 @@ test('Renderer:cards media', () => {
expect(container).toMatchSnapshot();
});
test('Renderer:cards hightlight', () => {
const {container} = render(
amisRender(
{
type: 'page',
body: {
type: 'card',
header: {
title: '标题',
highlight: true,
highlightClassName: 'test-highlight-class'
},
media: {
type: 'image',
className: 'w-36 h-24',
url: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80',
position: 'left'
},
body: '这里是内容',
secondary: '次要说明',
actions: [
{
type: 'button',
label: '操作',
actionType: 'dialog',
className: 'mr-4',
dialog: {
title: '操作',
body: '你正在编辑该卡片'
}
},
{
type: 'button',
label: '操作',
actionType: 'dialog',
className: 'mr-2.5',
dialog: {
title: '操作',
body: '你正在编辑该卡片'
}
},
{
type: 'dropdown-button',
level: 'link',
icon: 'fa fa-ellipsis-h',
className: 'pr-1 flex',
hideCaret: true,
buttons: [
{
type: 'button',
label: '编辑',
actionType: 'dialog',
dialog: {
title: '编辑',
body: '你正在编辑该卡片'
}
},
{
type: 'button',
label: '删除',
actionType: 'dialog',
dialog: {
title: '提示',
body: '你删掉了该卡片'
}
}
]
}
],
toolbar: [
{
type: 'tpl',
tpl: '标签',
className: 'label label-warning'
}
]
}
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});

129
__tests__/renderers/__snapshots__/Card.test.tsx.snap
View File

@ -388,6 +388,135 @@ exports[`Renderer:cards color 1`] = `
</div>
`;
exports[`Renderer:cards hightlight 1`] = `
<div>
<div
class="cxd-Page"
>
<div
class="cxd-Page-content"
>
<div
class="cxd-Page-main"
>
<div
class="cxd-Page-body"
>
<div
class="cxd-Card"
>
<div
class="cxd-Card-multiMedia--left"
>
<img
class="cxd-Card-multiMedia-img w-36 h-24"
src="https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
/>
<div
class="cxd-Card-multiMedia-flex"
>
<div
class="cxd-Card-heading"
>
<div
class="cxd-Card-meta"
>
<div
class="cxd-Card-title"
>
<span
class="cxd-TplField"
>
<span>
标题
</span>
</span>
</div>
</div>
<div
class="cxd-Card-toolbar"
>
<i
class="cxd-Card-highlight test-highlight-class"
/>
<span
class="cxd-TplField label label-warning"
>
<span>
标签
</span>
</span>
</div>
</div>
<div
class="cxd-Card-body"
>
<span
class="cxd-TplField"
>
<span>
这里是内容
</span>
</span>
</div>
<div
class="cxd-Card-footer-wrapper"
>
<div
class="cxd-Card-secondary"
>
<span
class="cxd-TplField"
>
<span>
次要说明
</span>
</span>
</div>
<div
class="cxd-Card-actions-wrapper"
>
<div
class="cxd-Card-actions"
>
<a
class="cxd-Card-action mr-4"
>
<span>
操作
</span>
</a>
<a
class="cxd-Card-action mr-2.5"
>
<span>
操作
</span>
</a>
<div
class="cxd-DropDown cxd-Card-action pr-1 flex"
>
<button
class="cxd-Button cxd-Button--link cxd-Button--sm"
>
<i
class="m-r-xs fa fa-ellipsis-h"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Renderer:cards media 1`] = `
<div>
<div

15
src/renderers/Card.tsx
View File

@ -354,13 +354,18 @@ export class CardRenderer extends React.Component<CardProps> {
} = this.props;
const toolbars: Array<JSX.Element> = [];
if (header) {
const {highlightClassName, highlight: highlightTpl} = header;
const highlight = !!evalExpression(highlightTpl!, data as object);
if (highlight) {
const {highlightClassName, highlight} = header;
if (
typeof highlight === 'string'
? evalExpression(highlight, data)
: highlight
) {
toolbars.push(
<i className={cx('Card-highlight', highlightClassName)} />
<i
key="highlight"
className={cx('Card-highlight', highlightClassName)}
/>
);
}
}