@open-formulieren/formio-builder/dist/components/designer/FormioDefinitionDesigner.js

An opinionated Formio webform builder for Open Forms

import { jsx as s, jsxs as P } from "react/jsx-runtime";
import { DragDropProvider as j, DragOverlay as V } from "@dnd-kit/react";
import { clsx as q } from "clsx";
import { produce as f } from "immer";
import { useState as b, useContext as B, useCallback as v, useMemo as H } from "react";
import { useIntl as K, FormattedMessage as W } from "react-intl";
import Y from "../ComponentEditForm.js";
import Z from "../Modal.js";
/* empty css                       */
import "./dragDrop/context.js";
import { SortableItemView as $ } from "./dragDrop/SortableComponent.js";
import { removeComponent as E, assertNoPlaceholders as w, removePlaceholder as N, createComponent as G, getDropzoneComponents as J, replacePlaceholderWithComponent as Q, replaceComponent as U, insertComponentDefinition as M } from "./dragDrop/utils/components.js";
import { getTargetDropzoneId as X, getTargetIndex as ee } from "./dragDrop/utils/dragTarget.js";
import { MAIN_DROPZONE_ID as oe } from "./dragDrop/utils/dropzone.js";
import { BuilderContext as te, DesignerContext as ne } from "../../context.js";
import { getRegistryEntry as O } from "../../registry/index.js";
import re from "./ComponentsList/ComponentsList.js";
import { ComponentPreview as ie, ComponentsPreview as se } from "./Preview.js";
import { COMPONENT_PLACEHOLDER_TYPE as me } from "./types.js";
const x = (m) => (m == null ? void 0 : m.data) ?? {}, Oe = ({
  initialComponents: m,
  onChange: a
}) => {
  const p = K(), [r, l] = b(m), [d, u] = b(null), {
    uniquifyKey: T
  } = B(te), S = (e, t, i) => {
    const o = {
      type: me,
      componentType: i
    }, n = f(r, (c) => {
      N(c), M(e, c, t, o);
    });
    l(n);
  }, k = (e, t, i) => {
    const o = f(r, (n) => {
      E(n, i.key), M(e, n, t, i);
    });
    l(o);
  }, z = (e) => {
    const {
      source: t,
      target: i
    } = e.operation, o = x(t), n = (o == null ? void 0 : o.fromSidebar) || !1;
    if (!i && n) {
      const F = f(r, (L) => {
        N(L);
      });
      l(F);
      return;
    }
    const c = X(i);
    if (!c) return;
    const I = J(r, c);
    if (I === void 0) return;
    const y = ee(i, I.length);
    y !== void 0 && (n ? S(y, c, o.componentType) : o != null && o.component && k(y, c, o.component));
  }, R = (e) => {
    const {
      source: t,
      target: i
    } = e.operation, o = x(t);
    if (!(o == null ? void 0 : o.fromSidebar)) {
      w(r), a(r);
      return;
    }
    if (!i) return;
    const c = G(o.componentType, T, p);
    C(c, !0);
  }, C = v((e, t = !1) => {
    u({
      component: e,
      isNew: t
    });
  }, [u]), g = () => {
    u(null);
  }, A = (e, t, i) => {
    const o = f(r, (n) => {
      i ? Q(n, e) : U(n, t.key, e);
    });
    l(o), w(o), a(o, i ? {
      type: "created",
      component: e
    } : {
      type: "updated",
      component: e,
      originalComponent: t
    });
  }, h = v((e) => {
    const {
      getComponentSlots: t
    } = O(e.type);
    if (t && t(e).some((n) => n.collection.length > 0) && !confirm(p.formatMessage({
      id: "k8V0/f",
      defaultMessage: [{
        type: 0,
        value: "Removing this component will also remove all of its children. Are you sure you want to continue?"
      }]
    })))
      return;
    const o = f(r, (n) => {
      E(n, e.key);
    });
    l(o), w(o), a(o, {
      type: "deleted",
      component: e
    });
  }, [p, r, a]), D = v(() => {
    const e = f(r, (t) => {
      N(t);
    });
    l(e);
  }, [r]), _ = H(() => ({
    editComponent: C,
    deleteComponent: h
  }), [C, h]);
  return /* @__PURE__ */ s(ne.Provider, { value: _, children: /* @__PURE__ */ P(j, { onDragOver: z, onDragEnd: R, children: [
    /* @__PURE__ */ s(V, { dropAnimation: null, children: (e) => {
      var t;
      return (t = e.data) != null && t.fromSidebar ? /* @__PURE__ */ s(ce, { componentType: e.data.componentType }) : /* @__PURE__ */ s($, { component: e.data.component, showControls: !0, children: /* @__PURE__ */ s(ie, { component: e.data.component }) });
    } }),
    /* @__PURE__ */ P("div", { className: "row", children: [
      /* @__PURE__ */ s("div", { className: "col col-2", children: /* @__PURE__ */ s(re, {}) }),
      /* @__PURE__ */ s("div", { className: "col col-10", children: /* @__PURE__ */ s(se, { components: r, dropzoneId: oe }) })
    ] }),
    d && /* @__PURE__ */ s(le, { component: d.component, isNew: d.isNew, onSubmit: (e) => {
      A(e, d.component, d.isNew), g();
    }, onRemove: () => {
      d.isNew ? D() : h(d.component), g();
    }, onClose: () => {
      D(), g();
    } })
  ] }) });
}, le = ({
  component: m,
  isNew: a = !1,
  onSubmit: p,
  onRemove: r,
  onClose: l
}) => /* @__PURE__ */ s(Z, { isOpen: !0, closeModal: l, children: /* @__PURE__ */ s(Y, { component: m, isNew: a, onSubmit: p, onRemove: r, onCancel: l }) }), ce = ({
  componentType: m
}) => {
  const {
    formDesigner: a,
    builderInfo: p
  } = O(m);
  return /* @__PURE__ */ P("span", { className: "btn btn-primary btn-block", children: [
    /* @__PURE__ */ s("i", { className: q("fa", `fa-${p.icon}`, "mr-2"), "aria-hidden": "true" }),
    /* @__PURE__ */ s(W, { ...a.label })
  ] });
};
export {
  Oe as default
};