@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/form/layouts/QueryFilter/index.js

@@ -1,18 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QueryFilter = QueryFilter;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -20,10 +17,9 @@ var _BaseForm = require("../../BaseForm");
 var _Actions = _interopRequireDefault(require("./Actions"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["collapsed", "layout", "defaultCollapsed", "defaultColsNumber", "defaultFormItemsNumber", "span", "searchGutter", "searchText", "resetText", "optionRender", "collapseRender", "onReset", "onCollapse", "labelWidth", "style", "split", "preserve", "ignoreRules", "showHiddenNum", "submitterColSpanProps"];
-var _document;
 /* eslint-disable no-param-reassign */
-var CONFIG_SPAN_BREAKPOINTS = {
+
+const CONFIG_SPAN_BREAKPOINTS = {
   xs: 513,
   sm: 513,
   md: 785,
@@ -32,7 +28,7 @@ var CONFIG_SPAN_BREAKPOINTS = {
   xxl: Infinity
 };
 /** 配置表单列变化的容器宽度断点 */
-var BREAKPOINTS = {
+const BREAKPOINTS = {
   vertical: [
   // [breakpoint, cols, layout]
   [513, 1, 'vertical'], [785, 2, 'vertical'], [1057, 3, 'vertical'], [Infinity, 4, 'vertical']],
@@ -45,19 +41,15 @@ var BREAKPOINTS = {
  * @param layout
  * @param width
  */
-var getSpanConfig = function getSpanConfig(layout, width, span) {
+const getSpanConfig = (layout, width, span) => {
   if (span && typeof span === 'number') {
     return {
-      span: span,
-      layout: layout
+      span,
+      layout
     };
   }
-  var spanConfig = span ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(function (key) {
-    return [CONFIG_SPAN_BREAKPOINTS[key], 24 / span[key], 'horizontal'];
-  }) : BREAKPOINTS[layout || 'default'];
-  var breakPoint = (spanConfig || BREAKPOINTS.default).find(function (item) {
-    return width < item[0] + 16;
-  } // 16 = 2 * (ant-row -8px margin)
+  const spanConfig = span ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(key => [CONFIG_SPAN_BREAKPOINTS[key], 24 / span[key], 'horizontal']) : BREAKPOINTS[layout || 'default'];
+  const breakPoint = (spanConfig || BREAKPOINTS.default).find(item => width < item[0] + 16 // 16 = 2 * (ant-row -8px margin)
   );
   if (!breakPoint) {
     return {
@@ -67,100 +59,99 @@ var getSpanConfig = function getSpanConfig(layout, width, span) {
   }
   return {
     span: 24 / breakPoint[1],
-    layout: breakPoint === null || breakPoint === void 0 ? void 0 : breakPoint[2]
+    layout: breakPoint?.[2]
   };
 };
-var flatMapItems = function flatMapItems(items, ignoreRules) {
-  return items === null || items === void 0 ? void 0 : items.flatMap(function (item) {
-    var _item$type, _item$props;
-    if ((item === null || item === void 0 || (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) === 'ProForm-Group' && !((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.title)) {
+const flatMapItems = (items, ignoreRules) => {
+  return items?.flatMap(item => {
+    if (item?.type?.displayName === 'ProForm-Group' && !item.props?.title) {
       return item.props.children;
     }
     if (ignoreRules && /*#__PURE__*/_react.default.isValidElement(item)) {
-      var _item$props2;
-      return /*#__PURE__*/_react.default.cloneElement(item, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.props), {}, {
-        formItemProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.formItemProps), {}, {
+      return /*#__PURE__*/_react.default.cloneElement(item, {
+        ...item.props,
+        formItemProps: {
+          ...item.props?.formItemProps,
           rules: []
-        })
-      }));
+        }
+      });
     }
     return item;
   });
 };
-var QueryFilterContent = function QueryFilterContent(props) {
-  var _props$submitterColSp5, _props$submitterColSp6, _props$submitterColSp7, _props$submitterColSp8;
-  var intl = (0, _provider.useIntl)();
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext.hashId;
-  var resetText = props.resetText || intl.getMessage('tableForm.reset', '重置');
-  var searchText = props.searchText || intl.getMessage('tableForm.search', '搜索');
-  var _useMergedState = (0, _util.useMergedState)(function () {
-      return props.defaultCollapsed && !!props.submitter;
-    }, {
-      value: props.collapsed,
-      onChange: props.onCollapse
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    collapsed = _useMergedState2[0],
-    setCollapsed = _useMergedState2[1];
-  var optionRender = props.optionRender,
-    collapseRender = props.collapseRender,
-    split = props.split,
-    items = props.items,
-    spanSize = props.spanSize,
-    showLength = props.showLength,
-    searchGutter = props.searchGutter,
-    showHiddenNum = props.showHiddenNum;
-  var submitter = (0, _react.useMemo)(function () {
+const QueryFilterContent = props => {
+  const intl = (0, _provider.useIntl)();
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const resetText = props.resetText || intl.getMessage('tableForm.reset', '重置');
+  const searchText = props.searchText || intl.getMessage('tableForm.search', '搜索');
+  const [collapsed, setCollapsedInner] = (0, _util.useControlledState)(() => props.defaultCollapsed && !!props.submitter, props.collapsed);
+  const setCollapsed = (0, _react.useCallback)(updater => {
+    setCollapsedInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCollapse?.(next);
+      return next;
+    });
+  }, [props.onCollapse]);
+  const {
+    optionRender,
+    collapseRender,
+    split,
+    items,
+    spanSize,
+    showLength,
+    searchGutter,
+    showHiddenNum
+  } = props;
+  const submitter = (0, _react.useMemo)(() => {
     if (!props.submitter || optionRender === false) {
       return null;
     }
-    return /*#__PURE__*/_react.default.cloneElement(props.submitter, (0, _objectSpread2.default)({
+    return /*#__PURE__*/_react.default.cloneElement(props.submitter, {
       searchConfig: {
-        resetText: resetText,
+        resetText,
         submitText: searchText
       },
-      render: optionRender ? function (_, dom) {
-        return optionRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          resetText: resetText,
-          searchText: searchText
-        }), props, dom);
-      } : optionRender
-    }, props.submitter.props));
+      render: optionRender ? (_, dom) => optionRender({
+        ...props,
+        resetText,
+        searchText
+      }, props, dom) : optionRender,
+      ...props.submitter.props
+    });
   }, [props, resetText, searchText, optionRender]);
 
   // totalSpan 统计控件占的位置，计算 offset 保证查询按钮在最后一列
-  var totalSpan = 0;
-  var itemLength = 0;
+  let totalSpan = 0;
+  let itemLength = 0;
   //首个表单项是否占满第一行
-  var firstRowFull = false;
+  let firstRowFull = false;
   // totalSize 统计控件占的份数
-  var totalSize = 0;
+  let totalSize = 0;
 
   // for split compute
-  var currentSpan = 0;
+  let currentSpan = 0;
 
   // 处理过，包含是否需要隐藏的 数组
-  var processedList = flatMapItems(items, props.ignoreRules).map(function (item, index) {
-    var _item$props$colSize, _item$props3, _props2, _item$props4;
+  const processedList = flatMapItems(items, props.ignoreRules).map((item, index) => {
     // 如果 formItem 自己配置了 hidden，默认使用它自己的
-    var colSize = /*#__PURE__*/_react.default.isValidElement(item) ? (_item$props$colSize = item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.colSize) !== null && _item$props$colSize !== void 0 ? _item$props$colSize : 1 : 1;
-    var colSpan = Math.min(spanSize.span * (colSize || 1), 24);
+    const colSize = /*#__PURE__*/_react.default.isValidElement(item) ? item?.props?.colSize ?? 1 : 1;
+    const colSpan = Math.min(spanSize.span * (colSize || 1), 24);
     // 计算总的 totalSpan 长度
     totalSpan += colSpan;
     // 计算总的 colSize 长度
     totalSize += colSize;
     if (index === 0) {
-      var _props;
-      firstRowFull = colSpan === 24 && !(item !== null && item !== void 0 && (_props = item.props) !== null && _props !== void 0 && _props.hidden);
+      firstRowFull = colSpan === 24 && !item?.props?.hidden;
     }
-    var hidden = (item === null || item === void 0 || (_props2 = item.props) === null || _props2 === void 0 ? void 0 : _props2.hidden) ||
+    const hidden = item?.props?.hidden ||
     // 如果收起了
     collapsed && (firstRowFull ||
     // 如果 超过显示长度 且 总长度超过了 24
     totalSize > showLength) && !!index;
     itemLength += 1;
-    var itemKey = /*#__PURE__*/_react.default.isValidElement(item) && (item.key || "".concat((_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.name)) || index;
+    const itemKey = /*#__PURE__*/_react.default.isValidElement(item) && (item.key || `${item.props?.name}`) || index;
     if ( /*#__PURE__*/_react.default.isValidElement(item) && hidden) {
       if (!props.preserve) {
         return {
@@ -175,24 +166,25 @@ var QueryFilterContent = function QueryFilterContent(props) {
           key: itemKey || index
         }),
         hidden: true,
-        colSpan: colSpan
+        colSpan
       };
     }
     return {
       itemDom: item,
-      colSpan: colSpan,
+      colSpan,
       hidden: false
     };
   });
-  var doms = processedList.map(function (itemProps, index) {
-    var _props3, _itemDom$props;
-    var itemDom = itemProps.itemDom,
-      colSpan = itemProps.colSpan;
-    var hidden = itemDom === null || itemDom === void 0 || (_props3 = itemDom.props) === null || _props3 === void 0 ? void 0 : _props3.hidden;
+  const doms = processedList.map((itemProps, index) => {
+    const {
+      itemDom,
+      colSpan
+    } = itemProps;
+    const hidden = itemDom?.props?.hidden;
     if (hidden) return itemDom;
 
     // 每一列的key, 一般是存在的
-    var itemKey = /*#__PURE__*/_react.default.isValidElement(itemDom) && (itemDom.key || "".concat((_itemDom$props = itemDom.props) === null || _itemDom$props === void 0 ? void 0 : _itemDom$props.name)) || index;
+    const itemKey = /*#__PURE__*/_react.default.isValidElement(itemDom) && (itemDom.key || `${itemDom.props?.name}`) || index;
     if (24 - currentSpan % 24 < colSpan) {
       // 如果当前行空余位置放不下，那么折行
       totalSpan += 24 - currentSpan % 24;
@@ -202,47 +194,43 @@ var QueryFilterContent = function QueryFilterContent(props) {
     if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: colSpan,
-        className: "".concat(props.baseClassName, "-row-split-line ").concat(props.baseClassName, "-row-split ").concat(hashId).trim(),
+        className: `${props.baseClassName}-row-split-line ${props.baseClassName}-row-split ${hashId}`.trim(),
         children: itemDom
       }, itemKey);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
-      className: "".concat(props.baseClassName, "-row-split ").concat(hashId).trim(),
+      className: `${props.baseClassName}-row-split ${hashId}`.trim(),
       span: colSpan,
       children: itemDom
     }, itemKey);
   });
-  var hiddenNum = showHiddenNum && processedList.filter(function (item) {
-    return item.hidden;
-  }).length;
+  const hiddenNum = showHiddenNum && processedList.filter(item => item.hidden).length;
 
   /** 是否需要展示 collapseRender */
-  var needCollapseRender = (0, _react.useMemo)(function () {
+  const needCollapseRender = (0, _react.useMemo)(() => {
     if (totalSpan < 24 || totalSize <= showLength) {
       return false;
     }
     return true;
   }, [totalSize, showLength, totalSpan]);
-  var offset = (0, _react.useMemo)(function () {
-    var _props$submitterColSp, _props$submitterColSp2;
-    var offsetSpan = currentSpan % 24 + ((_props$submitterColSp = (_props$submitterColSp2 = props.submitterColSpanProps) === null || _props$submitterColSp2 === void 0 ? void 0 : _props$submitterColSp2.span) !== null && _props$submitterColSp !== void 0 ? _props$submitterColSp : spanSize.span);
+  const offset = (0, _react.useMemo)(() => {
+    const offsetSpan = currentSpan % 24 + (props.submitterColSpanProps?.span ?? spanSize.span);
     if (offsetSpan > 24) {
-      var _props$submitterColSp3, _props$submitterColSp4;
-      return 24 - ((_props$submitterColSp3 = (_props$submitterColSp4 = props.submitterColSpanProps) === null || _props$submitterColSp4 === void 0 ? void 0 : _props$submitterColSp4.span) !== null && _props$submitterColSp3 !== void 0 ? _props$submitterColSp3 : spanSize.span);
+      return 24 - (props.submitterColSpanProps?.span ?? spanSize.span);
     }
     return 24 - offsetSpan;
-  }, [currentSpan, currentSpan % 24 + ((_props$submitterColSp5 = (_props$submitterColSp6 = props.submitterColSpanProps) === null || _props$submitterColSp6 === void 0 ? void 0 : _props$submitterColSp6.span) !== null && _props$submitterColSp5 !== void 0 ? _props$submitterColSp5 : spanSize.span), (_props$submitterColSp7 = props.submitterColSpanProps) === null || _props$submitterColSp7 === void 0 ? void 0 : _props$submitterColSp7.span]);
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls('pro-query-filter');
+  }, [currentSpan, currentSpan % 24 + (props.submitterColSpanProps?.span ?? spanSize.span), props.submitterColSpanProps?.span]);
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls('pro-query-filter');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
     gutter: searchGutter,
     justify: "start",
-    className: (0, _classnames.default)("".concat(baseClassName, "-row"), hashId),
-    children: [doms, submitter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: (0, _clsx.clsx)(`${baseClassName}-row`, hashId),
+    children: [doms, submitter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
       span: spanSize.span,
       offset: offset,
-      className: (0, _classnames.default)((_props$submitterColSp8 = props.submitterColSpanProps) === null || _props$submitterColSp8 === void 0 ? void 0 : _props$submitterColSp8.className)
-    }, props.submitterColSpanProps), {}, {
+      className: (0, _clsx.clsx)(props.submitterColSpanProps?.className),
+      ...props.submitterColSpanProps,
       style: {
         textAlign: 'end'
       },
@@ -250,7 +238,7 @@ var QueryFilterContent = function QueryFilterContent(props) {
         label: " ",
         colon: false,
         shouldUpdate: false,
-        className: "".concat(baseClassName, "-actions ").concat(hashId).trim(),
+        className: `${baseClassName}-actions ${hashId}`.trim(),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
           hiddenNum: hiddenNum,
           collapsed: collapsed,
@@ -259,73 +247,64 @@ var QueryFilterContent = function QueryFilterContent(props) {
           setCollapsed: setCollapsed
         }, "pro-form-query-filter-actions")
       })
-    }), "submitter")]
+    }, "submitter")]
   }, "resize-observer-row");
 };
-var defaultWidth = (0, _utils.isBrowser)() ? (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.clientWidth : 1024;
+const defaultWidth = (0, _utils.isBrowser)() ? document?.body?.clientWidth : 1024;
 function QueryFilter(props) {
-  var controlCollapsed = props.collapsed,
-    layout = props.layout,
-    _props$defaultCollaps = props.defaultCollapsed,
-    defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps,
-    defaultColsNumber = props.defaultColsNumber,
-    defaultFormItemsNumber = props.defaultFormItemsNumber,
-    span = props.span,
-    _props$searchGutter = props.searchGutter,
-    searchGutter = _props$searchGutter === void 0 ? 24 : _props$searchGutter,
-    searchText = props.searchText,
-    resetText = props.resetText,
-    optionRender = props.optionRender,
-    collapseRender = props.collapseRender,
-    onReset = props.onReset,
-    onCollapse = props.onCollapse,
-    _props$labelWidth = props.labelWidth,
-    labelWidth = _props$labelWidth === void 0 ? '80' : _props$labelWidth,
-    style = props.style,
-    split = props.split,
-    _props$preserve = props.preserve,
-    preserve = _props$preserve === void 0 ? true : _props$preserve,
-    ignoreRules = props.ignoreRules,
-    _props$showHiddenNum = props.showHiddenNum,
-    showHiddenNum = _props$showHiddenNum === void 0 ? false : _props$showHiddenNum,
-    submitterColSpanProps = props.submitterColSpanProps,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var baseClassName = context.getPrefixCls('pro-query-filter');
-  var _useStyle = (0, _style.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _useMountMergeState = (0, _utils.useMountMergeState)(function () {
-      return typeof (style === null || style === void 0 ? void 0 : style.width) === 'number' ? style === null || style === void 0 ? void 0 : style.width : defaultWidth;
-    }),
-    _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
-    width = _useMountMergeState2[0],
-    setWidth = _useMountMergeState2[1];
-  var spanSize = (0, _react.useMemo)(function () {
-    return getSpanConfig(layout, width + 16, span);
-  }, [layout, width, span]);
-  var showLength = (0, _react.useMemo)(function () {
+  const {
+    collapsed: controlCollapsed,
+    layout,
+    defaultCollapsed = true,
+    defaultColsNumber,
+    defaultFormItemsNumber,
+    span,
+    searchGutter = 24,
+    searchText,
+    resetText,
+    optionRender,
+    collapseRender,
+    onReset,
+    onCollapse,
+    labelWidth = '80',
+    style,
+    split,
+    preserve = true,
+    ignoreRules,
+    showHiddenNum = false,
+    submitterColSpanProps,
+    ...rest
+  } = props;
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const baseClassName = context.getPrefixCls('pro-query-filter');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(baseClassName);
+  const [width, setWidth] = (0, _react.useState)(() => typeof style?.width === 'number' ? style?.width : defaultWidth);
+  const spanSize = (0, _react.useMemo)(() => getSpanConfig(layout, width + 16, span), [layout, width, span]);
+  const showLength = (0, _react.useMemo)(() => {
     if (defaultFormItemsNumber !== undefined) {
       return defaultFormItemsNumber;
     }
     if (defaultColsNumber !== undefined) {
       // 折叠为一行，需要处理多行的情况请使用 defaultFormItemsNumber
-      var oneRowControlsNumber = 24 / spanSize.span - 1;
+      const oneRowControlsNumber = 24 / spanSize.span - 1;
       return defaultColsNumber > oneRowControlsNumber ? oneRowControlsNumber : defaultColsNumber;
     }
     return Math.max(1, 24 / spanSize.span - 1);
   }, [defaultColsNumber, defaultFormItemsNumber, spanSize.span]);
 
   /** 计算最大宽度防止溢出换行 */
-  var formItemFixStyle = (0, _react.useMemo)(function () {
+  const formItemFixStyle = (0, _react.useMemo)(() => {
     if (labelWidth && spanSize.layout !== 'vertical' && labelWidth !== 'auto') {
       return {
         labelCol: {
-          flex: "0 0 ".concat(labelWidth, "px")
+          flex: `0 0 ${labelWidth}px`
         },
         wrapperCol: {
           style: {
-            maxWidth: "calc(100% - ".concat(labelWidth, "px)")
+            maxWidth: `calc(100% - ${labelWidth}px)`
           }
         },
         style: {
@@ -335,62 +314,58 @@ function QueryFilter(props) {
     }
     return undefined;
   }, [spanSize.layout, labelWidth]);
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
-    onResize: function onResize(offset) {
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeObserver.default, {
+    onResize: offset => {
       if (width !== offset.width && offset.width > 17) {
         setWidth(offset.width);
       }
     },
-    children: function children(ref) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: ref,
-        className: "".concat(baseClassName, "-container ").concat(hashId),
-        style: props.containerStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          isKeyPressSubmit: true,
-          preserve: preserve
-        }, rest), {}, {
-          className: (0, _classnames.default)(baseClassName, hashId, rest.className),
-          onReset: onReset,
-          style: style,
-          layout: spanSize.layout,
-          fieldProps: {
-            style: {
-              width: '100%'
-            }
-          },
-          formItemProps: formItemFixStyle,
-          groupProps: {
-            titleStyle: {
-              display: 'inline-block',
-              marginInlineEnd: 16
-            }
-          },
-          contentRender: function contentRender(items, renderSubmitter, form) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryFilterContent, {
-              spanSize: spanSize,
-              collapsed: controlCollapsed,
-              form: form,
-              submitterColSpanProps: submitterColSpanProps,
-              collapseRender: collapseRender,
-              defaultCollapsed: defaultCollapsed,
-              onCollapse: onCollapse,
-              optionRender: optionRender,
-              submitter: renderSubmitter,
-              items: items,
-              split: split,
-              baseClassName: baseClassName,
-              resetText: props.resetText,
-              searchText: props.searchText,
-              searchGutter: searchGutter,
-              preserve: preserve,
-              ignoreRules: ignoreRules,
-              showLength: showLength,
-              showHiddenNum: showHiddenNum
-            });
+    children: ref => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: `${baseClassName}-container ${hashId}`,
+      style: props.containerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, {
+        isKeyPressSubmit: true,
+        preserve: preserve,
+        ...rest,
+        className: (0, _clsx.clsx)(baseClassName, hashId, rest.className),
+        onReset: onReset,
+        style: style,
+        layout: spanSize.layout,
+        fieldProps: {
+          style: {
+            width: '100%'
           }
-        }))
-      });
-    }
+        },
+        formItemProps: formItemFixStyle,
+        groupProps: {
+          titleStyle: {
+            display: 'inline-block',
+            marginInlineEnd: 16
+          }
+        },
+        contentRender: (items, renderSubmitter, form) => /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryFilterContent, {
+          spanSize: spanSize,
+          collapsed: controlCollapsed,
+          form: form,
+          submitterColSpanProps: submitterColSpanProps,
+          collapseRender: collapseRender,
+          defaultCollapsed: defaultCollapsed,
+          onCollapse: onCollapse,
+          optionRender: optionRender,
+          submitter: renderSubmitter,
+          items: items,
+          split: split,
+          baseClassName: baseClassName,
+          resetText: props.resetText,
+          searchText: props.searchText,
+          searchGutter: searchGutter,
+          preserve: preserve,
+          ignoreRules: ignoreRules,
+          showLength: showLength,
+          showHiddenNum: showHiddenNum
+        })
+      })
+    })
   }, "resize-observer"));
 }

package/lib/form/layouts/QueryFilter/style.js

@@ -1,52 +1,59 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    '&&': {
-      padding: 24
-    }
-  }, "".concat(token.antCls, "-form-item"), {
-    marginBlock: 0
-  }), "".concat(token.proComponentsCls, "-form-group-title"), {
-    marginBlock: 0
-  }), '&-row', {
-    rowGap: 24,
-    '&-split': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-form-group"), {
-      display: 'flex',
-      alignItems: 'center',
-      gap: token.marginXS
-    }), '&:last-child', {
-      marginBlockEnd: 12
-    }),
-    '&-split-line': {
-      '&:after': {
-        position: 'absolute',
-        width: '100%',
-        content: '""',
-        height: 1,
-        insetBlockEnd: -12,
-        borderBlockEnd: "1px dashed ".concat(token.colorSplit)
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&&': {
+        padding: 24
+      },
+      [`${token.antCls}-form-item`]: {
+        marginBlock: 0
+      },
+      [`${token.proComponentsCls}-form-group-title`]: {
+        marginBlock: 0
+      },
+      '&-row': {
+        rowGap: 24,
+        '&-split': {
+          [`${token.proComponentsCls}-form-group`]: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: token.marginXS
+          },
+          '&:last-child': {
+            marginBlockEnd: 12
+          }
+        },
+        '&-split-line': {
+          '&:after': {
+            position: 'absolute',
+            width: '100%',
+            content: '""',
+            height: 1,
+            insetBlockEnd: -12,
+            borderBlockEnd: `1px dashed ${token.colorSplit}`
+          }
+        }
+      },
+      '&-collapse-button': {
+        display: 'flex',
+        alignItems: 'center',
+        color: token.colorPrimary
       }
     }
-  }), '&-collapse-button', {
-    display: 'flex',
-    alignItems: 'center',
-    color: token.colorPrimary
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('QueryFilter', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('QueryFilter', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }