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

Jump to bottom

fix: [Descriptions] Ensure that the number of rows matches the column #2201

Open
wants to merge 3 commits into
base: release
Choose a base branch
from
Open

fix: [Descriptions] Ensure that the number of rows matches the column #2201

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b42707
fix: [Descriptions] Ensure that the number of rows matches the column
KouSum Apr 25, 2024
49cc732
fix: [Descriptions] Optimize the getHorizontalList function
rashagu May 16, 2024
13ef2c7
fix: [Descriptions] Optimize the getHorizontalList function
rashagu May 16, 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
15 changes: 11 additions & 4 deletions packages/semi-foundation/descriptions/foundation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,26 @@ export default class DescriptionsFoundation<P = Record<string, any>, S = Record<
}

getHorizontalList() {
const { column, data, children } = this.getProps();
const { column } = this.getProps();
const columns = this._adapter.getColumns();
const horizontalList = [];
const curSpan = { totalSpan: 0, itemList: [] };
for (const item of columns) {
curSpan.totalSpan += item.span || 1;
curSpan.itemList.push(item);
if (curSpan.totalSpan >= column) {
if (curSpan.totalSpan > column) {
if (curSpan.itemList.length < column) {
const lastSpan = curSpan.itemList[curSpan.itemList.length - 1];
if (isNaN(lastSpan.span)) {
lastSpan.span = column - curSpan.itemList.length + (lastSpan.span || 1);
}
}
horizontalList.push(curSpan.itemList);
curSpan.itemList = [];
curSpan.totalSpan = 0;
curSpan.totalSpan = item.span || 1;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个写法感觉有点绕。
建议 18行 totalSpan可以先不执行 + 操作吧。
想做的是尝试在 curSpan放入当前item，那么拿 restSpan剩余列数，跟item.span去做对比会更直观一些。如果 item.span <= restSpan 再做操作，否则就直接另起一行。

如果像现在任意情况下都 先加totalSpan，如果放不下还得还原。

curSpan.itemList.push(item);
}

if (curSpan.itemList.length != 0) {
const lastSpan = curSpan.itemList[curSpan.itemList.length - 1];
if (isNaN(lastSpan.span)) {
Expand Down
6 changes: 3 additions & 3 deletions packages/semi-ui/descriptions/__test__/descriptions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ describe('Descriptions', () => {
<Descriptions layout='horizontal' align='left' column={4}>
<Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
<Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
<Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
<Descriptions.Item itemKey="认证状态" span={4}>未认证</Descriptions.Item>
</Descriptions>, {
attachTo: document.getElementById('container'),
});
Expand All @@ -206,7 +206,7 @@ describe('Descriptions', () => {
const ths = document.querySelectorAll('td');
expect(ths.length).toEqual(3);
const trs = document.querySelectorAll('tr');
expect(trs.length).toEqual(1);
expect(trs.length).toEqual(2);
expect(desc.exists(`.${BASE_CLASS_PREFIX}-descriptions-horizontal`)).toEqual(true);
expect(
desc
Expand All @@ -227,7 +227,7 @@ describe('Descriptions', () => {
tds.forEach(item=>{
totalSpan += +item.getAttribute('colspan')
})
expect(totalSpan).toEqual(8);
expect(totalSpan).toEqual(8 * 2);
desc.unmount();
});
})
12 changes: 10 additions & 2 deletions packages/semi-ui/descriptions/_story/descriptions.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ let data5 = [
{ key: '主播类型(签约)', value: '自由（普通）主播' },
{ key: '安全等级', value: '3级' },
{ key: '垂类标签', value: '新闻博主' },
{ key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值，需要自动换行显示', span: 3 },
{ key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值，需要自动换行显示', span: 4 },
];
let data6 = [
{ key: '火山号', value: '123456789' },
{ key: '主播类型(签约)', value: '自由（普通）主播' },
{ key: '安全等级', value: '3级' },
{ key: '垂类标签', value: '新闻博主', span: 4 },
{ key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值，需要自动换行显示' },
];

export const DescriptionsDefault = () => (
Expand Down Expand Up @@ -156,7 +163,8 @@ export const DescriptionsLayout = () => {
return <>
<div>data 传入的写法</div>
<Descriptions layout='horizontal' row size='large' data={data} />
<Descriptions layout='horizontal' align='left' data={data5} />
<Descriptions layout='horizontal' align='left' column={4} data={data5} />
<Descriptions layout='horizontal' align='left' column={4} data={data6} />
<div>jsx 传入的写法</div>
<Descriptions layout='horizontal' align='left'>
<Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
Expand Down
Loading