import { HelperTextProps } from '../HelperText'; import { LabelProps } from '../Label'; import React, { FC, FormHTMLAttributes, ReactElement } from 'react'; import { FormItemProps } from '../FormItem'; import { ItemTypeProps } from '../FormItem/itemType'; /** * form 表单原始属性 */ type FormHtmlProps = FormHTMLAttributes; /** * 配置项项类型 */ export type configListProps = Array; /** * form 表单组件属性 * @typedef {object} FormProps */ export interface FormProps { /** * form 表单对象存储关键数据和校验方法 * @property {Function} check 表单校验方法 * @property {configListProps} items 配置项,最后经过加工的合计 * @property {{ [name: string]: any }} values 已经保存的值的键值对 * @property {Function} refreshForm 强制刷新表单状态 */ form?: React.MutableRefObject<{ /** * 校验表单方法,校验成功返回表单的键值对 * @return {false | {[name: string]: any}} */ check?: Function; /** * 存储所有表单item最后的配置,方便提交时做总的校验 */ items?: { [name: string]: ItemTypeProps; }; /** * 所有值 */ values?: { [name: string]: any; }; /** * 强制刷新表单状态方法 */ refreshForm?: (list: Array | '', bData?: { [name: string]: any; }) => void; /** * 对象数据集合 */ refData?: RefDataProps; /** * 获取生效项目的值对象,会过滤掉不显示或是不启用的项目的值, */ getValidValues?: Function; /** * 重置表单 */ reset?: Function; /** * 清空表单数据 * 允许清空单个 */ clear?: (name?: string | string[]) => void; }>; /** * from 表单的默认属性 */ FormProps?: FormHtmlProps; /** * 表单的主要类型 vertical 为竖布局,horizontal为横布局,默认为 horizontal.会被 configList的配置覆盖 */ type?: 'vertical' | 'horizontal'; /** * 获取表单的校验方法,会传出表单的校验方法 */ getCheckForm?: (checkFrom: Function) => {}; /** * 输入框内容改变传出 * @param {string} name 表单项的name * @param {any} value 当前表单输入项修改的值 */ onChange?: (name: string, value: any) => void; /** * 强制刷新配置 * @param {Function} configHook 传出内部设置表单项,和回填参数的 hook方法 */ getForcedRefresh?: (setConfigHook: (configList: configListProps, bData?: { [name: string]: any; }) => void) => void; /** * 表单项的配置 */ configList?: configListProps; /** * 回填数据 */ backData?: { [name: string]: any; }; /** * 是否禁用 */ disabled?: boolean; /** * 是否启用必填框,不允许输入纯空格 */ disOnlySpace?: boolean; /** * 必填显示渲染方式 */ requiredElement?: ReactElement | string; /** * 隐藏默认必填标记 */ disRequiredElement?: boolean; /** * className */ className?: string; /** * 标题其他配置 */ labelProps?: LabelProps; /** * 报错提示其他配置 */ helperTextProps?: HelperTextProps; /** * 文字宽度, 只对 type === vertical,状态下生效 */ labelWidth?: number; } /** * form 存储各种参数的集合类型 */ interface RefDataProps { /** * 存储所有表单item最后的配置,方便提交时做总的校验 */ allItems: { [name: string]: ItemTypeProps; }; /** * 存储所有表单item校验的状态,用于动态更新后仍然能保持住报错信息 */ itemsCheckStatus: { [name: string]: boolean | null; }; /** * 存储所有表单item校验的报错信息 */ itemsCheckMessage: { [name: string]: string; }; /** * 表单保存的值集合 */ allValues: { [name: string]: any; }; /** * 最新配置信息 */ configList: configListProps; } /** * form 表单组件 * @author zhanzl * @param {Object} form 表单对象,可以存储校验方法和其他关键数据 * @param {configListProps} configList 表单项配置数组 * @param {boolean} disabled 是否启用禁用状态,所有输入框禁止输入 * @param {Function} onChange 表单选项改变传出 * @param {string} type 表单形态 竖布局 或 横布局,默认横 * @description 用于根据配置自动生成表单 */ declare const Form: FC; export default Form;