@ant-design/pro-components 3.1.3-1 → 3.1.5-0

package/lib/form/components/FormItem/warpField.js

@@ -47,8 +47,6 @@ const ignoreWidthValueType = ['switch', 'radioButton', 'radio', 'rate'];
  */
 function warpField(Field, config) {
   // 标记是否是 ProForm 的组件
-  // @ts-ignore
-  // eslint-disable-next-line no-param-reassign
   Field.displayName = 'ProFormComponent';
   const FieldWithContext = props => {
     const {
@@ -108,9 +106,7 @@ function warpField(Field, config) {
         formItemProps: getFormItemProps?.(),
         fieldProps: getFieldProps?.()
       };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]);
+    }, [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]);
     const fieldProps = (0, _utils.useDeepCompareMemo)(() => {
       const newFieldProps = {
         ...(ignoreFormItem ? (0, _utils.omitUndefined)({
@@ -152,8 +148,6 @@ function warpField(Field, config) {
       if (Array.isArray(prefixName) && name) name = `${prefixName.join('.')}.${name}`;
       const key = name && `form-${contextValue.formKey ?? ''}-field-${name}`;
       return key;
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [(0, _utils.stringify)(otherProps?.name), prefixName, contextValue.formKey]);
     const onChange = (0, _utils.useRefFunction)((...restParams) => {
       if (getFormItemProps || getFieldProps) {
@@ -170,7 +164,6 @@ function warpField(Field, config) {
       };
       if (isIgnoreWidth) Reflect.deleteProperty(newStyle, 'width');
       return (0, _utils.omitUndefined)(newStyle);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [(0, _utils.stringify)(fieldProps?.style), contextValue.grid, isIgnoreWidth, width]);
     const className = (0, _utils.useDeepCompareMemo)(() => {
       const isSizeEnum = width && WIDTH_SIZE_ENUM[width];
@@ -200,15 +193,12 @@ function warpField(Field, config) {
       };
     }, [allowClear, className, onChange, fieldProps, style]);
     const field = (0, _utils.useDeepCompareMemo)(() => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Field
-      // @ts-ignore
-      , {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Field, {
         ...rest,
         fieldProps: fieldFieldProps,
         proFieldProps: fieldProFieldProps,
         ref: props?.fieldRef
       }, props.proFormFieldKey || props.name);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fieldProFieldProps, fieldFieldProps, rest]);
 
     // 使用useMemo包裹避免不必要的re-render
@@ -219,9 +209,7 @@ function warpField(Field, config) {
       , {
         label: label && proFieldProps?.light !== true ? label : undefined,
         tooltip: proFieldProps?.light !== true && tooltip,
-        valuePropName: valuePropName
-        // @ts-ignore
-        ,
+        valuePropName: valuePropName,
         ...otherProps,
         ignoreFormItem: ignoreFormItem,
         transform: transform,

package/lib/form/components/List/ListContainer.js

@@ -7,6 +7,7 @@ exports.ProFormListContainer = void 0;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = require("react");
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -100,7 +101,7 @@ const ProFormListContainer = props => {
       creatorButtonText = intl.getMessage('editableTable.action.add', '添加一行数据')
     } = creatorButtonProps || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
-      className: `${prefixCls}-creator-button-${position} ${hashId || ''}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-creator-button-${position}`, hashId),
       type: "dashed",
       loading: loading,
       block: true,

package/lib/form/components/List/index.d.ts

@@ -1,9 +1,9 @@
 import type { ColProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { FormListFieldData, FormListOperation, FormListProps } from 'antd/lib/form/FormList';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { ReactNode } from 'react';
 import React from 'react';
+import type { LabelTooltipType } from '../../../utils';
 import type { ProFormGridConfig } from '../../typing';
 import type { ChildrenItemFunction, FormListActionGuard, ProFromListCommonProps } from './ListItem';
 declare const FormListContext: React.Context<Record<string, any> | (FormListFieldData & {

package/lib/form/components/List/index.js

@@ -99,8 +99,6 @@ function ProFormList(props) {
     }
     return [listContext.name, rest.name].flat(1);
   }, [listContext.name, rest.name]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   (0, _react.useImperativeHandle)(actionRef, () => ({
     ...actionRefs.current,
     get: index => {

package/lib/form/components/Radio/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _Radio = _interopRequireDefault(require("../../../field/components/Radio"));
@@ -77,8 +78,11 @@ const ProFormRadioComponents = /*#__PURE__*/_react.default.forwardRef(({
   fieldProps,
   children
 }, ref) => {
+  const {
+    ...restFieldProps
+  } = fieldProps || {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Radio, {
-    ...fieldProps,
+    ...(0, _util.omit)(restFieldProps, ['allowClear']),
     ref: ref,
     children: children
   });
@@ -90,8 +94,5 @@ const ProFormRadio = (0, _warpField.default)?.(ProFormRadioComponents, {
 const WrappedProFormRadio = ProFormRadio;
 WrappedProFormRadio.Group = RadioGroup;
 WrappedProFormRadio.Button = _antd.Radio.Button;
-
-// @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormRadio.displayName = 'ProFormComponent';
 var _default = exports.default = WrappedProFormRadio;

package/lib/form/components/SchemaForm/index.js

@@ -145,7 +145,6 @@ function BetaSchemaForm(props) {
     // like StepsForm's columns but not only for StepsForm
     if (columns.length && Array.isArray(columns[0])) return;
     return genItems(columns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columns, restProps?.open, action, type, formDomsDeps, formRef.current]);
 
   /**

package/lib/form/components/SchemaForm/layoutType/StepsForm.js

@@ -31,7 +31,6 @@ const StepsForm = ({
     return steps?.map((step, index) => /*#__PURE__*/(0, _react.createElement)(_index.default, {
       grid: grid,
       ...step,
-      // eslint-disable-next-line react/no-array-index-key
       key: index,
       layoutType: "StepForm",
       columns: columns[index]

package/lib/form/components/Select/index.js

@@ -16,7 +16,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 选择框
  *
- * @param
+ * @param fieldProps
+ * @param children
+ * @param params
+ * @param proFieldProps
+ * @param mode
+ * @param valueEnum
+ * @param request
+ * @param showSearch
+ * @param options
+ * @param rest
+ * @param ref
  */
 const ProFormSelectComponents = ({
   fieldProps,
@@ -127,6 +137,5 @@ const WrappedProFormSelect = ProFormSelect;
 WrappedProFormSelect.SearchSelect = ProFormSearchSelect;
 
 // @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormSelect.displayName = 'ProFormComponent';
 var _default = exports.default = WrappedProFormSelect;

package/lib/form/components/Text/index.js

@@ -159,8 +159,5 @@ const Password = ({
 };
 const WrappedProFormText = ProFormText;
 WrappedProFormText.Password = Password;
-
-// @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormText.displayName = 'ProFormComponent';
 var _default = exports.default = WrappedProFormText;

package/lib/form/components/UploadButton/index.js

@@ -76,8 +76,10 @@ const BaseProFormUploadButton = /*#__PURE__*/_react.default.forwardRef(({
         children: [icon, title]
       }))
     }), previewImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Image, {
-      wrapperStyle: {
-        display: 'none'
+      styles: {
+        root: {
+          display: 'none'
+        }
       },
       ...imageProps,
       preview: {

package/lib/form/components/UploadDragger/index.js

@@ -37,7 +37,6 @@ const BaseProFormUploadDragger = /*#__PURE__*/_react.default.forwardRef(({
   // 如果配置了 max ，并且 超过了文件列表的大小，就不展示按钮
   const showUploadButton = (max === undefined || !value || value?.length < max) && mode !== 'read' && proFieldProps?.readonly !== true;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Upload.Dragger, {
-    // @ts-ignore
     ref: ref,
     name: "files",
     action: action,

package/lib/form/helpers/grid.js

@@ -103,10 +103,6 @@ const useGridHelpers = props => {
     rowProps: config?.rowProps,
     colProps: config?.colProps || colProps,
     Wrapper: config?.Wrapper
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [config?.Wrapper, config.grid, grid,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  JSON.stringify([colProps, config?.colProps, config?.rowProps])]);
+  }), [config?.Wrapper, config.grid, grid, JSON.stringify([colProps, config?.colProps, config?.rowProps])]);
 };
 exports.useGridHelpers = useGridHelpers;

package/lib/form/layouts/DrawerForm/index.d.ts

@@ -3,8 +3,8 @@ import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type CustomizeResizeType = {
     onResize?: () => void;
-    maxWidth?: DrawerProps['width'];
-    minWidth?: DrawerProps['width'];
+    maxWidth?: DrawerProps['size'];
+    minWidth?: DrawerProps['size'];
 };
 export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -22,7 +22,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom ，只能设置一个*/
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: DrawerProps['open'];
     /** @name 打开关闭的事件 */
@@ -32,7 +32,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 抽屉的标题 */
     title?: DrawerProps['title'];
     /** @name 抽屉的宽度 */
-    width?: DrawerProps['width'];
+    width?: DrawerProps['size'];
     /**
      *
      * @name draggableDrawer

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

@@ -30,9 +30,7 @@ function DrawerForm({
   open: propsOpen,
   ...rest
 }) {
-  noteOnce(
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !drawerProps?.footer, 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  noteOnce(!rest.footer || !drawerProps?.footer, 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
   const resizeInfo = _react.default.useMemo(() => {
     const defaultResize = {
       onResize: () => {},
@@ -58,7 +56,7 @@ function DrawerForm({
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
   const [, forceUpdate] = (0, _react.useState)([]);
   const [loading, setLoading] = (0, _react.useState)(false);
   const [resizableDrawer, setResizableDrawer] = (0, _react.useState)(false);
@@ -108,8 +106,6 @@ function DrawerForm({
     if (resizableDrawer) {
       setDrawerWidth(resizeInfo?.minWidth);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen, open, resizableDrawer]);
   (0, _react.useImperativeHandle)(rest.formRef, () => {
     return formRef.current;

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

@@ -71,7 +71,6 @@ const LightFilterContainer = props => {
       collapseItems: collapseItemsArr,
       outsideItems: outsideItemsArr
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.items]);
   const renderCollapseLabelRender = () => {
     if (collapseLabel) {
@@ -79,7 +78,7 @@ const LightFilterContainer = props => {
     }
     if (collapse) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FilterOutlined, {
-        className: `${lightFilterClassName}-collapse-icon ${hashId}`.trim()
+        className: (0, _clsx.clsx)(`${lightFilterClassName}-collapse-icon`, hashId)
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
@@ -93,7 +92,7 @@ const LightFilterContainer = props => {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${lightFilterClassName}-container ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${lightFilterClassName}-container`, hashId),
       children: [outsideItems.map((child, index) => {
         if (!child?.props) {
           return child;
@@ -106,7 +105,7 @@ const LightFilterContainer = props => {
         } = child?.props || {};
         const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${lightFilterClassName}-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${lightFilterClassName}-item`, hashId),
           children: /*#__PURE__*/_react.default.cloneElement(child, {
             fieldProps: {
               ...child.props.fieldProps,
@@ -124,7 +123,7 @@ const LightFilterContainer = props => {
           })
         }, key || index);
       }), collapseItems.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${lightFilterClassName}-item ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${lightFilterClassName}-item`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FilterDropdown, {
           padding: 24,
           open: open,
@@ -176,7 +175,7 @@ const LightFilterContainer = props => {
             }
             const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${lightFilterClassName}-line ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${lightFilterClassName}-line`, hashId),
               children: /*#__PURE__*/_react.default.cloneElement(child, {
                 fieldProps: {
                   ...newFieldProps,

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

@@ -52,7 +52,7 @@ function LoginForm(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = (0, _react.useMemo)(() => {
@@ -68,22 +68,22 @@ function LoginForm(props) {
     className: (0, _clsx.clsx)(getCls('container'), hashId),
     style: containerStyle,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${getCls('top')} ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(getCls('top'), hashId),
       children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${getCls('header')}`,
+        className: (0, _clsx.clsx)(getCls('header'), hashId),
         children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: getCls('logo'),
+          className: (0, _clsx.clsx)(getCls('logo'), hashId),
           children: logoDom
         }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: getCls('title'),
+          className: (0, _clsx.clsx)(getCls('title'), hashId),
           children: title
         }) : null]
       }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('desc'),
+        className: (0, _clsx.clsx)(getCls('desc'), hashId),
         children: subTitle
       }) : null]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: getCls('main'),
+      className: (0, _clsx.clsx)(getCls('main'), hashId),
       style: {
         width: 328,
         ...contentStyle
@@ -94,7 +94,7 @@ function LoginForm(props) {
         submitter: submitter,
         children: [message, children]
       }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('main-other'),
+        className: (0, _clsx.clsx)(getCls('main-other'), hashId),
         style: otherStyle,
         children: actions
       }) : null]

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

@@ -55,7 +55,7 @@ function LoginFormPage(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`.trim();
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = (0, _react.useMemo)(() => {
@@ -102,43 +102,43 @@ function LoginFormPage(props) {
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _clsx.clsx)(baseClassName, hashId),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('notice'),
+        className: (0, _clsx.clsx)(getCls('notice'), hashId),
         children: activityConfig && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: getCls('notice-activity'),
+          className: (0, _clsx.clsx)(getCls('notice-activity'), hashId),
           style: activityConfig.style,
           children: [activityConfig.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-title'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-title'), hashId),
             children: activityConfig.title
           }), activityConfig.subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-subTitle'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-subTitle'), hashId),
             children: activityConfig.subTitle
           }), activityConfig.action && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-action'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-action'), hashId),
             children: activityConfig.action
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('left'),
+        className: (0, _clsx.clsx)(getCls('left'), hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: getCls('container'),
+          className: (0, _clsx.clsx)(getCls('container'), hashId),
           style: containerStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: getCls('top'),
+            className: (0, _clsx.clsx)(getCls('top'), hashId),
             children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: getCls('header'),
+              className: (0, _clsx.clsx)(getCls('header'), hashId),
               children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: getCls('logo'),
+                className: (0, _clsx.clsx)(getCls('logo'), hashId),
                 children: logoDom
               }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: getCls('title'),
+                className: (0, _clsx.clsx)(getCls('title'), hashId),
                 children: title
               }) : null]
             }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: getCls('desc'),
+              className: (0, _clsx.clsx)(getCls('desc'), hashId),
               children: subTitle
             }) : null]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: getCls('main'),
+            className: (0, _clsx.clsx)(getCls('main'), hashId),
             style: mainStyle,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ProForm.ProForm, {
               isKeyPressSubmit: true,
@@ -146,7 +146,7 @@ function LoginFormPage(props) {
               submitter: submitter,
               children: [message, children]
             }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: getCls('other'),
+              className: (0, _clsx.clsx)(getCls('other'), hashId),
               style: otherStyle,
               children: actions
             }) : null]

package/lib/form/layouts/ModalForm/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { FormProps, ModalProps } from 'antd';
+import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps<T>, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -17,7 +17,7 @@ export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = O
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: ModalProps['open'];
     /** @name 打开关闭的事件 */

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

@@ -28,9 +28,7 @@ function ModalForm({
   open: propsOpen,
   ...rest
 }) {
-  noteOnce(
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !modalProps?.footer, 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  noteOnce(!rest.footer || !modalProps?.footer, 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
   const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
   const [, forceUpdate] = (0, _react.useState)([]);
   const [loading, setLoading] = (0, _react.useState)(false);
@@ -79,7 +77,6 @@ function ModalForm({
     if (propsOpen) {
       onOpenChange?.(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen]);
   const triggerDom = (0, _react.useMemo)(() => {
     if (!trigger) {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -59,7 +60,7 @@ const Actions = props => {
     style: style,
     size: 16,
     children: [submitter, props.collapseRender !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-      className: `${getPrefixCls('pro-query-filter-collapse-button')} ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(getPrefixCls('pro-query-filter-collapse-button'), hashId),
       onClick: () => setCollapsed(!collapsed),
       children: collapseRender?.(collapsed, props, intl, hiddenNum)
     })]

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

@@ -17,22 +17,28 @@ var _BaseForm = require("../../BaseForm");
 var _Actions = _interopRequireDefault(require("./Actions"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-/* eslint-disable no-param-reassign */
-
-const CONFIG_SPAN_BREAKPOINTS = {
-  xs: 513,
-  sm: 513,
-  md: 785,
-  lg: 992,
-  xl: 1057,
-  xxl: Infinity
-};
-/** 配置表单列变化的容器宽度断点 */
-const 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']]
+/** 从 antd 设计 token 获取断点配置，与 Grid 响应式布局保持一致 */
+const getBreakpointsConfig = token => {
+  const defaultToken = _antd.theme.getDesignToken();
+  const t = {
+    ...defaultToken,
+    ...token
+  };
+  const bp = {
+    xs: t.screenSMMin ?? 576,
+    sm: t.screenMDMin ?? 768,
+    md: t.screenLGMin ?? 992,
+    lg: t.screenXLMin ?? 1200,
+    xl: t.screenXXLMin ?? 1600,
+    xxl: Infinity
+  };
+  return {
+    configSpanBreakpoints: bp,
+    breakpoints: {
+      vertical: [[bp.xs, 1, 'vertical'], [bp.md, 2, 'vertical'], [bp.xl, 3, 'vertical'], [Infinity, 4, 'vertical']],
+      default: [[bp.xs, 1, 'vertical'], [bp.sm, 2, 'vertical'], [bp.xl, 3, 'horizontal'], [Infinity, 4, 'horizontal']]
+    }
+  };
 };
 
 /**
@@ -40,16 +46,21 @@ const BREAKPOINTS = {
  *
  * @param layout
  * @param width
+ * @param breakpointsConfig 从 theme.useToken() 获取，支持 ConfigProvider 主题定制
  */
-const getSpanConfig = (layout, width, span) => {
+const getSpanConfig = (layout, width, span, breakpointsConfig) => {
   if (span && typeof span === 'number') {
     return {
       span,
       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)
+  const {
+    breakpoints,
+    configSpanBreakpoints
+  } = breakpointsConfig;
+  const spanConfig = span ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(key => [configSpanBreakpoints[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 {
@@ -208,12 +219,12 @@ const QueryFilterContent = props => {
     if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: colSpan,
-        className: `${props.baseClassName}-row-split-line ${props.baseClassName}-row-split ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${props.baseClassName}-row-split-line`, `${props.baseClassName}-row-split`, hashId),
         children: itemDom
       }, itemKey);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
-      className: `${props.baseClassName}-row-split ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${props.baseClassName}-row-split`, hashId),
       span: colSpan,
       children: itemDom
     }, itemKey);
@@ -252,7 +263,7 @@ const QueryFilterContent = props => {
         label: " ",
         colon: false,
         shouldUpdate: false,
-        className: `${baseClassName}-actions ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-actions`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
           hiddenNum: hiddenNum,
           collapsed: collapsed,
@@ -295,8 +306,12 @@ function QueryFilter(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
+  const {
+    token
+  } = _antd.theme.useToken();
   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 breakpointsConfig = (0, _react.useMemo)(() => getBreakpointsConfig(token), [token.screenSMMin, token.screenMDMin, token.screenLGMin, token.screenXLMin, token.screenXXLMin]);
+  const spanSize = (0, _react.useMemo)(() => getSpanConfig(layout, width + 16, span, breakpointsConfig), [layout, width, span, breakpointsConfig]);
   const showLength = (0, _react.useMemo)(() => {
     if (defaultFormItemsNumber !== undefined) {
       return defaultFormItemsNumber;
@@ -336,7 +351,7 @@ function QueryFilter(props) {
     },
     children: ref => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref,
-      className: `${baseClassName}-container ${hashId}`,
+      className: (0, _clsx.clsx)(`${baseClassName}-container`, hashId),
       style: props.containerStyle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, {
         isKeyPressSubmit: true,

package/lib/form/layouts/StepsForm/StepForm.js

@@ -41,7 +41,6 @@ function StepForm(stepNativeProps) {
     return () => {
       context?.unRegForm(name);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (context && context?.formArrayRef) {
     context.formArrayRef.current[step || 0] = formRef;