ynotsoft-dynamic-form 1.0.114 → 1.0.115
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/dist/dynamic-form.js
CHANGED
|
@@ -11598,6 +11598,7 @@ const Lg = ({
|
|
|
11598
11598
|
case "bool":
|
|
11599
11599
|
return String(T).toLowerCase() === "true" || T === !0;
|
|
11600
11600
|
case "date":
|
|
11601
|
+
case "datepicker":
|
|
11601
11602
|
return Nt(T).isValid() ? Nt(T).format("YYYY-MM-DD") : T;
|
|
11602
11603
|
case "datetime":
|
|
11603
11604
|
return Nt(T).isValid() ? Nt(T).format("YYYY-MM-DDTHH:mm:ss") : T;
|
|
@@ -11607,7 +11608,7 @@ const Lg = ({
|
|
|
11607
11608
|
}, D = {};
|
|
11608
11609
|
r.fields.forEach((T) => {
|
|
11609
11610
|
if (T.name) {
|
|
11610
|
-
const F = d[T.name], M = T.
|
|
11611
|
+
const F = d[T.name], M = T.type || "string", q = O(F, M);
|
|
11611
11612
|
o ? D[T.name] = {
|
|
11612
11613
|
value: q,
|
|
11613
11614
|
fieldType: M
|
|
@@ -142,4 +142,4 @@
|
|
|
142
142
|
`,children:"AM"}),c.jsx("button",{type:"button",onClick:()=>g("PM"),className:`
|
|
143
143
|
px-3 py-1 text-sm font-medium rounded
|
|
144
144
|
${m==="PM"?"bg-blue-600 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"}
|
|
145
|
-
`,children:"PM"})]})]}),c.jsxs("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 pt-3",children:[c.jsx("button",{type:"button",onClick:h,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),c.jsx("button",{type:"button",onClick:y,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})})]})})}function Th({message:e}){return c.jsx("div",{className:"rounded-lg bg-red-50 border border-red-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(dc,{"aria-hidden":"true",className:"size-5 text-red-500 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-red-900",children:e})]})})}function Ph({message:e}){return c.jsx("div",{className:"rounded-lg bg-amber-50 border border-amber-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(lc,{"aria-hidden":"true",className:"size-5 text-amber-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-amber-900",children:e})]})})}function _h({message:e}){return c.jsx("div",{className:"rounded-lg bg-green-50 border border-green-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(uc,{"aria-hidden":"true",className:"size-5 text-green-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-green-900",children:e})]})})}function Oh({message:e}){return c.jsx("div",{className:"rounded-lg bg-blue-50 border border-blue-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(vc,{"aria-hidden":"true",className:"size-5 text-blue-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-blue-900",children:e})]})})}function Mh({field:e}){const{variant:t="info",message:n,content:r}=e,o=n||r||"";switch(t.toLowerCase()){case"error":case"danger":return c.jsx(Th,{message:o});case"success":return c.jsx(_h,{message:o});case"warning":case"warn":return c.jsx(Ph,{message:o});default:return c.jsx(Oh,{message:o})}}function Dh(e){if(e instanceof Date)return e;if(typeof e=="string"&&e){const t=e.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(t){const[,o,s,a]=t,i=new Date(Number(o),Number(s)-1,Number(a));if(!isNaN(i.getTime()))return i}const n=e.includes("T")?e:e.replace(" ","T"),r=new Date(n);if(!isNaN(r.getTime()))return r}return null}const Mi=({apiClient:e,api_URL:t,footerMode:n="normal",formDefinition:r,returnType:o=!1,sendFormValues:s=()=>{},children:a,defaultValues:i={},onFieldsChange:l=()=>{},debugMode:u=!1})=>{const[d,m]=W.useState({...i}),[g,p]=W.useState({}),[y,h]=W.useState({}),[v,C]=W.useState({}),N=W.useRef({}),E=["hidden","linebreak","header","alert"],x=W.useMemo(()=>({file:ci,multifile:ci,dateRange:Dm,date:kh,dayTimePicker:Lm,time:Ah,hidden:ec,multiselect:tc,searchselect:Tc,select:qd,email:Kd,html:xf,checkbox:Sf,radiogroup:Eh,input:aa,number:Xd,textarea:Im,header:Nh,alert:Mh,linebreak:Xm}),[]),S=async(w,k=null)=>{if(!(w.optionsUrl&&!w.preloadOptions)){if(!e){const M=`apiClient prop is required when using fields with optionsUrl. Field "${w.name}" requires optionsUrl but no apiClient was provided.`;u&&console.error(M),nn.toast.error(M);return}try{const M=await e(`/${w.optionsUrl}`);let O=[];w.type==="select"?O=[{value:"",label:`Select ${w.label.toLowerCase()}`},...M.data]:O=[...M.data.map(I=>({value:I.value,label:I.label}))],r.fields.forEach(I=>{I.name===w.name&&(I.options=O)})}catch(M){u&&console.error(`Failed to load options for ${w.name}:`,M)}}};W.useEffect(()=>{if(r?.fields&&r.fields.length>0){if(!r.fields.some(M=>M.value))return;r.fields.forEach(M=>{M.optionsUrl&&S(M)});const k={};r.fields.forEach(M=>{if(!M.name)return;const O=M.type==="multiselect"||M.type==="searchselect"||M.type==="checkbox"&&M.options&&M.options.length>0;let I=i[M.name]??M.value??(O?[]:"");["date","datetime","datepicker"].includes(M.type?.toLowerCase())&&I&&(I=Dh(I)||I),k[M.name]=I}),m(k)}},[r]);const A=(w,k,M)=>{const O=typeof k=="object"&&k!==null&&!Array.isArray(k)&&!(k instanceof Date),I=k==null||typeof k=="string"&&k.trim()===""||Array.isArray(k)&&k.length===0||w.type==="checkbox"&&k===!1||O&&Object.keys(k).length===0;if(w.required&&I)return u&&console.warn(`VALIDATION FAILED (REQUIRED): ${w.name} is empty.`),`${w.label} is required`;if(I&&!w.required)return null;if(w.validate){const T=w.validate(k,M);if(T)return T}if(w.type==="email"&&k&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(k))return"Please enter a valid email address";if(w.type==="number"){if(w.min!==void 0&&k<w.min)return`${w.label} must be at least ${w.min}`;if(w.max!==void 0&&k>w.max)return`${w.label} must be no more than ${w.max}`}return w.type==="date"&&k&&!yt(k).isValid()?`${w.label} must be a valid date`:w.maxLength&&k&&k.length>w.maxLength?`${w.label} must not exceed ${w.maxLength} characters`:null},_=(w,k)=>{const M=r.fields.find(I=>I.name===w);if(!M)return;const O={...d};M.type==="multiselect"||M.type==="searchselect"?Array.isArray(k)?O[w]=k:k&&k.target&&k.target.selectedOptions?O[w]=Array.from(k.target.selectedOptions).map(I=>I.value):O[w]=k:M.type==="dateRange"?O[w]=[{startDate:k.from,endDate:k.to||k.from,key:"selection"}]:M.type==="dayTimePicker"?O[w]=k?yt(k).format("YYYY-MM-DD HH:mm:ss"):"":M.type==="number"?O[w]=k===""?"":Number(k):O[w]=k,M.type==="select"&&r.fields.forEach(I=>{if(I.showIf&&!I.showIf(O)){const T=I.type==="multiselect"||I.type==="searchselect"||I.type==="checkbox"&&I.options&&I.options.length>0;O[I.name]=T?[]:""}}),r.fields.forEach(I=>{if(typeof I.disabled=="function"&&I.disabled(O)){const T=I.type==="multiselect"||I.type==="searchselect"||I.type==="checkbox"&&I.options&&I.options.length>0;O[I.name]=T?[]:""}}),m(O)},P=w=>{h({...y,[w]:!0})},$=w=>{w.preventDefault();const k={};r.fields.forEach(O=>{O.name&&(k[O.name]=!0)}),h(k);const M={};if(r.fields.forEach(O=>{if(O.name&&(!O.showIf||O.showIf(d))){const I=A(O,d[O.name],d);I&&(M[O.name]=I)}}),p(M),Object.keys(M).length===0){const O=(T,F)=>{if(T===""||T===null||T===void 0)return null;const D=F?.toLowerCase();if(Array.isArray(T))return D==="number"||D==="integer"?T.map(q=>q===""?null:Number(q)):T;switch(D){case"number":case"integer":case"float":return Number(T);case"boolean":case"bool":return String(T).toLowerCase()==="true"||T===!0;case"date":return yt(T).isValid()?yt(T).format("YYYY-MM-DD"):T;case"datetime":return yt(T).isValid()?yt(T).format("YYYY-MM-DDTHH:mm:ss"):T;default:return T}},I={};r.fields.forEach(T=>{if(T.name){const F=d[T.name],D=T.
|
|
145
|
+
`,children:"PM"})]})]}),c.jsxs("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 pt-3",children:[c.jsx("button",{type:"button",onClick:h,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),c.jsx("button",{type:"button",onClick:y,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})})]})})}function Th({message:e}){return c.jsx("div",{className:"rounded-lg bg-red-50 border border-red-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(dc,{"aria-hidden":"true",className:"size-5 text-red-500 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-red-900",children:e})]})})}function Ph({message:e}){return c.jsx("div",{className:"rounded-lg bg-amber-50 border border-amber-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(lc,{"aria-hidden":"true",className:"size-5 text-amber-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-amber-900",children:e})]})})}function _h({message:e}){return c.jsx("div",{className:"rounded-lg bg-green-50 border border-green-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(uc,{"aria-hidden":"true",className:"size-5 text-green-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-green-900",children:e})]})})}function Oh({message:e}){return c.jsx("div",{className:"rounded-lg bg-blue-50 border border-blue-100 p-4 shadow-sm",children:c.jsxs("div",{className:"flex items-center gap-3",children:[c.jsx(vc,{"aria-hidden":"true",className:"size-5 text-blue-600 shrink-0"}),c.jsx("span",{className:"text-sm font-medium text-blue-900",children:e})]})})}function Mh({field:e}){const{variant:t="info",message:n,content:r}=e,o=n||r||"";switch(t.toLowerCase()){case"error":case"danger":return c.jsx(Th,{message:o});case"success":return c.jsx(_h,{message:o});case"warning":case"warn":return c.jsx(Ph,{message:o});default:return c.jsx(Oh,{message:o})}}function Dh(e){if(e instanceof Date)return e;if(typeof e=="string"&&e){const t=e.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(t){const[,o,s,a]=t,i=new Date(Number(o),Number(s)-1,Number(a));if(!isNaN(i.getTime()))return i}const n=e.includes("T")?e:e.replace(" ","T"),r=new Date(n);if(!isNaN(r.getTime()))return r}return null}const Mi=({apiClient:e,api_URL:t,footerMode:n="normal",formDefinition:r,returnType:o=!1,sendFormValues:s=()=>{},children:a,defaultValues:i={},onFieldsChange:l=()=>{},debugMode:u=!1})=>{const[d,m]=W.useState({...i}),[g,p]=W.useState({}),[y,h]=W.useState({}),[v,C]=W.useState({}),N=W.useRef({}),E=["hidden","linebreak","header","alert"],x=W.useMemo(()=>({file:ci,multifile:ci,dateRange:Dm,date:kh,dayTimePicker:Lm,time:Ah,hidden:ec,multiselect:tc,searchselect:Tc,select:qd,email:Kd,html:xf,checkbox:Sf,radiogroup:Eh,input:aa,number:Xd,textarea:Im,header:Nh,alert:Mh,linebreak:Xm}),[]),S=async(w,k=null)=>{if(!(w.optionsUrl&&!w.preloadOptions)){if(!e){const M=`apiClient prop is required when using fields with optionsUrl. Field "${w.name}" requires optionsUrl but no apiClient was provided.`;u&&console.error(M),nn.toast.error(M);return}try{const M=await e(`/${w.optionsUrl}`);let O=[];w.type==="select"?O=[{value:"",label:`Select ${w.label.toLowerCase()}`},...M.data]:O=[...M.data.map(I=>({value:I.value,label:I.label}))],r.fields.forEach(I=>{I.name===w.name&&(I.options=O)})}catch(M){u&&console.error(`Failed to load options for ${w.name}:`,M)}}};W.useEffect(()=>{if(r?.fields&&r.fields.length>0){if(!r.fields.some(M=>M.value))return;r.fields.forEach(M=>{M.optionsUrl&&S(M)});const k={};r.fields.forEach(M=>{if(!M.name)return;const O=M.type==="multiselect"||M.type==="searchselect"||M.type==="checkbox"&&M.options&&M.options.length>0;let I=i[M.name]??M.value??(O?[]:"");["date","datetime","datepicker"].includes(M.type?.toLowerCase())&&I&&(I=Dh(I)||I),k[M.name]=I}),m(k)}},[r]);const A=(w,k,M)=>{const O=typeof k=="object"&&k!==null&&!Array.isArray(k)&&!(k instanceof Date),I=k==null||typeof k=="string"&&k.trim()===""||Array.isArray(k)&&k.length===0||w.type==="checkbox"&&k===!1||O&&Object.keys(k).length===0;if(w.required&&I)return u&&console.warn(`VALIDATION FAILED (REQUIRED): ${w.name} is empty.`),`${w.label} is required`;if(I&&!w.required)return null;if(w.validate){const T=w.validate(k,M);if(T)return T}if(w.type==="email"&&k&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(k))return"Please enter a valid email address";if(w.type==="number"){if(w.min!==void 0&&k<w.min)return`${w.label} must be at least ${w.min}`;if(w.max!==void 0&&k>w.max)return`${w.label} must be no more than ${w.max}`}return w.type==="date"&&k&&!yt(k).isValid()?`${w.label} must be a valid date`:w.maxLength&&k&&k.length>w.maxLength?`${w.label} must not exceed ${w.maxLength} characters`:null},_=(w,k)=>{const M=r.fields.find(I=>I.name===w);if(!M)return;const O={...d};M.type==="multiselect"||M.type==="searchselect"?Array.isArray(k)?O[w]=k:k&&k.target&&k.target.selectedOptions?O[w]=Array.from(k.target.selectedOptions).map(I=>I.value):O[w]=k:M.type==="dateRange"?O[w]=[{startDate:k.from,endDate:k.to||k.from,key:"selection"}]:M.type==="dayTimePicker"?O[w]=k?yt(k).format("YYYY-MM-DD HH:mm:ss"):"":M.type==="number"?O[w]=k===""?"":Number(k):O[w]=k,M.type==="select"&&r.fields.forEach(I=>{if(I.showIf&&!I.showIf(O)){const T=I.type==="multiselect"||I.type==="searchselect"||I.type==="checkbox"&&I.options&&I.options.length>0;O[I.name]=T?[]:""}}),r.fields.forEach(I=>{if(typeof I.disabled=="function"&&I.disabled(O)){const T=I.type==="multiselect"||I.type==="searchselect"||I.type==="checkbox"&&I.options&&I.options.length>0;O[I.name]=T?[]:""}}),m(O)},P=w=>{h({...y,[w]:!0})},$=w=>{w.preventDefault();const k={};r.fields.forEach(O=>{O.name&&(k[O.name]=!0)}),h(k);const M={};if(r.fields.forEach(O=>{if(O.name&&(!O.showIf||O.showIf(d))){const I=A(O,d[O.name],d);I&&(M[O.name]=I)}}),p(M),Object.keys(M).length===0){const O=(T,F)=>{if(T===""||T===null||T===void 0)return null;const D=F?.toLowerCase();if(Array.isArray(T))return D==="number"||D==="integer"?T.map(q=>q===""?null:Number(q)):T;switch(D){case"number":case"integer":case"float":return Number(T);case"boolean":case"bool":return String(T).toLowerCase()==="true"||T===!0;case"date":case"datepicker":return yt(T).isValid()?yt(T).format("YYYY-MM-DD"):T;case"datetime":return yt(T).isValid()?yt(T).format("YYYY-MM-DDTHH:mm:ss"):T;default:return T}},I={};r.fields.forEach(T=>{if(T.name){const F=d[T.name],D=T.type||"string",q=O(F,D);o?I[T.name]={value:q,fieldType:D}:I[T.name]=q}}),u?console.log("Form submitted with values:",I):s(I)}else nn.toast.error("Please correct the errors in the form")};W.useEffect(()=>{l(d)},[d,l]);const z={green:"border-green-500 bg-green-50",blue:"border-blue-500 bg-blue-50",red:"border-red-500 bg-red-50",yellow:"border-yellow-500 bg-yellow-50",purple:"border-purple-500 bg-purple-50",indigo:"border-indigo-500 bg-indigo-50",gray:"border-gray-500 bg-gray-50",pink:"border-pink-500 bg-pink-50",orange:"border-orange-500 bg-orange-50"};function H(w,k,M){const O=`${k.name}-error`;if(u&&(M?console.log(`[fieldFormat RENDER] Rendering error for ${k.name}: ${M}`):g[k.name]&&console.log(`[fieldFormat RENDER] Error exists in state for ${k.name} but not passed in props!`)),E.includes(k.type))return c.jsx("div",{className:k.class||"col-span-full",children:w});const I=k.containerStyle,T=k.color||"blue",F=I==="card"?`rounded-lg border text-card-foreground shadow-sm p-4 ${k.containerClassName||z[T]||z.blue}`:"",D=c.jsxs(c.Fragment,{children:[k.label&&c.jsxs("label",{htmlFor:k.name,className:"block text-sm font-medium mb-1",children:[k.label,k.required&&c.jsx("span",{className:"text-red-500 ml-1","aria-hidden":"true",children:"*"})]}),c.jsx("div",{children:W.cloneElement(w,{"aria-describedby":M?O:void 0,"aria-invalid":!!M,"aria-required":k.required})}),k.description&&c.jsx("p",{className:"text-xs mt-1.5 text-gray-400",children:k.description}),M&&c.jsx("p",{id:O,className:"text-sm text-red-500 mt-1",role:"alert",children:M})]});return c.jsx("div",{className:"mb-4",children:I==="card"?c.jsx("div",{className:F,children:D}):D})}const G=w=>{if(w.showIf&&!w.showIf(d))return null;const k=x[w.type]||aa;if(d[w.name]===void 0){const I=w.type==="multiselect"||w.type==="searchselect"||w.type==="checkbox"&&w.options&&w.options.length>0;d[w.name]=w.value!==void 0?w.value:I?[]:""}const M=g[w.name]?g[w.name]:null,O=typeof w.disabled=="function"?w.disabled(d):!!w.disabled;return H(c.jsx(k,{field:w,formValues:d,handleChange:_,handleBlur:()=>P(w.name),setCharCounts:C,charCount:v[w.name]||0,api_URL:t,error:M,fileInputRefs:N,disabled:O,apiClient:e}),w,M)};return c.jsxs("form",{onSubmit:$,className:"grid grid-cols-12 gap-x-4 mx-auto w-full ",children:[r?r.fields.map(w=>c.jsx("div",{className:`${w.class||"col-span-full"} `,children:G(w)},w.name+w.type)):c.jsx("div",{children:"Loading..."}),c.jsx("div",{className:n==="sticky"?"absolute col-span-full w-full bottom-0 bg-white py-4 flex justify-end gap-2 z-50":"col-span-full mt-4 flex justify-end gap-2",children:W.Children.map(a,w=>W.isValidElement(w)&&w.props.onClick?W.cloneElement(w,{onClick:k=>{w.props.onClick(d,k)}}):w)})]})};me.DynamicForm=Mi,me.default=Mi,Object.defineProperties(me,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|