zy-react-library 1.3.3 → 1.3.4

package/components/FormBuilder/FormItemsRenderer.d.ts

@@ -2,9 +2,13 @@ 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, Store } from "rc-field-form/lib/interface";
+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<Values> = [number, NamePath<Values>];
+export type FormListOptionDependencies<Values> = Array<(NamePath<Values> | number)[]> | NamePath<Values>;
 
 /**
  * 选择项数据类型
@@ -32,13 +36,13 @@ export interface ItemsFieldConfig {
 /**
  * Form.List 操作项
  */
-export interface FormListOperations {
+export interface FormListOperations<Values = any> {
   /** 当前表单项的数据字段信息 */
   field: FormListFieldData;
   /** 当前项在列表中的索引位置 */
   fieldIndex: number;
   /** 新增方法 */
-  add: (defaultValue?: Store, insertIndex?: number) => void;
+  add: (defaultValue?: DeepPartial<Values>, insertIndex?: number) => void;
   /** 删除方法 */
   remove: (index: number | number[]) => void;
   /** 移动方法 */
@@ -48,7 +52,7 @@ export interface FormListOperations {
 /**
  * Form.List 独有的属性
  */
-export interface FormListUniqueProps {
+export interface FormListUniqueProps<Values = any, AllValues = Values> {
   /** 是否显示新增按钮，默认 true */
   showAddButton?: boolean;
   /** 是否显示删除按钮，默认 true */
@@ -58,9 +62,9 @@ export interface FormListUniqueProps {
   /** 删除按钮的文本，默认 '删除' */
   removeButtonText?: string;
   /** 表单配置项 */
-  options: (field: FormListFieldData, fieldIndex: number, operations: FormListOperations) => FormListOption[];
+  options: (field: FormListFieldData, fieldIndex: number, operations: FormListOperations<Values>) => FormListOption<Values, AllValues>[];
   /** 点击新增按钮时的默认值 */
-  addDefaultValue?: Store;
+  addDefaultValue?: DeepPartial<Values>;
   /** 点击新增按钮时插入的索引位置 */
   addInsertIndex?: number;
 }
@@ -78,7 +82,14 @@ type FormOptionProperty<IsOnlyForLabel extends boolean, IsCustomizeRender extend
 /**
  * 表单配置项公共字段
  */
-export interface FormOptionBase<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> {
+export interface FormOptionBase<
+  Values = any,
+  AllValues = Values,
+  IsOnlyForLabel extends boolean = false,
+  IsCustomizeRender extends boolean = false,
+  Name = NamePath<Values>,
+  Dependencies = NamePath<Values>,
+> {
   /** React 需要的 key，如果传递了唯一的 name，则不需要 */
   key?: string;
   /** 表单项字段名 */
@@ -88,7 +99,7 @@ export interface FormOptionBase<Values = any, IsOnlyForLabel extends boolean = f
   /** 占据栅格列数，默认 12 */
   span?: WhenTrue<IsOnlyForLabel, number | string>;
   /** 是否必填，默认 true，支持函数动态计算 */
-  required?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((formValues: Values) => boolean)>;
+  required?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((formValues: AllValues) => boolean)>;
   /** 验证规则 */
   rules?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Rule | Rule[]>;
   /** 是否使用字符验证限制 */
@@ -98,19 +109,19 @@ export interface FormOptionBase<Values = any, IsOnlyForLabel extends boolean = f
   /** 提示信息，传入将在 label 右侧生成图标展示 tooltip */
   tip?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode>;
   /** 是否隐藏，默认 false，支持函数动态计算 */
-  hidden?: WhenTrue<IsOnlyForLabel, boolean | ((formValues: Values) => boolean)>;
+  hidden?: WhenTrue<IsOnlyForLabel, boolean | ((formValues: AllValues) => boolean)>;
   /** 是否自定义渲染，完全交给外部控制渲染，默认 false */
   customizeRender?: IsCustomizeRender;
   /** 传递给 Form.Item 的属性，支持函数动态计算 */
-  formItemProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FormItemProps | ((formValues: Values) => FormItemProps)>;
+  formItemProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FormItemProps | ((formValues: AllValues) => FormItemProps)>;
   /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
   labelCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ColProps>;
   /** wrapper 栅格配置，默认 24 - labelCol.span */
   wrapperCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ColProps>;
   /** 是否应该更新（用于表单联动） */
-  shouldUpdate?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((prevValues: Values, nextValues: Values, info: { source?: string }) => boolean)>;
+  shouldUpdate?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, boolean | ((prevValues: AllValues, nextValues: AllValues, info: { source?: string }) => boolean)>;
   /** 依赖字段（用于表单联动） */
-  dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Name[]>;
+  dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Dependencies[]>;
   /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
   onlyForLabel?: IsOnlyForLabel;
 }
@@ -118,11 +129,19 @@ export interface FormOptionBase<Values = any, IsOnlyForLabel extends boolean = f
 /**
  * 按 render 类型区分的表单项
  */
-export type FormOptionByRender<RenderType extends keyof FORM_ITEM_RENDER_TYPE_MAP, Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
+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<Values>,
+  Dependencies = NamePath<Values>,
+> = FormOptionBase<Values, AllValues, IsOnlyForLabel, IsCustomizeRender, Name, Dependencies> & {
   /** 渲染类型（写字面量时 componentProps 会按该类型推导） */
   render: RenderType;
   /** 传递给表单控件的属性，类型由 render 决定 */
-  componentProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FORM_ITEM_RENDER_TYPE_MAP[RenderType] | ((formValues: Values) => FORM_ITEM_RENDER_TYPE_MAP[RenderType])>;
+  componentProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, FORM_ITEM_RENDER_TYPE_MAP[RenderType] | ((formValues: AllValues) => FORM_ITEM_RENDER_TYPE_MAP[RenderType])>;
   /** 选项数据（用于 select、radio、checkbox） */
   items?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "select" | "radio" | "checkbox" ? OptionItem[] : never>;
   /** 字段键配置 */
@@ -130,17 +149,24 @@ export type FormOptionByRender<RenderType extends keyof FORM_ITEM_RENDER_TYPE_MA
   /** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */
   checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>;
   /** Form.List 独有的属性 */
-  formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: Values) => FormListUniqueProps) : never>;
+  formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: AllValues) => FormListUniqueProps) : never>;
 };
 
 /**
  * 不写 render 或 render 为 input 时的表单项（默认按输入框）
  */
-export type FormOptionDefault<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
+export type FormOptionDefault<
+  Values = any,
+  AllValues = Values,
+  IsOnlyForLabel extends boolean = false,
+  IsCustomizeRender extends boolean = false,
+  Name = NamePath<Values>,
+  Dependencies = NamePath<Values>,
+> = FormOptionBase<Values, AllValues, IsOnlyForLabel, IsCustomizeRender, Name, Dependencies> & {
   /** 渲染类型，默认 input */
   render?: "input" | undefined;
   /** 传递给 Input 的属性 */
-  componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: Values) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
+  componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: AllValues) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
   /** 选项数据（用于 select、radio、checkbox），input 时不需要 */
   items?: never;
   /** 字段键配置，input 时不需要 */
@@ -154,7 +180,14 @@ export type FormOptionDefault<Values = any, IsOnlyForLabel extends boolean = fal
 /**
  * 自定义渲染时的表单项（render 为 ReactNode 时使用）
  */
-export type FormOptionCustomRender<Values = any, IsOnlyForLabel extends boolean = false, IsCustomizeRender extends boolean = false, Name = NamePath<Values>> = FormOptionBase<Values, IsOnlyForLabel, IsCustomizeRender, Name> & {
+export type FormOptionCustomRender<
+  Values = any,
+  AllValues = Values,
+  IsOnlyForLabel extends boolean = false,
+  IsCustomizeRender extends boolean = false,
+  Name = NamePath<Values>,
+  Dependencies = NamePath<Values>,
+> = FormOptionBase<Values, AllValues, IsOnlyForLabel, IsCustomizeRender, Name, Dependencies> & {
   /** 渲染类型，默认 ReactNode */
   render: ReactNode;
   /** 传递给表单控件的属性，自定义渲染时不需要 */
@@ -170,32 +203,32 @@ export type FormOptionCustomRender<Values = any, IsOnlyForLabel extends boolean
 };
 
 /**
- * 表单配置项（普通表单项）
+ * 普通表单配置项
  */
-export type FormOption<Values = any>
-  = | FormOptionDefault<Values, false, false>
-    | FormOptionDefault<Values, false, true>
-    | FormOptionDefault<Values, true, false>
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, true> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, true, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | FormOptionCustomRender<Values, false, false>
-    | FormOptionCustomRender<Values, false, true>
-    | FormOptionCustomRender<Values, true, false>;
+export type FormOption<Values = any, AllValues = Values>
+  = | FormOptionDefault<Values, AllValues, false, false>
+    | FormOptionDefault<Values, AllValues, false, true>
+    | FormOptionDefault<Values, AllValues, true, false>
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, false, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, false, true> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, true, false> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | FormOptionCustomRender<Values, AllValues, false, false>
+    | FormOptionCustomRender<Values, AllValues, false, true>
+    | FormOptionCustomRender<Values, AllValues, true, false>;
 
 /**
- * Form.List 子项表单配置项（使用 [number, NamePath] 作为 name 类型）
+ * Form.List 子项表单配置项
  */
-export type FormListOption<Values = any>
-  = | FormOptionDefault<Values, false, false, [number, NamePath<Values>]>
-    | FormOptionDefault<Values, false, true, [number, NamePath<Values>]>
-    | FormOptionDefault<Values, true, false, [number, NamePath<Values>]>
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, false, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, false, true, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, true, false, [number, NamePath<Values>]> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
-    | FormOptionCustomRender<Values, false, false, [number, NamePath<Values>]>
-    | FormOptionCustomRender<Values, false, true, [number, NamePath<Values>]>
-    | FormOptionCustomRender<Values, true, false, [number, NamePath<Values>]>;
+export type FormListOption<Values = any, AllValues = Values>
+  = | FormOptionDefault<Values, AllValues, false, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>
+    | FormOptionDefault<Values, AllValues, false, true, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>
+    | FormOptionDefault<Values, AllValues, true, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, false, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, false, true, FormListOptionName<Values>, FormListOptionDependencies<AllValues>> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K, Values, AllValues, true, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | FormOptionCustomRender<Values, AllValues, false, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>
+    | FormOptionCustomRender<Values, AllValues, false, true, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>
+    | FormOptionCustomRender<Values, AllValues, true, false, FormListOptionName<Values>, FormListOptionDependencies<AllValues>>;
 
 /**
  * FormItemsRenderer 组件属性

package/components/FormBuilder/FormItemsRenderer.js

@@ -1 +1 @@
-import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as n,Form as t,Col as l,Divider as s,Row as a,Button as o,Checkbox as d,Radio as i,Select as u,InputNumber as p,Tooltip as c}from"antd";import m from"dayjs";import{FORM_ITEM_RENDER_ENUM as h}from"../../enum/formItemRender/index.js";import{jsx as y,Fragment as E,jsxs as f}from"react/jsx-runtime";const{TextArea:T}=r,{RangePicker:b}=n,I=({options:I,labelCol:v,gutter:A=24,span:R=12,collapse:Y=!1,useAutoGenerateRequired:D=!0,initialValues:C})=>{const N=t.useFormInstance(),w=()=>{const e=N.getFieldsValue();return 0===Object.keys(e).length&&C?C:e},M=e=>"function"==typeof e.componentProps?e.componentProps(w()):e.componentProps||{},P=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(w()):e.formItemProps||{};return[h.DATE,h.DATE_MONTH,h.DATE_YEAR,h.DATETIME].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e):void 0})),[h.DATE_WEEK].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e,"YYYY-wo"):void 0})),[h.DATE_RANGE,h.DATETIME_RANGE].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:Array.isArray(e)?e.map(e=>e?m(e):void 0):void 0})),r},U=e=>"function"==typeof e?e(w()):e??!0,x=e=>{if(e.render===h.DIVIDER)return[];const r=[];switch(e.render||h.INPUT){case h.INPUT:!1!==e.useConstraints&&r.push({max:50,message:"最多输入50字符"});break;case h.TEXTAREA:!1!==e.useConstraints&&r.push({max:500,message:"最多输入500字符"});break;case h.INPUT_NUMBER:case h.NUMBER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)(\.\d{1,2})?$/,message:"请输入正确的数字，最多保留两位小数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()});break;case h.INTEGER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)$/,message:"请输入正确的整数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()})}if(!D)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(U(e.required)){const n=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(e.render);return r.push({required:!0,message:`${n?"请输入":"请选择"}${e.label}`}),e.rules&&(Array.isArray(e.rules)?r.push(...e.rules):r.push(e.rules)),r}return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r},g=e=>e.key||e.name,_=e=>{const r=e.render===h.DIVIDER?24:e.span??R,n=e.labelCol??(24===r?{span:v.span/2}:v);return{span:r,labelCol:n,wrapperCol:e.wrapperCol??{span:24-n.span}}},B=e=>"function"==typeof e?e(w()):e??!1,F=(e,r)=>({value:e[r.valueKey],label:"function"==typeof r.labelKey?r.labelKey(e):e[r.labelKey],disabled:e.disabled}),k=e=>{const t=M(e),s=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render??h.INPUT,c=e.placeholder??`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return y(r,{placeholder:c,maxLength:!1!==e.useConstraints?50:9999,...t});case h.TEXTAREA:return y(T,{placeholder:c,maxLength:!1!==e.useConstraints?500:9999,showCount:!0,rows:3,...t});case h.INPUT_NUMBER:case h.NUMBER:case h.INTEGER:return y(p,{placeholder:c,style:{width:"100%"},...t});case h.SELECT:return y(u,{placeholder:c,showSearch:!0,allowClear:!0,optionFilterProp:"children",...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(u.Option,{value:r,disabled:t,children:n},r)})});case h.RADIO:return y(i.Group,{...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(i,{value:r,disabled:t,children:n},r)})});case h.CHECKBOX:return y(d.Group,{...t,children:e.checkboxCol?y(a,{children:(e.items||[]).map(r=>{const{value:n,label:t,disabled:a}=F(r,s);return y(l,{span:e.checkboxCol,children:y(d,{value:n,disabled:a,children:t})},n)})}):(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=F(e,s);return y(d,{value:r,disabled:t,children:n},r)})});case h.DATE:return y(n,{placeholder:c,format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATE_MONTH:return y(n,{picker:"month",placeholder:c,format:"YYYY-MM",style:{width:"100%"},...t});case h.DATE_YEAR:return y(n,{picker:"year",placeholder:c,format:"YYYY",style:{width:"100%"},...t});case h.DATE_WEEK:return y(n,{picker:"week",placeholder:c,format:"YYYY-wo",style:{width:"100%"},...t});case h.DATE_RANGE:return y(b,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATETIME:return y(n,{showTime:!0,placeholder:c,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DATETIME_RANGE:return y(b,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DIVIDER:return null;default:return o}},L=r=>r.tip?f(E,{children:[r.label,y(c,{title:r.tip,children:y(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,V=({option:e,style:r,col:n,index:s})=>{const a=P(e);return delete a.dependencies,delete a.shouldUpdate,B(e.hidden)?null:y(l,{span:n.span,style:r,children:y(t.Item,{name:e.name,label:L(e),rules:x(e),labelCol:n.labelCol,wrapperCol:n.wrapperCol,preserve:!1,required:" "!==L(e)&&U(e.required),colon:" "!==L(e),...a,children:k(e)})},g(e)||s)},$=({option:e,style:r,col:n,index:a})=>{const o=M(e);return e.customizeRender?y(l,{span:n.span,style:r,children:e.render},g(e)||a):e.onlyForLabel?y(t.Item,{name:e.name,noStyle:!0,preserve:!1,children:y("input",{type:"hidden"})},g(e)||a):e.render===h.DIVIDER?y(l,{span:n.span,style:r,children:y(s,{orientation:"left",...o,children:e.label})},g(e)||a):null},G=({option:e,index:r,col:n,style:s})=>{const d=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(w())}:{...r,...e.formListUniqueProps||{}}})(e),i=M(e);return y(l,{span:n.span,style:s,children:y(t.List,{name:e.name,...i,children:(e,{add:r,remove:n,move:i})=>y(E,{children:e.map((e,u)=>{const p=((e,r,n,t,l,s)=>"function"==typeof e?e(r,n,{field:r,fieldIndex:n,add:t,remove:l,move:s}):e??[])(d.options,e,u,r,n,i);return y(a,{gutter:A,children:p.map((a,i)=>{if(B(a.hidden))return null;const c=_(a),m=P(a),E={option:a,style:s,col:c,index:`${u}_${i}`},T=$(E);if(T)return T;if(a.render===h.FORM_LIST)return G(E);const b=e=>!B(e.hidden)&&!e.onlyForLabel,I=p[i+1],v=I&&I.render===h.FORM_LIST,A=I&&!b(I);return i===(()=>{for(let e=p.length-1;e>=0;e--){const r=p[e];if(r.render===h.FORM_LIST)return e;if(b(r))return e}return-1})()||v||A?(delete m.dependencies,delete m.shouldUpdate,y(l,{span:c.span,style:s,children:y(t.Item,{label:L(a),labelCol:c.labelCol,wrapperCol:c.wrapperCol,preserve:!1,required:" "!==L(a)&&U(a.required),colon:" "!==L(a),...m,children:f("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[y("div",{style:{flex:1},children:y(t.Item,{noStyle:!0,rules:x(a),name:a.name,children:k(a)})}),u>=1?d.showRemoveButton&&y(o,{type:"primary",danger:!0,onClick:()=>n(e.name),children:d.removeButtonText}):d.showAddButton&&y(o,{type:"primary",onClick:()=>r(d.addDefaultValue,d.addInsertIndex),children:d.addButtonText})]})})},g(a)||i)):V(E)})},e.key)})})})},g(e)||r)};return y(E,{children:I.map((e,r)=>{const n=_(e),l=(e=>Y&&e>=3?{display:"none"}:void 0)(r),s=P(e),a={option:e,style:l,col:n,index:r};return $(a)||(e.render===h.FORM_LIST?G(a):(e.shouldUpdate??e.dependencies)||(s.shouldUpdate??s.dependencies)?(({option:e,index:r,style:n,col:l})=>{const s=P(e);return y(t.Item,{noStyle:!0,preserve:!1,shouldUpdate:e.shouldUpdate??s.shouldUpdate,dependencies:e.dependencies??s.dependencies,children:()=>V({option:e,style:n,col:l,index:r})},g(e)||r)})(a):V(a))})})};I.displayName="FormItemsRenderer";export{I as default};
+import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as n,Form as t,Col as l,Divider as s,Row as a,Button as o,Checkbox as d,Radio as i,Select as u,InputNumber as p,Tooltip as c}from"antd";import m from"dayjs";import{FORM_ITEM_RENDER_ENUM as h}from"../../enum/formItemRender/index.js";import{getDataType as y}from"../../utils/index.js";import{jsx as E,Fragment as f,jsxs as T}from"react/jsx-runtime";const{TextArea:b}=r,{RangePicker:v}=n,I=({options:I,labelCol:A,gutter:R=24,span:Y=12,collapse:D=!1,useAutoGenerateRequired:C=!0,initialValues:N})=>{const w=t.useFormInstance(),M=()=>{const e=w.getFieldsValue();return 0===Object.keys(e).length&&N?N:e},U=e=>"function"==typeof e.componentProps?e.componentProps(M()):e.componentProps||{},P=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(M()):e.formItemProps||{};return[h.DATE,h.DATE_MONTH,h.DATE_YEAR,h.DATETIME].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e):void 0})),[h.DATE_WEEK].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e,"YYYY-wo"):void 0})),[h.DATE_RANGE,h.DATETIME_RANGE].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:Array.isArray(e)?e.map(e=>e?m(e):void 0):void 0})),r},x=e=>"function"==typeof e?e(M()):e??!0,g=e=>{if(e.render===h.DIVIDER)return[];const r=[];switch(e.render||h.INPUT){case h.INPUT:!1!==e.useConstraints&&r.push({max:50,message:"最多输入50字符"});break;case h.TEXTAREA:!1!==e.useConstraints&&r.push({max:500,message:"最多输入500字符"});break;case h.INPUT_NUMBER:case h.NUMBER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)(\.\d{1,2})?$/,message:"请输入正确的数字，最多保留两位小数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()});break;case h.INTEGER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)$/,message:"请输入正确的整数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()})}if(!C)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(x(e.required)){const n=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(e.render);return r.push({required:!0,message:`${n?"请输入":"请选择"}${e.label}`}),e.rules&&(Array.isArray(e.rules)?r.push(...e.rules):r.push(e.rules)),r}return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r},_=e=>e.key||("Array"===y(e.name)?e.name.join("."):e.name),B=e=>{const r=e.render===h.DIVIDER?24:e.span??Y,n=e.labelCol??(24===r?{span:A.span/2}:A);return{span:r,labelCol:n,wrapperCol:e.wrapperCol??{span:24-n.span}}},F=e=>"function"==typeof e?e(M()):e??!1,k=(e,r)=>({value:e[r.valueKey],label:"function"==typeof r.labelKey?r.labelKey(e):e[r.labelKey],disabled:e.disabled}),L=e=>{const t=U(e),s=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render??h.INPUT,c=e.placeholder??`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return E(r,{placeholder:c,maxLength:!1!==e.useConstraints?50:9999,...t});case h.TEXTAREA:return E(b,{placeholder:c,maxLength:!1!==e.useConstraints?500:9999,showCount:!0,rows:3,...t});case h.INPUT_NUMBER:case h.NUMBER:case h.INTEGER:return E(p,{placeholder:c,style:{width:"100%"},...t});case h.SELECT:return E(u,{placeholder:c,showSearch:!0,allowClear:!0,optionFilterProp:"children",...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=k(e,s);return E(u.Option,{value:r,disabled:t,children:n},r)})});case h.RADIO:return E(i.Group,{...t,children:(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=k(e,s);return E(i,{value:r,disabled:t,children:n},r)})});case h.CHECKBOX:return E(d.Group,{...t,children:e.checkboxCol?E(a,{children:(e.items||[]).map(r=>{const{value:n,label:t,disabled:a}=k(r,s);return E(l,{span:e.checkboxCol,children:E(d,{value:n,disabled:a,children:t})},n)})}):(e.items||[]).map(e=>{const{value:r,label:n,disabled:t}=k(e,s);return E(d,{value:r,disabled:t,children:n},r)})});case h.DATE:return E(n,{placeholder:c,format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATE_MONTH:return E(n,{picker:"month",placeholder:c,format:"YYYY-MM",style:{width:"100%"},...t});case h.DATE_YEAR:return E(n,{picker:"year",placeholder:c,format:"YYYY",style:{width:"100%"},...t});case h.DATE_WEEK:return E(n,{picker:"week",placeholder:c,format:"YYYY-wo",style:{width:"100%"},...t});case h.DATE_RANGE:return E(v,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATETIME:return E(n,{showTime:!0,placeholder:c,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DATETIME_RANGE:return E(v,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DIVIDER:return null;default:return o}},V=r=>r.tip?T(f,{children:[r.label,E(c,{title:r.tip,children:E(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,$=({option:e,style:r,col:n,index:s,preserve:a})=>{const o=P(e);return delete o.dependencies,delete o.shouldUpdate,F(e.hidden)?null:E(l,{span:n.span,style:r,children:E(t.Item,{name:e.name,label:V(e),rules:g(e),labelCol:n.labelCol,wrapperCol:n.wrapperCol,preserve:a,required:" "!==V(e)&&x(e.required),colon:" "!==V(e),...o,children:L(e)})},_(e)||s)},G=({option:e,style:r,col:n,index:a,preserve:o})=>{const d=U(e);return e.customizeRender?E(l,{span:n.span,style:r,children:e.render},_(e)||a):e.onlyForLabel?E(t.Item,{name:e.name,noStyle:!0,preserve:o,children:E("input",{type:"hidden"})},_(e)||a):e.render===h.DIVIDER?E(l,{span:n.span,style:r,children:E(s,{orientation:"left",...d,children:e.label})},_(e)||a):null},K=({option:e,index:r,style:n,col:l,preserve:s})=>{const a=P(e);return E(t.Item,{noStyle:!0,preserve:s,shouldUpdate:e.shouldUpdate??a.shouldUpdate,dependencies:e.dependencies??a.dependencies,children:()=>$({option:e,style:n,col:l,index:r,preserve:s})},_(e)||r)},q=({option:e,index:r,col:n,style:s})=>{const d=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(M())}:{...r,...e.formListUniqueProps||{}}})(e),i=U(e);return E(l,{span:n.span,style:s,children:E(t.List,{name:e.name,...i,children:(e,{add:r,remove:n,move:i})=>E(f,{children:e.map((e,u)=>{const p=((e,r,n,t,l,s)=>"function"==typeof e?e(r,n,{field:r,fieldIndex:n,add:t,remove:l,move:s}):e??[])(d.options,e,u,r,n,i);return E(a,{gutter:R,children:p.map((a,i)=>{if(F(a.hidden))return null;const c=B(a),m=P(a),y={option:a,style:s,col:c,index:`${u}_${i}`,preserve:!0},f=G(y);if(f)return f;if(a.render===h.FORM_LIST)return q(y);if((a.shouldUpdate??a.dependencies)||(m.shouldUpdate??m.dependencies))return K(y);const b=e=>!F(e.hidden)&&!e.onlyForLabel,v=p[i+1],I=v&&v.render===h.FORM_LIST,A=v&&!b(v);return i===(()=>{for(let e=p.length-1;e>=0;e--){const r=p[e];if(r.render===h.FORM_LIST)return e;if(b(r))return e}return-1})()||I||A?(delete m.dependencies,delete m.shouldUpdate,E(l,{span:c.span,style:s,children:E(t.Item,{label:V(a),labelCol:c.labelCol,wrapperCol:c.wrapperCol,preserve:!1,required:" "!==V(a)&&x(a.required),colon:" "!==V(a),...m,children:T("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[E("div",{style:{flex:1},children:E(t.Item,{noStyle:!0,rules:g(a),name:a.name,children:L(a)})}),u>=1?d.showRemoveButton&&E(o,{type:"primary",danger:!0,onClick:()=>n(e.name),children:d.removeButtonText}):d.showAddButton&&E(o,{type:"primary",onClick:()=>r(d.addDefaultValue,d.addInsertIndex),children:d.addButtonText})]})})},_(a)||i)):$(y)})},e.key)})})})},_(e)||r)};return E(f,{children:I.map((e,r)=>{const n=B(e),t=(e=>D&&e>=3?{display:"none"}:void 0)(r),l=P(e),s={option:e,style:t,col:n,index:r,preserve:!1};return G(s)||(e.render===h.FORM_LIST?q(s):(e.shouldUpdate??e.dependencies)||(l.shouldUpdate??l.dependencies)?K(s):$(s))})})};I.displayName="FormItemsRenderer";export{I as default};

package/components/FormBuilder/index.d.ts

@@ -1,6 +1,7 @@
-import type { FormOption } from "./FormItemsRenderer";
+import type { FormListOption, FormListUniqueProps, FormOption } from "./FormItemsRenderer";
+
 import FormBuilder from "./FormBuilder";
 
-export type { FormOption };
+export type { FormListOption, FormListUniqueProps, FormOption };
 
 export default FormBuilder;

package/components/Search/index.d.ts

@@ -1,9 +1,9 @@
 import type { FormInstance, FormProps } from "antd/es/form";
 import type { ReactElement, ReactNode } from "react";
-import type { FormOption } from "../FormBuilder";
+import type { FormListOption, FormListUniqueProps, FormOption } from "../FormBuilder";
 import type { DeepPartial } from "../FormBuilder/FormBuilder";
 
-export type { FormOption };
+export type { FormListOption, FormListUniqueProps, FormOption };
 
 /**
  * Search 组件属性

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",