@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
66 lines (65 loc) • 3.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CRS_RD, TILE_LAYER_RD } from '@open-formulieren/leaflet-tools';
import { useContext, useLayoutEffect, useRef } from 'react';
import { FeatureGroup, MapContainer, TileLayer, useMap } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import useAsync from 'react-use/esm/useAsync';
import Loader from '../../components/builder/loader';
import { Component, Description } from '../../components/formio';
import { BuilderContext } from '../../context';
const MapView = ({ lat, lng, zoom }) => {
const map = useMap();
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 } = useContext(BuilderContext);
const featureGroupRef = useRef(null);
const { value: tileLayers, loading, error } = useAsync(async () => await getMapTileLayers(), []);
if (error) {
throw error;
}
if (loading) {
return _jsx(Loader, {});
}
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 : 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 (_jsxs(Component, Object.assign({ type: component.type, field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [_jsxs(MapContainer, Object.assign({ crs: CRS_RD, attributionControl: true, center: [lat, lng], zoom: zoom, style: {
display: 'flex',
flexDirection: 'column',
minBlockSize: '400px',
} }, { children: [_jsx(TileLayer, Object.assign({}, TILE_LAYER_RD, { url: tileLayerUrl() })), _jsx(FeatureGroup, Object.assign({ ref: featureGroupRef }, { children: editable && (_jsx(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,
} })) })), _jsx(MapView, { lat: lat, lng: lng, zoom: zoom })] })), description && _jsx(Description, { text: description })] })));
};
export default Preview;