react-form-dto 1.0.1 → 1.0.2
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/README.md +31 -0
- package/dist/index.d.ts +1 -1
- package/dist/react-form-dto.es.js +357 -335
- package/dist/react-form-dto.umd.js +2 -2
- package/dist/types/dto.d.ts +15 -0
- package/dist/utils/evaluateVisibleWhen.d.ts +8 -0
- package/dist/utils/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.ReactFormDTO={},m.React,m.MaterialUI))})(this,(function(m,g,c){"use strict";var S={exports:{}},R={};var D;function se(){if(D)return R;D=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(a,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:e,type:a,key:u,ref:o!==void 0?o:null,props:s}}return R.Fragment=n,R.jsx=t,R.jsxs=t,R}var _={};var z;function oe(){return z||(z=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===Te?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case C:return"Fragment";case fe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ge:return"SuspenseList";case Ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case pe:return"Portal";case he:return r.displayName||"Context";case be:return(r._context.displayName||"Context")+".Consumer";case ve:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case ye:return i=r.displayName||null,i!==null?i:e(r.type)||"Memo";case P:i=r._payload,r=r._init;try{return e(r(i))}catch{}}return null}function n(r){return""+r}function t(r){try{n(r);var i=!1}catch{i=!0}if(i){i=console;var p=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),n(r)}}function a(r){if(r===C)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===P)return"<...>";try{var i=e(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=$.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function u(r){if(K.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function d(r,i){function p(){ee||(ee=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function x(){var r=e(this.type);return re[r]||(re[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function v(r,i,p,b,F,L){var h=p.ref;return r={$$typeof:Q,type:r,key:i,props:p,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function T(r,i,p,b,F,L){var h=i.children;if(h!==void 0)if(b)if(je(h)){for(b=0;b<h.length;b++)E(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(h);if(K.call(i,"key")){h=e(r);var j=Object.keys(i).filter(function(Re){return Re!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ae[h+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,b,h,j,h),ne[h+b]=!0)}if(h=null,m!==void 0&&(n(m),h=""+m),s(i)&&(n(i.key),h=""+i.key),"key"in i){m={};for(var L in i)L!=="key"&&(m[L]=i[L])}else m=i;return h&&d(m,typeof t=="function"?t.displayName||t.name||"Unknown":t),x(t,h,m,o(),F,I)}function T(t){A(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===C&&(t._payload.status==="fulfilled"?A(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function A(t){return typeof t=="object"&&t!==null&&t.$$typeof===Z}var E=g,Z=Symbol.for("react.transitional.element"),de=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),pe=Symbol.for("react.profiler"),fe=Symbol.for("react.consumer"),be=Symbol.for("react.context"),he=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ve=Symbol.for("react.suspense_list"),ge=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),P=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=Object.prototype.hasOwnProperty,ye=Array.isArray,$=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(t){return t()}};var K,ee={},te=E.react_stack_bottom_frame.bind(E,a)(),re=$(u(a)),ne={};_.Fragment=O,_.jsx=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!1,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)},_.jsxs=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!0,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)}})()),_}var z;function se(){return z||(z=1,process.env.NODE_ENV==="production"?S.exports=ae():S.exports=oe()),S.exports}var l=se();function f(e,r="en"){return e?typeof e=="string"?e:e[r]||e.en||Object.values(e)[0]||"":""}function k(e,r="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,r)}):[]}function Y({field:e,value:r,onChange:n,error:u,locale:o="en"}){const a=k(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:s=>n(s.target.value),label:f(e.label,o),error:!!u,children:a?.map(s=>l.jsx(c.MenuItem,{value:s.value,children:s.label},s.label))}),u&&l.jsx(c.Typography,{variant:"caption",color:"error",children:u})]})}function W({field:e,value:r,onChange:n,error:u,locale:o}){return console.log("error",u),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:r||"",name:e.id,onChange:a=>n(a.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!u,helperText:u})}function M({field:e,value:r,onChange:n,error:u,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!r,onChange:a=>n(a.target.checked),disabled:e.disabled}),label:f(e.label,o)}),u&&l.jsx(c.FormHelperText,{children:u})]})}const V=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:a||[],value:r||null,onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},q=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:a||[],value:r||[],onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},B=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:r||"",onChange:a=>n(a.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!u,helperText:u}),U=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{const a=k(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!u,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:s=>n(s.target.value),children:(a||[]).map(s=>l.jsx(c.FormControlLabel,{value:s,control:l.jsx(c.Radio,{}),label:s.label,disabled:e.disabled},s.label))}),u&&l.jsx(c.FormHelperText,{children:u})]})},ue=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(W,{field:e,value:r,onChange:n,error:u,locale:o});case"select":return l.jsx(Y,{field:e,value:r,onChange:n,error:u,locale:o});case"autocomplete":return l.jsx(V,{field:e,value:r,onChange:n,error:u,locale:o});case"multi-autocomplete":return l.jsx(q,{field:e,value:r,onChange:n,error:u,locale:o});case"checkbox":return l.jsx(M,{field:e,value:r,onChange:n,error:u,locale:o});case"textarea":return l.jsx(B,{field:e,value:r,onChange:n,error:u,locale:o});case"radio":return l.jsx(U,{field:e,value:r,onChange:n,error:u,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},G=({field:e,value:r,onChange:n,error:u,renderers:o={},locale:a="en"})=>{const s=o[e.type]||ue;return l.jsx(s,{field:e,value:r,onChange:n,error:u,locale:a})};function le(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const J=({section:e,values:r,onChange:n,renderers:u,validateField:o,locale:a="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,a)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,a)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(c.Grid,{size:le(s.layout?.cols),children:l.jsx(G,{field:s,value:r[s.id],onChange:d=>n(s.id,d),renderers:u,error:o(s.id)?.join(","),locale:a})},s.id))})]}),ie={required:(e,r)=>e.required&&(r==null||r==="")?`${e.label} is required`:null,min:(e,r)=>e.type==="number"&&e.min!==void 0&&r<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,r)=>e.type==="number"&&e.max!==void 0&&r>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,r)=>typeof r=="string"&&e.minLength!==void 0&&r.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,r)=>typeof r=="string"&&e.maxLength!==void 0&&r.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,r)=>e.pattern&&typeof r=="string"&&!e.pattern.test(r)?`${e.label} is invalid`:null,options:(e,r)=>e.type==="select"&&e.options&&!e.options.includes(r)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,r)=>{if(e.type==="date"&&r){const n=new Date(r);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,r)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(r);if(typeof n=="string")return n}return null}},H=(e,r,n="en")=>{const u={};return e.sections.forEach(o=>{o.fields.forEach(a=>{const s=w(e,r,a.id);s.length>0&&(u[a.id]=s)})}),u},w=(e,r,n,u="en")=>{const o=e.sections.flatMap(x=>x.fields).find(x=>x.id===n);if(!o)return[];const a=o.validations||{},s=r[n],d=[],v=f(o.label,u);if(a.required&&(s==null||s==="")&&d.push(typeof a.required=="string"?a.required:`${v} is required`),a.min!==void 0&&typeof s=="number"&&s<a.min&&d.push(`${v} must be at least ${a.min}`),a.max!==void 0&&typeof s=="number"&&s>a.max&&d.push(`${v} must be at most ${a.max}`),a.minLength!==void 0&&typeof s=="string"&&s.length<a.minLength&&d.push(`${v} must be at least ${a.minLength} characters`),a.maxLength!==void 0&&typeof s=="string"&&s.length>a.maxLength&&d.push(`${v} must be at most ${a.maxLength} characters`),a.pattern&&typeof s=="string"&&!a.pattern.test(s)&&d.push(`${v} is invalid`),a.validate){const x=a.validate(s);x&&d.push(f(x,u))}return d};function X(e,r="en"){const[n,u]=g.useState({}),[o,a]=g.useState({});return{values:n,handleChange:(T,A)=>{u(E=>({...E,[T]:A})),a(E=>({...E,[T]:null}))},validateAll:()=>H(e,n,r),getValues:()=>n,getErrors:()=>o,validateField:T=>w(e,n,T,r)}}const ce=g.forwardRef(({dto:e,renderers:r,locale:n="en"},u)=>{const{values:o,handleChange:a,getValues:s,getErrors:d,validateAll:v,validateField:x}=X(e,n);return g.useImperativeHandle(u,()=>({getValues:s,getErrors:d,validateAll:v,validateField:x})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(y=>l.jsx(J,{section:y,values:o,onChange:a,renderers:r,validateField:x,locale:n},y.id))]})});p.AutoCompleteField=V,p.CheckBoxInput=M,p.Field=G,p.FormBuilder=ce,p.MultiAutoCompleteField=q,p.RadioInput=U,p.Section=J,p.SelectInput=Y,p.TextAreaInput=B,p.TextInput=W,p.useFormBuilder=X,p.validateAll=H,p.validateField=w,p.validationRules=ie,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
|
6
|
+
<%s key={someKey} {...props} />`,b,h,j,h),ae[h+b]=!0)}if(h=null,p!==void 0&&(t(p),h=""+p),u(i)&&(t(i.key),h=""+i.key),"key"in i){p={};for(var N in i)N!=="key"&&(p[N]=i[N])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),v(r,h,p,o(),F,L)}function E(r){k(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===P&&(r._payload.status==="fulfilled"?k(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function k(r){return typeof r=="object"&&r!==null&&r.$$typeof===Q}var y=g,Q=Symbol.for("react.transitional.element"),pe=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),$=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,je=Array.isArray,I=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(r){return r()}};var ee,re={},te=y.react_stack_bottom_frame.bind(y,s)(),ne=I(a(s)),ae={};_.Fragment=C,_.jsx=function(r,i,p){var b=1e4>$.recentlyCreatedOwnerStacks++;return T(r,i,p,!1,b?Error("react-stack-top-frame"):te,b?I(a(r)):ne)},_.jsxs=function(r,i,p){var b=1e4>$.recentlyCreatedOwnerStacks++;return T(r,i,p,!0,b?Error("react-stack-top-frame"):te,b?I(a(r)):ne)}})()),_}var Y;function ue(){return Y||(Y=1,process.env.NODE_ENV==="production"?S.exports=se():S.exports=oe()),S.exports}var l=ue();function f(e,n="en"){return e?typeof e=="string"?e:e[n]||e.en||Object.values(e)[0]||"":""}function A(e,n="en"){return e?e.map(t=>typeof t=="string"?{value:t,label:t}:{value:t.value,label:f(t.label,n)}):[]}function q({field:e,value:n,onChange:t,error:a,locale:o="en"}){const s=A(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:n,id:e.id,name:e.id,onChange:u=>t(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function W({field:e,value:n,onChange:t,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:n||"",name:e.id,onChange:s=>t(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function M({field:e,value:n,onChange:t,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!n,onChange:s=>t(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const V=({field:e,value:n,onChange:t,error:a,locale:o})=>{const s=A(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:n||null,onChange:(u,d)=>t(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},B=({field:e,value:n,onChange:t,error:a,locale:o})=>{const s=A(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:n||[],onChange:(u,d)=>t(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},U=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:n||"",onChange:s=>t(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),G=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>{const s=A(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:n||"",onChange:u=>t(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},le=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(W,{field:e,value:n,onChange:t,error:a,locale:o});case"select":return l.jsx(q,{field:e,value:n,onChange:t,error:a,locale:o});case"autocomplete":return l.jsx(V,{field:e,value:n,onChange:t,error:a,locale:o});case"multi-autocomplete":return l.jsx(B,{field:e,value:n,onChange:t,error:a,locale:o});case"checkbox":return l.jsx(M,{field:e,value:n,onChange:t,error:a,locale:o});case"textarea":return l.jsx(U,{field:e,value:n,onChange:t,error:a,locale:o});case"radio":return l.jsx(G,{field:e,value:n,onChange:t,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},J=({field:e,value:n,onChange:t,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||le;return l.jsx(u,{field:e,value:n,onChange:t,error:a,locale:s})};function ie(e){const n=e??12;return{xs:12,sm:n,md:n,lg:n,xl:n}}const ce={required:(e,n)=>e.required&&(n==null||n==="")?`${e.label} is required`:null,min:(e,n)=>e.type==="number"&&e.min!==void 0&&n<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,n)=>e.type==="number"&&e.max!==void 0&&n>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,n)=>typeof n=="string"&&e.minLength!==void 0&&n.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,n)=>typeof n=="string"&&e.maxLength!==void 0&&n.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,n)=>e.pattern&&typeof n=="string"&&!e.pattern.test(n)?`${e.label} is invalid`:null,options:(e,n)=>e.type==="select"&&e.options&&!e.options.includes(n)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,n)=>{if(e.type==="date"&&n){const t=new Date(n);if(e.minDate&&t<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&t>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,n)=>{if(e.customValidator&&typeof e.customValidator=="function"){const t=e.customValidator(n);if(typeof t=="string")return t}return null}},H=(e,n,t="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=O(e,n,s.id);u.length>0&&(a[s.id]=u)})}),a},O=(e,n,t,a="en")=>{const o=e.sections.flatMap(v=>v.fields).find(v=>v.id===t);if(!o)return[];const s=o.validations||{},u=n[t],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const v=s.validate(u);v&&d.push(f(v,a))}return d};function w(e,n){if(!e)return!0;if("field"in e){let t=n[e.field]??"";return Array.isArray(t)?t=t.map(a=>a.value??""):typeof t=="object"&&t!==null&&(t=t.value??""),e.equals!==void 0?t===e.equals:e.notEquals!==void 0?t!==e.notEquals:e.in!==void 0?Array.isArray(t)?e.in?t.some(a=>e.in.includes(a)):!1:e.in.includes(t):e.notIn!==void 0?Array.isArray(t)?t.every(a=>!e.notIn.includes(a)):!e.notIn.includes(t):e.greaterThan!==void 0?t>e.greaterThan:e.lessThan!==void 0?t<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>w(a,n));if(e.operator==="OR")return e.conditions.some(t=>w(t,n))}return!1}const X=({section:e,values:n,onChange:t,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>w(u.visibleWhen,n)&&l.jsx(c.Grid,{size:ie(u.layout?.cols),children:l.jsx(J,{field:u,value:n[u.id],onChange:d=>t(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function Z(e,n="en"){const[t,a]=g.useState({}),[o,s]=g.useState({});return{values:t,handleChange:(E,k)=>{a(y=>({...y,[E]:k})),s(y=>({...y,[E]:null}))},validateAll:()=>H(e,t,n),getValues:()=>t,getErrors:()=>o,validateField:E=>O(e,t,E,n)}}const de=g.forwardRef(({dto:e,renderers:n,locale:t="en"},a)=>{const{values:o,handleChange:s,getValues:u,getErrors:d,validateAll:x,validateField:v}=Z(e,t);return g.useImperativeHandle(a,()=>({getValues:u,getErrors:d,validateAll:x,validateField:v})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,t)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,t)}),e.sections.map(T=>l.jsx(X,{section:T,values:o,onChange:s,renderers:n,validateField:v,locale:t},T.id))]})});m.AutoCompleteField=V,m.CheckBoxInput=M,m.Field=J,m.FormBuilder=de,m.MultiAutoCompleteField=B,m.RadioInput=G,m.Section=X,m.SelectInput=q,m.TextAreaInput=U,m.TextInput=W,m.useFormBuilder=Z,m.validateAll=H,m.validateField=O,m.validationRules=ce,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types/dto.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ export type FieldDTO = {
|
|
|
22
22
|
defaultValue?: any;
|
|
23
23
|
layout?: LayoutDTO;
|
|
24
24
|
validations?: Validations;
|
|
25
|
+
visibleWhen?: Condition;
|
|
25
26
|
};
|
|
26
27
|
export type SectionDTO = {
|
|
27
28
|
id: string;
|
|
@@ -49,3 +50,17 @@ export type Validations = {
|
|
|
49
50
|
pattern?: RegExp;
|
|
50
51
|
validate?: (value: any) => I18nString | null;
|
|
51
52
|
};
|
|
53
|
+
export interface FieldCondition {
|
|
54
|
+
field: string;
|
|
55
|
+
equals?: any;
|
|
56
|
+
notEquals?: any;
|
|
57
|
+
in?: any[];
|
|
58
|
+
notIn?: any[];
|
|
59
|
+
greaterThan?: number;
|
|
60
|
+
lessThan?: number;
|
|
61
|
+
}
|
|
62
|
+
export interface ConditionGroup {
|
|
63
|
+
operator: "AND" | "OR";
|
|
64
|
+
conditions: Condition[];
|
|
65
|
+
}
|
|
66
|
+
export type Condition = FieldCondition | ConditionGroup;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Condition } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Evaluates a condition tree against form state.
|
|
4
|
+
* @param condition - The condition or group to evaluate
|
|
5
|
+
* @param formState - Current form values (key-value pairs)
|
|
6
|
+
* @returns boolean
|
|
7
|
+
*/
|
|
8
|
+
export declare function evaluateCondition(condition: Condition | undefined, formState: Record<string, any>): boolean;
|
package/dist/utils/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-form-dto",
|
|
3
3
|
"description": "A React library for building forms using DTOs with MUI and TypeScript.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"main": "dist/react-form-dto.umd.js",
|
|
6
6
|
"module": "dist/react-form-dto.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|