ynotsoft-dynamic-form 1.0.131 → 1.0.132
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
|
@@ -11568,7 +11568,8 @@ const $g = ({
|
|
|
11568
11568
|
if (!P || !P.name) return;
|
|
11569
11569
|
const F = P.type === "multiselect" || P.type === "searchselect" || P.type === "checkbox" && P.options && P.options.length > 0;
|
|
11570
11570
|
let N = i[P.name] ?? P.value ?? (F ? [] : "");
|
|
11571
|
-
|
|
11571
|
+
const _ = P.type?.toLowerCase();
|
|
11572
|
+
["datetime", "daytimepicker"].includes(_) && N && (N = Eg(N) || N), R[P.name] = N;
|
|
11572
11573
|
}), h(R), E.current = !0;
|
|
11573
11574
|
}
|
|
11574
11575
|
}, [r]);
|
|
@@ -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
|
${h==="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:m,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:b,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 Ph({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 _h({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 Oh({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 Mh({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(yc,{"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 Dh({field:e}){const{variant:t="info",message:n,content:r}=e,o=n||r||"";switch(t.toLowerCase()){case"error":case"danger":return c.jsx(Ph,{message:o});case"success":return c.jsx(Oh,{message:o});case"warning":case"warn":return c.jsx(_h,{message:o});default:return c.jsx(Mh,{message:o})}}function Ih(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,h]=R.useState({...i}),[g,p]=R.useState({}),[b,m]=R.useState({}),[y,S]=R.useState({}),k=R.useRef({}),E=R.useRef(!1),w=["hidden","linebreak","header","alert"],x=R.useMemo(()=>({file:ci,multifile:ci,dateRange:Im,date:Ah,dayTimePicker:Fm,time:Th,hidden:ec,multiselect:tc,searchselect:Pc,select:Kd,email:Xd,html:Sf,checkbox:Cf,radiogroup:Nh,input:aa,number:Qd,textarea:Lm,header:kh,alert:Dh,linebreak:Qm}),[]),A=async(C,P=null)=>{if(!(C.optionsUrl&&!C.preloadOptions)){if(!e){const _=`apiClient prop is required when using fields with optionsUrl. Field "${C.name}" requires optionsUrl but no apiClient was provided.`;u&&console.error(_),nn.toast.error(_);return}try{const _=await e(`/${C.optionsUrl}`);let F=[];C.type==="select"?F=[{value:"",label:`Select ${C.label.toLowerCase()}`},..._.data]:F=[..._.data.map(N=>({value:N.value,label:N.label}))],r.fields.forEach(N=>{N&&N.name===C.name&&(N.options=F)})}catch(_){u&&console.error(`Failed to load options for ${C.name}:`,_)}}};R.useEffect(()=>{if(!E.current&&r?.fields&&r.fields.length>0){if(!r.fields.some(_=>_&&_.value))return;r.fields.forEach(_=>{_&&_.optionsUrl&&A(_)});const P={};r.fields.forEach(_=>{if(!_||!_.name)return;const F=_.type==="multiselect"||_.type==="searchselect"||_.type==="checkbox"&&_.options&&_.options.length>0;let N=i[_.name]??_.value??(F?[]:"");["
|
|
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:m,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:b,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 Ph({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 _h({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 Oh({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 Mh({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(yc,{"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 Dh({field:e}){const{variant:t="info",message:n,content:r}=e,o=n||r||"";switch(t.toLowerCase()){case"error":case"danger":return c.jsx(Ph,{message:o});case"success":return c.jsx(Oh,{message:o});case"warning":case"warn":return c.jsx(_h,{message:o});default:return c.jsx(Mh,{message:o})}}function Ih(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,h]=R.useState({...i}),[g,p]=R.useState({}),[b,m]=R.useState({}),[y,S]=R.useState({}),k=R.useRef({}),E=R.useRef(!1),w=["hidden","linebreak","header","alert"],x=R.useMemo(()=>({file:ci,multifile:ci,dateRange:Im,date:Ah,dayTimePicker:Fm,time:Th,hidden:ec,multiselect:tc,searchselect:Pc,select:Kd,email:Xd,html:Sf,checkbox:Cf,radiogroup:Nh,input:aa,number:Qd,textarea:Lm,header:kh,alert:Dh,linebreak:Qm}),[]),A=async(C,P=null)=>{if(!(C.optionsUrl&&!C.preloadOptions)){if(!e){const _=`apiClient prop is required when using fields with optionsUrl. Field "${C.name}" requires optionsUrl but no apiClient was provided.`;u&&console.error(_),nn.toast.error(_);return}try{const _=await e(`/${C.optionsUrl}`);let F=[];C.type==="select"?F=[{value:"",label:`Select ${C.label.toLowerCase()}`},..._.data]:F=[..._.data.map(N=>({value:N.value,label:N.label}))],r.fields.forEach(N=>{N&&N.name===C.name&&(N.options=F)})}catch(_){u&&console.error(`Failed to load options for ${C.name}:`,_)}}};R.useEffect(()=>{if(!E.current&&r?.fields&&r.fields.length>0){if(!r.fields.some(_=>_&&_.value))return;r.fields.forEach(_=>{_&&_.optionsUrl&&A(_)});const P={};r.fields.forEach(_=>{if(!_||!_.name)return;const F=_.type==="multiselect"||_.type==="searchselect"||_.type==="checkbox"&&_.options&&_.options.length>0;let N=i[_.name]??_.value??(F?[]:"");const M=_.type?.toLowerCase();["datetime","daytimepicker"].includes(M)&&N&&(N=Ih(N)||N),P[_.name]=N}),h(P),E.current=!0}},[r]);const O=(C,P,_)=>{const F=typeof P=="object"&&P!==null&&!Array.isArray(P)&&!(P instanceof Date),N=P==null||typeof P=="string"&&P.trim()===""||Array.isArray(P)&&P.length===0||C.type==="checkbox"&&P===!1||F&&Object.keys(P).length===0;if(C.required&&N)return u&&console.warn(`VALIDATION FAILED (REQUIRED): ${C.name} is empty.`),`${C.label} is required`;if(N&&!C.required)return null;if(C.validate){const M=C.validate(P,_);if(M)return M}if(C.type==="email"&&P&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(P))return"Please enter a valid email address";if(C.type==="number"){if(C.min!==void 0&&P<C.min)return`${C.label} must be at least ${C.min}`;if(C.max!==void 0&&P>C.max)return`${C.label} must be no more than ${C.max}`}return C.type==="date"&&P&&!yt(P).isValid()?`${C.label} must be a valid date`:C.maxLength&&P&&P.length>C.maxLength?`${C.label} must not exceed ${C.maxLength} characters`:null},T=(C,P)=>{const _=r.fields.find(N=>N&&N.name===C);if(!_)return;const F={...d};_.type==="multiselect"||_.type==="searchselect"?Array.isArray(P)?F[C]=P:P&&P.target&&P.target.selectedOptions?F[C]=Array.from(P.target.selectedOptions).map(N=>N.value):F[C]=P:_.type==="dateRange"?F[C]=[{startDate:P.from,endDate:P.to||P.from,key:"selection"}]:_.type==="dayTimePicker"?F[C]=P?yt(P).format("YYYY-MM-DD HH:mm:ss"):"":_.type==="number"?F[C]=P===""?"":Number(P):F[C]=P,_.type==="select"&&r.fields.forEach(N=>{if(N&&N.showIf&&!N.showIf(F)){const M=N.type==="multiselect"||N.type==="searchselect"||N.type==="checkbox"&&N.options&&N.options.length>0;F[N.name]=M?[]:""}}),r.fields.forEach(N=>{if(N&&typeof N.disabled=="function"&&N.disabled(F)){const M=N.type==="multiselect"||N.type==="searchselect"||N.type==="checkbox"&&N.options&&N.options.length>0;F[N.name]=M?[]:""}}),h(F)},z=C=>{m({...b,[C]:!0})},$=C=>{C.preventDefault();const P={};r.fields.forEach(F=>{F&&F.name&&(P[F.name]=!0)}),m(P);const _={};if(r.fields.forEach(F=>{if(!(!F||!F.name)&&(!F.showIf||F.showIf(d))){const N=O(F,d[F.name],d);N&&(_[F.name]=N)}}),p(_),Object.keys(_).length===0){const F=(M,D)=>{if(M===""||M===null||M===void 0)return null;const j=D?.toLowerCase();if(Array.isArray(M))return j==="number"||j==="integer"?M.map(se=>se===""?null:Number(se)):M;switch(j){case"number":case"integer":case"float":return Number(M);case"boolean":case"bool":return String(M).toLowerCase()==="true"||M===!0;case"date":case"datepicker":return yt(M).isValid()?yt(M).format("YYYY-MM-DD"):M;case"datetime":return yt(M).isValid()?yt(M).format("YYYY-MM-DDTHH:mm:ss"):M;default:return M}},N={};r.fields.forEach(M=>{if(M&&M.name){const D=d[M.name],j=M.type||"string",se=F(D,j);o?N[M.name]={value:se,fieldType:j}:N[M.name]=se}}),u?console.log("Form submitted with values:",N):s(N)}else nn.toast.error("Please correct the errors in the form")};R.useEffect(()=>{l(d)},[d,l]);const U={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 q(C,P,_){const F=`${P.name}-error`;if(u&&(_?console.log(`[fieldFormat RENDER] Rendering error for ${P.name}: ${_}`):g[P.name]&&console.log(`[fieldFormat RENDER] Error exists in state for ${P.name} but not passed in props!`)),w.includes(P.type))return c.jsx("div",{className:P.class||"col-span-full",children:C});const N=P.containerStyle,M=P.color||"blue",D=N==="card"?`rounded-lg border text-card-foreground shadow-sm p-4 ${P.containerClassName||U[M]||U.blue}`:"",j=c.jsxs(c.Fragment,{children:[P.label&&c.jsxs("label",{htmlFor:P.name,className:"block text-sm font-medium mb-1",children:[P.label,P.required&&c.jsx("span",{className:"text-red-500 ml-1","aria-hidden":"true",children:"*"})]}),c.jsx("div",{children:R.cloneElement(C,{"aria-describedby":_?F:void 0,"aria-invalid":!!_,"aria-required":P.required})}),P.description&&c.jsx("p",{className:"text-xs mt-1.5 text-gray-400",children:P.description}),_&&c.jsx("p",{id:F,className:"text-sm text-red-500 mt-1",role:"alert",children:_})]});return c.jsx("div",{className:"mb-4",children:N==="card"?c.jsx("div",{className:D,children:j}):j})}const I=C=>{if(C.showIf&&!C.showIf(d))return null;const P=x[C.type]||aa;if(d[C.name]===void 0){const N=C.type==="multiselect"||C.type==="searchselect"||C.type==="checkbox"&&C.options&&C.options.length>0;d[C.name]=C.value!==void 0?C.value:N?[]:""}const _=g[C.name]?g[C.name]:null,F=typeof C.disabled=="function"?C.disabled(d):!!C.disabled;return q(c.jsx(P,{field:C,formValues:d,handleChange:T,handleBlur:()=>z(C.name),setCharCounts:S,charCount:y[C.name]||0,api_URL:t,error:_,fileInputRefs:k,disabled:F,apiClient:e}),C,_)};return c.jsxs("form",{onSubmit:$,className:"grid grid-cols-12 gap-x-4 mx-auto w-full ",children:[r?r.fields.filter(C=>C).map(C=>c.jsx("div",{className:`${C.class||"col-span-full"} `,children:I(C)},C.name+C.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:R.Children.map(a,C=>R.isValidElement(C)&&C.props.onClick?R.cloneElement(C,{onClick:P=>{C.props.onClick(d,P)}}):C)})]})};me.DynamicForm=Mi,me.default=Mi,Object.defineProperties(me,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|