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

package/lib/table/components/Form/FormRender.js

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _util = require("@rc-component/util");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _form = require("../../../form");
 var _provider = require("../../../provider");
 var _jsxRuntime = require("react/jsx-runtime");
 function toLowerLine(str) {
-  var temp = str.replace(/[A-Z]/g, function (match) {
-    return "-".concat(match.toLowerCase());
+  let temp = str.replace(/[A-Z]/g, match => {
+    return `-${match.toLowerCase()}`;
   });
   if (temp.startsWith('-')) {
     // 如果首字母是大写，执行replace时会多一个_，这里需要去掉
@@ -35,9 +29,9 @@ function toLowerLine(str) {
  * @param searchConfig
  * @returns LightFilter | QueryFilter | ProForm
  */
-var getFormCompetent = function getFormCompetent(isForm, searchConfig) {
+const getFormCompetent = (isForm, searchConfig) => {
   if (!isForm && searchConfig !== false) {
-    if ((searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.filterType) === 'light') {
+    if (searchConfig?.filterType === 'light') {
       return 'LightFilter';
     }
     return 'QueryFilter';
@@ -51,17 +45,20 @@ var getFormCompetent = function getFormCompetent(isForm, searchConfig) {
  * @param searchConfig
  * @param name
  */
-var getFromProps = function getFromProps(isForm, searchConfig, name) {
+const getFromProps = (isForm, searchConfig, name) => {
   if (!isForm && name === 'LightFilter') {
     // 传给 lightFilter 的问题
-    return (0, _util.omit)((0, _objectSpread2.default)({}, searchConfig), ['labelWidth', 'defaultCollapsed', 'filterType']);
+    return (0, _util.omit)({
+      ...searchConfig
+    }, ['labelWidth', 'defaultCollapsed', 'filterType']);
   }
   if (!isForm) {
     // 传给 QueryFilter 的配置
-    return (0, _util.omit)((0, _objectSpread2.default)({
-      labelWidth: searchConfig ? searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.labelWidth : undefined,
-      defaultCollapsed: true
-    }, searchConfig), ['filterType']);
+    return (0, _util.omit)({
+      labelWidth: searchConfig ? searchConfig?.labelWidth : undefined,
+      defaultCollapsed: true,
+      ...searchConfig
+    }, ['filterType']);
   }
   return {};
 };
@@ -72,15 +69,16 @@ var getFromProps = function getFromProps(isForm, searchConfig, name) {
  * @param isForm
  * @param formConfig
  */
-var getFormConfigs = function getFormConfigs(isForm, formConfig) {
+const getFormConfigs = (isForm, formConfig) => {
   if (isForm) {
     // 传给Form的配置
     return (0, _util.omit)(formConfig, ['ignoreRules']);
   }
   // 传给Filter的配置
-  return (0, _objectSpread2.default)({
-    ignoreRules: true
-  }, formConfig);
+  return {
+    ignoreRules: true,
+    ...formConfig
+  };
 };
 /**
  * 这里会把 列配置转化为 form 表单
@@ -88,47 +86,36 @@ var getFormConfigs = function getFormConfigs(isForm, formConfig) {
  * @param param0
  * @returns
  */
-var FormRender = function FormRender(_ref) {
-  var onSubmit = _ref.onSubmit,
-    formRef = _ref.formRef,
-    _ref$dateFormatter = _ref.dateFormatter,
-    dateFormatter = _ref$dateFormatter === void 0 ? 'string' : _ref$dateFormatter,
-    type = _ref.type,
-    columns = _ref.columns,
-    action = _ref.action,
-    ghost = _ref.ghost,
-    manualRequest = _ref.manualRequest,
-    _onReset = _ref.onReset,
-    submitButtonLoading = _ref.submitButtonLoading,
-    searchConfig = _ref.search,
-    formConfig = _ref.form,
-    bordered = _ref.bordered;
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    hashId = _useContext.hashId;
-  var isForm = type === 'form';
+const FormRender = ({
+  onSubmit,
+  formRef,
+  dateFormatter = 'string',
+  type,
+  columns,
+  action,
+  ghost,
+  manualRequest,
+  onReset,
+  submitButtonLoading,
+  search: searchConfig,
+  form: formConfig,
+  bordered
+}) => {
+  const {
+    hashId
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const isForm = type === 'form';
   /** 提交表单，根据两种模式不同，方法不相同 */
-  var submit = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(values, firstLoad) {
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (onSubmit) {
-              onSubmit(values, firstLoad);
-            }
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function submit(_x, _x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var columnsList = (0, _react.useMemo)(function () {
-    return columns.filter(function (item) {
+  const submit = async (values, firstLoad) => {
+    if (onSubmit) {
+      onSubmit(values, firstLoad);
+    }
+  };
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const columnsList = (0, _react.useMemo)(() => {
+    return columns.filter(item => {
       if (item === _antd.Table.EXPAND_COLUMN || item === _antd.Table.SELECTION_COLUMN) {
         return false;
       }
@@ -139,76 +126,84 @@ var FormRender = function FormRender(_ref) {
         return false;
       }
       return true;
-    }).map(function (item) {
-      var _item$dataIndex;
-      var finalValueType = !item.valueType || ['textarea', 'jsonCode', 'code'].includes(item === null || item === void 0 ? void 0 : item.valueType) && type === 'table' ? 'text' : item === null || item === void 0 ? void 0 : item.valueType;
-      var columnKey = (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 || (_item$dataIndex = item.dataIndex) === null || _item$dataIndex === void 0 ? void 0 : _item$dataIndex.toString());
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        width: undefined
-      }, item.search && (0, _typeof2.default)(item.search) === 'object' ? item.search : {}), {}, {
+    }).map(item => {
+      const finalValueType = !item.valueType || ['textarea', 'jsonCode', 'code'].includes(item?.valueType) && type === 'table' ? 'text' : item?.valueType;
+      const columnKey = item?.key || item?.dataIndex?.toString();
+      return {
+        ...item,
+        width: undefined,
+        ...(item.search && typeof item.search === 'object' ? item.search : {}),
         valueType: finalValueType,
-        proFieldProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.proFieldProps), {}, {
-          proFieldKey: columnKey ? "table-field-".concat(columnKey) : undefined
-        })
-      });
+        proFieldProps: {
+          ...item.proFieldProps,
+          proFieldKey: columnKey ? `table-field-${columnKey}` : undefined
+        }
+      };
     });
   }, [columns, type]);
-  var className = getPrefixCls('pro-table-search');
-  var formClassName = getPrefixCls('pro-table-form');
-  var competentName = (0, _react.useMemo)(function () {
-    return getFormCompetent(isForm, searchConfig);
-  }, [searchConfig, isForm]);
+  const className = getPrefixCls('pro-table-search');
+  const formClassName = getPrefixCls('pro-table-form');
+  const competentName = (0, _react.useMemo)(() => getFormCompetent(isForm, searchConfig), [searchConfig, isForm]);
 
   // 传给每个表单的配置，理论上大家都需要
-  var loadingProps = (0, _react.useMemo)(function () {
-    return {
-      submitter: {
-        submitButtonProps: {
-          loading: submitButtonLoading
-        }
+  const loadingProps = (0, _react.useMemo)(() => ({
+    submitter: {
+      submitButtonProps: {
+        loading: submitButtonLoading
       }
-    };
-  }, [submitButtonLoading]);
+    }
+  }), [submitButtonLoading]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)(hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, getPrefixCls('pro-card'), true), "".concat(getPrefixCls('pro-card'), "-border"), !!bordered), "".concat(getPrefixCls('pro-card'), "-bordered"), !!bordered), "".concat(getPrefixCls('pro-card'), "-ghost"), !!ghost), className, true), formClassName, isForm), getPrefixCls("pro-table-search-".concat(toLowerLine(competentName))), true), "".concat(className, "-ghost"), ghost), searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.className, searchConfig !== false && (searchConfig === null || searchConfig === void 0 ? void 0 : searchConfig.className))),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.BetaSchemaForm, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: (0, _clsx.clsx)(hashId, {
+      [getPrefixCls('pro-card')]: true,
+      [`${getPrefixCls('pro-card')}-border`]: !!bordered,
+      [`${getPrefixCls('pro-card')}-bordered`]: !!bordered,
+      [`${getPrefixCls('pro-card')}-ghost`]: !!ghost,
+      [className]: true,
+      [formClassName]: isForm,
+      [getPrefixCls(`pro-table-search-${toLowerLine(competentName)}`)]: true,
+      [`${className}-ghost`]: ghost,
+      [searchConfig?.className]: searchConfig !== false && searchConfig?.className
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.BetaSchemaForm, {
       layoutType: competentName,
       columns: columnsList,
-      type: type
-    }, loadingProps), getFromProps(isForm, searchConfig, competentName)), getFormConfigs(isForm, formConfig || {})), {}, {
+      type: type,
+      ...loadingProps,
+      ...getFromProps(isForm, searchConfig, competentName),
+      ...getFormConfigs(isForm, formConfig || {}),
       formRef: formRef,
       action: action,
       dateFormatter: dateFormatter,
-      onInit: function onInit(values, form) {
+      onInit: (values, form) => {
         formRef.current = form;
         // 触发一个 submit，之所以这里触发是为了保证 value 都被 format了
         if (type !== 'form') {
-          var _action$current, _action$current2, _action$current2$setP;
           // 修改 pageSize，变成从 url 中获取的
-          var pageInfo = (_action$current = action.current) === null || _action$current === void 0 ? void 0 : _action$current.pageInfo;
+          const pageInfo = action.current?.pageInfo;
           // 从 values 里获取是因为有时候要从 url中获取的 pageSize。
-          var _ref3 = values,
-            _ref3$current = _ref3.current,
-            current = _ref3$current === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current : _ref3$current,
-            _ref3$pageSize = _ref3.pageSize,
-            pageSize = _ref3$pageSize === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize : _ref3$pageSize;
-          (_action$current2 = action.current) === null || _action$current2 === void 0 || (_action$current2$setP = _action$current2.setPageInfo) === null || _action$current2$setP === void 0 || _action$current2$setP.call(_action$current2, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageInfo), {}, {
+          const {
+            current = pageInfo?.current,
+            pageSize = pageInfo?.pageSize
+          } = values;
+          action.current?.setPageInfo?.({
+            ...pageInfo,
             current: parseInt(current, 10),
             pageSize: parseInt(pageSize, 10)
-          }));
+          });
           /** 如果是手动模式不需要提交 */
           if (manualRequest) return;
           submit(values, true);
         }
       },
-      onReset: function onReset(values) {
-        _onReset === null || _onReset === void 0 || _onReset(values);
+      onReset: values => {
+        onReset?.(values);
       },
-      onFinish: function onFinish(values) {
+      onFinish: values => {
         submit(values, false);
       },
-      initialValues: formConfig === null || formConfig === void 0 ? void 0 : formConfig.initialValues
-    }))
+      initialValues: formConfig?.initialValues
+    })
   });
 };
 var _default = exports.default = FormRender;

package/lib/table/components/Form/index.d.ts

@@ -18,22 +18,7 @@ type BaseFormProps<T, U> = {
     search: ProTableProps<T, U, any>['search'];
     manualRequest: ProTableProps<T, U, any>['manualRequest'];
 };
-declare class FormSearch<T, U> extends React.Component<BaseFormProps<T, U> & {
-    ghost?: boolean;
-}> {
-    /** 查询表单相关的配置 */
-    onSubmit: (value: U, firstLoad: boolean) => void;
-    onReset: (value: Partial<U>) => void;
-    /**
-     * 只 Diff 需要用的 props，能减少 5 次左右的render
-     *
-     * @param next
-     * @see 因为 hooks 每次的 setFormSearch 都是新的，所以每次都触发 render
-     * @see action 也是同样的原因
-     * @returns
-     */
-    isEqual: (next: BaseFormProps<T, U>) => boolean;
-    shouldComponentUpdate: (next: BaseFormProps<T, U>) => boolean;
-    render: () => import("react/jsx-runtime").JSX.Element;
-}
-export default FormSearch;
+declare const _default: <T, U>(props: BaseFormProps<T, U> & {
+    ghost?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/table/components/Form/index.js

@@ -1,175 +1,129 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _util = require("@rc-component/util");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
 var _index = require("../../utils/index");
 var _FormRender = _interopRequireDefault(require("./FormRender"));
 var _jsxRuntime = require("react/jsx-runtime");
-var FormSearch = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(FormSearch, _React$Component);
-  var _super = (0, _createSuper2.default)(FormSearch);
-  function FormSearch() {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormSearch);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    /** 查询表单相关的配置 */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSubmit", function (value, firstLoad) {
-      var _this$props = _this.props,
-        pagination = _this$props.pagination,
-        _this$props$beforeSea = _this$props.beforeSearchSubmit,
-        beforeSearchSubmit = _this$props$beforeSea === void 0 ? function (searchParams) {
-          return searchParams;
-        } : _this$props$beforeSea,
-        action = _this$props.action,
-        onSubmit = _this$props.onSubmit,
-        onFormSearchSubmit = _this$props.onFormSearchSubmit;
-      // 只传入 pagination 中的 current 和 pageSize 参数
-      var pageInfo = pagination ? (0, _utils.omitUndefined)({
-        current: pagination.current,
-        pageSize: pagination.pageSize
-      }) : {};
-      var submitParams = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
-        _timestamp: Date.now()
-      }, pageInfo);
-      var omitParams = (0, _util.omit)(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
-      onFormSearchSubmit(omitParams);
-      if (!firstLoad) {
-        var _action$current, _action$current$setPa;
-        // back first page
-        (_action$current = action.current) === null || _action$current === void 0 || (_action$current$setPa = _action$current.setPageInfo) === null || _action$current$setPa === void 0 || _action$current$setPa.call(_action$current, {
-          current: 1
-        });
-      }
-      // 不是第一次提交就不触发，第一次提交是 js 触发的
-      // 为了解决 https://github.com/ant-design/pro-components/issues/579
-      if (onSubmit && !firstLoad) {
-        onSubmit === null || onSubmit === void 0 || onSubmit(value);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onReset", function (value) {
-      var _action$current2, _action$current2$setP;
-      var _this$props2 = _this.props,
-        pagination = _this$props2.pagination,
-        _this$props2$beforeSe = _this$props2.beforeSearchSubmit,
-        beforeSearchSubmit = _this$props2$beforeSe === void 0 ? function (searchParams) {
-          return searchParams;
-        } : _this$props2$beforeSe,
-        action = _this$props2.action,
-        onFormSearchSubmit = _this$props2.onFormSearchSubmit,
-        onReset = _this$props2.onReset;
-      var pageInfo = pagination ? (0, _utils.omitUndefined)({
-        current: pagination.current,
-        pageSize: pagination.pageSize
-      }) : {};
-      var omitParams = (0, _util.omit)(beforeSearchSubmit((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), pageInfo)), Object.keys(pageInfo));
-      onFormSearchSubmit(omitParams);
+/** 查询表单相关的配置 */
+const FormSearch = props => {
+  const {
+    columns,
+    loading,
+    formRef,
+    type,
+    action,
+    cardBordered,
+    dateFormatter,
+    form,
+    search,
+    pagination,
+    ghost,
+    manualRequest,
+    beforeSearchSubmit = searchParams => searchParams,
+    onSubmit,
+    onFormSearchSubmit,
+    onReset
+  } = props;
+
+  // 只传入 pagination 中的 current 和 pageSize 参数
+  const pageInfo = (0, _react.useMemo)(() => pagination ? (0, _utils.omitUndefined)({
+    current: pagination.current,
+    pageSize: pagination.pageSize
+  }) : {}, [pagination]);
+  const onSubmitHandler = (0, _react.useCallback)((value, firstLoad) => {
+    const submitParams = {
+      ...value,
+      _timestamp: Date.now(),
+      ...pageInfo
+    };
+    const omitParams = (0, _util.omit)(beforeSearchSubmit(submitParams), Object.keys(pageInfo));
+    onFormSearchSubmit(omitParams);
+    if (!firstLoad) {
       // back first page
-      (_action$current2 = action.current) === null || _action$current2 === void 0 || (_action$current2$setP = _action$current2.setPageInfo) === null || _action$current2$setP === void 0 || _action$current2$setP.call(_action$current2, {
+      action.current?.setPageInfo?.({
         current: 1
       });
-      onReset === null || onReset === void 0 || onReset();
-    });
-    /**
-     * 只 Diff 需要用的 props，能减少 5 次左右的render
-     *
-     * @param next
-     * @see 因为 hooks 每次的 setFormSearch 都是新的，所以每次都触发 render
-     * @see action 也是同样的原因
-     * @returns
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isEqual", function (next) {
-      var _this$props3 = _this.props,
-        columns = _this$props3.columns,
-        loading = _this$props3.loading,
-        formRef = _this$props3.formRef,
-        type = _this$props3.type,
-        cardBordered = _this$props3.cardBordered,
-        dateFormatter = _this$props3.dateFormatter,
-        form = _this$props3.form,
-        search = _this$props3.search,
-        manualRequest = _this$props3.manualRequest;
-      var diffProps = {
-        columns: columns,
-        loading: loading,
-        formRef: formRef,
-        type: type,
-        cardBordered: cardBordered,
-        dateFormatter: dateFormatter,
-        form: form,
-        search: search,
-        manualRequest: manualRequest
-      };
-      return !(0, _utils.isDeepEqualReact)(diffProps, {
-        columns: next.columns,
-        formRef: next.formRef,
-        loading: next.loading,
-        type: next.type,
-        cardBordered: next.cardBordered,
-        dateFormatter: next.dateFormatter,
-        form: next.form,
-        search: next.search,
-        manualRequest: next.manualRequest
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldComponentUpdate", function (next) {
-      return _this.isEqual(next);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "render", function () {
-      var _this$props4 = _this.props,
-        columns = _this$props4.columns,
-        loading = _this$props4.loading,
-        formRef = _this$props4.formRef,
-        type = _this$props4.type,
-        action = _this$props4.action,
-        cardBordered = _this$props4.cardBordered,
-        dateFormatter = _this$props4.dateFormatter,
-        form = _this$props4.form,
-        search = _this$props4.search,
-        pagination = _this$props4.pagination,
-        ghost = _this$props4.ghost,
-        manualRequest = _this$props4.manualRequest;
-      var pageInfo = pagination ? (0, _utils.omitUndefined)({
-        current: pagination.current,
-        pageSize: pagination.pageSize
-      }) : {};
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormRender.default, {
-        submitButtonLoading: loading,
-        columns: columns,
-        type: type,
-        ghost: ghost,
-        formRef: formRef,
-        onSubmit: _this.onSubmit,
-        manualRequest: manualRequest,
-        onReset: _this.onReset,
-        dateFormatter: dateFormatter,
-        search: search,
-        form: (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          autoFocusFirstInput: false
-        }, form), {}, {
-          extraUrlParams: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageInfo), form === null || form === void 0 ? void 0 : form.extraUrlParams)
-        }),
-        action: action,
-        bordered: (0, _index.isBordered)('search', cardBordered)
-      });
+    }
+    // 不是第一次提交就不触发，第一次提交是 js 触发的
+    // 为了解决 https://github.com/ant-design/pro-components/issues/579
+    if (onSubmit && !firstLoad) {
+      onSubmit?.(value);
+    }
+  }, [pageInfo, beforeSearchSubmit, action, onSubmit, onFormSearchSubmit]);
+  const onResetHandler = (0, _react.useCallback)(value => {
+    const omitParams = (0, _util.omit)(beforeSearchSubmit({
+      ...value,
+      ...pageInfo
+    }), Object.keys(pageInfo));
+    onFormSearchSubmit(omitParams);
+    // back first page
+    action.current?.setPageInfo?.({
+      current: 1
     });
-    return _this;
-  }
-  return (0, _createClass2.default)(FormSearch);
-}(_react.default.Component);
-var _default = exports.default = FormSearch;
+    onReset?.();
+  }, [pageInfo, beforeSearchSubmit, action, onFormSearchSubmit, onReset]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormRender.default, {
+    submitButtonLoading: loading,
+    columns: columns,
+    type: type,
+    ghost: ghost,
+    formRef: formRef,
+    onSubmit: onSubmitHandler,
+    manualRequest: manualRequest,
+    onReset: onResetHandler,
+    dateFormatter: dateFormatter,
+    search: search,
+    form: {
+      autoFocusFirstInput: false,
+      ...form,
+      extraUrlParams: {
+        ...pageInfo,
+        ...form?.extraUrlParams
+      }
+    },
+    action: action,
+    bordered: (0, _index.isBordered)('search', cardBordered)
+  });
+};
+
+/**
+ * 只 Diff 需要用的 props，能减少 5 次左右的render
+ * @param prev
+ * @param next
+ * @see 因为 hooks 每次的 setFormSearch 都是新的，所以每次都触发 render
+ * @see action 也是同样的原因
+ * @returns
+ */
+const isPropsEqual = (prev, next) => {
+  const diffProps = {
+    columns: prev.columns,
+    loading: prev.loading,
+    formRef: prev.formRef,
+    type: prev.type,
+    cardBordered: prev.cardBordered,
+    dateFormatter: prev.dateFormatter,
+    form: prev.form,
+    search: prev.search,
+    manualRequest: prev.manualRequest
+  };
+  return (0, _utils.isDeepEqualReact)(diffProps, {
+    columns: next.columns,
+    formRef: next.formRef,
+    loading: next.loading,
+    type: next.type,
+    cardBordered: next.cardBordered,
+    dateFormatter: next.dateFormatter,
+    form: next.form,
+    search: next.search,
+    manualRequest: next.manualRequest
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(FormSearch, isPropsEqual);