@ea-lab/reactive-json/dist/component/element/html/FolderSortableTree.js

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

import { jsx as h } from "react/jsx-runtime";
import { F as k, S as B } from "../../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
import { l as _ } from "../../../lodash-CYNxjS-I.js";
import { useContext as A, forwardRef as R } from "react";
import { ActionDependant as G } from "../../../engine/Actions.js";
import { GlobalDataContext as H } from "../../../engine/GlobalDataContext.js";
import { TemplateContext as y } from "../../../engine/TemplateContext.js";
import { evaluateTemplateValue as O } from "../../../engine/TemplateSystem.js";
import { View as W } from "../../../engine/View.js";
import { propsDataLocationToPathAndValue as q } from "../../../engine/utility/formElementsCommon.js";
function V(t) {
  var r, n, a = "";
  if (typeof t == "string" || typeof t == "number") a += t;
  else if (typeof t == "object") if (Array.isArray(t)) {
    var s = t.length;
    for (r = 0; r < s; r++) t[r] && (n = V(t[r])) && (a && (a += " "), a += n);
  } else for (n in t) t[n] && (a && (a += " "), a += n);
  return a;
}
function z() {
  for (var t, r, n = 0, a = "", s = arguments.length; n < s; n++) (t = arguments[n]) && (r = V(t)) && (a && (a += " "), a += r);
  return a;
}
const ae = ({ props: t, path: r, datafield: n }) => {
  var P, T;
  const a = A(H), s = A(y);
  let { formData: i, formDataPath: u } = q({
    currentPath: r,
    datafield: n,
    dataLocation: t.dataLocation,
    defaultValue: t.defaultFieldValue,
    globalDataContext: a,
    templateContext: s
  });
  if (i === void 0)
    return null;
  const L = t.itemTemplate ?? null, c = O({
    valueToEvaluate: t.treeRootPath ?? void 0,
    globalDataContext: a,
    templateContext: s
  }), v = t.maxDepth, w = typeof c != "string" ? !0 : t.maxDepthIsAbsolute ?? !0, C = t.keepBaseItem ?? !1;
  let f = 0, b = null, I;
  if (typeof c == "string" && c.length > 0) {
    const e = c.split(".");
    let m = b, o = i, d = u;
    for (; e.length > 0; ) {
      const l = Number.parseInt(e.shift());
      if (Number.isNaN(l) || (m = (i == null ? void 0 : i.id) ?? null, o = i, d = u, I = l, b = (P = i[l]) == null ? void 0 : P.id, i = ((T = i[l]) == null ? void 0 : T.children) ?? void 0, u = u + "." + l + ".children", i === void 0))
        return null;
      ++f;
    }
    C && (b = m, i = o, u = d, i = [i[I]]);
  }
  const F = (e) => {
    let m = e, o = u;
    if (f > 0) {
      m = _.cloneDeep(m);
      const d = (l, p = 0) => {
        var x;
        p === 0 && (l.parentId = b), l.depth += f, (x = l.children) == null || x.forEach((D) => {
          d(D, p + 1);
        });
      };
      m.forEach((l) => {
        d(l, 0);
      });
    }
    c !== void 0 && C && (m = e[0], o = u + "." + I), a.updateData(m, o);
  }, N = R((e, m) => {
    const o = e.item.value ?? {}, d = [];
    let l = e.item;
    for (d.push(l.index); l.parent; )
      d.push("children"), l = l.parent, d.push(l.index);
    d.reverse();
    const x = u + "." + d.join(".") + ".value";
    o._treeItemDepth = e.item.depth, o._treeItemIndex = e.item.index, o._treeItemIndex1 = e.item.index + 1;
    const D = {};
    return D._treeAddCollapseButton = () => !!e.onCollapse && !!e.childCount && /* @__PURE__ */ h(
      "button",
      {
        onClick: (S) => {
          var g;
          S.preventDefault(), (g = e.onCollapse) == null || g.call(e);
        },
        className: z(
          "dnd-sortable-tree_folder_tree-item-collapse_button",
          e.collapsed && "dnd-sortable-tree_folder_tree-item-collapse_button-collapsed"
        )
      }
    ), v && (w ? e.item.canHaveChildren = f + e.item.depth < v : e.item.canHaveChildren = e.item.depth < v), /* @__PURE__ */ h(
      k,
      {
        ...e,
        "data-htmlbuilder-tree-item-children-count": e.childCount || "0",
        "data-htmlbuilder-tree-item-collapsed": e.collapsed,
        "data-htmlbuilder-tree-item-depth": e.item.depth,
        "data-htmlbuilder-tree-item-depth-list": J(e.item.depth),
        "data-htmlbuilder-tree-item-index": e.item.index,
        "data-htmlbuilder-tree-item-index1": e.item.index + 1,
        "data-htmlbuilder-tree-item-is-last": e.isLast,
        ref: m,
        children: /* @__PURE__ */ h(
          y.Provider,
          {
            value: {
              templateData: o,
              templatePath: x,
              sortableTreeData: D
            },
            children: /* @__PURE__ */ h(W, { props: L, currentData: o })
          }
        )
      }
    );
  }), j = _.cloneDeep(i), E = t.sortableTreeOptions ?? {};
  return /* @__PURE__ */ h(G, { ...t, children: /* @__PURE__ */ h(
    B,
    {
      ...E,
      items: j,
      onItemsChanged: F,
      TreeItemComponent: N
    }
  ) });
};
function J(t) {
  const r = [];
  let n = t ?? 0;
  for (; n >= 0; )
    r.push(n), --n;
  return r.reverse().join(" ");
}
export {
  ae as FolderSortableTree
};