@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/form/src/layouts/StepsForm/StepForm.tsx

@@ -0,0 +1,89 @@
+import type { FormInstance, FormProps } from 'antd';
+import omit from 'omit.js';
+import type { StepProps } from 'rc-steps/lib/Step';
+import { noteOnce } from 'rc-util/lib/warning';
+import { useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import type { CommonFormProps } from '../../BaseForm';
+import { BaseForm } from '../../BaseForm';
+import { StepFormProvide, StepsFormProps, StepsFormProvide } from './index';
+
+export type StepFormProps<T = Record<string, any>, U = Record<string, any>> = {
+  step?: number;
+  stepProps?: StepProps;
+  index?: number;
+} & Omit<FormProps<T>, 'onFinish' | 'form'> &
+  Omit<CommonFormProps<T, U>, 'submitter' | 'form'>;
+
+function StepForm<T = Record<string, any>>(stepNativeProps: StepFormProps<T>) {
+  const formRef = useRef<FormInstance | undefined>();
+  const context = useContext(StepsFormProvide);
+  const stepContext = useContext(StepFormProvide);
+
+  const props = { ...stepNativeProps, ...stepContext } as StepFormProps<T> &
+    StepsFormProps<any>;
+  const {
+    onFinish,
+    step,
+    formRef: propFormRef,
+    title,
+    stepProps,
+    ...restProps
+  } = props;
+
+  noteOnce(!restProps.submitter, 'StepForm 不包含提交按钮，请在 StepsForm 上');
+
+  /** 重置 formRef */
+  useImperativeHandle(propFormRef, () => formRef.current, [
+    propFormRef?.current,
+  ]);
+
+  /** Dom 不存在的时候解除挂载 */
+  useEffect(() => {
+    if (!(props.name || props.step)) return;
+    const name = (props.name || props.step)!.toString();
+    context?.regForm(name, props);
+    return () => {
+      context?.unRegForm(name);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (context && context?.formArrayRef) {
+    context.formArrayRef.current[step || 0] = formRef;
+  }
+
+  return (
+    <BaseForm<T>
+      formRef={formRef}
+      onFinish={async (values) => {
+        if (restProps.name) {
+          context?.onFormFinish(restProps.name, values);
+        }
+        if (onFinish) {
+          context?.setLoading(true);
+          // 如果报错，直接抛出
+          const success = await onFinish?.(values);
+
+          if (success) {
+            context?.next();
+          }
+          context?.setLoading(false);
+          return;
+        }
+
+        if (!context?.lastStep) context?.next();
+      }}
+      onInit={(_, form) => {
+        formRef.current = form;
+        if (context && context?.formArrayRef) {
+          context.formArrayRef.current[step || 0] = formRef;
+        }
+        restProps?.onInit?.(_, form);
+      }}
+      layout="vertical"
+      {...omit(restProps, ['layoutType', 'columns'] as any[])}
+    />
+  );
+}
+
+export default StepForm;

package/packages/form/src/layouts/StepsForm/index.tsx

@@ -0,0 +1,569 @@
+import { ProConfigProvider, useIntl } from '@ant-design/pro-provider';
+import { compareVersions, merge, useRefFunction } from '@ant-design/pro-utils';
+import type { FormInstance, StepsProps } from 'antd';
+import {
+  Button,
+  Col,
+  ConfigProvider,
+  Form,
+  Row,
+  Space,
+  Steps,
+  version,
+} from 'antd';
+
+import type { FormProviderProps } from 'antd/lib/form/context';
+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 type { ProFormInstance } from '../../BaseForm';
+import type { SubmitterProps } from '../../components';
+import type { ProFormProps } from '../ProForm';
+import type { StepFormProps } from './StepForm';
+import StepForm from './StepForm';
+import { useStyle } from './style';
+
+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 const StepsFormProvide = React.createContext<
+  | {
+      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
+>(undefined);
+
+interface LayoutRenderDom {
+  stepsDom: React.ReactElement;
+  formDom: React.ReactElement;
+}
+
+const StepsLayoutStrategy: Record<
+  string,
+  (dom: LayoutRenderDom) => React.ReactNode
+> = {
+  horizontal({ stepsDom, formDom }) {
+    return (
+      <>
+        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
+          <Col span={24}>{stepsDom}</Col>
+        </Row>
+        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
+          <Col span={24}>{formDom}</Col>
+        </Row>
+      </>
+    );
+  },
+  vertical({ stepsDom, formDom }) {
+    return (
+      <Row align="stretch" wrap={true} gutter={{ xs: 8, sm: 16, md: 24 }}>
+        <Col xxl={4} xl={6} lg={7} md={8} sm={10} xs={12}>
+          {React.cloneElement(stepsDom, {
+            style: {
+              height: '100%',
+            },
+          })}
+        </Col>
+        <Col>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            {formDom}
+          </div>
+        </Col>
+      </Row>
+    );
+  },
+};
+
+/**
+ * 给  StepForm 传递信息
+ */
+export const StepFormProvide = React.createContext<StepFormProps<any> | null>(
+  null,
+);
+
+function StepsForm<T = Record<string, any>>(
+  props: StepsFormProps<T> & {
+    children: React.ReactNode;
+  },
+) {
+  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<string, Record<string, any>>());
+  const formMapRef = useRef(new Map<string, StepFormProps>());
+  const formArrayRef = useRef<
+    React.MutableRefObject<FormInstance<any> | undefined>[]
+  >([]);
+  const [formArray, setFormArray] = useState<string[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const intl = useIntl();
+
+  /**
+   * 受控的方式来操作表单
+   */
+  const [step, setStep] = useMergedState<number>(0, {
+    value: props.current,
+    onChange: props.onCurrentChange,
+  });
+
+  const layoutRender = useMemo(() => {
+    return StepsLayoutStrategy[stepsProps?.direction || 'horizontal'];
+  }, [stepsProps?.direction]);
+
+  const lastStep = useMemo(
+    () => step === formArray.length - 1,
+    [formArray.length, step],
+  );
+
+  /**
+   * 注册一个form进入，方便进行 props 的修改
+   */
+  const regForm = useCallback(
+    (name: string, childrenFormProps: StepFormProps) => {
+      if (!formMapRef.current.has(name)) {
+        setFormArray((oldFormArray) => [...oldFormArray, name]);
+      }
+      formMapRef.current.set(name, childrenFormProps);
+    },
+    [],
+  );
+
+  /**
+   * 解除挂载掉这个 form，同时步数 -1
+   */
+  const unRegForm = useCallback((name: string) => {
+    setFormArray((oldFormArray) => oldFormArray.filter((n) => n !== name));
+    formMapRef.current.delete(name);
+    formDataRef.current.delete(name);
+  }, []);
+
+  useImperativeHandle(propsFormMapRef, () => formArrayRef.current, [
+    formArrayRef.current,
+  ]);
+
+  useImperativeHandle(
+    formRef,
+    () => {
+      return formArrayRef.current[step || 0]?.current;
+    },
+    [step, formArrayRef.current],
+  );
+
+  /**
+   * ProForm处理了一下 from 的数据，在其中做了一些操作 如果使用 Provider 自带的，自带的数据处理就无法生效了
+   */
+  const onFormFinish = useCallback(
+    async (name: string, formData: any) => {
+      formDataRef.current.set(name, formData);
+      // 如果不是最后一步
+      if (!lastStep || !onFinish) {
+        return;
+      }
+
+      setLoading(true);
+      const values: any = 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 isNewAntd = compareVersions(version, '4.24.0') > -1;
+    const itemsProps = isNewAntd
+      ? {
+          items: formArray.map((item) => {
+            const itemProps = formMapRef.current.get(item);
+            return {
+              key: item,
+              title: itemProps?.title,
+              ...itemProps?.stepProps,
+            };
+          }),
+        }
+      : {};
+
+    return (
+      <div
+        className={`${prefixCls}-steps-container ${hashId}`.trim()}
+        style={{
+          maxWidth: Math.min(formArray.length * 320, 1160),
+        }}
+      >
+        <Steps
+          {...stepsProps}
+          {...itemsProps}
+          current={step}
+          onChange={undefined}
+        >
+          {!isNewAntd &&
+            formArray.map((item) => {
+              const itemProps = formMapRef.current.get(item);
+              return (
+                <Steps.Step
+                  key={item}
+                  title={itemProps?.title}
+                  {...itemProps?.stepProps}
+                />
+              );
+            })}
+        </Steps>
+      </div>
+    );
+  }, [formArray, hashId, prefixCls, step, stepsProps]);
+
+  const onSubmit = useRefFunction(() => {
+    const from = formArrayRef.current[step];
+    from.current?.submit();
+  });
+
+  /** 上一页功能 */
+  const prePage = useRefFunction(() => {
+    if (step < 1) return;
+    setStep(step - 1);
+  });
+
+  const next = useMemo(() => {
+    return (
+      submitter !== false && (
+        <Button
+          key="next"
+          type="primary"
+          loading={loading}
+          {...submitter?.submitButtonProps}
+          onClick={() => {
+            submitter?.onSubmit?.();
+            onSubmit();
+          }}
+        >
+          {intl.getMessage('stepsForm.next', '下一步')}
+        </Button>
+      )
+    );
+  }, [intl, loading, onSubmit, submitter]);
+
+  const pre = useMemo(() => {
+    return (
+      submitter !== false && (
+        <Button
+          key="pre"
+          {...submitter?.resetButtonProps}
+          onClick={() => {
+            prePage();
+            submitter?.onReset?.();
+          }}
+        >
+          {intl.getMessage('stepsForm.prev', '上一步')}
+        </Button>
+      )
+    );
+  }, [intl, prePage, submitter]);
+
+  const submit = useMemo(() => {
+    return (
+      submitter !== false && (
+        <Button
+          key="submit"
+          type="primary"
+          loading={loading}
+          {...submitter?.submitButtonProps}
+          onClick={() => {
+            submitter?.onSubmit?.();
+            onSubmit();
+          }}
+        >
+          {intl.getMessage('stepsForm.submit', '提交')}
+        </Button>
+      )
+    );
+  }, [intl, loading, onSubmit, submitter]);
+
+  const nextPage = useRefFunction(() => {
+    if (step > formArray.length - 2) return;
+    setStep(step + 1);
+  });
+
+  const submitterDom = useMemo(() => {
+    let buttons: (React.ReactElement | false)[] = [];
+    const index = step || 0;
+    if (index < 1) {
+      // 如果有且只有一个 StepForm 第一步就应该是提交按钮
+      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: any = {
+        form: formArrayRef.current[step]?.current,
+        onSubmit,
+        step,
+        onPre: prePage,
+      };
+
+      return submitter.render(
+        submitterProps,
+        buttons as React.ReactElement[],
+      ) as React.ReactNode;
+    }
+    if (submitter && submitter?.render === false) {
+      return null;
+    }
+    return buttons as React.ReactElement[];
+  }, [formArray.length, next, onSubmit, pre, prePage, step, submit, submitter]);
+
+  const formDom = useMemo(() => {
+    return toArray(props.children).map((item, index) => {
+      const itemProps = item.props as StepFormProps;
+      const name = itemProps.name || `${index}`;
+      /** 是否是当前的表单 */
+      const isShow = step === index;
+
+      const config = isShow
+        ? {
+            contentRender: stepFormRender,
+            submitter: false,
+          }
+        : {};
+      return (
+        <div
+          className={classNames(`${prefixCls}-step`, hashId, {
+            [`${prefixCls}-step-active`]: isShow,
+          })}
+          key={name}
+        >
+          <StepFormProvide.Provider
+            value={{
+              ...config,
+              ...formProps,
+              ...itemProps,
+              name,
+              step: index,
+            }}
+          >
+            {item}
+          </StepFormProvide.Provider>
+        </div>
+      );
+    });
+  }, [formProps, hashId, prefixCls, props.children, step, stepFormRender]);
+
+  const finalStepsDom = useMemo(() => {
+    if (stepsRender) {
+      return stepsRender(
+        formArray.map((item) => ({
+          key: item,
+          title: formMapRef.current.get(item)?.title,
+        })),
+        stepsDom,
+      ) as React.ReactElement;
+    }
+    return stepsDom;
+  }, [formArray, stepsDom, stepsRender]);
+
+  const formContainer = useMemo(
+    () => (
+      <div
+        className={`${prefixCls}-container ${hashId}`.trim()}
+        style={containerStyle}
+      >
+        {formDom}
+        {stepsFormRender ? null : <Space>{submitterDom}</Space>}
+      </div>
+    ),
+    [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(
+    <div className={classNames(prefixCls, hashId)}>
+      <Form.Provider {...rest}>
+        <StepsFormProvide.Provider
+          value={{
+            loading,
+            setLoading,
+            regForm,
+            keyArray: formArray,
+            next: nextPage,
+            formArrayRef,
+            formMapRef,
+            lastStep,
+            unRegForm,
+            onFormFinish,
+          }}
+        >
+          {stepsFormDom}
+        </StepsFormProvide.Provider>
+      </Form.Provider>
+    </div>,
+  );
+}
+function StepsFormWarp<T = Record<string, any>>(
+  props: StepsFormProps<T> & {
+    children: any;
+  },
+) {
+  return (
+    <ProConfigProvider needDeps>
+      <StepsForm<T> {...props} />
+    </ProConfigProvider>
+  );
+}
+
+StepsFormWarp.StepForm = StepForm;
+StepsFormWarp.useForm = Form.useForm;
+
+export { StepsFormWarp as StepsForm };
+export type { StepFormProps, StepsFormProps };

package/packages/form/src/layouts/StepsForm/style.ts

@@ -0,0 +1,43 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+export interface StepsFormToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const genStepsFormStyle: GenerateStyle<StepsFormToken> = (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%' },
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string) {
+  return useAntdStyle('StepsForm', (token) => {
+    const loginFormToken: StepsFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genStepsFormStyle(loginFormToken)];
+  });
+}

package/packages/form/src/layouts/index.ts

@@ -0,0 +1,19 @@
+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 const ProFormGroup = ProForm.Group;