diff --git a/src/components/FormBuilder/FormBuilder.d.ts b/src/components/FormBuilder/FormBuilder.d.ts index 49f1d53..302300b 100644 --- a/src/components/FormBuilder/FormBuilder.d.ts +++ b/src/components/FormBuilder/FormBuilder.d.ts @@ -1,17 +1,16 @@ import type { FormInstance, FormProps } from "antd/es/form"; import type { Gutter } from "antd/es/grid/row"; -import type { Store } from "rc-field-form/lib/interface"; -import type { FC, ReactNode } from "react"; +import type { ReactElement, ReactNode } from "react"; import type { FormOption } from "./FormItemsRenderer"; /** * FormBuilder 组件属性 */ -export interface FormBuilderProps extends Omit { +export interface FormBuilderProps extends Omit { /** 表单初始值 */ - values?: Store; + values?: Values; /** 表单配置项数组 */ - options: FormOption[]; + options: FormOption[]; /** 栅格间距,默认 24 */ gutter?: Gutter | [Gutter, Gutter]; /** 占据栅格列数,默认 12 */ @@ -35,15 +34,21 @@ export interface FormBuilderProps extends Omit { /** 是否处于加载状态,默认 false */ loading?: boolean; /** 表单实例(通过 Form.useForm() 创建) */ - form: FormInstance; + form: FormInstance; + /** 表单提交时的回调函数 */ + onFinish?: (values: Values) => void; } /** * 表单构建器组件 */ -declare const FormBuilder: FC & { +type FormBuilderComponent = { useForm: typeof import("antd").Form.useForm; useWatch: typeof import("antd").Form.useWatch; +} & { + (props: FormBuilderProps): ReactElement; }; +declare const FormBuilder: FormBuilderComponent; + export default FormBuilder; diff --git a/src/components/FormBuilder/FormItemsRenderer.d.ts b/src/components/FormBuilder/FormItemsRenderer.d.ts index 0e02adc..1b1cb1a 100644 --- a/src/components/FormBuilder/FormItemsRenderer.d.ts +++ b/src/components/FormBuilder/FormItemsRenderer.d.ts @@ -2,13 +2,10 @@ 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 { Store } from "rc-field-form/lib/interface"; -import type { FC, ReactNode } from "react"; +import type { NamePath, Store } from "rc-field-form/lib/interface"; +import type { ReactElement, ReactNode } from "react"; import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender"; -/** 表单项 name */ -export type FormFieldName = string | number | (string | number)[]; - /** * 选择项数据类型 */ @@ -76,74 +73,74 @@ type WhenTrue = Condition extends true ? never : T /** * 表单配置项属性类型辅助工具 */ -type FormOptionProperty = WhenTrue>; +type FormOptionProperty = WhenTrue>; /** * 表单配置项公共字段 */ -export interface FormOptionBase { +export interface FormOptionBase { /** React 需要的 key,如果传递了唯一的 name,则不需要 */ key?: string; /** 表单项字段名 */ - name?: FormFieldName; + name?: NamePath; /** 表单项标签 */ label?: ReactNode; /** 占据栅格列数,默认 12 */ - span?: WhenTrue; + span?: WhenTrue; /** 是否必填,默认 true,支持函数动态计算 */ - required?: FormOptionProperty boolean)>; + required?: FormOptionProperty boolean)>; /** 验证规则 */ - rules?: FormOptionProperty; + rules?: FormOptionProperty; /** 是否使用字符验证限制 */ - useConstraints?: FormOptionProperty; + useConstraints?: FormOptionProperty; /** 占位符文本,默认会根据传入的 render 类型自动判断(请选择、请输入)和 label 组合 */ - placeholder?: FormOptionProperty; + placeholder?: FormOptionProperty; /** 提示信息,传入将在 label 右侧生成图标展示 tooltip */ - tip?: FormOptionProperty; + tip?: FormOptionProperty; /** 是否隐藏,默认 false,支持函数动态计算 */ - hidden?: WhenTrue boolean)>; + hidden?: WhenTrue boolean)>; /** 是否自定义渲染,完全交给外部控制渲染,默认 false */ - customizeRender?: C; + customizeRender?: IsCustomizeRender; /** 传递给 Form.Item 的属性,支持函数动态计算 */ - formItemProps?: FormOptionProperty FormItemProps)>; + formItemProps?: FormOptionProperty FormItemProps)>; /** label 栅格配置,默认直接使用外层的 labelCol,如果 span 等于 24,是外层的 labelCol.span 一半 */ - labelCol?: FormOptionProperty; + labelCol?: FormOptionProperty; /** wrapper 栅格配置,默认 24 - labelCol.span */ - wrapperCol?: FormOptionProperty; + wrapperCol?: FormOptionProperty; /** 是否应该更新(用于表单联动) */ - shouldUpdate?: FormOptionProperty boolean)>; + shouldUpdate?: FormOptionProperty boolean)>; /** 依赖字段(用于表单联动) */ - dependencies?: FormOptionProperty; + dependencies?: FormOptionProperty[]>; /** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */ - onlyForLabel?: O; + onlyForLabel?: IsOnlyForLabel; } /** * 按 render 类型区分的表单项 */ -export type FormOptionByRender = FormOptionBase & { +export type FormOptionByRender = FormOptionBase & { /** 渲染类型(写字面量时 componentProps 会按该类型推导) */ - render: R; + render: RenderType; /** 传递给表单控件的属性,类型由 render 决定 */ - componentProps?: FormOptionProperty FORM_ITEM_RENDER_TYPE_MAP[R])>; + componentProps?: FormOptionProperty FORM_ITEM_RENDER_TYPE_MAP[RenderType])>; /** 选项数据(用于 select、radio、checkbox) */ - items?: FormOptionProperty; + items?: FormOptionProperty; /** 字段键配置 */ - itemsField?: FormOptionProperty; + itemsField?: FormOptionProperty; /** checkbox 的栅格数量,如果不传入不使用栅格,传入才使用 */ - checkboxCol?: FormOptionProperty; + checkboxCol?: FormOptionProperty; /** Form.List 独有的属性 */ - formListUniqueProps?: FormOptionProperty FormListUniqueProps) : never>; + formListUniqueProps?: FormOptionProperty FormListUniqueProps) : never>; }; /** * 不写 render 或 render 为 input 时的表单项(默认按输入框) */ -export type FormOptionDefault = FormOptionBase & { +export type FormOptionDefault = FormOptionBase & { /** 渲染类型,默认 input */ render?: "input" | undefined; /** 传递给 Input 的属性 */ - componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: Store) => FORM_ITEM_RENDER_TYPE_MAP["input"]); + componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: Values) => FORM_ITEM_RENDER_TYPE_MAP["input"]); /** 选项数据(用于 select、radio、checkbox),input 时不需要 */ items?: never; /** 字段键配置,input 时不需要 */ @@ -157,7 +154,7 @@ export type FormOptionDefault = FormOptionBase & { +export type FormOptionCustomRender = FormOptionBase & { /** 渲染类型,默认 ReactNode */ render: ReactNode; /** 传递给表单控件的属性,自定义渲染时不需要 */ @@ -175,23 +172,23 @@ export type FormOptionCustomRender - | 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; +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; /** * FormItemsRenderer 组件属性 */ -export interface FormItemsRendererProps { +export interface FormItemsRendererProps { /** 表单配置项数组 */ - options: FormOption[]; + options: FormOption[]; /** 默认栅格占据列数,默认 12 */ span?: number; /** 是否折叠(仅显示前3项),默认 false */ @@ -199,7 +196,7 @@ export interface FormItemsRendererProps { /** 自动生成必填规则,默认 true */ useAutoGenerateRequired?: boolean; /** 初始值,用于在表单未初始化时提供默认值 */ - initialValues?: Store; + initialValues?: Values; /** 栅格间距,继承自 FormBuilder */ gutter?: Gutter | [Gutter, Gutter]; /** label 栅格配置,继承自 FormBuilder */ @@ -209,6 +206,6 @@ export interface FormItemsRendererProps { /** * 表单项渲染器组件 */ -declare const FormItemsRenderer: FC; +declare const FormItemsRenderer: (props: FormItemsRendererProps) => ReactElement; export default FormItemsRenderer; diff --git a/src/components/FormBuilder/index.d.ts b/src/components/FormBuilder/index.d.ts index 2fa3db0..f5321e3 100644 --- a/src/components/FormBuilder/index.d.ts +++ b/src/components/FormBuilder/index.d.ts @@ -1,3 +1,6 @@ +import type { FormOption } from "./FormItemsRenderer"; import FormBuilder from "./FormBuilder"; +export type { FormOption }; + export default FormBuilder; diff --git a/src/components/Search/index.d.ts b/src/components/Search/index.d.ts index 46272b2..e0df83b 100644 --- a/src/components/Search/index.d.ts +++ b/src/components/Search/index.d.ts @@ -1,22 +1,23 @@ import type { FormInstance, FormProps } from "antd/es/form"; -import type { Store } from "rc-field-form/lib/interface"; -import type { FC, ReactNode } from "react"; -import type { FormOption } from "../FormBuilder/FormItemsRenderer"; +import type { ReactElement, ReactNode } from "react"; +import type { FormOption } from "../FormBuilder"; + +export type { FormOption }; /** * Search 组件属性 */ -export interface SearchProps extends Omit { +export interface SearchProps extends Omit { /** 表单配置项数组 */ - options: FormOption[]; + options: FormOption[]; /** 表单值 */ - values?: Store; + values?: Values; /** 搜索和重置都会触发的回调 */ - onFinish?: (values: Store, type: "submit" | "reset") => void; + onFinish?: (values: Values, type: "submit" | "reset") => void; /** 搜索回调 */ - onSubmit?: (values: Store) => void; + onSubmit?: (values: Values) => void; /** 重置回调 */ - onReset?: (values: Store) => void; + onReset?: (values: Values) => void; /** 搜索按钮文本,默认"搜索" */ searchText?: string; /** 重置按钮文本,默认"重置" */ @@ -28,16 +29,20 @@ export interface SearchProps extends Omit { /** 额外的底部按钮组 */ extraButtons?: ReactNode; /** 表单实例(通过 Form.useForm() 创建) */ - form: FormInstance; + form: FormInstance; } /** * 搜索表单组件 * 支持自动展开/收起功能,当表单项超过4个时显示展开/收起按钮 */ -declare const Search: FC & { +type SearchComponent = { useForm: typeof import("antd").Form.useForm; useWatch: typeof import("antd").Form.useWatch; +} & { + (props: SearchProps): ReactElement; }; +declare const Search: SearchComponent; + export default Search;