refactor(form): 优化表单配置项类型定义以支持更精确的类型约束
LiuJiaNan
parent
91f92aa91e
commit
bb63ad5258
|
|
@ -72,10 +72,15 @@ export interface FormListUniqueProps {
|
|||
addInsertIndex?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单配置项属性类型辅助工具
|
||||
*/
|
||||
type FormOptionProperty<O extends boolean, C extends boolean, T> = O extends true ? never : (C extends true ? never : T);
|
||||
|
||||
/**
|
||||
* 表单配置项公共字段
|
||||
*/
|
||||
export interface FormOptionBase {
|
||||
export interface FormOptionBase<O extends boolean = false, C extends boolean = false> {
|
||||
/** React 需要的 key，如果传递了唯一的 name，则不需要 */
|
||||
key?: string;
|
||||
/** 表单项字段名 */
|
||||
|
|
@ -83,77 +88,102 @@ export interface FormOptionBase {
|
|||
/** 表单项标签 */
|
||||
label?: ReactNode;
|
||||
/** 占据栅格列数，默认 12 */
|
||||
span?: number | string;
|
||||
span?: O extends true ? never : (number | string);
|
||||
/** 是否必填，默认 true，支持函数动态计算 */
|
||||
required?: boolean | ((formValues: FormValues) => boolean);
|
||||
required?: FormOptionProperty<O, C, boolean | ((formValues: FormValues) => boolean)>;
|
||||
/** 验证规则 */
|
||||
rules?: Rule | Rule[];
|
||||
rules?: FormOptionProperty<O, C, Rule | Rule[]>;
|
||||
/** 是否使用字符验证限制 */
|
||||
useConstraints?: boolean;
|
||||
useConstraints?: FormOptionProperty<O, C, boolean>;
|
||||
/** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */
|
||||
placeholder?: ReactNode;
|
||||
placeholder?: FormOptionProperty<O, C, ReactNode>;
|
||||
/** 提示信息，传入将在 label 右侧生成图标展示 tooltip */
|
||||
tip?: ReactNode;
|
||||
tip?: FormOptionProperty<O, C, ReactNode>;
|
||||
/** 是否隐藏，默认 false，支持函数动态计算 */
|
||||
hidden?: boolean | ((formValues: FormValues) => boolean);
|
||||
hidden?: O extends true ? never : (boolean | ((formValues: FormValues) => boolean));
|
||||
/** 是否自定义渲染，完全交给外部控制渲染，默认 false */
|
||||
customizeRender?: boolean;
|
||||
/** 选项数据（用于 select、radio、checkbox） */
|
||||
items?: OptionItem[];
|
||||
/** 字段键配置 */
|
||||
itemsField?: ItemsFieldConfig;
|
||||
/** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */
|
||||
checkboxCol?: number;
|
||||
customizeRender?: C;
|
||||
/** 传递给 Form.Item 的属性，支持函数动态计算 */
|
||||
formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
|
||||
formItemProps?: FormOptionProperty<O, C, FormItemProps | ((formValues: FormValues) => FormItemProps)>;
|
||||
/** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
|
||||
labelCol?: ColProps;
|
||||
labelCol?: FormOptionProperty<O, C, ColProps>;
|
||||
/** wrapper 栅格配置，默认 24 - labelCol.span */
|
||||
wrapperCol?: ColProps;
|
||||
wrapperCol?: FormOptionProperty<O, C, ColProps>;
|
||||
/** 是否应该更新（用于表单联动） */
|
||||
shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
|
||||
shouldUpdate?: FormOptionProperty<O, C, boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean)>;
|
||||
/** 依赖字段（用于表单联动） */
|
||||
dependencies?: FormFieldName[];
|
||||
dependencies?: FormOptionProperty<O, C, FormFieldName[]>;
|
||||
/** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
|
||||
onlyForLabel?: boolean;
|
||||
/** Form.List 独有的属性 */
|
||||
formListUniqueProps?: FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps);
|
||||
onlyForLabel?: O;
|
||||
}
|
||||
|
||||
/**
|
||||
* 按 render 类型区分的表单项
|
||||
*/
|
||||
export type FormOptionByRender<K extends keyof FORM_ITEM_RENDER_TYPE_MAP> = FormOptionBase & {
|
||||
export type FormOptionByRender<K extends keyof FORM_ITEM_RENDER_TYPE_MAP, O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
|
||||
/** 渲染类型（写字面量时 componentProps 会按该类型推导） */
|
||||
render: K;
|
||||
/** 传递给表单控件的属性，类型由 render 决定 */
|
||||
componentProps?: FORM_ITEM_RENDER_TYPE_MAP[K] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[K]);
|
||||
componentProps?: FormOptionProperty<O, C, FORM_ITEM_RENDER_TYPE_MAP[K] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[K])>;
|
||||
/** 选项数据（用于 select、radio、checkbox） */
|
||||
items?: FormOptionProperty<O, C, K extends "select" | "radio" | "checkbox" ? OptionItem[] : never>;
|
||||
/** 字段键配置 */
|
||||
itemsField?: FormOptionProperty<O, C, K extends "select" | "radio" | "checkbox" ? ItemsFieldConfig : never>;
|
||||
/** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */
|
||||
checkboxCol?: FormOptionProperty<O, C, K extends "checkbox" ? number : never>;
|
||||
/** Form.List 独有的属性 */
|
||||
formListUniqueProps?: FormOptionProperty<O, C, K extends "formList" ? FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps) : never>;
|
||||
};
|
||||
|
||||
/**
|
||||
* 不写 render 或 render 为 input 时的表单项（默认按输入框）
|
||||
*/
|
||||
export type FormOptionDefault = FormOptionBase & {
|
||||
export type FormOptionDefault<O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
|
||||
/** 渲染类型，默认 input */
|
||||
render?: "input" | undefined;
|
||||
/** 传递给 Input 的属性 */
|
||||
componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: FormValues) => 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 = FormOptionBase & {
|
||||
render?: ReactNode;
|
||||
componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
|
||||
export type FormOptionCustomRender<O extends boolean = false, C extends boolean = false> = FormOptionBase<O, C> & {
|
||||
/** 渲染类型，默认 ReactNode */
|
||||
render: ReactNode;
|
||||
/** 传递给表单控件的属性，自定义渲染时不需要 */
|
||||
componentProps?: FormOptionProperty<O, C, never>;
|
||||
/** 选项数据（用于 select、radio、checkbox），自定义渲染时不需要 */
|
||||
items?: never;
|
||||
/** 字段键配置，自定义渲染时不需要 */
|
||||
itemsField?: never;
|
||||
/** checkbox 的栅格数量，自定义渲染时不需要 */
|
||||
checkboxCol?: never;
|
||||
/** Form.List 独有的属性，自定义渲染时不需要 */
|
||||
formListUniqueProps?: never;
|
||||
};
|
||||
|
||||
/**
|
||||
* 表单配置项
|
||||
*/
|
||||
export type FormOption
|
||||
= | FormOptionDefault
|
||||
| { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
|
||||
| FormOptionCustomRender;
|
||||
= | FormOptionDefault<false, false>
|
||||
| FormOptionDefault<false, true>
|
||||
| FormOptionDefault<true, false>
|
||||
| { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, false, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
|
||||
| { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, false, true> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
|
||||
| { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, true, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
|
||||
| FormOptionCustomRender<false, false>
|
||||
| FormOptionCustomRender<false, true>
|
||||
| FormOptionCustomRender<true, false>;
|
||||
|
||||
/**
|
||||
* FormItemsRenderer 组件属性
|
||||
|
|
|
|||
Loading…
Reference in New Issue