@ea-lab/reactive-json/dist/component/element/form/CheckBoxField.js

A REACT-based lib that transforms JSON (or YAML) into interactive HTML markup.

import { jsxs as h, jsx as o, Fragment as V } from "react/jsx-runtime";
import { useContext as I, useRef as w, useMemo as G } from "react";
import { ActionDependant as S } from "../../../engine/Actions.js";
import { useEvaluatedAttributes as f, evaluateTemplateValue as F } from "../../../engine/TemplateSystem.js";
import { GlobalDataContext as _ } from "../../../engine/GlobalDataContext.js";
import { TemplateContext as q } from "../../../engine/TemplateContext.js";
import { propsDataLocationToPathAndValue as z } from "../../../engine/utility/formElementsCommon.js";
import { View as J } from "../../../engine/View.js";
const at = ({ props: t, datafield: R, path: A, currentData: m }) => {
  const l = I(_), b = I(q), p = w(null), v = f(t.attributes), s = f(t.inputAttributes ?? []), y = f(t.labelAttributes ?? []), { formData: n, formDataPath: c } = z({
    currentPath: A,
    datafield: R,
    dataLocation: t.dataLocation,
    defaultValue: t.defaultFieldValue,
    globalDataContext: l,
    templateContext: b
  });
  let i;
  if (t.dynamicOptions)
    i = F({
      valueToEvaluate: t.dynamicOptions,
      globalDataContext: l,
      templateContext: b
    });
  else if (t.options)
    i = t.options;
  else
    return null;
  if (!Array.isArray(i) || i.length === 0)
    return null;
  const g = t.controlType || "checkbox", x = t.multiple ?? i.length > 1, C = g === "radio", W = (r, e) => {
    if (C)
      l.updateData(e, c);
    else if (x) {
      const a = Array.isArray(n) ? n : [];
      r.target.checked ? a.includes(e) || l.updateData([...a, e], c) : l.updateData(
        a.filter((u) => u !== e),
        c
      );
    } else
      l.updateData(r.target.checked ? e : !1, c);
  }, k = !!t.label, D = t.forceWrapper, P = D === !0 || D !== !1 && k, $ = G(() => s.id ? s.id : `checkbox-${Math.random().toString(36).substring(2, 9)}`, [s.id]), { id: K, ...j } = s, L = i.map((r, e) => {
    const a = r.value, u = F({
      valueToEvaluate: r.label,
      globalDataContext: l,
      templateContext: b
    }), E = `${$}-${e}`;
    let d = !1;
    C ? d = n === a : x ? d = Array.isArray(n) && n.includes(a) : d = n === a || n === !0;
    const B = f(r.attributes), H = {
      type: g,
      id: E,
      checked: d,
      onChange: (O) => W(O, a),
      value: a,
      ...j
    }, M = {
      htmlFor: E,
      ...y
    };
    return /* @__PURE__ */ h("div", { ...B, children: [
      /* @__PURE__ */ o("input", { ref: e === 0 ? p : null, ...H }),
      u && /* @__PURE__ */ o("label", { ...M, style: { marginLeft: "0.5rem" }, children: u })
    ] }, e);
  }), T = k && /* @__PURE__ */ o("label", { ...y, children: /* @__PURE__ */ o(
    J,
    {
      currentData: (m == null ? void 0 : m.label) ?? void 0,
      datafield: "label",
      path: A + ".label",
      props: t.label
    }
  ) });
  return /* @__PURE__ */ o(S, { ...t, attributesHolderRef: p, children: P ? /* @__PURE__ */ h("div", { ...v, children: [
    T,
    L
  ] }) : /* @__PURE__ */ h(V, { children: [
    T,
    /* @__PURE__ */ o("div", { ...v, children: L })
  ] }) });
};
export {
  at as CheckBoxField
};