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

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

import { jsx as l, jsxs as h, Fragment as P } from "react/jsx-runtime";
import { useContext as v, useRef as j, useMemo as F } from "react";
import { ActionDependant as R } from "../../../engine/Actions.js";
import { useEvaluatedAttributes as i, evaluateTemplateValue as A } from "../../../engine/TemplateSystem.js";
import { GlobalDataContext as W } from "../../../engine/GlobalDataContext.js";
import { TemplateContext as H } from "../../../engine/TemplateContext.js";
import { propsDataLocationToPathAndValue as M } from "../../../engine/utility/formElementsCommon.js";
import { View as w } from "../../../engine/View.js";
const J = ({ props: t, datafield: x, path: r, currentData: o }) => {
  const a = v(W), n = v(H), u = j(null), s = i(t.attributes), T = i(t.inputAttributes ?? []), g = i(t.labelAttributes ?? []), { formData: C, formDataPath: y } = M({
    currentPath: r,
    datafield: x,
    dataLocation: t.dataLocation,
    defaultValue: t.defaultFieldValue,
    globalDataContext: a,
    templateContext: n
  }), E = (I) => {
    a.updateData(I.currentTarget.value, y);
  }, L = A({
    valueToEvaluate: t.placeholder,
    globalDataContext: a,
    templateContext: n
  }), V = A({
    valueToEvaluate: t.inputType,
    globalDataContext: a,
    templateContext: n
  }), c = !!t.label, m = t.forceWrapper, b = m === !0 || m !== !1 && c, e = {
    onChange: E,
    placeholder: L,
    type: V ?? "text",
    value: C ?? "",
    ...T
  };
  b || Object.assign(e, s);
  const d = F(() => e.id ? e.id : `input-${Math.random().toString(36).substring(2, 9)}`, [e.id]);
  e.id = d;
  const D = {
    htmlFor: d,
    ...g
  }, f = /* @__PURE__ */ l("input", { ref: u, ...e }), p = c && /* @__PURE__ */ l("label", { ...D, children: /* @__PURE__ */ l(
    w,
    {
      currentData: (o == null ? void 0 : o.label) ?? void 0,
      datafield: "label",
      path: r + ".label",
      props: t.label
    }
  ) });
  return /* @__PURE__ */ l(R, { ...t, attributesHolderRef: u, children: b ? /* @__PURE__ */ h("div", { ...s, children: [
    p,
    f
  ] }) : /* @__PURE__ */ h(P, { children: [
    p,
    f
  ] }) });
};
export {
  J as Input
};