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

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

@@ -0,0 +1,82 @@
+import type { FormInstance, StepsProps } from 'antd';
+import type { FormProviderProps } from 'antd/lib/form/context';
+import React from 'react';
+import type { ProFormInstance } from '../../BaseForm';
+import type { SubmitterProps } from '../../BaseForm/Submitter';
+import type { ProFormProps } from '../ProForm';
+import type { StepFormProps } from './StepForm';
+type StepsFormProps<T = Record<string, any>> = {
+    /**
+     * 返回 true 会重置步数，并且清空表单
+     *
+     * @name 提交方法
+     */
+    onFinish?: (values: T) => Promise<boolean | void>;
+    current?: number;
+    stepsProps?: StepsProps;
+    formProps?: ProFormProps<T>;
+    onCurrentChange?: (current: number) => void;
+    /** 自定义步骤器 */
+    stepsRender?: (steps: {
+        key: string;
+        title?: React.ReactNode;
+    }[], defaultDom: React.ReactNode) => React.ReactNode;
+    /** @name 当前展示表单的 formRef */
+    formRef?: React.MutableRefObject<ProFormInstance<any> | undefined | null>;
+    /** @name 所有表单的 formMapRef */
+    formMapRef?: React.MutableRefObject<React.MutableRefObject<FormInstance<any> | undefined>[]>;
+    /**
+     * 自定义单个表单
+     *
+     * @param form From 的 dom，可以放置到别的位置
+     */
+    stepFormRender?: (from: React.ReactNode) => React.ReactNode;
+    /**
+     * 自定义整个表单区域
+     *
+     * @param form From 的 dom，可以放置到别的位置
+     * @param submitter 操作按钮
+     */
+    stepsFormRender?: (from: React.ReactNode, submitter: React.ReactNode) => React.ReactNode;
+    /** 按钮的统一配置，优先级低于分步表单的配置 */
+    submitter?: SubmitterProps<{
+        step: number;
+        onPre: () => void;
+        form?: FormInstance<any>;
+    }> | false;
+    containerStyle?: React.CSSProperties;
+    /**
+     * 自定義整個佈局。
+     *
+     * @param layoutDom stepsDom 和 formDom 元素可以放置在任何地方。
+     */
+    layoutRender?: (layoutDom: {
+        stepsDom: React.ReactElement;
+        formDom: React.ReactElement;
+    }) => React.ReactNode;
+} & Omit<FormProviderProps, 'children'>;
+export declare const StepsFormProvide: React.Context<{
+    regForm: (name: string, props: StepsFormProps<any>) => void;
+    unRegForm: (name: string) => void;
+    onFormFinish: (name: string, formData: any) => void;
+    keyArray: string[];
+    formArrayRef: React.MutableRefObject<React.MutableRefObject<FormInstance<any> | undefined>[]>;
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+    lastStep: boolean;
+    formMapRef: React.MutableRefObject<Map<string, StepFormProps>>;
+    next: () => void;
+} | undefined>;
+/**
+ * 给  StepForm 传递信息
+ */
+export declare const StepFormProvide: React.Context<StepFormProps<any> | null>;
+declare function StepsFormWarp<T = Record<string, any>>(props: StepsFormProps<T> & {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace StepsFormWarp {
+    var StepForm: typeof import("./StepForm").default;
+    var useForm: typeof import("antd/es/form/Form").useForm;
+}
+export { StepsFormWarp as StepsForm };
+export type { StepFormProps, StepsFormProps };

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

@@ -0,0 +1,433 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/form/layouts/StepsForm/index.tsx
+import { Button, Col, ConfigProvider, Form, Row, Space, Steps } from "antd";
+import classNames from "classnames";
+import toArray from "rc-util/lib/Children/toArray";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import React, {
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ProConfigProvider, useIntl } from "../../../provider";
+import { merge, useRefFunction } from "../../../utils";
+import StepForm from "./StepForm";
+import { useStyle } from "./style";
+var StepsFormProvide = React.createContext(void 0);
+var StepsLayoutStrategy = {
+  horizontal({ stepsDom, formDom }) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Row, { gutter: { xs: 8, sm: 16, md: 24 } }, /* @__PURE__ */ React.createElement(Col, { span: 24 }, stepsDom)), /* @__PURE__ */ React.createElement(Row, { gutter: { xs: 8, sm: 16, md: 24 } }, /* @__PURE__ */ React.createElement(Col, { span: 24 }, formDom)));
+  },
+  vertical({ stepsDom, formDom }) {
+    return /* @__PURE__ */ React.createElement(Row, { align: "stretch", wrap: true, gutter: { xs: 8, sm: 16, md: 24 } }, /* @__PURE__ */ React.createElement(Col, { xxl: 4, xl: 6, lg: 7, md: 8, sm: 10, xs: 12 }, React.cloneElement(stepsDom, {
+      style: {
+        height: "100%"
+      }
+    })), /* @__PURE__ */ React.createElement(Col, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          height: "100%"
+        }
+      },
+      formDom
+    )));
+  }
+};
+var StepFormProvide = React.createContext(
+  null
+);
+function StepsForm(props) {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("pro-steps-form");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const _a = props, {
+    current,
+    onCurrentChange,
+    submitter,
+    stepsFormRender,
+    stepsRender,
+    stepFormRender,
+    stepsProps,
+    onFinish,
+    formProps,
+    containerStyle,
+    formRef,
+    formMapRef: propsFormMapRef,
+    layoutRender: propsLayoutRender
+  } = _a, rest = __objRest(_a, [
+    "current",
+    "onCurrentChange",
+    "submitter",
+    "stepsFormRender",
+    "stepsRender",
+    "stepFormRender",
+    "stepsProps",
+    "onFinish",
+    "formProps",
+    "containerStyle",
+    "formRef",
+    "formMapRef",
+    "layoutRender"
+  ]);
+  const formDataRef = useRef(/* @__PURE__ */ new Map());
+  const formMapRef = useRef(/* @__PURE__ */ new Map());
+  const formArrayRef = useRef([]);
+  const [formArray, setFormArray] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
+  const [step, setStep] = useMergedState(0, {
+    value: props.current,
+    onChange: props.onCurrentChange
+  });
+  const layoutRender = useMemo(() => {
+    return StepsLayoutStrategy[(stepsProps == null ? void 0 : stepsProps.direction) || "horizontal"];
+  }, [stepsProps == null ? void 0 : stepsProps.direction]);
+  const lastStep = useMemo(
+    () => step === formArray.length - 1,
+    [formArray.length, step]
+  );
+  const regForm = useCallback(
+    (name, childrenFormProps) => {
+      if (!formMapRef.current.has(name)) {
+        setFormArray((oldFormArray) => [...oldFormArray, name]);
+      }
+      formMapRef.current.set(name, childrenFormProps);
+    },
+    []
+  );
+  const unRegForm = useCallback((name) => {
+    setFormArray((oldFormArray) => oldFormArray.filter((n) => n !== name));
+    formMapRef.current.delete(name);
+    formDataRef.current.delete(name);
+  }, []);
+  useImperativeHandle(propsFormMapRef, () => formArrayRef.current, [
+    formArrayRef.current
+  ]);
+  useImperativeHandle(formRef, () => {
+    var _a2;
+    return (_a2 = formArrayRef.current[step || 0]) == null ? void 0 : _a2.current;
+  }, [step, formArrayRef.current]);
+  const onFormFinish = useCallback(
+    (name, formData) => __async(this, null, function* () {
+      formDataRef.current.set(name, formData);
+      if (!lastStep || !onFinish) {
+        return;
+      }
+      setLoading(true);
+      const values = merge(
+        {},
+        ...Array.from(formDataRef.current.values())
+      );
+      try {
+        const success = yield onFinish(values);
+        if (success) {
+          setStep(0);
+          formArrayRef.current.forEach((form) => {
+            var _a2;
+            return (_a2 = form.current) == null ? void 0 : _a2.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);
+        return __spreadValues({
+          key: item,
+          title: itemProps == null ? void 0 : itemProps.title
+        }, itemProps == null ? void 0 : itemProps.stepProps);
+      })
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${prefixCls}-steps-container ${hashId}`.trim(),
+        style: {
+          maxWidth: Math.min(formArray.length * 320, 1160)
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Steps,
+        __spreadProps(__spreadValues(__spreadValues({}, stepsProps), itemsProps), {
+          current: step,
+          onChange: void 0
+        })
+      )
+    );
+  }, [formArray, hashId, prefixCls, step, stepsProps]);
+  const onSubmit = useRefFunction(() => {
+    var _a2;
+    const from = formArrayRef.current[step];
+    (_a2 = from.current) == null ? void 0 : _a2.submit();
+  });
+  const prePage = useRefFunction(() => {
+    if (step < 1)
+      return;
+    setStep(step - 1);
+  });
+  const next = useMemo(() => {
+    return submitter !== false && /* @__PURE__ */ React.createElement(
+      Button,
+      __spreadProps(__spreadValues({
+        key: "next",
+        type: "primary",
+        loading
+      }, submitter == null ? void 0 : submitter.submitButtonProps), {
+        onClick: () => {
+          var _a2;
+          (_a2 = submitter == null ? void 0 : submitter.onSubmit) == null ? void 0 : _a2.call(submitter);
+          onSubmit();
+        }
+      }),
+      intl.getMessage("stepsForm.next", "下一步")
+    );
+  }, [intl, loading, onSubmit, submitter]);
+  const pre = useMemo(() => {
+    return submitter !== false && /* @__PURE__ */ React.createElement(
+      Button,
+      __spreadProps(__spreadValues({
+        key: "pre"
+      }, submitter == null ? void 0 : submitter.resetButtonProps), {
+        onClick: () => {
+          var _a2;
+          prePage();
+          (_a2 = submitter == null ? void 0 : submitter.onReset) == null ? void 0 : _a2.call(submitter);
+        }
+      }),
+      intl.getMessage("stepsForm.prev", "上一步")
+    );
+  }, [intl, prePage, submitter]);
+  const submit = useMemo(() => {
+    return submitter !== false && /* @__PURE__ */ React.createElement(
+      Button,
+      __spreadProps(__spreadValues({
+        key: "submit",
+        type: "primary",
+        loading
+      }, submitter == null ? void 0 : submitter.submitButtonProps), {
+        onClick: () => {
+          var _a2;
+          (_a2 = submitter == null ? void 0 : submitter.onSubmit) == null ? void 0 : _a2.call(submitter);
+          onSubmit();
+        }
+      }),
+      intl.getMessage("stepsForm.submit", "提交")
+    );
+  }, [intl, loading, onSubmit, submitter]);
+  const nextPage = useRefFunction(() => {
+    if (formArray.length === 0)
+      return;
+    if (step > formArray.length - 2)
+      return;
+    setStep(step + 1);
+  });
+  const submitterDom = useMemo(() => {
+    var _a2;
+    let buttons = [];
+    const index = step || 0;
+    if (index < 1) {
+      if (formArray.length === 1) {
+        buttons.push(submit);
+      } else {
+        buttons.push(next);
+      }
+    } else if (index + 1 === formArray.length) {
+      buttons.push(pre, submit);
+    } else {
+      buttons.push(pre, next);
+    }
+    buttons = buttons.filter(React.isValidElement);
+    if (submitter && submitter.render) {
+      const submitterProps = {
+        form: (_a2 = formArrayRef.current[step]) == null ? void 0 : _a2.current,
+        onSubmit,
+        step,
+        onPre: prePage
+      };
+      return submitter.render(
+        submitterProps,
+        buttons
+      );
+    }
+    if (submitter && (submitter == null ? void 0 : submitter.render) === false) {
+      return null;
+    }
+    return buttons;
+  }, [formArray.length, next, onSubmit, pre, prePage, step, submit, submitter]);
+  const formDom = useMemo(() => {
+    return toArray(props.children).map((item, index) => {
+      const itemProps = item.props;
+      const name = itemProps.name || `${index}`;
+      const isShow = step === index;
+      const config = isShow ? {
+        contentRender: stepFormRender,
+        submitter: false
+      } : {};
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-step`, hashId, {
+            [`${prefixCls}-step-active`]: isShow
+          }),
+          key: name
+        },
+        /* @__PURE__ */ React.createElement(
+          StepFormProvide.Provider,
+          {
+            value: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, config), formProps), itemProps), {
+              name,
+              step: index
+            })
+          },
+          item
+        )
+      );
+    });
+  }, [formProps, hashId, prefixCls, props.children, step, stepFormRender]);
+  const finalStepsDom = useMemo(() => {
+    if (stepsRender) {
+      return stepsRender(
+        formArray.map((item) => {
+          var _a2;
+          return {
+            key: item,
+            title: (_a2 = formMapRef.current.get(item)) == null ? void 0 : _a2.title
+          };
+        }),
+        stepsDom
+      );
+    }
+    return stepsDom;
+  }, [formArray, stepsDom, stepsRender]);
+  const formContainer = useMemo(
+    () => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${prefixCls}-container ${hashId}`.trim(),
+        style: containerStyle
+      },
+      formDom,
+      stepsFormRender ? null : /* @__PURE__ */ React.createElement(Space, null, submitterDom)
+    ),
+    [containerStyle, formDom, hashId, prefixCls, stepsFormRender, submitterDom]
+  );
+  const stepsFormDom = useMemo(() => {
+    const doms = {
+      stepsDom: finalStepsDom,
+      formDom: formContainer
+    };
+    if (stepsFormRender) {
+      if (propsLayoutRender) {
+        return stepsFormRender(propsLayoutRender(doms), submitterDom);
+      } else {
+        return stepsFormRender(layoutRender(doms), submitterDom);
+      }
+    }
+    if (propsLayoutRender) {
+      return propsLayoutRender(doms);
+    }
+    return layoutRender(doms);
+  }, [
+    finalStepsDom,
+    formContainer,
+    layoutRender,
+    stepsFormRender,
+    submitterDom,
+    propsLayoutRender
+  ]);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, hashId) }, /* @__PURE__ */ React.createElement(Form.Provider, __spreadValues({}, rest), /* @__PURE__ */ React.createElement(
+      StepsFormProvide.Provider,
+      {
+        value: {
+          loading,
+          setLoading,
+          regForm,
+          keyArray: formArray,
+          next: nextPage,
+          formArrayRef,
+          formMapRef,
+          lastStep,
+          unRegForm,
+          onFormFinish
+        }
+      },
+      stepsFormDom
+    )))
+  );
+}
+function StepsFormWarp(props) {
+  return /* @__PURE__ */ React.createElement(ProConfigProvider, { needDeps: true }, /* @__PURE__ */ React.createElement(StepsForm, __spreadValues({}, props)));
+}
+StepsFormWarp.StepForm = StepForm;
+StepsFormWarp.useForm = Form.useForm;
+export {
+  StepFormProvide,
+  StepsFormWarp as StepsForm,
+  StepsFormProvide
+};

package/es/form/layouts/StepsForm/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface StepsFormToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

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

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/form/layouts/StepsForm/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genStepsFormStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      "&-container": {
+        width: "max-content",
+        minWidth: "420px",
+        maxWidth: "100%",
+        margin: "auto"
+      },
+      "&-steps-container": {
+        maxWidth: "1160px",
+        margin: "auto",
+        [`${token.antCls}-steps-vertical`]: { height: "100%" }
+      },
+      "&-step": {
+        display: "none",
+        marginBlockStart: "32px",
+        "&-active": {
+          display: "block"
+        },
+        "> form": { maxWidth: "100%" }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("StepsForm", (token) => {
+    const loginFormToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStepsFormStyle(loginFormToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ProForm } from './ProForm';
+export { DrawerForm } from './DrawerForm';
+export type { DrawerFormProps } from './DrawerForm';
+export { LightFilter } from './LightFilter';
+export type { LightFilterProps } from './LightFilter';
+export { LoginForm } from './LoginForm';
+export type { LoginFormProps } from './LoginForm';
+export { LoginFormPage } from './LoginFormPage';
+export { ModalForm } from './ModalForm';
+export type { ModalFormProps } from './ModalForm';
+export type { ProFormProps } from './ProForm';
+export { QueryFilter } from './QueryFilter';
+export type { BaseQueryFilterProps, QueryFilterProps } from './QueryFilter';
+export { StepsForm } from './StepsForm';
+export type { StepFormProps, StepsFormProps } from './StepsForm';
+export { ProForm };
+export declare const ProFormGroup: import("react").FC<import("src/form").GroupProps>;

package/es/form/layouts/index.js

@@ -0,0 +1,21 @@
+// src/form/layouts/index.ts
+import { ProForm } from "./ProForm";
+import { DrawerForm } from "./DrawerForm";
+import { LightFilter } from "./LightFilter";
+import { LoginForm } from "./LoginForm";
+import { LoginFormPage } from "./LoginFormPage";
+import { ModalForm } from "./ModalForm";
+import { QueryFilter } from "./QueryFilter";
+import { StepsForm } from "./StepsForm";
+var ProFormGroup = ProForm.Group;
+export {
+  DrawerForm,
+  LightFilter,
+  LoginForm,
+  LoginFormPage,
+  ModalForm,
+  ProForm,
+  ProFormGroup,
+  QueryFilter,
+  StepsForm
+};