@ant-design/pro-components 3.0.2-0 → 3.1.1-0

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

@@ -1,10 +1,4 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "trigger", "onOpenChange", "modalProps", "onFinish", "submitTimeout", "title", "width", "open"];
-import { useMergedState, warning } from '@rc-component/util';
+import { useControlledState, warning } from '@rc-component/util';
 import { ConfigProvider, Modal } from 'antd';
 import { merge } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -13,225 +7,165 @@ import { BaseForm } from "../../BaseForm";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var noteOnce = warning.noteOnce;
-function ModalForm(_ref) {
-  var _context$locale3, _context$locale4;
-  var children = _ref.children,
-    trigger = _ref.trigger,
-    onOpenChange = _ref.onOpenChange,
-    modalProps = _ref.modalProps,
-    onFinish = _ref.onFinish,
-    submitTimeout = _ref.submitTimeout,
-    title = _ref.title,
-    width = _ref.width,
-    propsOpen = _ref.open,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const {
+  noteOnce
+} = warning;
+function ModalForm({
+  children,
+  trigger,
+  onOpenChange,
+  modalProps,
+  onFinish,
+  submitTimeout,
+  title,
+  width,
+  open: propsOpen,
+  ...rest
+}) {
   noteOnce(
   // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !(modalProps !== null && modalProps !== void 0 && modalProps.footer), 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
-  var context = useContext(ConfigProvider.ConfigContext);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    forceUpdate = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useMergedState = useMergedState(false, {
-      value: propsOpen,
-      onChange: onOpenChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    open = _useMergedState2[0],
-    setOpen = _useMergedState2[1];
-  var footerRef = useRef(null);
-  var footerDomRef = useCallback(function (element) {
+  !rest['footer'] || !modalProps?.footer, 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  const context = useContext(ConfigProvider.ConfigContext);
+  const [, forceUpdate] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpenInner] = useControlledState(false, propsOpen);
+  const setOpen = useCallback(updater => {
+    setOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, [onOpenChange]);
+  const footerRef = useRef(null);
+  const footerDomRef = useCallback(element => {
     if (footerRef.current === null && element) {
       forceUpdate([]);
     }
     footerRef.current = element;
   }, []);
-  var formRef = useRef();
-  var resetFields = useCallback(function () {
-    var _ref2, _rest$form, _rest$formRef;
-    var form = (_ref2 = (_rest$form = rest.form) !== null && _rest$form !== void 0 ? _rest$form : (_rest$formRef = rest.formRef) === null || _rest$formRef === void 0 ? void 0 : _rest$formRef.current) !== null && _ref2 !== void 0 ? _ref2 : formRef.current;
+  const formRef = useRef();
+  const resetFields = useCallback(() => {
+    const form = rest.form ?? rest.formRef?.current ?? formRef.current;
     // 重置表单
-    if (form && modalProps !== null && modalProps !== void 0 && modalProps.destroyOnHidden) {
+    // issue: 8858 form.resetFields is not a function
+    if (form && modalProps?.destroyOnHidden && typeof form.resetFields === 'function') {
       form.resetFields();
     }
-  }, [modalProps === null || modalProps === void 0 ? void 0 : modalProps.destroyOnHidden, rest.form, rest.formRef]);
-  useImperativeHandle(rest.formRef, function () {
+  }, [modalProps?.destroyOnHidden, rest.form, rest.formRef]);
+  useImperativeHandle(rest.formRef, () => {
     return formRef.current;
   }, [formRef.current]);
-  useEffect(function () {
+  useEffect(() => {
     if (propsOpen) {
-      onOpenChange === null || onOpenChange === void 0 || onOpenChange(true);
+      onOpenChange?.(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen]);
-  var triggerDom = useMemo(function () {
+  const triggerDom = useMemo(() => {
     if (!trigger) {
       return null;
     }
-    return /*#__PURE__*/React.cloneElement(trigger, _objectSpread(_objectSpread({
-      key: 'trigger'
-    }, trigger.props), {}, {
-      onClick: function () {
-        var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
-          var _trigger$props, _trigger$props$onClic;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                setOpen(!open);
-                (_trigger$props = trigger.props) === null || _trigger$props === void 0 || (_trigger$props$onClic = _trigger$props.onClick) === null || _trigger$props$onClic === void 0 || _trigger$props$onClic.call(_trigger$props, e);
-              case 2:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function onClick(_x) {
-          return _onClick.apply(this, arguments);
-        }
-        return onClick;
-      }()
-    }));
+    return /*#__PURE__*/React.cloneElement(trigger, {
+      key: 'trigger',
+      ...trigger.props,
+      onClick: async e => {
+        setOpen(!open);
+        trigger.props?.onClick?.(e);
+      }
+    });
   }, [setOpen, trigger, open]);
-  var submitterConfig = useMemo(function () {
-    var _ref3, _modalProps$okText, _context$locale, _ref4, _modalProps$cancelTex, _context$locale2, _rest$submitter;
+  const submitterConfig = useMemo(() => {
     if (rest.submitter === false) {
       return false;
     }
     return merge({
       searchConfig: {
-        submitText: (_ref3 = (_modalProps$okText = modalProps === null || modalProps === void 0 ? void 0 : modalProps.okText) !== null && _modalProps$okText !== void 0 ? _modalProps$okText : (_context$locale = context.locale) === null || _context$locale === void 0 || (_context$locale = _context$locale.Modal) === null || _context$locale === void 0 ? void 0 : _context$locale.okText) !== null && _ref3 !== void 0 ? _ref3 : '确认',
-        resetText: (_ref4 = (_modalProps$cancelTex = modalProps === null || modalProps === void 0 ? void 0 : modalProps.cancelText) !== null && _modalProps$cancelTex !== void 0 ? _modalProps$cancelTex : (_context$locale2 = context.locale) === null || _context$locale2 === void 0 || (_context$locale2 = _context$locale2.Modal) === null || _context$locale2 === void 0 ? void 0 : _context$locale2.cancelText) !== null && _ref4 !== void 0 ? _ref4 : '取消'
+        submitText: modalProps?.okText ?? context.locale?.Modal?.okText ?? '确认',
+        resetText: modalProps?.cancelText ?? context.locale?.Modal?.cancelText ?? '取消'
       },
       resetButtonProps: {
         preventDefault: true,
         disabled: submitTimeout && loading,
-        onClick: function onClick(e) {
-          var _modalProps$onCancel;
+        onClick: e => {
           setOpen(false);
-          modalProps === null || modalProps === void 0 || (_modalProps$onCancel = modalProps.onCancel) === null || _modalProps$onCancel === void 0 || _modalProps$onCancel.call(modalProps, e);
+          modalProps?.onCancel?.(e);
         }
       }
-    }, (_rest$submitter = rest.submitter) !== null && _rest$submitter !== void 0 ? _rest$submitter : {});
-  }, [(_context$locale3 = context.locale) === null || _context$locale3 === void 0 || (_context$locale3 = _context$locale3.Modal) === null || _context$locale3 === void 0 ? void 0 : _context$locale3.cancelText, (_context$locale4 = context.locale) === null || _context$locale4 === void 0 || (_context$locale4 = _context$locale4.Modal) === null || _context$locale4 === void 0 ? void 0 : _context$locale4.okText, modalProps, rest.submitter, setOpen, loading, submitTimeout]);
-  var contentRender = useCallback(function (formDom, submitter) {
+    }, rest.submitter ?? {});
+  }, [context.locale?.Modal?.cancelText, context.locale?.Modal?.okText, modalProps, rest.submitter, setOpen, loading, submitTimeout]);
+  const contentRender = useCallback((formDom, submitter) => {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [formDom, footerRef.current && submitter ? /*#__PURE__*/_jsx(React.Fragment, {
         children: /*#__PURE__*/createPortal(submitter, footerRef.current)
       }, "submitter") : submitter]
     });
   }, []);
-  var onFinishHandle = useCallback( /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values) {
-      var response, timer, _result, _timer, _result2, result;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            response = onFinish === null || onFinish === void 0 ? void 0 : onFinish(values);
-            if (!(submitTimeout && response instanceof Promise)) {
-              _context2.next = 21;
-              break;
-            }
-            setLoading(true);
-            timer = setTimeout(function () {
-              return setLoading(false);
-            }, submitTimeout);
-            _context2.prev = 4;
-            _context2.next = 7;
-            return response;
-          case 7:
-            _result = _context2.sent;
-            clearTimeout(timer);
-            setLoading(false);
-            // 返回真值，关闭弹框
-            if (_result) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", _result);
-          case 14:
-            _context2.prev = 14;
-            _context2.t0 = _context2["catch"](4);
-            clearTimeout(timer);
-            setLoading(false);
-            throw _context2.t0;
-          case 19:
-            _context2.next = 39;
-            break;
-          case 21:
-            if (!submitTimeout) {
-              _context2.next = 39;
-              break;
-            }
-            // 如果 submitTimeout 存在但 response 不是 Promise，也要设置 loading
-            setLoading(true);
-            _timer = setTimeout(function () {
-              return setLoading(false);
-            }, submitTimeout);
-            _context2.prev = 24;
-            _context2.next = 27;
-            return response;
-          case 27:
-            _result2 = _context2.sent;
-            clearTimeout(_timer);
-            setLoading(false);
-            // 返回真值，关闭弹框
-            if (_result2) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", _result2);
-          case 34:
-            _context2.prev = 34;
-            _context2.t1 = _context2["catch"](24);
-            clearTimeout(_timer);
-            setLoading(false);
-            throw _context2.t1;
-          case 39:
-            _context2.next = 41;
-            return response;
-          case 41:
-            result = _context2.sent;
-            // 返回真值，关闭弹框
-            if (result) {
-              setOpen(false);
-            }
-            return _context2.abrupt("return", result);
-          case 44:
-          case "end":
-            return _context2.stop();
+  const onFinishHandle = useCallback(async values => {
+    const response = onFinish?.(values);
+    if (submitTimeout && response instanceof Promise) {
+      setLoading(true);
+      const timer = setTimeout(() => setLoading(false), submitTimeout);
+      try {
+        const result = await response;
+        clearTimeout(timer);
+        setLoading(false);
+        // 返回真值，关闭弹框
+        if (result) {
+          setOpen(false);
+        }
+        return result;
+      } catch (error) {
+        clearTimeout(timer);
+        setLoading(false);
+        throw error;
+      }
+    } else if (submitTimeout) {
+      // 如果 submitTimeout 存在但 response 不是 Promise，也要设置 loading
+      setLoading(true);
+      const timer = setTimeout(() => setLoading(false), submitTimeout);
+      try {
+        const result = await response;
+        clearTimeout(timer);
+        setLoading(false);
+        // 返回真值，关闭弹框
+        if (result) {
+          setOpen(false);
         }
-      }, _callee2, null, [[4, 14], [24, 34]]);
-    }));
-    return function (_x2) {
-      return _ref5.apply(this, arguments);
-    };
-  }(), [onFinish, setOpen, submitTimeout]);
+        return result;
+      } catch (error) {
+        clearTimeout(timer);
+        setLoading(false);
+        throw error;
+      }
+    }
+    const result = await response;
+    // 返回真值，关闭弹框
+    if (result) {
+      setOpen(false);
+    }
+    return result;
+  }, [onFinish, setOpen, submitTimeout]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/_jsx(Modal, {
       title: title,
-      width: width || 800
-    }, modalProps), {}, {
+      width: width || 800,
+      ...modalProps,
       open: open,
-      onCancel: function onCancel(e) {
-        var _modalProps$onCancel2;
+      onCancel: e => {
         // 提交表单loading时，阻止弹框关闭
         if (submitTimeout && loading) return;
         setOpen(false);
-        modalProps === null || modalProps === void 0 || (_modalProps$onCancel2 = modalProps.onCancel) === null || _modalProps$onCancel2 === void 0 || _modalProps$onCancel2.call(modalProps, e);
+        modalProps?.onCancel?.(e);
       },
-      afterClose: function afterClose() {
-        var _modalProps$afterClos;
+      afterClose: () => {
         // 确保在关闭时立即重置表单
-        if (modalProps !== null && modalProps !== void 0 && modalProps.destroyOnHidden) {
+        if (modalProps?.destroyOnHidden) {
           resetFields();
         }
         if (open) {
           setOpen(false);
         }
-        modalProps === null || modalProps === void 0 || (_modalProps$afterClos = modalProps.afterClose) === null || _modalProps$afterClos === void 0 || _modalProps$afterClos.call(modalProps);
+        modalProps?.afterClose?.();
       },
       footer: rest.submitter !== false ? /*#__PURE__*/_jsx("div", {
         ref: footerDomRef,
@@ -240,45 +174,28 @@ function ModalForm(_ref) {
           justifyContent: 'flex-end'
         }
       }) : null,
-      children: /*#__PURE__*/_jsx(BaseForm, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(BaseForm, {
         formComponentType: "ModalForm",
-        layout: "vertical"
-      }, rest), {}, {
-        onInit: function onInit(_, form) {
-          var _rest$onInit;
+        layout: "vertical",
+        ...rest,
+        onInit: (_, form) => {
           if (rest.formRef) {
             rest.formRef.current = form;
           }
-          rest === null || rest === void 0 || (_rest$onInit = rest.onInit) === null || _rest$onInit === void 0 || _rest$onInit.call(rest, _, form);
+          rest?.onInit?.(_, form);
           formRef.current = form;
         },
         formRef: formRef,
         submitter: submitterConfig,
-        onFinish: ( /*#__PURE__*/function () {
-          var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(values) {
-            var result;
-            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  _context3.next = 2;
-                  return onFinishHandle(values);
-                case 2:
-                  result = _context3.sent;
-                  return _context3.abrupt("return", result);
-                case 4:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          return function (_x3) {
-            return _ref6.apply(this, arguments);
-          };
-        }()),
+        onFinish: async values => {
+          const result = await onFinishHandle(values);
+          // fix: #6006 如果 result 为 true,那么必然会触发弹窗关闭，我们无需在 此处重置表单，只需在弹窗关闭时重置即可
+          return result;
+        },
         contentRender: contentRender,
         children: children
-      }))
-    })), triggerDom]
+      })
+    }), triggerDom]
   });
 }
 export { ModalForm };

package/es/form/layouts/ProForm/index.d.ts

@@ -9,12 +9,12 @@ declare namespace ProForm {
     var Group: React.FC<import("src/form").GroupProps>;
     var useForm: typeof import("antd/es/form/Form").useForm;
     var Item: React.FC<import("src/form/components/FormItem").ProFormItemProps>;
-    var useWatch: typeof import("rc-field-form").useWatch;
+    var useWatch: typeof import("@rc-component/form").useWatch;
     var ErrorList: React.FC<import("antd/es/form").ErrorListProps>;
     var Provider: React.FC<import("antd/es/form/context").FormProviderProps>;
     var useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;
     var EditOrReadOnlyContext: React.Context<{
-        mode: "update" | "read" | "edit";
+        mode: "read" | "edit" | "update";
     }>;
 }
 export { ProForm };

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

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Form } from 'antd';
 import React from 'react';
 import { BaseForm } from "../../BaseForm";
@@ -8,14 +7,15 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ProForm(props) {
-  return /*#__PURE__*/_jsx(BaseForm, _objectSpread({
+  return /*#__PURE__*/_jsx(BaseForm, {
     layout: "vertical",
-    contentRender: function contentRender(items, submitter) {
+    contentRender: (items, submitter) => {
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [items, submitter]
       });
-    }
-  }, props));
+    },
+    ...props
+  });
 }
 ProForm.Group = Group;
 ProForm.useForm = Form.useForm;

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

@@ -6,14 +6,14 @@ import { omitBoolean } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var defaultCollapseRender = function defaultCollapseRender(collapsed, _, intl, hiddenNum) {
+const defaultCollapseRender = (collapsed, _, intl, hiddenNum) => {
   if (collapsed) {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [intl.getMessage('tableForm.collapsed', '展开'), hiddenNum && "(".concat(hiddenNum, ")"), /*#__PURE__*/_jsx(DownOutlined, {
+      children: [intl.getMessage('tableForm.collapsed', '展开'), hiddenNum && `(${hiddenNum})`, /*#__PURE__*/_jsx(DownOutlined, {
         style: {
           marginInlineStart: '0.5em',
           transition: '0.3s all',
-          transform: "rotate(".concat(collapsed ? 0 : 0.5, "turn)")
+          transform: `rotate(${collapsed ? 0 : 0.5}turn)`
         }
       })]
     });
@@ -23,7 +23,7 @@ var defaultCollapseRender = function defaultCollapseRender(collapsed, _, intl, h
       style: {
         marginInlineStart: '0.5em',
         transition: '0.3s all',
-        transform: "rotate(".concat(collapsed ? 0 : 0.5, "turn)")
+        transform: `rotate(${collapsed ? 0 : 0.5}turn)`
       }
     })]
   });
@@ -34,28 +34,29 @@ var defaultCollapseRender = function defaultCollapseRender(collapsed, _, intl, h
  *
  * @param props
  */
-var Actions = function Actions(props) {
-  var setCollapsed = props.setCollapsed,
-    _props$collapsed = props.collapsed,
-    collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
-    submitter = props.submitter,
-    style = props.style,
-    hiddenNum = props.hiddenNum;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var intl = useIntl();
-  var _useContext2 = useContext(ProProvider),
-    hashId = _useContext2.hashId;
-  var collapseRender = omitBoolean(props.collapseRender) || defaultCollapseRender;
+const Actions = props => {
+  const {
+    setCollapsed,
+    collapsed = false,
+    submitter,
+    style,
+    hiddenNum
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const intl = useIntl();
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const collapseRender = omitBoolean(props.collapseRender) || defaultCollapseRender;
   return /*#__PURE__*/_jsxs(Space, {
     style: style,
     size: 16,
     children: [submitter, props.collapseRender !== false && /*#__PURE__*/_jsx("a", {
-      className: "".concat(getPrefixCls('pro-query-filter-collapse-button'), " ").concat(hashId).trim(),
-      onClick: function onClick() {
-        return setCollapsed(!collapsed);
-      },
-      children: collapseRender === null || collapseRender === void 0 ? void 0 : collapseRender(collapsed, props, intl, hiddenNum)
+      className: `${getPrefixCls('pro-query-filter-collapse-button')} ${hashId}`.trim(),
+      onClick: () => setCollapsed(!collapsed),
+      children: collapseRender?.(collapsed, props, intl, hiddenNum)
     })]
   });
 };

package/es/form/layouts/QueryFilter/index.d.ts

@@ -1,5 +1,6 @@
 import type { ColProps, RowProps } from 'antd';
 import type { FormProps } from 'antd/lib/form/Form';
+import type { ReactElement } from 'react';
 import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 import type { ActionsProps } from './Actions';
@@ -107,5 +108,5 @@ export type BaseQueryFilterProps = Omit<ActionsProps, 'submitter' | 'setCollapse
 export type QueryFilterProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps<T>, 'onFinish'> & CommonFormProps<T, U> & BaseQueryFilterProps & {
     onReset?: (values: T) => void;
 };
-declare function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>): React.JSX.Element;
+declare function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>): ReactElement<any, string | React.JSXElementConstructor<any>>;
 export { QueryFilter };