react-forminate/dist/index-BxDVX67t.js

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

import { a as A, j as n } from "./index-BPZpMa2Y.js";
import F, { useMemo as t, useCallback as b } from "react";
const H = F.memo((k) => {
  const {
    eventHandlers: o,
    processedProps: e,
    fieldParams: a,
    fieldValue: r,
    fieldId: l,
    isTouched: v,
    setValue: g
  } = A(k), i = t(
    () => !e?.options,
    [e?.options]
  ), m = t(
    () => e?.layout || "column",
    [e?.layout]
  ), c = t(
    () => e?.singlePositiveAnswerValue || "true",
    [e?.singlePositiveAnswerValue]
  ), y = t(
    () => e?.singleNegativeAnswerValue || "",
    [e?.singleNegativeAnswerValue]
  ), N = t(
    () => ({
      display: "flex",
      flexDirection: m === "inline" ? "row" : "column",
      gap: m === "inline" ? "24px" : "8px",
      flexWrap: "wrap",
      ...e?.containerStyles
    }),
    [m, e?.containerStyles]
  ), d = t(
    () => ({
      display: "flex",
      alignItems: "center",
      gap: "4px",
      cursor: "pointer",
      ...e?.itemsStyles
    }),
    [e?.itemsStyles]
  ), u = b(
    (s) => i ? r === c || r === "true" : !!(s && Array.isArray(r) && r.includes(s)),
    [i, r, c]
  ), f = b(
    (s) => {
      const p = s.target.checked ? c : y;
      g(l, p);
    },
    [g, l, c, y]
  ), S = t(() => i ? /* @__PURE__ */ n.jsxs(
    "label",
    {
      htmlFor: l,
      style: d,
      className: e?.itemsClassName,
      children: [
        /* @__PURE__ */ n.jsx(
          "input",
          {
            ...a,
            ...o.htmlHandlers,
            id: l,
            type: "checkbox",
            checked: u(),
            onChange: f
          }
        ),
        e?.description && /* @__PURE__ */ n.jsx("span", { children: e.description })
      ]
    }
  ) : null, [
    i,
    l,
    d,
    e?.itemsClassName,
    e?.description,
    a,
    o.htmlHandlers,
    u,
    f
  ]), j = t(() => i || !e?.options ? null : e.options.map((s, p) => {
    const h = typeof s == "string", x = h ? s : s.value, w = h ? s : s.label, V = h ? s : `${s.value}-${p}`, C = `${l}-item-${x}`;
    return /* @__PURE__ */ n.jsxs(
      "label",
      {
        htmlFor: C,
        style: d,
        className: e.itemsClassName,
        children: [
          /* @__PURE__ */ n.jsx(
            "input",
            {
              ...a,
              ...o.htmlHandlers,
              id: C,
              value: x,
              checked: u(x)
            }
          ),
          /* @__PURE__ */ n.jsx("span", { children: w })
        ]
      },
      V
    );
  }), [
    i,
    e?.options,
    e?.itemsClassName,
    l,
    d,
    a,
    o.htmlHandlers,
    u
  ]);
  return /* @__PURE__ */ n.jsxs(
    "div",
    {
      "data-testid": a["data-testid"],
      "data-touched": v,
      style: N,
      children: [
        S,
        j
      ]
    }
  );
});
H.displayName = "CheckboxField";
export {
  H as default
};