zy-react-library 1.3.20 → 1.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/FormBuilder/FormBuilder.d.ts +5 -0
- package/components/FormBuilder/FormBuilder.js +1 -1
- package/components/FormBuilder/FormItemsRenderer.d.ts +9 -1
- package/components/FormBuilder/FormItemsRenderer.js +1 -1
- package/components/HeaderBack/index.js +1 -1
- package/components/Page/index.js +1 -1
- package/package.json +1 -1
|
@@ -44,6 +44,11 @@ export interface FormBuilderProps<Values = any> extends Omit<FormProps, "form" |
|
|
|
44
44
|
form: FormInstance<Values>;
|
|
45
45
|
/** 表单提交时的回调函数 */
|
|
46
46
|
onFinish?: (values: Values) => void;
|
|
47
|
+
/** 历史记录对象,用于返回上一页,默认使用 window.history.back */
|
|
48
|
+
history?: {
|
|
49
|
+
goBack?: () => void;
|
|
50
|
+
[key: string]: any;
|
|
51
|
+
};
|
|
47
52
|
}
|
|
48
53
|
|
|
49
54
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Form as e,Spin as t,Row as o,Col as r,Space as i,Button as n,message as s}from"antd";import{useState as l,useEffect as a}from"react";import{throttle as u}from"throttle-debounce";import
|
|
1
|
+
import{Form as e,Spin as t,Row as o,Col as r,Space as i,Button as n,message as s}from"antd";import{useState as l,useEffect as a}from"react";import{throttle as u}from"throttle-debounce";import c from"./FormItemsRenderer.js";import{jsx as d,jsxs as m}from"react/jsx-runtime";const p=p=>{const{values:h,options:g,gutter:w=24,span:x=12,labelCol:y={span:4},useAutoGenerateRequired:b=!0,showActionButtons:B=!0,submitButtonText:f="提交",cancelButtonText:v="取消",showSubmitButton:A=!0,showCancelButton:C=!0,customActionButtons:F,extraActionButtons:T,history:k,loading:W=!1,...q}=p,[z,E]=l(window.innerWidth),R=u(50,()=>{const e=document.querySelector("#page-layout");e&&E(e.offsetWidth)});return a(()=>{const e=setTimeout(()=>{R()},0);return B&&window.addEventListener("resize",R),()=>{B&&window.removeEventListener("resize",R),clearTimeout(e)}},[B]),d(t,{spinning:W,children:m(e,{labelCol:y,scrollToFirstError:!0,wrapperCol:{span:24-y.span},initialValues:h,onFinishFailed:()=>{s.error("请补全必填项")},style:{width:`calc(100% - ${2*w}px)`,margin:"0 auto"},...q,children:[d(o,{gutter:w,children:d(c,{options:g,labelCol:y,span:x,gutter:w,useAutoGenerateRequired:b,initialValues:h})}),B&&m("div",{style:{position:"relative",zIndex:"9"},children:[d("div",{style:{height:"32px"}}),d(o,{style:{textAlign:"center",backgroundColor:"rgb(241, 241, 242)",padding:"10px 0",position:"fixed",bottom:"0",width:z,margin:"0 -44px"},children:d(r,{span:24,style:{textAlign:"center"},children:F||m(i,{children:[A&&d(n,{type:"primary",htmlType:"submit",children:f}),T,C&&d(n,{onClick:()=>{k?.goBack?k.goBack():window.history.back()},children:v})]})})})]})]})})};p.displayName="FormBuilder",p.useForm=e.useForm,p.useWatch=e.useWatch;export{p as default};
|
|
@@ -3,7 +3,7 @@ import type { FormItemProps, Rule } from "antd/es/form";
|
|
|
3
3
|
import type { FormListFieldData } from "antd/es/form/FormList";
|
|
4
4
|
import type { Gutter } from "antd/es/grid/row";
|
|
5
5
|
import type { NamePath } from "rc-field-form/lib/interface";
|
|
6
|
-
import type { ReactElement, ReactNode } from "react";
|
|
6
|
+
import type { CSSProperties, ReactElement, ReactNode } from "react";
|
|
7
7
|
import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
|
|
8
8
|
import type { DeepPartial } from "./FormBuilder";
|
|
9
9
|
|
|
@@ -131,6 +131,10 @@ export interface FormOptionBase<
|
|
|
131
131
|
dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Dependencies[]>;
|
|
132
132
|
/** 是否仅用于保存标签,不渲染到页面上,只在表单中保存数据,默认 false */
|
|
133
133
|
onlyForLabel?: IsOnlyForLabel;
|
|
134
|
+
/** Col 的内联样式,会合并到 Col 的 style 上,支持函数动态计算 */
|
|
135
|
+
colStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, CSSProperties | ((formValues: AllValues) => CSSProperties)>;
|
|
136
|
+
/** Col 内部、Form.Item 之前渲染的标题节点,支持函数动态计算 */
|
|
137
|
+
colTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode | ((formValues: AllValues) => ReactNode)>;
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
/**
|
|
@@ -157,6 +161,10 @@ export type FormOptionByRender<
|
|
|
157
161
|
checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>;
|
|
158
162
|
/** Form.List 独有的属性 */
|
|
159
163
|
formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: AllValues) => FormListUniqueProps) : never>;
|
|
164
|
+
/** FormList 每行的内联样式,仅 render 为 formList 时可用,支持函数按行计算 */
|
|
165
|
+
rowStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? CSSProperties | ((field: FormListFieldData, fieldIndex: number) => CSSProperties) : never>;
|
|
166
|
+
/** FormList 每行起始位置渲染的标题节点,仅 render 为 formList 时可用,支持函数按行计算 */
|
|
167
|
+
rowTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? ReactNode | ((field: FormListFieldData, fieldIndex: number) => ReactNode) : never>;
|
|
160
168
|
};
|
|
161
169
|
|
|
162
170
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as
|
|
1
|
+
import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as t,Form as n,Col as l,Divider as o,Row as s,Button as a,Checkbox as i,Radio as d,Select as u,InputNumber as c,Tooltip as p}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 f,Fragment as E,jsxs as T}from"react/jsx-runtime";const{TextArea:b}=r,{RangePicker:v}=t,I=({options:I,labelCol:A,gutter:R=24,span:w=12,collapse:Y=!1,useAutoGenerateRequired:D=!0,initialValues:C})=>{const N=n.useFormInstance(),M=()=>{const e=N.getFieldsValue();return 0===Object.keys(e).length&&C?C:e},P=e=>"function"==typeof e.componentProps?e.componentProps(M()):e.componentProps||{},U=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(M()):e.formItemProps||{};return((e,r)=>{[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}))})(e,r),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(!D)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(x(e.required)){const t=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(e.render);r.push({required:!0,message:`${t?"请输入":"请选择"}${e.label}`})}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??w,t=e.labelCol??(24===r?{span:A.span/2}:A);return{span:r,labelCol:t,wrapperCol:e.wrapperCol??{span:24-t.span}}},F=e=>"function"==typeof e.colStyle?e.colStyle(M()):e.colStyle,S=e=>"function"==typeof e.colTitle?e.colTitle(M()):e.colTitle,k=(e,r)=>(e.shouldUpdate??e.dependencies)||(r.shouldUpdate??r.dependencies),L=e=>"function"==typeof e?e(M()):e??!1,V=(e,r)=>({value:e[r.valueKey],label:"function"==typeof r.labelKey?r.labelKey(e):e[r.labelKey],disabled:e.disabled}),$=e=>{const n=P(e),o=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),a=e.render??h.INPUT,p=e.placeholder??`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER,h.INTEGER].includes(a)?"输入":"选择"}${e.label}`;switch(a){case h.INPUT:return f(r,{placeholder:p,maxLength:!1!==e.useConstraints?50:9999,...n});case h.TEXTAREA:return f(b,{placeholder:p,maxLength:!1!==e.useConstraints?500:9999,showCount:!0,rows:3,...n});case h.INPUT_NUMBER:case h.NUMBER:case h.INTEGER:return f(c,{placeholder:p,style:{width:"100%"},...n});case h.SELECT:return f(u,{placeholder:p,showSearch:{optionFilterProp:"children"},allowClear:!0,...n,children:(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=V(e,o);return f(u.Option,{value:r,disabled:n,children:t},r)})});case h.RADIO:return f(d.Group,{...n,children:(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=V(e,o);return f(d,{value:r,disabled:n,children:t},r)})});case h.CHECKBOX:return f(i.Group,{...n,children:e.checkboxCol?f(s,{children:(e.items||[]).map(r=>{const{value:t,label:n,disabled:s}=V(r,o);return f(l,{span:e.checkboxCol,children:f(i,{value:t,disabled:s,children:n})},t)})}):(e.items||[]).map(e=>{const{value:r,label:t,disabled:n}=V(e,o);return f(i,{value:r,disabled:n,children:t},r)})});case h.DATE:return f(t,{placeholder:p,format:"YYYY-MM-DD",style:{width:"100%"},...n});case h.DATE_MONTH:return f(t,{picker:"month",placeholder:p,format:"YYYY-MM",style:{width:"100%"},...n});case h.DATE_YEAR:return f(t,{picker:"year",placeholder:p,format:"YYYY",style:{width:"100%"},...n});case h.DATE_WEEK:return f(t,{picker:"week",placeholder:p,format:"YYYY-wo",style:{width:"100%"},...n});case h.DATE_RANGE:return f(v,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...n});case h.DATETIME:return f(t,{showTime:!0,placeholder:p,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...n});case h.DATETIME_RANGE:return f(v,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...n});case h.DIVIDER:return null;default:return a}},G=r=>r.tip?T(E,{children:[r.label,f(p,{title:r.tip,children:f(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,K=({option:e,style:r,col:t,index:o,preserve:s})=>{const a=U(e);return delete a.dependencies,delete a.shouldUpdate,L(e.hidden)?null:T(l,{span:t.span,style:{...r,...F(e)},children:[S(e),f(n.Item,{name:e.name,label:G(e),rules:g(e),labelCol:t.labelCol,wrapperCol:t.wrapperCol,preserve:s,required:!!D&&" "!==G(e)&&x(e.required),colon:" "!==G(e),...a,children:$(e)})]},_(e)||o)},q=({option:e,style:r,col:t,index:s,preserve:a})=>{const i=P(e);return e.customizeRender?f(l,{span:t.span,style:r,children:e.render},_(e)||s):e.onlyForLabel?f(n.Item,{name:e.name,noStyle:!0,preserve:a,children:f("input",{type:"hidden"})},_(e)||s):e.render===h.DIVIDER?f(l,{span:t.span,style:r,children:f(o,{orientation:"left",...i,children:e.label})},_(e)||s):null},O=({option:e,index:r,style:t,col:l,preserve:o})=>{const s=U(e);return f(n.Item,{noStyle:!0,preserve:o,shouldUpdate:e.shouldUpdate??s.shouldUpdate,dependencies:e.dependencies??s.dependencies,children:()=>K({option:e,style:t,col:l,index:r,preserve:o})},_(e)||r)},j=({option:e,index:r,col:t,style:o})=>{const i=(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),d=P(e);return T(l,{span:t.span,style:{...o,...F(e)},children:[S(e),f(n.List,{name:e.name,...d,children:(r,{add:t,remove:d,move:u})=>f(E,{children:r.map((r,c)=>{const p=((e,r,t,n,l,o)=>"function"==typeof e?e(r,t,{field:r,fieldIndex:t,add:n,remove:l,move:o}):e??[])(i.options,r,c,t,d,u),m=((e,r,t)=>"function"==typeof e.rowStyle?e.rowStyle(r,t):e.rowStyle)(e,r,c),y=((e,r,t)=>"function"==typeof e.rowTitle?e.rowTitle(r,t):e.rowTitle)(e,r,c);return T(s,{gutter:R,style:m,children:[y,p.map((e,s)=>{const u=B(e),m=U(e),y={option:e,style:o,col:u,index:`${c}_${s}`,preserve:!0},E=q(y);if(E)return E;if(e.render===h.FORM_LIST)return j(y);if(k(e,m))return O(y);const b=e=>!L(e.hidden)&&!e.onlyForLabel,v=p[s+1],I=v&&v.render===h.FORM_LIST,A=v&&!b(v);return s===(()=>{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,T(l,{span:u.span,style:{...o,...F(e)},children:[S(e),f(n.Item,{label:G(e),labelCol:u.labelCol,wrapperCol:u.wrapperCol,preserve:!1,required:!!D&&" "!==G(e)&&x(e.required),colon:" "!==G(e),...m,children:T("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[f("div",{style:{flex:1,minWidth:0},children:f(n.Item,{noStyle:!0,rules:g(e),name:e.name,children:$(e)})}),c>=1?i.showRemoveButton&&f(a,{type:"primary",danger:!0,onClick:()=>d(r.name),children:i.removeButtonText}):i.showAddButton&&f(a,{type:"primary",onClick:()=>t(i.addDefaultValue,i.addInsertIndex),children:i.addButtonText})]})})]},_(e)||s)):K(y)})]},r.key)})})})]},_(e)||r)};return f(E,{children:I.map((e,r)=>{const t=B(e),n=(e=>Y&&e>=3?{display:"none"}:void 0)(r),l=U(e),o={option:e,style:n,col:t,index:r,preserve:!1};return q(o)||(e.render===h.FORM_LIST?j(o):k(e,l)?O(o):K(o))})})};I.displayName="FormItemsRenderer";export{I as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ArrowLeftOutlined as e}from"@ant-design/icons";import{Divider as i}from"antd";import"./index.less";import{jsx as a,jsxs as r,Fragment as t}from"react/jsx-runtime";function c(c){const{title:n,history:o,previous:s=!0}=c;return a("div",{className:"header-back",children:r("div",{className:"action",children:[s&&r(t,{children:[r("div",{className:"back",onClick:()=>o?.goBack
|
|
1
|
+
import{ArrowLeftOutlined as e}from"@ant-design/icons";import{Divider as i}from"antd";import"./index.less";import{jsx as a,jsxs as r,Fragment as t}from"react/jsx-runtime";function c(c){const{title:n,history:o,previous:s=!0}=c;return a("div",{className:"header-back",children:r("div",{className:"action",children:[s&&r(t,{children:[r("div",{className:"back",onClick:()=>{o?.goBack?o.goBack():window.history.back()},children:[a(e,{style:{fontSize:14}}),a("span",{children:"返回"})]}),a(i,{type:"vertical",style:{backgroundColor:"#dcdfe6",marginLeft:15,marginRight:15}})]}),a("div",{className:"title",children:n})]})})}c.displayName="HeaderBack";export{c as default};
|
package/components/Page/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Spin as e,Space as t,Button as i}from"antd";import{useState as o,useEffect as n}from"react";import{throttle as r}from"throttle-debounce";import d from"../HeaderBack/index.js";import{jsx as a,jsxs as s}from"react/jsx-runtime";function c(c){const{headerTitle:l,history:p,isShowHeader:h=!0,headerPrevious:u=!0,isShowFooter:m=!0,isShowAllAction:g=!0,loading:y=!1,backButtonText:f="关闭",contentPadding:x="20px",customActionButtons:w,extraActionButtons:v,children:
|
|
1
|
+
import{Spin as e,Space as t,Button as i}from"antd";import{useState as o,useEffect as n}from"react";import{throttle as r}from"throttle-debounce";import d from"../HeaderBack/index.js";import{jsx as a,jsxs as s}from"react/jsx-runtime";function c(c){const{headerTitle:l,history:p,isShowHeader:h=!0,headerPrevious:u=!0,isShowFooter:m=!0,isShowAllAction:g=!0,loading:y=!1,backButtonText:f="关闭",contentPadding:x="20px",customActionButtons:w,extraActionButtons:v,children:k}=c,[b,B]=o(window.innerWidth),A=r(50,()=>{const e=document.querySelector("#page-layout");e&&B(e.offsetWidth)});return n(()=>{const e=setTimeout(()=>{A()},0);return g&&m&&window.addEventListener("resize",A),()=>{g&&m&&window.removeEventListener("resize",A),clearTimeout(e)}},[g,m]),a(e,{spinning:y,children:s("div",{className:"page-layout",id:"page-layout",children:[g&&h&&a(d,{title:l,history:p,previous:u}),s("div",{style:{padding:x},children:[k&&"function"==typeof k?k():k,g&&m&&s("div",{className:"page-layout-footer",style:{position:"relative",zIndex:"9"},children:[a("div",{style:{height:"52px"}}),a("div",{style:{textAlign:"center",backgroundColor:"rgb(241, 241, 242)",padding:"10px 0",position:"fixed",bottom:"0",width:b,margin:"0px -20px"},children:w||s(t,{children:[v,a(i,{onClick:()=>{p?.goBack?p.goBack():window.history.back()},children:f})]})})]})]})]})})}c.displayName="Page";export{c as default};
|