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

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

@@ -1,14 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["current", "onCurrentChange", "submitter", "stepsFormRender", "stepsRender", "stepFormRender", "stepsProps", "onFinish", "formProps", "containerStyle", "formRef", "formMapRef", "layoutRender"];
-import { toArray, useMergedState } from '@rc-component/util';
+import { toArray, useControlledState } from '@rc-component/util';
 import { Button, Col, ConfigProvider, Form, Row, Space, Steps } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { ProConfigProvider, useIntl } from "../../../provider";
 import { merge, useRefFunction } from "../../../utils";
@@ -17,11 +9,12 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var StepsFormProvide = /*#__PURE__*/React.createContext(undefined);
-var StepsLayoutStrategy = {
-  horizontal: function horizontal(_ref) {
-    var stepsDom = _ref.stepsDom,
-      formDom = _ref.formDom;
+export const StepsFormProvide = /*#__PURE__*/React.createContext(undefined);
+const StepsLayoutStrategy = {
+  horizontal({
+    stepsDom,
+    formDom
+  }) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Row, {
         gutter: {
@@ -46,9 +39,10 @@ var StepsLayoutStrategy = {
       })]
     });
   },
-  vertical: function vertical(_ref2) {
-    var stepsDom = _ref2.stepsDom,
-      formDom = _ref2.formDom;
+  vertical({
+    stepsDom,
+    formDom
+  }) {
     return /*#__PURE__*/_jsxs(Row, {
       align: "stretch",
       wrap: true,
@@ -87,66 +81,61 @@ var StepsLayoutStrategy = {
 /**
  * 给  StepForm 传递信息
  */
-export var StepFormProvide = /*#__PURE__*/React.createContext(null);
+export const StepFormProvide = /*#__PURE__*/React.createContext(null);
 function StepsForm(props) {
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-steps-form');
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var current = props.current,
-    onCurrentChange = props.onCurrentChange,
-    submitter = props.submitter,
-    stepsFormRender = props.stepsFormRender,
-    stepsRender = props.stepsRender,
-    stepFormRender = props.stepFormRender,
-    stepsProps = props.stepsProps,
-    onFinish = props.onFinish,
-    formProps = props.formProps,
-    containerStyle = props.containerStyle,
-    formRef = props.formRef,
-    propsFormMapRef = props.formMapRef,
-    propsLayoutRender = props.layoutRender,
-    rest = _objectWithoutProperties(props, _excluded);
-  var formDataRef = useRef(new Map());
-  var formMapRef = useRef(new Map());
-  var formArrayRef = useRef([]);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    formArray = _useState2[0],
-    setFormArray = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var intl = useIntl();
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-steps-form');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const {
+    current,
+    onCurrentChange,
+    submitter,
+    stepsFormRender,
+    stepsRender,
+    stepFormRender,
+    stepsProps,
+    onFinish,
+    formProps,
+    containerStyle,
+    formRef,
+    formMapRef: propsFormMapRef,
+    layoutRender: propsLayoutRender,
+    ...rest
+  } = props;
+  const formDataRef = useRef(new Map());
+  const formMapRef = useRef(new Map());
+  const formArrayRef = useRef([]);
+  const [formArray, setFormArray] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
 
   /**
    * 受控的方式来操作表单
    */
-  var _useMergedState = useMergedState(0, {
-      value: props.current,
-      onChange: props.onCurrentChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    step = _useMergedState2[0],
-    setStep = _useMergedState2[1];
-  var layoutRender = useMemo(function () {
-    return StepsLayoutStrategy[(stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.direction) || 'horizontal'];
-  }, [stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.direction]);
-  var lastStep = useMemo(function () {
-    return step === formArray.length - 1;
-  }, [formArray.length, step]);
+  const [step, setStepInner] = useControlledState(0, props.current);
+  const setStep = useCallback(updater => {
+    setStepInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCurrentChange?.(next);
+      return next;
+    });
+  }, [props.onCurrentChange]);
+  const layoutRender = useMemo(() => {
+    return StepsLayoutStrategy[stepsProps?.direction || 'horizontal'];
+  }, [stepsProps?.direction]);
+  const lastStep = useMemo(() => step === formArray.length - 1, [formArray.length, step]);
 
   /**
    * 注册一个form进入，方便进行 props 的修改
    */
-  var regForm = useCallback(function (name, childrenFormProps) {
+  const regForm = useCallback((name, childrenFormProps) => {
     if (!formMapRef.current.has(name)) {
-      setFormArray(function (oldFormArray) {
-        return [].concat(_toConsumableArray(oldFormArray), [name]);
-      });
+      setFormArray(oldFormArray => [...oldFormArray, name]);
     }
     formMapRef.current.set(name, childrenFormProps);
   }, []);
@@ -154,82 +143,48 @@ function StepsForm(props) {
   /**
    * 解除挂载掉这个 form，同时步数 -1
    */
-  var unRegForm = useCallback(function (name) {
-    setFormArray(function (oldFormArray) {
-      return oldFormArray.filter(function (n) {
-        return n !== name;
-      });
-    });
+  const unRegForm = useCallback(name => {
+    setFormArray(oldFormArray => oldFormArray.filter(n => n !== name));
     formMapRef.current.delete(name);
     formDataRef.current.delete(name);
   }, []);
-  useImperativeHandle(propsFormMapRef, function () {
-    return formArrayRef.current;
-  }, [formArrayRef.current]);
-  useImperativeHandle(formRef, function () {
-    var _formArrayRef$current;
-    return (_formArrayRef$current = formArrayRef.current[step || 0]) === null || _formArrayRef$current === void 0 ? void 0 : _formArrayRef$current.current;
+  useImperativeHandle(propsFormMapRef, () => formArrayRef.current, [formArrayRef.current]);
+  useImperativeHandle(formRef, () => {
+    return formArrayRef.current[step || 0]?.current;
   }, [step, formArrayRef.current]);
 
   /**
    * ProForm处理了一下 from 的数据，在其中做了一些操作 如果使用 Provider 自带的，自带的数据处理就无法生效了
    */
-  var onFormFinish = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(name, formData) {
-      var values, success;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            formDataRef.current.set(name, formData);
-            // 如果不是最后一步
-            if (!(!lastStep || !onFinish)) {
-              _context.next = 3;
-              break;
-            }
-            return _context.abrupt("return");
-          case 3:
-            setLoading(true);
-            values = merge.apply(void 0, [{}].concat(_toConsumableArray(Array.from(formDataRef.current.values()))));
-            _context.prev = 5;
-            _context.next = 8;
-            return onFinish(values);
-          case 8:
-            success = _context.sent;
-            if (success) {
-              setStep(0);
-              formArrayRef.current.forEach(function (form) {
-                var _form$current;
-                return (_form$current = form.current) === null || _form$current === void 0 ? void 0 : _form$current.resetFields();
-              });
-            }
-            _context.next = 15;
-            break;
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](5);
-            console.log(_context.t0);
-          case 15:
-            _context.prev = 15;
-            setLoading(false);
-            return _context.finish(15);
-          case 18:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[5, 12, 15, 18]]);
-    }));
-    return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [lastStep, onFinish, setLoading, setStep]);
-  var stepsDom = useMemo(function () {
-    var itemsProps = {
-      items: formArray.map(function (item) {
-        var itemProps = formMapRef.current.get(item);
-        var stepItemProps = _objectSpread({
+  const onFormFinish = useCallback(async (name, formData) => {
+    formDataRef.current.set(name, formData);
+    // 如果不是最后一步
+    if (!lastStep || !onFinish) {
+      return;
+    }
+    setLoading(true);
+    const values = merge({}, ...Array.from(formDataRef.current.values()));
+    try {
+      const success = await onFinish(values);
+      if (success) {
+        setStep(0);
+        formArrayRef.current.forEach(form => form.current?.resetFields());
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [lastStep, onFinish, setLoading, setStep]);
+  const stepsDom = useMemo(() => {
+    const itemsProps = {
+      items: formArray.map(item => {
+        const itemProps = formMapRef.current.get(item);
+        const stepItemProps = {
           key: item,
-          title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.title
-        }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.stepProps);
+          title: itemProps?.title,
+          ...itemProps?.stepProps
+        };
         // Convert deprecated description to content
         if (stepItemProps.description) {
           stepItemProps.content = stepItemProps.description;
@@ -240,78 +195,79 @@ function StepsForm(props) {
     };
 
     // Convert deprecated direction to orientation
-    var processedStepsProps = stepsProps ? _objectSpread({}, stepsProps) : {};
+    const processedStepsProps = stepsProps ? {
+      ...stepsProps
+    } : {};
     if ('direction' in processedStepsProps) {
       processedStepsProps.orientation = processedStepsProps.direction;
       delete processedStepsProps.direction;
     }
     return /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefixCls, "-steps-container ").concat(hashId).trim(),
+      className: `${prefixCls}-steps-container ${hashId}`.trim(),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
-      children: /*#__PURE__*/_jsx(Steps, _objectSpread(_objectSpread(_objectSpread({}, processedStepsProps), itemsProps), {}, {
+      children: /*#__PURE__*/_jsx(Steps, {
+        ...processedStepsProps,
+        ...itemsProps,
         current: step,
         onChange: undefined
-      }))
+      })
     });
   }, [formArray, hashId, prefixCls, step, stepsProps]);
-  var onSubmit = useRefFunction(function () {
-    var _from$current;
-    var from = formArrayRef.current[step];
-    (_from$current = from.current) === null || _from$current === void 0 || _from$current.submit();
+  const onSubmit = useRefFunction(() => {
+    const from = formArrayRef.current[step];
+    from.current?.submit();
   });
 
   /** 上一页功能 */
-  var prePage = useRefFunction(function () {
+  const prePage = useRefFunction(() => {
     if (step < 1) return;
     setStep(step - 1);
   });
-  var next = useMemo(function () {
-    return submitter !== false && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+  const next = useMemo(() => {
+    return submitter !== false && /*#__PURE__*/_jsx(Button, {
       type: "primary",
-      loading: loading
-    }, submitter === null || submitter === void 0 ? void 0 : submitter.submitButtonProps), {}, {
-      onClick: function onClick() {
-        var _submitter$onSubmit;
-        submitter === null || submitter === void 0 || (_submitter$onSubmit = submitter.onSubmit) === null || _submitter$onSubmit === void 0 || _submitter$onSubmit.call(submitter);
+      loading: loading,
+      ...submitter?.submitButtonProps,
+      onClick: () => {
+        submitter?.onSubmit?.();
         onSubmit();
       },
       children: intl.getMessage('stepsForm.next', '下一步')
-    }), "next");
+    }, "next");
   }, [intl, loading, onSubmit, submitter]);
-  var pre = useMemo(function () {
-    return submitter !== false && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, submitter === null || submitter === void 0 ? void 0 : submitter.resetButtonProps), {}, {
-      onClick: function onClick() {
-        var _submitter$onReset;
+  const pre = useMemo(() => {
+    return submitter !== false && /*#__PURE__*/_jsx(Button, {
+      ...submitter?.resetButtonProps,
+      onClick: () => {
         prePage();
-        submitter === null || submitter === void 0 || (_submitter$onReset = submitter.onReset) === null || _submitter$onReset === void 0 || _submitter$onReset.call(submitter);
+        submitter?.onReset?.();
       },
       children: intl.getMessage('stepsForm.prev', '上一步')
-    }), "pre");
+    }, "pre");
   }, [intl, prePage, submitter]);
-  var submit = useMemo(function () {
-    return submitter !== false && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+  const submit = useMemo(() => {
+    return submitter !== false && /*#__PURE__*/_jsx(Button, {
       type: "primary",
-      loading: loading
-    }, submitter === null || submitter === void 0 ? void 0 : submitter.submitButtonProps), {}, {
-      onClick: function onClick() {
-        var _submitter$onSubmit2;
-        submitter === null || submitter === void 0 || (_submitter$onSubmit2 = submitter.onSubmit) === null || _submitter$onSubmit2 === void 0 || _submitter$onSubmit2.call(submitter);
+      loading: loading,
+      ...submitter?.submitButtonProps,
+      onClick: () => {
+        submitter?.onSubmit?.();
         onSubmit();
       },
       children: intl.getMessage('stepsForm.submit', '提交')
-    }), "submit");
+    }, "submit");
   }, [intl, loading, onSubmit, submitter]);
-  var nextPage = useRefFunction(function () {
+  const nextPage = useRefFunction(() => {
     // Ensure we have forms registered before checking step bounds
     if (formArray.length === 0) return;
     if (step > formArray.length - 2) return;
     setStep(step + 1);
   });
-  var submitterDom = useMemo(function () {
-    var buttons = [];
-    var index = step || 0;
+  const submitterDom = useMemo(() => {
+    let buttons = [];
+    const index = step || 0;
     if (index < 1) {
       // 如果有且只有一个 StepForm 第一步就应该是提交按钮
       if (formArray.length === 1) {
@@ -326,65 +282,64 @@ function StepsForm(props) {
     }
     buttons = buttons.filter(React.isValidElement);
     if (submitter && submitter.render) {
-      var _formArrayRef$current2;
-      var submitterProps = {
-        form: (_formArrayRef$current2 = formArrayRef.current[step]) === null || _formArrayRef$current2 === void 0 ? void 0 : _formArrayRef$current2.current,
-        onSubmit: onSubmit,
-        step: step,
+      const submitterProps = {
+        form: formArrayRef.current[step]?.current,
+        onSubmit,
+        step,
         onPre: prePage
       };
       return submitter.render(submitterProps, buttons);
     }
-    if (submitter && (submitter === null || submitter === void 0 ? void 0 : submitter.render) === false) {
+    if (submitter && submitter?.render === false) {
       return null;
     }
     return buttons;
   }, [formArray.length, next, onSubmit, pre, prePage, step, submit, submitter]);
-  var formDom = useMemo(function () {
-    return toArray(props.children).map(function (item, index) {
-      var itemProps = item.props;
-      var name = itemProps.name || "".concat(index);
+  const formDom = useMemo(() => {
+    return toArray(props.children).map((item, index) => {
+      const itemProps = item.props;
+      const name = itemProps.name || `${index}`;
       /** 是否是当前的表单 */
-      var isShow = step === index;
-      var config = isShow ? {
+      const isShow = step === index;
+      const config = isShow ? {
         contentRender: stepFormRender,
         submitter: false
       } : {};
       return /*#__PURE__*/_jsx("div", {
-        className: classNames("".concat(prefixCls, "-step"), hashId, _defineProperty({}, "".concat(prefixCls, "-step-active"), isShow)),
+        className: clsx(`${prefixCls}-step`, hashId, {
+          [`${prefixCls}-step-active`]: isShow
+        }),
         children: /*#__PURE__*/_jsx(StepFormProvide.Provider, {
-          value: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, config), formProps), itemProps), {}, {
-            name: name,
+          value: {
+            ...config,
+            ...formProps,
+            ...itemProps,
+            name,
             step: index
-          }),
+          },
           children: item
         })
       }, name);
     });
   }, [formProps, hashId, prefixCls, props.children, step, stepFormRender]);
-  var finalStepsDom = useMemo(function () {
+  const finalStepsDom = useMemo(() => {
     if (stepsRender) {
-      return stepsRender(formArray.map(function (item) {
-        var _formMapRef$current$g;
-        return {
-          key: item,
-          title: (_formMapRef$current$g = formMapRef.current.get(item)) === null || _formMapRef$current$g === void 0 ? void 0 : _formMapRef$current$g.title
-        };
-      }), stepsDom);
+      return stepsRender(formArray.map(item => ({
+        key: item,
+        title: formMapRef.current.get(item)?.title
+      })), stepsDom);
     }
     return stepsDom;
   }, [formArray, stepsDom, stepsRender]);
-  var formContainer = useMemo(function () {
-    return /*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefixCls, "-container ").concat(hashId).trim(),
-      style: containerStyle,
-      children: [formDom, stepsFormRender ? null : /*#__PURE__*/_jsx(Space, {
-        children: submitterDom
-      })]
-    });
-  }, [containerStyle, formDom, hashId, prefixCls, stepsFormRender, submitterDom]);
-  var stepsFormDom = useMemo(function () {
-    var doms = {
+  const formContainer = useMemo(() => /*#__PURE__*/_jsxs("div", {
+    className: `${prefixCls}-container ${hashId}`.trim(),
+    style: containerStyle,
+    children: [formDom, stepsFormRender ? null : /*#__PURE__*/_jsx(Space, {
+      children: submitterDom
+    })]
+  }), [containerStyle, formDom, hashId, prefixCls, stepsFormRender, submitterDom]);
+  const stepsFormDom = useMemo(() => {
+    const doms = {
       stepsDom: finalStepsDom,
       formDom: formContainer
     };
@@ -401,30 +356,33 @@ function StepsForm(props) {
     return layoutRender(doms);
   }, [finalStepsDom, formContainer, layoutRender, stepsFormRender, submitterDom, propsLayoutRender]);
   return wrapSSR( /*#__PURE__*/_jsx("div", {
-    className: classNames(prefixCls, hashId),
-    children: /*#__PURE__*/_jsx(Form.Provider, _objectSpread(_objectSpread({}, rest), {}, {
+    className: clsx(prefixCls, hashId),
+    children: /*#__PURE__*/_jsx(Form.Provider, {
+      ...rest,
       children: /*#__PURE__*/_jsx(StepsFormProvide.Provider, {
         value: {
-          loading: loading,
-          setLoading: setLoading,
-          regForm: regForm,
+          loading,
+          setLoading,
+          regForm,
           keyArray: formArray,
           next: nextPage,
-          formArrayRef: formArrayRef,
-          formMapRef: formMapRef,
-          lastStep: lastStep,
-          unRegForm: unRegForm,
-          onFormFinish: onFormFinish
+          formArrayRef,
+          formMapRef,
+          lastStep,
+          unRegForm,
+          onFormFinish
         },
         children: stepsFormDom
       })
-    }))
+    })
   }));
 }
 function StepsFormWarp(props) {
   return /*#__PURE__*/_jsx(ProConfigProvider, {
     needDeps: true,
-    children: /*#__PURE__*/_jsx(StepsForm, _objectSpread({}, props))
+    children: /*#__PURE__*/_jsx(StepsForm, {
+      ...props
+    })
   });
 }
 StepsFormWarp.StepForm = StepForm;

package/es/form/layouts/StepsForm/style.js

@@ -1,37 +1,39 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genStepsFormStyle = function genStepsFormStyle(token) {
-  return _defineProperty({}, token.componentCls, {
-    '&-container': {
-      width: 'max-content',
-      minWidth: '420px',
-      maxWidth: '100%',
-      margin: 'auto'
-    },
-    '&-steps-container': _defineProperty({
-      maxWidth: '1160px',
-      margin: 'auto'
-    }, "".concat(token.antCls, "-steps-vertical"), {
-      height: '100%'
-    }),
-    '&-step': {
-      display: 'none',
-      marginBlockStart: '32px',
-      '&-active': {
-        display: 'block'
+const genStepsFormStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-container': {
+        width: 'max-content',
+        minWidth: '420px',
+        maxWidth: '100%',
+        margin: 'auto'
       },
-      '> form': {
-        maxWidth: '100%'
+      '&-steps-container': {
+        maxWidth: '1160px',
+        margin: 'auto',
+        [`${token.antCls}-steps-vertical`]: {
+          height: '100%'
+        }
+      },
+      '&-step': {
+        display: 'none',
+        marginBlockStart: '32px',
+        '&-active': {
+          display: 'block'
+        },
+        '> form': {
+          maxWidth: '100%'
+        }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('StepsForm', function (token) {
-    var loginFormToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('StepsForm', token => {
+    const loginFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genStepsFormStyle(loginFormToken)];
   });
 }

package/es/form/layouts/index.js

@@ -7,4 +7,4 @@ export { ModalForm } from "./ModalForm";
 export { QueryFilter } from "./QueryFilter";
 export { StepsForm } from "./StepsForm";
 export { ProForm };
-export var ProFormGroup = ProForm.Group;
+export const ProFormGroup = ProForm.Group;