@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
129 lines (128 loc) • 4.39 kB
JavaScript
import { jsx as r, jsxs as L } from "react/jsx-runtime";
import { CRS_RD as $, TILE_LAYER_RD as h } from "@open-formulieren/leaflet-tools";
import { useContext as z, useRef as A, useLayoutEffect as B } from "react";
import { useIntl as G, FormattedMessage as U } from "react-intl";
import { MapContainer as W, TileLayer as q, LayersControl as C, FeatureGroup as J, WMSTileLayer as Y, useMap as Z } from "react-leaflet";
import { EditControl as H } from "react-leaflet-draw";
import { useAsync as K } from "react-use";
import N from "../../components/builder/loader.js";
import "../../components/formio/tabs.js";
import Q from "../../components/formio/component.js";
import X from "../../components/formio/description.js";
import "@floating-ui/react";
import "../../components/formio/textfield.js";
import "clsx";
import "formik";
import "../../components/formio/datefield.js";
import "../../components/formio/datetimefield.js";
import "../../components/formio/timefield.js";
/* empty css */
import "react-select";
import "dompurify";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
/* empty css */
import { BuilderContext as ee } from "../../context.js";
import re from "./edit-validation.js";
/* empty css */
const te = ({
lat: n,
lng: i,
zoom: a
}) => {
const s = Z();
return B(() => {
s.setView([n, i], a);
}, [s, n, i, a]), null;
}, oe = ({
index: n,
overlay: i,
url: a
}) => /* @__PURE__ */ r(C.Overlay, { name: i.label, checked: !0, children: /* @__PURE__ */ r(Y, { url: a, params: {
format: "image/png",
layers: i.layers.join(","),
transparent: !0
} }) }, `${n}-${i.label}`), ie = {
wms: oe
}, Fe = ({
component: n
}) => {
const {
key: i,
label: a,
description: s,
tooltip: x,
validate: v = {},
defaultZoom: w,
initialCenter: M = {},
tileLayerIdentifier: b,
interactions: t,
overlays: m
} = n, T = G(), k = z(ee), {
getMapTileLayers: R,
getMapOverlayTileLayers: I
} = k, u = A(null), {
value: [j, D] = [[], []],
loading: E,
error: c
} = K(async () => await Promise.all([R(), I()]), []);
if (c)
throw c;
if (E)
return /* @__PURE__ */ r(N, {});
const {
success: F
} = re({
intl: T
}).safeParse(n);
if (!F)
return /* @__PURE__ */ r(U, { id: "2gs8pJ", defaultMessage: [{
type: 0,
value: "The map configuration is not valid, so we can't show a preview. Fix the validation errors in the component configuration."
}] });
const p = m == null ? void 0 : m.filter((e) => !!(e != null && e.uuid)), {
required: S = !1
} = v, {
lat: f = 52.1326332,
lng: d = 5.291266
} = M, y = w ?? 8, O = (e) => {
var o;
return ((o = D.find((l) => l.uuid === e.uuid)) == null ? void 0 : o.url) ?? "";
}, P = () => {
var e;
return ((e = j.find((o) => o.identifier === b)) == null ? void 0 : e.url) ?? h.url;
}, V = (e) => {
var o, l;
(o = u.current) == null || o.clearLayers(), (l = u.current) == null || l.addLayer(e.layer);
}, _ = Object.values(t || {}).find((e) => e);
return /* @__PURE__ */ L(Q, { type: n.type, field: i, required: S, htmlId: `editform-${i}`, label: a, tooltip: x, children: [
/* @__PURE__ */ L(W, { crs: $, attributionControl: !0, center: [f, d], zoom: y, style: {
display: "flex",
flexDirection: "column",
minBlockSize: "400px",
zIndex: 0
// Prevent the map component from covering tooltips
}, children: [
/* @__PURE__ */ r(q, { ...h, url: P() }),
(p == null ? void 0 : p.length) && /* @__PURE__ */ r(C, { position: "topright", children: p.map((e, o) => {
const l = ie[e.type], g = O(e);
return g && l ? /* @__PURE__ */ r(l, { index: o, url: g, overlay: e }, o) : null;
}) }),
/* @__PURE__ */ r(J, { ref: u, children: _ && /* @__PURE__ */ r(H, { position: "topright", onCreated: V, edit: {
edit: !1
}, draw: {
rectangle: !1,
circle: !1,
polyline: !!(t != null && t.polyline),
polygon: !!(t != null && t.polygon),
marker: !!(t != null && t.marker),
circlemarker: !1
} }) }),
/* @__PURE__ */ r(te, { lat: f, lng: d, zoom: y })
] }),
s && /* @__PURE__ */ r(X, { text: s })
] });
};
export {
Fe as default
};