diff --git a/components/FormBuilder/FormItemsRenderer.d.ts b/components/FormBuilder/FormItemsRenderer.d.ts index 83caf1e..5acb8fd 100644 --- a/components/FormBuilder/FormItemsRenderer.d.ts +++ b/components/FormBuilder/FormItemsRenderer.d.ts @@ -4,14 +4,7 @@ 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 { FC, ReactNode } from "react"; -import type { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender"; - -/** - * 表单项渲染类型 - */ -export type FormItemRenderType - = | (typeof FORM_ITEM_RENDER_ENUM)[keyof typeof FORM_ITEM_RENDER_ENUM] - | ReactNode; +import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender"; /** * 选项项数据类型 @@ -62,7 +55,7 @@ export interface FormListUniqueProps { /** * 表单配置项 */ -export interface FormOption { +export interface FormOption { /** React 需要的 key,如果传递了唯一的 name,则不需要 */ key?: string; /** 表单项字段名 */ @@ -70,7 +63,7 @@ export interface FormOption { /** 表单项标签 */ label?: ReactNode; /** 渲染类型 */ - render?: FormItemRenderType; + render?: T | ReactNode; /** 占据栅格列数,默认 12 */ span?: number | string; /** 是否必填,默认 true,支持函数动态计算 */ @@ -92,7 +85,7 @@ export interface FormOption { /** 字段键配置 */ itemsField?: itemsFieldConfig; /** 传递给表单控件的属性,支持函数动态计算 */ - componentProps?: Record | ((formValues: FormValues) => Record); + componentProps?: FORM_ITEM_RENDER_TYPE_MAP[T] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[T]); /** 传递给 Form.Item 的属性,支持函数动态计算 */ formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps); /** label 栅格配置,默认直接使用外层的 labelCol,如果 span 等于 24,是外层的 labelCol.span 一半 */ diff --git a/components/FormBuilder/FormItemsRenderer.js b/components/FormBuilder/FormItemsRenderer.js index 505f2a7..63015ac 100644 --- a/components/FormBuilder/FormItemsRenderer.js +++ b/components/FormBuilder/FormItemsRenderer.js @@ -408,6 +408,8 @@ const FormItemsRenderer = ({ // 渲染特殊类型的表单项 const renderOtherTypeItem = ({ option, style, col, index }) => { + const componentProps = getComponentProps(option); + // 如果是 customizeRender 类型,完全交给外部控制渲染 if (option.customizeRender) { return ( @@ -435,7 +437,7 @@ const FormItemsRenderer = ({ if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) { return ( - {option.label} + {option.label} ); } @@ -446,9 +448,11 @@ const FormItemsRenderer = ({ // 渲染 Form.List const renderFormList = (option, index, col, style) => { const formListUniqueProps = getFormListUniqueProps(option); + const componentProps = getComponentProps(option); + return ( - + {(fields, { add, remove }) => ( <> {fields.map((field, fieldIndex) => { diff --git a/enum/formItemRender/index.d.ts b/enum/formItemRender/index.d.ts index f911110..247bc20 100644 --- a/enum/formItemRender/index.d.ts +++ b/enum/formItemRender/index.d.ts @@ -1,3 +1,12 @@ +import type { CheckboxProps } from "antd/es/checkbox"; +import type { DatePickerProps } from "antd/es/date-picker"; +import type { DividerProps } from "antd/es/divider"; +import type { FormListProps } from "antd/es/form"; +import type { InputProps, TextAreaProps } from "antd/es/input"; +import type { InputNumberProps } from "antd/es/input-number"; +import type { RadioProps } from "antd/es/radio"; +import type { SelectProps } from "antd/es/select"; + /** * 表单项类型枚举 */ @@ -33,5 +42,24 @@ export declare const FORM_ITEM_RENDER_ENUM: { /** 映射为 antd Divider */ DIVIDER: "divider"; /** 映射为 antd FormList */ - FORM_LIST: "formList", + FORM_LIST: "formList"; }; + +export interface FORM_ITEM_RENDER_TYPE_MAP { + input: InputProps; + textarea: TextAreaProps; + inputNumber: InputNumberProps; + number: InputNumberProps; + select: SelectProps; + radio: RadioProps; + checkbox: CheckboxProps; + date: DatePickerProps; + dateMonth: DatePickerProps; + dateYear: DatePickerProps; + dateWeek: DatePickerProps; + dateRange: DatePickerProps; + datetime: DatePickerProps; + datetimeRange: DatePickerProps; + divider: DividerProps; + formList: FormListProps; +}