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

* fix(form):fixed an issue where controls were abnormally hidden when defaultColsNumber were specified

* feat(form): Modify the behavior of defaultColsNumber and adding defaultFormItemsNumber to support the existing functionality of defaultColsNumber

* chore(form): remove comment

* chore(form): remove comment

* docs:(form) Query filter component supports custom display of control quantity

- Added the `defaultFormItemsNumber` property to set the number of controls displayed in a collapsed state
- Updated the documentation to clarify the difference between `defaultColsNumber` and `defaultFormItemsNumber`
- Added example code to demonstrate how to use the `defaultFormItemsNumber` property

* feat(form): update snapshot

---------

Co-authored-by: soul <[email protected]>

Author: Lemonnnnnnnnnnn

packages/form/src/components/QueryFilter/demos/query-filter-defaultFormItemsNumber.tsx

@@ -0,0 +1,18 @@
+import {
+  ProFormDatePicker,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <QueryFilter defaultCollapsed split defaultFormItemsNumber={5}>
+      <ProFormText name="name" label="应用名称" />
+      <ProFormDatePicker name="createDate" label="创建时间" />
+      <ProFormText name="status" label="应用状态" />
+      <ProFormDatePicker name="replyDate" label="响应日期" />
+      <ProFormDatePicker name="startDate" label="创建时间" />
+      <ProFormDatePicker name="endDate" label="结束时间" />
+    </QueryFilter>
+  );
+};

packages/form/src/components/QueryFilter/index.en-US.md

@@ -25,6 +25,10 @@ QueryFilter and LightFilter solve the problem of using the form with other compo
 
 <code src="./demos/search-filter.tsx" background="var(--main-bg-color)" ></code>
 
+### query-filter-defaultFormItemsNumber
+
+<code src="./demos/query-filter-defaultFormItemsNumber.tsx" background="var(--main-bg-color)"></code>
+
 ### Lightweight filtering
 
 <code src="./demos/light-filter.tsx" ></code>
@@ -52,7 +56,8 @@ QueryFilter supports the following properties in addition to the API inherited f
 | onCollapse | Callback when toggling the collapsed state of the form | `(collapsed)=>void` | - |
 | hideRequiredMark | Hide the required markers for all form items, **hide by default** | `boolean` | true |
 | submitterColSpanProps | Props of the col where the submit button is located. | ColProps | - |
-| defaultColsNumber | The default number of controls to be displayed in the collapsed state, if not set or less than 0, one line of controls will be displayed; if the number is greater than or equal to the number of controls, the expand button will be hidden | `number` | - |
+| defaultColsNumber | The default number of form controls displayed in a collapsed state. Only one row of controls is displayed at most, and when exceeded, a collapse/hide button is shown. | `number` | - |
+| defaultFormItemsNumber  | The difference from defaultColsNumber is that the specified number of controls will be displayed, and when exceeded, a collapse/hide button will be shown. | `number` | - |
 | labelWidth | label width | `number` \| `'auto'` | `98` |
 | span | width of form items | `number[0 - 24]` | - |
 | split | whether each line has a split line | `boolean` | - |

packages/form/src/components/QueryFilter/index.md

@@ -20,6 +20,8 @@ atomId: QueryFilter,LightFilter
 
 <code src="./demos/search-filter.tsx" background="var(--main-bg-color)" title="查询筛选-搜索"></code>
 
+<code src="./demos/query-filter-defaultFormItemsNumber.tsx" background="var(--main-bg-color)" title="查询筛选-自定义渲染的控件数量"></code>
+
 ## 轻量筛选
 
 <code src="./demos/light-filter.tsx" title="基本使用"></code>
@@ -49,7 +51,8 @@ QueryFilter 除了继承 ProForm 的 API 以外还支持下面的属性。
 | onCollapse | 切换表单折叠状态时的回调 | `(collapsed)=>void` | - |
 | hideRequiredMark | 隐藏所有表单项的必选标记，**默认隐藏** | `boolean` | true |
 | submitterColSpanProps | 提交按钮所在 col 的 props | ColProps | - |
-| defaultColsNumber | 自定义折叠状态下默认显示的表单控件数量，没有设置或小于 0，则显示一行控件；数量大于等于控件数量则隐藏展开按钮 | `number` | - |
+| defaultColsNumber | 自定义折叠状态下默认显示的表单控件数量，**最多只展示一行控件**，超出时展示收起/隐藏按钮 | `number` | - |
+| defaultFormItemsNumber | 与 defaultColsNumber 的不同点在于，设置多少就展示多少个控件，超出时展示收起/隐藏按钮 | `number` | - |
 | labelWidth | label 宽度 | `number` \| `'auto'` | `80` |
 | span | 表单项宽度 | `number[0 - 24]` | - |
 | split | 每一行是否有分割线 | `boolean` | - |

packages/form/src/layouts/QueryFilter/index.tsx

@@ -107,8 +107,12 @@ export type BaseQueryFilterProps = Omit<
   layout?: FormProps['layout'];
   /**
    * @name 默认一行显示几个表单项
-   */
+  */
   defaultColsNumber?: number;
+  /**
+   * @name 默认展示几个表单项
+   */
+  defaultFormItemsNumber?: number;
   /**
    * @name 文字标签的宽度
    *
@@ -347,9 +351,9 @@ const QueryFilterContent: React.FC<{
         (collapsed &&
           (firstRowFull ||
             // 如果 超过显示长度 且 总长度超过了 24
-            totalSize > showLength - 1) &&
-          !!index &&
-          totalSpan >= 24);
+            totalSize > showLength) &&
+          !!index
+          );
 
       itemLength += 1;
 
@@ -502,6 +506,7 @@ function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>) {
     layout,
     defaultCollapsed = true,
     defaultColsNumber,
+    defaultFormItemsNumber,
     span,
     searchGutter = 24,
     searchText,
@@ -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(() => {