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(form):fixed an issue where queryFilter controls were abnormally hidden #8564

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(form):fixed an issue where queryFilter controls were abnormally hidden #8564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b63bdf6
fix(form):fixed an issue where controls were abnormally hidden when d…
Lemonnnnnnnnnnn Jul 13, 2024
3d3b6ad
Merge remote-tracking branch 'upstream/master' into fix/form-QueryFil…
Aug 13, 2024
5105b38
feat(form): Modify the behavior of defaultColsNumber and adding defau…
Aug 13, 2024
e6cd3f2
chore(form): remove comment
Aug 13, 2024
27acc7b
chore(form): remove comment
Aug 13, 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
23 changes: 16 additions & 7 deletions packages/form/src/layouts/QueryFilter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,12 @@ export type BaseQueryFilterProps = Omit<
layout?: FormProps['layout'];
/**
* @name 默认一行显示几个表单项
*/
*/
defaultColsNumber?: number;
/**
* @name 默认展示几个表单项
*/
defaultFormItemsNumber?: number;
/**
* @name 文字标签的宽度
*
Expand Down Expand Up @@ -347,9 +351,9 @@ const QueryFilterContent: React.FC<{
(collapsed &&
(firstRowFull ||
// 如果 超过显示长度 且 总长度超过了 24
totalSize > showLength - 1) &&
!!index &&
totalSpan >= 24);
totalSize > showLength) &&
!!index
);

itemLength += 1;

Expand Down Expand Up @@ -502,6 +506,7 @@ function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>) {
layout,
defaultCollapsed = true,
defaultColsNumber,
defaultFormItemsNumber,
span,
searchGutter = 24,
searchText,
Expand Down Expand Up @@ -537,12 +542,16 @@ function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>) {
);

const showLength = useMemo(() => {
// 查询重置按钮也会占一个spanSize格子，需要减掉计算
if(defaultFormItemsNumber !== undefined) {
return defaultFormItemsNumber
}
if (defaultColsNumber !== undefined) {
return defaultColsNumber - 1;
// 折叠为一行，需要处理多行的情况请使用 defaultFormItemsNumber
const oneRowControlsNumber = 24 / spanSize.span - 1;
return defaultColsNumber > oneRowControlsNumber ? oneRowControlsNumber : defaultColsNumber
}
return Math.max(1, 24 / spanSize.span - 1);
}, [defaultColsNumber, spanSize.span]);
}, [defaultColsNumber, defaultFormItemsNumber, spanSize.span]);

/** 计算最大宽度防止溢出换行 */
const formItemFixStyle: FormItemProps<any> | undefined = useMemo(() => {
Expand Down
95 changes: 85 additions & 10 deletions tests/form/queryFilter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,8 +256,43 @@ describe('QueryFilter', () => {
});

it('🕵️‍♀️ defaultColsNumber should work', async () => {
const { container } = render(
<QueryFilter defaultColsNumber={5}>
const wrapper0 = render(
<QueryFilter defaultColsNumber={1}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
</QueryFilter>,
);
expect(
wrapper0.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(2);

const wrapper1 = render(
<QueryFilter defaultColsNumber={2}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
</QueryFilter>,
);
expect(
wrapper1.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(1);

const wrapper2 = render(
<QueryFilter defaultColsNumber={3}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
</QueryFilter>,
);
expect(
wrapper2.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(1);
});

it('🕵️‍♀️ defaultFormItemsNumber should work', async () => {
const wrapper0 = render(
<QueryFilter defaultFormItemsNumber={5}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
Expand All @@ -267,8 +302,51 @@ describe('QueryFilter', () => {
</QueryFilter>,
);
expect(
container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(3);
wrapper0.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(1);

const wrapper1 = render(
<QueryFilter defaultFormItemsNumber={1}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
<ProFormText label="d" name="d" />
<ProFormText label="e" name="e" />
<ProFormText label="f" name="f" />
</QueryFilter>,
);
expect(
wrapper1.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(5);

const wrapper2 = render(
<QueryFilter defaultFormItemsNumber={6}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
<ProFormText label="d" name="d" />
<ProFormText label="e" name="e" />
<ProFormText label="f" name="f" />
</QueryFilter>,
);
expect(
wrapper2.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(0);


const wrapper3 = render(
<QueryFilter defaultFormItemsNumber={7}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
<ProFormText label="d" name="d" />
<ProFormText label="e" name="e" />
<ProFormText label="f" name="f" />
</QueryFilter>,
);
expect(
wrapper3.container.querySelectorAll('.ant-row .ant-form-item-hidden'),
).toHaveLength(0);
});

it('🕵️‍♀️ colSize不全都是1，collapseRender应该存在', async () => {
Expand Down Expand Up @@ -330,13 +408,10 @@ describe('QueryFilter', () => {

it('🕵️‍♀️ collapseRender', async () => {
const wrapper0 = render(
<QueryFilter defaultColsNumber={3}>
<QueryFilter defaultColsNumber={2}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
<ProFormText label="d" name="d" />
<ProFormText label="e" name="e" />
<ProFormText label="f" name="f" />
</QueryFilter>,
);
expect(
Expand All @@ -345,7 +420,7 @@ describe('QueryFilter', () => {
),
).toHaveLength(1);
const wrapper1 = render(
<QueryFilter defaultColsNumber={6}>
<QueryFilter defaultFormItemsNumber={5}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
Expand All @@ -360,7 +435,7 @@ describe('QueryFilter', () => {
),
).toHaveLength(1);
const wrapper2 = render(
<QueryFilter defaultColsNumber={7}>
<QueryFilter defaultFormItemsNumber={6}>
<ProFormText label="a" name="a" />
<ProFormText label="b" name="b" />
<ProFormText label="c" name="c" />
Expand Down
Loading