react-forminate/dist/index-Cl5mWUUW.js

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

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