react-forminate/dist/index-CwlpYfEE.cjs

React.js + Typescript package that creates dynamic UI forms based on the JSON schema

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-BHL74Jf6.cjs"),i=require("react"),F=({fieldId:t,label:u,required:p,className:g="",styles:j={},containerClassName:v="",containerStyles:h={},itemsClassName:E="",itemsStyles:N={}})=>{const{values:r,setValue:R,dynamicOptions:n,fetchDynamicOptions:b,formSchema:f}=s.useForm(),[a,o]=i.useState(1),[w,d]=i.useState([]),[c,m]=i.useState(!1),x=f.fields.find(e=>e.fieldId===t),l=x?.dynamicOptions?.pagination,y=l?.limit||10,P=async()=>{m(!0),await b(t,r,{page:a,limit:y}),d(n[t]||[]),m(!1)};i.useEffect(()=>{x?.dynamicOptions?.fetchOnInit!==!1&&P()},[a]),i.useEffect(()=>{d(n[t]||[])},[n[t]]);const S=e=>{R(t,e.value)},O=()=>o(e=>e+1),$=()=>o(e=>Math.max(e-1,1));return s.jsxRuntimeExports.jsxs(s.FieldWrapper,{id:t,label:u,required:p,className:v,styles:h,children:[s.jsxRuntimeExports.jsx("div",{className:`grid-view-container ${g}`,style:j,children:c?s.jsxRuntimeExports.jsx("div",{className:"grid-view-loading",children:"Loading..."}):w.map(e=>s.jsxRuntimeExports.jsxs("div",{className:`grid-item-wrapper ${E} ${r[t]===e.value?"selected":""}`,style:N,onClick:()=>S(e),children:[e.image&&s.jsxRuntimeExports.jsx("img",{src:e.image,alt:e.label,className:"grid-view-image"}),s.jsxRuntimeExports.jsx("div",{className:"grid-item-label",children:e.label}),e.price&&s.jsxRuntimeExports.jsxs("div",{className:"grid-item-price",children:["$",e.price]})]},e.value))}),s.jsxRuntimeExports.jsxs("div",{className:"grid-view-pagination",children:[s.jsxRuntimeExports.jsx("button",{className:"grid-view-button",onClick:$,disabled:a<=1||c,children:"Previous"}),s.jsxRuntimeExports.jsxs("span",{className:"text-sm",children:["Page ",a]}),s.jsxRuntimeExports.jsx("button",{className:"grid-view-button",onClick:O,disabled:!!(c||l?.maxPage&&a>=l.maxPage),children:"Next"})]})]})},k=i.memo(F);exports.default=k;