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

An opinionated Formio webform builder for Open Forms

import { jsx as r, jsxs as a } from "react/jsx-runtime";
import { useDragOperation as v } from "@dnd-kit/react";
import { clsx as d } from "clsx";
import { FormattedMessage as p, useIntl as u } from "react-intl";
import m from "../ContentPlaceholder.js";
import y from "../error/ErrorBoundary.js";
import { getRegistryEntry as f } from "../../registry/index.js";
import { hasOwnProperty as w } from "../../types/index.js";
/* empty css             */
import P from "./dragDrop/DropZone.js";
import C from "./dragDrop/SortableComponent.js";
import "react";
import { getTargetDropzoneId as D } from "./dragDrop/utils/dragTarget.js";
import { COMPONENT_PLACEHOLDER_TYPE as b } from "./types.js";
const F = ({
  components: e,
  dropzoneId: o,
  hideEmptyMessage: n = !1,
  withoutComponentControls: i = !1
}) => {
  const {
    target: s
  } = v(), l = D(s), g = l !== void 0 && l === o ? 1 : 0, c = e.length > g;
  return /* @__PURE__ */ r(y, { children: /* @__PURE__ */ a(P, { id: o, children: [
    !c && /* @__PURE__ */ r(N, { hideEmptyMessage: n }),
    e.map((t, h) => t.type === b ? /* @__PURE__ */ r(E, { componentType: t.componentType }, "placeholder") : /* @__PURE__ */ r(C, { id: t.id, index: h, groupName: o, component: t, hasControls: !i, children: /* @__PURE__ */ r(O, { component: t }) }, t.key))
  ] }) });
}, N = ({
  hideEmptyMessage: e
}) => /* @__PURE__ */ a(m, { variant: "designer", children: [
  e && "+",
  /* @__PURE__ */ r("div", { className: d({
    "sr-only": e
  }), children: /* @__PURE__ */ r(p, { id: "1Q5hq3", defaultMessage: [{
    type: 0,
    value: "Drag a component in the form and release the mouse button."
  }] }) })
] }), E = ({
  componentType: e
}) => {
  const {
    formDesigner: o,
    builderInfo: n
  } = f(e);
  return /* @__PURE__ */ a(m, { variant: "designer", testId: "component-placeholder", children: [
    /* @__PURE__ */ r("i", { className: d("fa", `fa-${n.icon}`, "mr-2"), "aria-hidden": "true" }),
    /* @__PURE__ */ r(p, { ...o.label })
  ] }, "spacer");
}, O = ({
  component: e
}) => {
  const o = u(), n = f(e.type), {
    preview: {
      designer: i
    }
  } = n;
  if (i === null)
    return console.info(`No designer preview found for component ${e.type}.`), null;
  const s = w(e, "hidden") ? e.hidden : !1;
  return /* @__PURE__ */ r("div", { className: d("offb-designer-preview", `offb-designer-preview--component-type-${e.type}`, {
    "offb-designer-preview--hidden": s
  }), "data-testid": "designerPreview", title: s ? o.formatMessage({
    id: "gg3Osx",
    defaultMessage: [{
      type: 0,
      value: "Hidden component"
    }]
  }) : void 0, children: /* @__PURE__ */ r(i, { component: e }) });
};
export {
  O as ComponentPreview,
  F as ComponentsPreview
};