@open-formulieren/formio-builder/lib/esm/registry/map/overlays.js

An opinionated Formio webform builder for Open Forms

import { jsx as e, jsxs as d, Fragment as k } from "react/jsx-runtime";
import { useField as U, FieldArray as A, useFormikContext as E } from "formik";
import { useContext as $, useLayoutEffect as q } from "react";
import { useIntl as F, FormattedMessage as m } from "react-intl";
import { useAsync as O } from "react-use";
import P from "../../components/builder/loader.js";
import "../../components/formio/tabs.js";
import R from "../../components/formio/component.js";
import "@floating-ui/react";
import { TextFieldMultiple as S } from "../../components/formio/textfield.js";
import "clsx";
import { BuilderContext as j } from "../../context.js";
/* empty css                                           */
import D from "../../components/formio/panel.js";
import N from "../../components/formio/select.js";
import "dompurify";
import "../../components/formio/datagrid.js";
import { getWMSLayerOptions as K } from "./getTileLayerOptions.js";
/* empty css              */
const ie = () => {
  const a = F(), {
    getMapOverlayTileLayers: i
  } = $(j), [{
    value: t
  }] = U("overlays"), {
    value: r,
    loading: o,
    error: s
  } = O(async () => await i(), []);
  if (s)
    throw s;
  if (o)
    return /* @__PURE__ */ e(P, {});
  const p = a.formatMessage({
    id: "6jI29r",
    defaultMessage: [{
      type: 0,
      value: "The overlay is used to show additional map information on top of the map background. This uses tile layers as information source."
    }]
  });
  return /* @__PURE__ */ e(R, { type: "datagrid", label: /* @__PURE__ */ e(m, { id: "OFlBqy", defaultMessage: [{
    type: 0,
    value: "Overlays"
  }] }), tooltip: p, children: /* @__PURE__ */ e(A, { name: "overlays", children: (n) => /* @__PURE__ */ d(k, { children: [
    t == null ? void 0 : t.map(({
      _OF_INTERNAL_id: f
    }, l) => /* @__PURE__ */ e(
      L,
      {
        index: l,
        arrayHelpers: n,
        overlayTileLayers: r
      },
      f || l
    )),
    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d("button", { type: "button", className: "btn btn-primary formio-button-add-row", onClick: () => n.push({
      uuid: "",
      label: "",
      type: "wms",
      // We currently only support WMS tile layers.
      url: "",
      // This is dynamically set by the backend, so can remain empty.
      layers: [],
      _OF_INTERNAL_id: crypto.randomUUID()
    }), children: [
      /* @__PURE__ */ e("i", { className: "fa fa-plus", "aria-hidden": "true" }),
      " ",
      /* @__PURE__ */ e(m, { id: "74r2X8", defaultMessage: [{
        type: 0,
        value: "Add another overlay"
      }] })
    ] }) })
  ] }) }) });
}, L = ({
  index: a,
  arrayHelpers: i,
  overlayTileLayers: t
}) => {
  var y, h;
  const r = F(), o = `overlays[${a}]`, {
    getFieldProps: s,
    getFieldHelpers: p,
    setFieldValue: n
  } = E(), f = ((y = s("overlays").value) == null ? void 0 : y.length) || 0, {
    value: l
  } = s(o), {
    setValue: _
  } = p(o), c = (h = t == null ? void 0 : t.find((u) => u.uuid === l.uuid)) == null ? void 0 : h.url, {
    value: w,
    loading: C,
    error: g
  } = O(async () => c ? await K(c) : [], [c]);
  if (g)
    throw g;
  const b = l._OF_INTERNAL_id;
  return q(() => {
    b || n(`${o}._OF_INTERNAL_id`, window.crypto.randomUUID());
  }, [b, n]), /* @__PURE__ */ d(D, { title: /* @__PURE__ */ e(m, { id: "xrfkiI", defaultMessage: [{
    type: 0,
    value: "Overlay: "
  }, {
    type: 1,
    value: "overlayName"
  }], values: {
    overlayName: l.label ?? "-"
  } }), collapsible: !0, initialCollapsed: !!l.uuid, headerEnd: /* @__PURE__ */ e("div", { className: "offb-overlay", children: /* @__PURE__ */ d("div", { className: "offb-overlay__sort-icons", children: [
    /* @__PURE__ */ e("button", { type: "button", "aria-label": r.formatMessage({
      id: "p/KSh+",
      defaultMessage: [{
        type: 0,
        value: "Move up"
      }]
    }), onClick: () => i.move(a, a - 1), disabled: a === 0, children: /* @__PURE__ */ e("i", { className: "fa fa-chevron-up" }) }),
    /* @__PURE__ */ e("button", { type: "button", "aria-label": r.formatMessage({
      id: "V6JFeE",
      defaultMessage: [{
        type: 0,
        value: "Move down"
      }]
    }), onClick: () => i.move(a, a + 1), disabled: a === f - 1, children: /* @__PURE__ */ e("i", { className: "fa fa-chevron-down" }) })
  ] }) }), children: [
    /* @__PURE__ */ e(N, { name: `${o}.uuid`, label: r.formatMessage({
      id: "t10YHv",
      defaultMessage: [{
        type: 0,
        value: "Tile layer"
      }]
    }), required: !0, options: t, valueProperty: "uuid", getOptionLabel: (u) => u.name, onChange: (u) => {
      const M = u.target.value, v = t == null ? void 0 : t.find((I) => I.uuid === M);
      _({
        ...l,
        uuid: M,
        label: (v == null ? void 0 : v.name) ?? "",
        layers: []
      });
    } }),
    /* @__PURE__ */ e(S, { name: `${o}.label`, label: r.formatMessage({
      id: "UDHbKX",
      defaultMessage: [{
        type: 0,
        value: "Label"
      }]
    }), required: !0 }),
    /* @__PURE__ */ e(N, { name: `${o}.layers`, label: r.formatMessage({
      id: "eEqSUK",
      defaultMessage: [{
        type: 0,
        value: "Layers"
      }]
    }), options: w, isLoading: C, isMulti: !0 }),
    /* @__PURE__ */ d("button", { type: "button", className: "btn btn-danger float-right", onClick: () => i.remove(a), children: [
      /* @__PURE__ */ e("i", { className: "fa fa-times-circle-o" }),
      " ",
      /* @__PURE__ */ e(m, { id: "faAkZs", defaultMessage: [{
        type: 0,
        value: "Remove overlay"
      }] })
    ] })
  ] });
};
export {
  ie as default
};