@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
71 lines (70 loc) • 4.53 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const leaflet_tools_1 = require("@open-formulieren/leaflet-tools");
const react_1 = require("react");
const react_leaflet_1 = require("react-leaflet");
const react_leaflet_draw_1 = require("react-leaflet-draw");
const useAsync_1 = __importDefault(require("react-use/esm/useAsync"));
const loader_1 = __importDefault(require("../../components/builder/loader"));
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
const MapView = ({ lat, lng, zoom }) => {
const map = (0, react_leaflet_1.useMap)();
(0, react_1.useLayoutEffect)(() => {
map.setView([lat, lng], zoom);
}, [map, lat, lng, zoom]);
return null;
};
/**
* Show a formio map component preview.
*
* NOTE: for the time being, this is rendered in the default Formio bootstrap style,
* however at some point this should use the components of
* @open-formulieren/formio-renderer instead for a more accurate preview.
*/
const Preview = ({ component }) => {
const { key, label, description, tooltip, validate = {}, defaultZoom, initialCenter = {}, tileLayerIdentifier, interactions, } = component;
const { getMapTileLayers } = (0, react_1.useContext)(context_1.BuilderContext);
const featureGroupRef = (0, react_1.useRef)(null);
const { value: tileLayers, loading, error } = (0, useAsync_1.default)(async () => await getMapTileLayers(), []);
if (error) {
throw error;
}
if (loading) {
return (0, jsx_runtime_1.jsx)(loader_1.default, {});
}
const { required = false } = validate;
const { lat = 52.1326332, lng = 5.291266 } = initialCenter;
const zoom = defaultZoom !== null && defaultZoom !== void 0 ? defaultZoom : 8;
const tileLayerUrl = () => {
var _a, _b;
// Try to find the url of the chosen tile layer. If it is found, return the url,
// else return the default tile layer url.
return ((_b = (_a = tileLayers === null || tileLayers === void 0 ? void 0 : tileLayers.find(tileLayer => tileLayer.identifier === tileLayerIdentifier)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : leaflet_tools_1.TILE_LAYER_RD.url);
};
const onFeatureCreate = (event) => {
var _a, _b;
(_a = featureGroupRef.current) === null || _a === void 0 ? void 0 : _a.clearLayers();
(_b = featureGroupRef.current) === null || _b === void 0 ? void 0 : _b.addLayer(event.layer);
};
const editable = Object.values(interactions || {}).find(interaction => interaction);
return ((0, jsx_runtime_1.jsxs)(formio_1.Component, Object.assign({ type: component.type, field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsxs)(react_leaflet_1.MapContainer, Object.assign({ crs: leaflet_tools_1.CRS_RD, attributionControl: true, center: [lat, lng], zoom: zoom, style: {
display: 'flex',
flexDirection: 'column',
minBlockSize: '400px',
} }, { children: [(0, jsx_runtime_1.jsx)(react_leaflet_1.TileLayer, Object.assign({}, leaflet_tools_1.TILE_LAYER_RD, { url: tileLayerUrl() })), (0, jsx_runtime_1.jsx)(react_leaflet_1.FeatureGroup, Object.assign({ ref: featureGroupRef }, { children: editable && ((0, jsx_runtime_1.jsx)(react_leaflet_draw_1.EditControl, { position: "topright", onCreated: onFeatureCreate, edit: {
edit: false,
}, draw: {
rectangle: false,
circle: false,
polyline: !!(interactions === null || interactions === void 0 ? void 0 : interactions.polyline),
polygon: !!(interactions === null || interactions === void 0 ? void 0 : interactions.polygon),
marker: !!(interactions === null || interactions === void 0 ? void 0 : interactions.marker),
circlemarker: false,
} })) })), (0, jsx_runtime_1.jsx)(MapView, { lat: lat, lng: lng, zoom: zoom })] })), description && (0, jsx_runtime_1.jsx)(formio_1.Description, { text: description })] })));
};
exports.default = Preview;