import type { ColProps } from "antd/es/col"; import type { FormItemProps, Rule } from "antd/es/form"; import type { FormListFieldData } from "antd/es/form/FormList"; import type { Gutter } from "antd/es/grid/row"; import type { NamePath } from "rc-field-form/lib/interface"; import type { ReactElement, ReactNode } from "react"; import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender"; import type { DeepPartial } from "./FormBuilder"; export type FormListOptionName = [number, NamePath]; export type FormListOptionDependencies = Array<(NamePath | number)[]> | NamePath; /** * 选择项数据类型 */ export interface OptionItem { /** ID字段 */ bianma?: any; /** 名称字段 */ name?: string | ReactNode; /** 是否禁用 */ disabled?: boolean; [key: string]: any; } /** * 字段键配置 */ export interface ItemsFieldConfig { /** 值字段的键名,默认 'bianma' */ valueKey?: string; /** 标签字段的键名,默认 'name' */ labelKey?: string | ((item: Record) => ReactNode); } /** * Form.List 操作项 */ export interface FormListOperations { /** 当前表单项的数据字段信息 */ field: FormListFieldData; /** 当前项在列表中的索引位置 */ fieldIndex: number; /** 新增方法 */ add: (defaultValue?: DeepPartial, insertIndex?: number) => void; /** 删除方法 */ remove: (index: number | number[]) => void; /** 移动方法 */ move: (from: number, to: number) => void; } /** * Form.List 独有的属性 */ export interface FormListUniqueProps { /** 是否显示新增按钮,默认 true */ showAddButton?: boolean; /** 是否显示删除按钮,默认 true */ showRemoveButton?: boolean; /** 新增按钮的文本,默认 '添加' */ addButtonText?: string; /** 删除按钮的文本,默认 '删除' */ removeButtonText?: string; /** 表单配置项 */ options: (field: FormListFieldData, fieldIndex: number, operations: FormListOperations) => FormListOption[]; /** 点击新增按钮时的默认值 */ addDefaultValue?: DeepPartial; /** 点击新增按钮时插入的索引位置 */ addInsertIndex?: number; } /** * 条件类型辅助工具 */ type WhenTrue = Condition extends true ? never : T; /** * 表单配置项属性类型辅助工具 */ type FormOptionProperty = WhenTrue>; /** * 表单配置项公共字段 */ export interface FormOptionBase< Values = any, AllValues = Values, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath, Dependencies = NamePath, > { /** React 需要的 key,如果传递了唯一的 name,则不需要 */ key?: string; /** 表单项字段名 */ name?: Name; /** 表单项标签 */ label?: ReactNode; /** 占据栅格列数,默认 12 */ span?: WhenTrue; /** 是否必填,默认 true,支持函数动态计算 */ required?: FormOptionProperty boolean)>; /** 验证规则 */ rules?: FormOptionProperty; /** 是否使用字符验证限制 */ useConstraints?: FormOptionProperty; /** 占位符文本,默认会根据传入的 render 类型自动判断(请选择、请输入)和 label 组合 */ placeholder?: FormOptionProperty; /** 提示信息,传入将在 label 右侧生成图标展示 tooltip */ tip?: FormOptionProperty; /** 是否隐藏,默认 false,支持函数动态计算 */ hidden?: WhenTrue boolean)>; /** 是否自定义渲染,完全交给外部控制渲染,默认 false */ customizeRender?: IsCustomizeRender; /** 传递给 Form.Item 的属性,支持函数动态计算 */ formItemProps?: FormOptionProperty FormItemProps)>; /** label 栅格配置,默认直接使用外层的 labelCol,如果 span 等于 24,是外层的 labelCol.span 一半 */ labelCol?: FormOptionProperty; /** wrapper 栅格配置,默认 24 - labelCol.span */ wrapperCol?: FormOptionProperty; /** 是否应该更新(用于表单联动) */ shouldUpdate?: FormOptionProperty boolean)>; /** 依赖字段(用于表单联动) */ dependencies?: FormOptionProperty; /** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */ onlyForLabel?: IsOnlyForLabel; } /** * 按 render 类型区分的表单项 */ export type FormOptionByRender< RenderType extends keyof FORM_ITEM_RENDER_TYPE_MAP, Values = any, AllValues = Values, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath, Dependencies = NamePath, > = FormOptionBase & { /** 渲染类型(写字面量时 componentProps 会按该类型推导) */ render: RenderType; /** 传递给表单控件的属性,类型由 render 决定 */ componentProps?: FormOptionProperty FORM_ITEM_RENDER_TYPE_MAP[RenderType])>; /** 选项数据(用于 select、radio、checkbox) */ items?: FormOptionProperty; /** 字段键配置 */ itemsField?: FormOptionProperty; /** checkbox 的栅格数量,如果不传入不使用栅格,传入才使用 */ checkboxCol?: FormOptionProperty; /** Form.List 独有的属性 */ formListUniqueProps?: FormOptionProperty FormListUniqueProps) : never>; }; /** * 不写 render 或 render 为 input 时的表单项(默认按输入框) */ export type FormOptionDefault< Values = any, AllValues = Values, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath, Dependencies = NamePath, > = FormOptionBase & { /** 渲染类型,默认 input */ render?: "input" | undefined; /** 传递给 Input 的属性 */ componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: AllValues) => FORM_ITEM_RENDER_TYPE_MAP["input"]); /** 选项数据(用于 select、radio、checkbox),input 时不需要 */ items?: never; /** 字段键配置,input 时不需要 */ itemsField?: never; /** checkbox 的栅格数量,input 时不需要 */ checkboxCol?: never; /** Form.List 独有的属性,input 时不需要 */ formListUniqueProps?: never; }; /** * 自定义渲染时的表单项(render 为 ReactNode 时使用) */ export type FormOptionCustomRender< Values = any, AllValues = Values, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath, Dependencies = NamePath, > = FormOptionBase & { /** 渲染类型,默认 ReactNode */ render: ReactNode; /** 传递给表单控件的属性,自定义渲染时不需要 */ componentProps?: never; /** 选项数据(用于 select、radio、checkbox),自定义渲染时不需要 */ items?: never; /** 字段键配置,自定义渲染时不需要 */ itemsField?: never; /** checkbox 的栅格数量,自定义渲染时不需要 */ checkboxCol?: never; /** Form.List 独有的属性,自定义渲染时不需要 */ formListUniqueProps?: never; }; /** * 普通表单配置项 */ export type FormOption = | FormOptionDefault | FormOptionDefault | FormOptionDefault | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] | FormOptionCustomRender | FormOptionCustomRender | FormOptionCustomRender; /** * Form.List 子项表单配置项 */ export type FormListOption = | FormOptionDefault, FormListOptionDependencies> | FormOptionDefault, FormListOptionDependencies> | FormOptionDefault, FormListOptionDependencies> | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender, FormListOptionDependencies> }[keyof FORM_ITEM_RENDER_TYPE_MAP] | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender, FormListOptionDependencies> }[keyof FORM_ITEM_RENDER_TYPE_MAP] | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender, FormListOptionDependencies> }[keyof FORM_ITEM_RENDER_TYPE_MAP] | FormOptionCustomRender, FormListOptionDependencies> | FormOptionCustomRender, FormListOptionDependencies> | FormOptionCustomRender, FormListOptionDependencies>; /** * FormItemsRenderer 组件属性 */ export interface FormItemsRendererProps { /** 表单配置项数组 */ options: FormOption[]; /** 默认栅格占据列数,默认 12 */ span?: number; /** 是否折叠(仅显示前3项),默认 false */ collapse?: boolean; /** 自动生成必填规则,默认 true */ useAutoGenerateRequired?: boolean; /** 初始值,用于在表单未初始化时提供默认值 */ initialValues?: Values; /** 栅格间距,继承自 FormBuilder */ gutter?: Gutter | [Gutter, Gutter]; /** label 栅格配置,继承自 FormBuilder */ labelCol?: ColProps; } /** * 表单项渲染器组件 */ declare const FormItemsRenderer: (props: FormItemsRendererProps) => ReactElement; export default FormItemsRenderer;