mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
157 lines (156 loc) • 4.71 kB
TypeScript
import React from 'react';
import { StepProps, StepsProps } from 'antd-mobile';
import { FormInstance } from 'antd-mobile/es/components/form';
import { BizFormProps } from '../Form';
import StepForm from './StepForm';
import { SubmitterProps } from './Submitter';
import './index.less';
import { StyleWithVariable } from '../../../types';
export type BizStepsFormActionType = {
/**
* 全部表单 form 实例。
*/
get forms(): FormInstance[];
/**
* 上一步。
* @returns
*/
prev: () => void;
/**
* 下一步。
*
* 提交当前表单，成功则进入下一步；如果是最后一步则提交。
* @returns
*/
next: () => void;
/**
* 全部表单重置，并回到第一步。
* @returns
*/
reset: () => void;
/**
* 获取已经提交成功的分步表单值。
* @returns
*/
getFormValues: () => any;
};
export type BizStepsFormItemType = {
/**
* @description 步骤标题。
*/
title: React.ReactNode;
/**
* @description 表单内容。
*/
children: React.ReactElement<typeof StepForm>;
/**
* @description 透传 Steps 组件属性。
* @see {@link https://mobile.ant.design/zh/components/steps#steps|StepsProps}
*/
stepsProps?: StepsProps;
/**
* @description 透传 Steps.Step 组件属性。
* @see {@link https://mobile.ant.design/zh/components/steps#stepsstep|StepProps}
*/
stepProps?: StepProps;
/**
* @description 透传 Submitter 组件属性。
*/
submitterProps?: Omit<SubmitterProps, 'current' | 'total' | 'onPrev' | 'onNext' | 'onSubmit'>;
/**
* @description 显示底部区域。
* @default true
*/
showFooter?: boolean;
/**
* @description 自定义步骤条。
* @param stepsDom 步骤条 `dom`。
* @returns
*/
stepsRender?: (stepsDom: React.ReactElement) => React.ReactNode;
/**
* @description 自定义表单内容。
* @param formContentDom 表单内容 `dom`。
* @returns
*/
formContentRender?: (formContentDom: React.ReactElement) => React.ReactNode;
/**
* @description 自定义提交器。
* @param submitterDom 提交器 `dom`。
* @returns
*/
submitterRender?: (submitterDom: React.ReactElement) => React.ReactNode;
};
export interface BizStepsFormProps extends Pick<BizStepsFormItemType, 'stepsProps' | 'stepProps' | 'submitterProps' | 'showFooter' | 'stepsRender' | 'formContentRender' | 'submitterRender'> {
/**
* @description 默认步骤数。
* @default 0
*/
defaultCurrent?: number;
/**
* @description 步骤数。设置后变为受控模式。
*/
current?: number;
/**
* @description 步骤数改变时触发。
* @param current 步骤数。
* @returns
*/
onCurrentChange?: (current: number) => void;
/**
* @description 切换分步表单是否滚动到内容顶部。
* @default true
*/
changedStepScrollToTop?: boolean;
/**
* @description 分步表单项配置。
*/
items: BizStepsFormItemType[];
/**
* @description 常用操作（上一步/下一步/重置/获取已提交表单值/全部表单实例对象）。
*/
actionRef?: React.MutableRefObject<BizStepsFormActionType | undefined>;
/**
* @description 透传给所有 `StepsForm.StepForm` 子组件属性。
*/
formProps?: BizFormProps;
/**
* @description 返回上一步时触发。
* @returns
*/
onPrev?: () => void;
/**
* @description 当前步骤的表单验证成功后，跳转下一步时触发。
* @returns
*/
onNext?: () => void;
/**
* @description 最后一步提交成功后触发。
* @param values 全部步骤的表单值。
* @returns
*/
onFinish?: (values: any) => void;
/**
* @description 类名。
*/
className?: string;
/**
* @description 样式。
*/
style?: StyleWithVariable<'--color-primary' | '--color-primary-light' | '--steps-size' | '--submitter-prev-button-width'>;
/**
* @description 配置内置模块样式。
*/
styles?: {
content?: React.CSSProperties;
contentMain?: React.CSSProperties;
steps?: StyleWithVariable<'--color-primary' | '--color-primary-light' | '--size'>;
step?: React.CSSProperties;
footer?: React.CSSProperties;
submitter?: StyleWithVariable<'--color-primary' | '--prev-width'>;
};
}
declare const BizStepsForm: React.FC<BizStepsFormProps> & {
StepForm: typeof StepForm;
};
export default BizStepsForm;