@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -1,46 +1,20 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/form/layouts/QueryFilter/index.tsx
-import { Col, ConfigProvider, Form, Row } from "antd";
-import classNames from "classnames";
-import RcResizeObserver from "rc-resize-observer";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
-import React, { useContext, useMemo } from "react";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 */import { useMergedState } from '@rc-component/util';
+import { Col, ConfigProvider, Form, Row } from 'antd';
+import classNames from 'classnames';
+import RcResizeObserver from 'rc-resize-observer';
+import React, { useContext, useMemo } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
 import { isBrowser, useMountMergeState } from "../../../utils";
 import { BaseForm } from "../../BaseForm";
 import Actions from "./Actions";
 import { useStyle } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var CONFIG_SPAN_BREAKPOINTS = {
   xs: 513,
   sm: 513,
@@ -49,58 +23,55 @@ var CONFIG_SPAN_BREAKPOINTS = {
   xl: 1057,
   xxl: Infinity
 };
+/** 配置表单列变化的容器宽度断点 */
 var BREAKPOINTS = {
   vertical: [
-    // [breakpoint, cols, layout]
-    [513, 1, "vertical"],
-    [785, 2, "vertical"],
-    [1057, 3, "vertical"],
-    [Infinity, 4, "vertical"]
-  ],
-  default: [
-    [513, 1, "vertical"],
-    [701, 2, "vertical"],
-    [1062, 3, "horizontal"],
-    [1352, 3, "horizontal"],
-    [Infinity, 4, "horizontal"]
-  ]
+  // [breakpoint, cols, layout]
+  [513, 1, 'vertical'], [785, 2, 'vertical'], [1057, 3, 'vertical'], [Infinity, 4, 'vertical']],
+  default: [[513, 1, 'vertical'], [701, 2, 'vertical'], [1062, 3, 'horizontal'], [1352, 3, 'horizontal'], [Infinity, 4, 'horizontal']]
 };
-var getSpanConfig = (layout, width, span) => {
-  if (span && typeof span === "number") {
+
+/**
+ * 合并用户和默认的配置
+ *
+ * @param layout
+ * @param width
+ */
+var getSpanConfig = function getSpanConfig(layout, width, span) {
+  if (span && typeof span === 'number') {
     return {
-      span,
-      layout
+      span: span,
+      layout: layout
     };
   }
-  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)
+  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)
   );
   if (!breakPoint) {
     return {
       span: 8,
-      layout: "horizontal"
+      layout: 'horizontal'
     };
   }
   return {
     span: 24 / breakPoint[1],
-    layout: breakPoint == null ? void 0 : breakPoint[2]
+    layout: breakPoint === null || breakPoint === void 0 ? void 0 : breakPoint[2]
   };
 };
-var flatMapItems = (items, ignoreRules) => {
-  return items == null ? void 0 : items.flatMap((item) => {
-    var _a2, _b, _c;
-    if (((_a2 = item == null ? void 0 : item.type) == null ? void 0 : _a2.displayName) === "ProForm-Group" && !((_b = item.props) == null ? void 0 : _b.title)) {
+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)) {
       return item.props.children;
     }
-    if (ignoreRules && React.isValidElement(item)) {
-      return React.cloneElement(item, __spreadProps(__spreadValues({}, item.props), {
-        formItemProps: __spreadProps(__spreadValues({}, (_c = item.props) == null ? void 0 : _c.formItemProps), {
+    if (ignoreRules && /*#__PURE__*/React.isValidElement(item)) {
+      var _item$props2;
+      return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
+        formItemProps: _objectSpread(_objectSpread({}, (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.formItemProps), {}, {
           rules: []
         })
       }));
@@ -108,344 +79,311 @@ var flatMapItems = (items, ignoreRules) => {
     return item;
   });
 };
-var QueryFilterContent = (props) => {
-  var _a2, _b, _c, _d;
-  const intl = useIntl();
-  const { hashId } = useContext(ProProvider);
-  const resetText = props.resetText || intl.getMessage("tableForm.reset", "重置");
-  const searchText = props.searchText || intl.getMessage("tableForm.search", "搜索");
-  const [collapsed, setCollapsed] = useMergedState(
-    () => props.defaultCollapsed && !!props.submitter,
-    {
+var QueryFilterContent = function QueryFilterContent(props) {
+  var _props$submitterColSp5, _props$submitterColSp6, _props$submitterColSp7, _props$submitterColSp8;
+  var intl = useIntl();
+  var _useContext = useContext(ProProvider),
+    hashId = _useContext.hashId;
+  var resetText = props.resetText || intl.getMessage('tableForm.reset', '重置');
+  var searchText = props.searchText || intl.getMessage('tableForm.search', '搜索');
+  var _useMergedState = useMergedState(function () {
+      return props.defaultCollapsed && !!props.submitter;
+    }, {
       value: props.collapsed,
       onChange: props.onCollapse
-    }
-  );
-  const {
-    optionRender,
-    collapseRender,
-    split,
-    items,
-    spanSize,
-    showLength,
-    searchGutter,
-    showHiddenNum
-  } = props;
-  const submitter = useMemo(() => {
+    }),
+    _useMergedState2 = _slicedToArray(_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 = useMemo(function () {
     if (!props.submitter || optionRender === false) {
       return null;
     }
-    return React.cloneElement(props.submitter, __spreadValues({
+    return /*#__PURE__*/React.cloneElement(props.submitter, _objectSpread({
       searchConfig: {
-        resetText,
+        resetText: resetText,
         submitText: searchText
       },
-      render: optionRender ? (_, dom) => optionRender(
-        __spreadProps(__spreadValues({}, props), {
-          resetText,
-          searchText
-        }),
-        props,
-        dom
-      ) : optionRender
+      render: optionRender ? function (_, dom) {
+        return optionRender(_objectSpread(_objectSpread({}, props), {}, {
+          resetText: resetText,
+          searchText: searchText
+        }), props, dom);
+      } : optionRender
     }, props.submitter.props));
   }, [props, resetText, searchText, optionRender]);
-  let totalSpan = 0;
-  let itemLength = 0;
-  let firstRowFull = false;
-  let totalSize = 0;
-  let currentSpan = 0;
-  const processedList = flatMapItems(items, props.ignoreRules).map(
-    (item, index) => {
-      var _a3, _b2, _c2, _d2, _e;
-      const colSize = React.isValidElement(item) ? (_b2 = (_a3 = item == null ? void 0 : item.props) == null ? void 0 : _a3.colSize) != null ? _b2 : 1 : 1;
-      const colSpan = Math.min(spanSize.span * (colSize || 1), 24);
-      totalSpan += colSpan;
-      totalSize += colSize;
-      if (index === 0) {
-        firstRowFull = colSpan === 24 && !((_c2 = item == null ? void 0 : item.props) == null ? void 0 : _c2.hidden);
-      }
-      const hidden = ((_d2 = item == null ? void 0 : item.props) == null ? void 0 : _d2.hidden) || // 如果收起了
-      collapsed && (firstRowFull || // 如果 超过显示长度 且 总长度超过了 24
-      totalSize > showLength) && !!index;
-      itemLength += 1;
-      const itemKey = React.isValidElement(item) && (item.key || `${(_e = item.props) == null ? void 0 : _e.name}`) || index;
-      if (React.isValidElement(item) && hidden) {
-        if (!props.preserve) {
-          return {
-            itemDom: null,
-            colSpan: 0,
-            hidden: true
-          };
-        }
+
+  // totalSpan 统计控件占的位置，计算 offset 保证查询按钮在最后一列
+  var totalSpan = 0;
+  var itemLength = 0;
+  //首个表单项是否占满第一行
+  var firstRowFull = false;
+  // totalSize 统计控件占的份数
+  var totalSize = 0;
+
+  // for split compute
+  var currentSpan = 0;
+
+  // 处理过，包含是否需要隐藏的 数组
+  var processedList = flatMapItems(items, props.ignoreRules).map(function (item, index) {
+    var _item$props$colSize, _item$props3, _props2, _item$props4;
+    // 如果 formItem 自己配置了 hidden，默认使用它自己的
+    var colSize = /*#__PURE__*/React.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);
+    // 计算总的 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);
+    }
+    var hidden = (item === null || item === void 0 || (_props2 = item.props) === null || _props2 === void 0 ? void 0 : _props2.hidden) ||
+    // 如果收起了
+    collapsed && (firstRowFull ||
+    // 如果 超过显示长度 且 总长度超过了 24
+    totalSize > showLength) && !!index;
+    itemLength += 1;
+    var itemKey = /*#__PURE__*/React.isValidElement(item) && (item.key || "".concat((_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.name)) || index;
+    if ( /*#__PURE__*/React.isValidElement(item) && hidden) {
+      if (!props.preserve) {
         return {
-          itemDom: React.cloneElement(item, {
-            hidden: true,
-            key: itemKey || index
-          }),
-          hidden: true,
-          colSpan
+          itemDom: null,
+          colSpan: 0,
+          hidden: true
         };
       }
       return {
-        itemDom: item,
-        colSpan,
-        hidden: false
+        itemDom: /*#__PURE__*/React.cloneElement(item, {
+          hidden: true,
+          key: itemKey || index
+        }),
+        hidden: true,
+        colSpan: colSpan
       };
     }
-  );
-  const doms = processedList.map((itemProps, index) => {
-    var _a3, _b2;
-    const { itemDom, colSpan } = itemProps;
-    const hidden = (_a3 = itemDom == null ? void 0 : itemDom.props) == null ? void 0 : _a3.hidden;
-    if (hidden)
-      return itemDom;
-    const itemKey = React.isValidElement(itemDom) && (itemDom.key || `${(_b2 = itemDom.props) == null ? void 0 : _b2.name}`) || index;
+    return {
+      itemDom: item,
+      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;
+    if (hidden) return itemDom;
+
+    // 每一列的key, 一般是存在的
+    var itemKey = /*#__PURE__*/React.isValidElement(itemDom) && (itemDom.key || "".concat((_itemDom$props = itemDom.props) === null || _itemDom$props === void 0 ? void 0 : _itemDom$props.name)) || index;
     if (24 - currentSpan % 24 < colSpan) {
+      // 如果当前行空余位置放不下，那么折行
       totalSpan += 24 - currentSpan % 24;
       currentSpan += 24 - currentSpan % 24;
     }
     currentSpan += colSpan;
     if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
-      return /* @__PURE__ */ React.createElement(
-        Col,
-        {
-          key: itemKey,
-          span: colSpan,
-          className: `${props.baseClassName}-row-split-line ${props.baseClassName}-row-split ${hashId}`.trim()
-        },
-        itemDom
-      );
+      return /*#__PURE__*/_jsx(Col, {
+        span: colSpan,
+        className: "".concat(props.baseClassName, "-row-split-line ").concat(props.baseClassName, "-row-split ").concat(hashId).trim(),
+        children: itemDom
+      }, itemKey);
     }
-    return /* @__PURE__ */ React.createElement(
-      Col,
-      {
-        key: itemKey,
-        className: `${props.baseClassName}-row-split ${hashId}`.trim(),
-        span: colSpan
-      },
-      itemDom
-    );
+    return /*#__PURE__*/_jsx(Col, {
+      className: "".concat(props.baseClassName, "-row-split ").concat(hashId).trim(),
+      span: colSpan,
+      children: itemDom
+    }, itemKey);
   });
-  const hiddenNum = showHiddenNum && processedList.filter((item) => item.hidden).length;
-  const needCollapseRender = useMemo(() => {
+  var hiddenNum = showHiddenNum && processedList.filter(function (item) {
+    return item.hidden;
+  }).length;
+
+  /** 是否需要展示 collapseRender */
+  var needCollapseRender = useMemo(function () {
     if (totalSpan < 24 || totalSize <= showLength) {
       return false;
     }
     return true;
   }, [totalSize, showLength, totalSpan]);
-  const offset = useMemo(() => {
-    var _a3, _b2, _c2, _d2;
-    const offsetSpan = currentSpan % 24 + ((_b2 = (_a3 = props.submitterColSpanProps) == null ? void 0 : _a3.span) != null ? _b2 : spanSize.span);
+  var offset = 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);
     if (offsetSpan > 24) {
-      return 24 - ((_d2 = (_c2 = props.submitterColSpanProps) == null ? void 0 : _c2.span) != null ? _d2 : spanSize.span);
+      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 - offsetSpan;
-  }, [
-    currentSpan,
-    currentSpan % 24 + ((_b = (_a2 = props.submitterColSpanProps) == null ? void 0 : _a2.span) != null ? _b : spanSize.span),
-    (_c = props.submitterColSpanProps) == null ? void 0 : _c.span
-  ]);
-  const context = useContext(ConfigProvider.ConfigContext);
-  const baseClassName = context.getPrefixCls("pro-query-filter");
-  return /* @__PURE__ */ React.createElement(
-    Row,
-    {
-      gutter: searchGutter,
-      justify: "start",
-      className: classNames(`${baseClassName}-row`, hashId),
-      key: "resize-observer-row"
-    },
-    doms,
-    submitter && /* @__PURE__ */ React.createElement(
-      Col,
-      __spreadProps(__spreadValues({
-        key: "submitter",
-        span: spanSize.span,
-        offset,
-        className: classNames((_d = props.submitterColSpanProps) == null ? void 0 : _d.className)
-      }, props.submitterColSpanProps), {
-        style: {
-          textAlign: "end"
-        }
-      }),
-      /* @__PURE__ */ React.createElement(
-        Form.Item,
-        {
-          label: " ",
-          colon: false,
-          shouldUpdate: false,
-          className: `${baseClassName}-actions ${hashId}`.trim()
-        },
-        /* @__PURE__ */ React.createElement(
-          Actions,
-          {
-            hiddenNum,
-            key: "pro-form-query-filter-actions",
-            collapsed,
-            collapseRender: needCollapseRender ? collapseRender : false,
-            submitter,
-            setCollapsed
-          }
-        )
-      )
-    )
-  );
+  }, [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 = useContext(ConfigProvider.ConfigContext);
+  var baseClassName = context.getPrefixCls('pro-query-filter');
+  return /*#__PURE__*/_jsxs(Row, {
+    gutter: searchGutter,
+    justify: "start",
+    className: classNames("".concat(baseClassName, "-row"), hashId),
+    children: [doms, submitter && /*#__PURE__*/_jsx(Col, _objectSpread(_objectSpread({
+      span: spanSize.span,
+      offset: offset,
+      className: classNames((_props$submitterColSp8 = props.submitterColSpanProps) === null || _props$submitterColSp8 === void 0 ? void 0 : _props$submitterColSp8.className)
+    }, props.submitterColSpanProps), {}, {
+      style: {
+        textAlign: 'end'
+      },
+      children: /*#__PURE__*/_jsx(Form.Item, {
+        label: " ",
+        colon: false,
+        shouldUpdate: false,
+        className: "".concat(baseClassName, "-actions ").concat(hashId).trim(),
+        children: /*#__PURE__*/_jsx(Actions, {
+          hiddenNum: hiddenNum,
+          collapsed: collapsed,
+          collapseRender: needCollapseRender ? collapseRender : false,
+          submitter: submitter,
+          setCollapsed: setCollapsed
+        }, "pro-form-query-filter-actions")
+      })
+    }), "submitter")]
+  }, "resize-observer-row");
 };
-var _a;
-var defaultWidth = isBrowser() ? (_a = document == null ? void 0 : document.body) == null ? void 0 : _a.clientWidth : 1024;
+var defaultWidth = isBrowser() ? (_document = document) === null || _document === void 0 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.clientWidth : 1024;
 function QueryFilter(props) {
-  const _a2 = props, {
-    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
-  } = _a2, rest = __objRest(_a2, [
-    "collapsed",
-    "layout",
-    "defaultCollapsed",
-    "defaultColsNumber",
-    "defaultFormItemsNumber",
-    "span",
-    "searchGutter",
-    "searchText",
-    "resetText",
-    "optionRender",
-    "collapseRender",
-    "onReset",
-    "onCollapse",
-    "labelWidth",
-    "style",
-    "split",
-    "preserve",
-    "ignoreRules",
-    "showHiddenNum",
-    "submitterColSpanProps"
-  ]);
-  const context = useContext(ConfigProvider.ConfigContext);
-  const baseClassName = context.getPrefixCls("pro-query-filter");
-  const { wrapSSR, hashId } = useStyle(baseClassName);
-  const [width, setWidth] = useMountMergeState(
-    () => typeof (style == null ? void 0 : style.width) === "number" ? style == null ? void 0 : style.width : defaultWidth
-  );
-  const spanSize = useMemo(
-    () => getSpanConfig(layout, width + 16, span),
-    [layout, width, span]
-  );
-  const showLength = useMemo(() => {
-    if (defaultFormItemsNumber !== void 0) {
+  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 = _objectWithoutProperties(props, _excluded);
+  var context = useContext(ConfigProvider.ConfigContext);
+  var baseClassName = context.getPrefixCls('pro-query-filter');
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var _useMountMergeState = 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 = _slicedToArray(_useMountMergeState, 2),
+    width = _useMountMergeState2[0],
+    setWidth = _useMountMergeState2[1];
+  var spanSize = useMemo(function () {
+    return getSpanConfig(layout, width + 16, span);
+  }, [layout, width, span]);
+  var showLength = useMemo(function () {
+    if (defaultFormItemsNumber !== undefined) {
       return defaultFormItemsNumber;
     }
-    if (defaultColsNumber !== void 0) {
-      const oneRowControlsNumber = 24 / spanSize.span - 1;
+    if (defaultColsNumber !== undefined) {
+      // 折叠为一行，需要处理多行的情况请使用 defaultFormItemsNumber
+      var oneRowControlsNumber = 24 / spanSize.span - 1;
       return defaultColsNumber > oneRowControlsNumber ? oneRowControlsNumber : defaultColsNumber;
     }
     return Math.max(1, 24 / spanSize.span - 1);
   }, [defaultColsNumber, defaultFormItemsNumber, spanSize.span]);
-  const formItemFixStyle = useMemo(() => {
-    if (labelWidth && spanSize.layout !== "vertical" && labelWidth !== "auto") {
+
+  /** 计算最大宽度防止溢出换行 */
+  var formItemFixStyle = useMemo(function () {
+    if (labelWidth && spanSize.layout !== 'vertical' && labelWidth !== 'auto') {
       return {
         labelCol: {
-          flex: `0 0 ${labelWidth}px`
+          flex: "0 0 ".concat(labelWidth, "px")
         },
         wrapperCol: {
           style: {
-            maxWidth: `calc(100% - ${labelWidth}px)`
+            maxWidth: "calc(100% - ".concat(labelWidth, "px)")
           }
         },
         style: {
-          flexWrap: "nowrap"
+          flexWrap: 'nowrap'
         }
       };
     }
-    return void 0;
+    return undefined;
   }, [spanSize.layout, labelWidth]);
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(
-      RcResizeObserver,
-      {
-        key: "resize-observer",
-        onResize: (offset) => {
-          if (width !== offset.width && offset.width > 17) {
-            setWidth(offset.width);
+  return wrapSSR( /*#__PURE__*/_jsx(RcResizeObserver, {
+    onResize: function onResize(offset) {
+      if (width !== offset.width && offset.width > 17) {
+        setWidth(offset.width);
+      }
+    },
+    children: function children(ref) {
+      return /*#__PURE__*/_jsx("div", {
+        ref: ref,
+        className: "".concat(baseClassName, "-container ").concat(hashId),
+        style: props.containerStyle,
+        children: /*#__PURE__*/_jsx(BaseForm, _objectSpread(_objectSpread({
+          isKeyPressSubmit: true,
+          preserve: preserve
+        }, rest), {}, {
+          className: classNames(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__*/_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
+            });
           }
-        }
-      },
-      (ref) => /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref,
-          className: `${baseClassName}-container ${hashId}`,
-          style: props.containerStyle
-        },
-        /* @__PURE__ */ React.createElement(
-          BaseForm,
-          __spreadProps(__spreadValues({
-            isKeyPressSubmit: true,
-            preserve
-          }, rest), {
-            className: classNames(baseClassName, hashId, rest.className),
-            onReset,
-            style,
-            layout: spanSize.layout,
-            fieldProps: {
-              style: {
-                width: "100%"
-              }
-            },
-            formItemProps: formItemFixStyle,
-            groupProps: {
-              titleStyle: {
-                display: "inline-block",
-                marginInlineEnd: 16
-              }
-            },
-            contentRender: (items, renderSubmitter, form) => /* @__PURE__ */ React.createElement(
-              QueryFilterContent,
-              {
-                spanSize,
-                collapsed: controlCollapsed,
-                form,
-                submitterColSpanProps,
-                collapseRender,
-                defaultCollapsed,
-                onCollapse,
-                optionRender,
-                submitter: renderSubmitter,
-                items,
-                split,
-                baseClassName,
-                resetText: props.resetText,
-                searchText: props.searchText,
-                searchGutter,
-                preserve,
-                ignoreRules,
-                showLength,
-                showHiddenNum
-              }
-            )
-          })
-        )
-      )
-    )
-  );
+        }))
+      });
+    }
+  }, "resize-observer"));
 }
-export {
-  QueryFilter
-};
+export { QueryFilter };