@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
96 lines (95 loc) • 5.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { useContext, useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import useAsync from 'react-use/esm/useAsync';
import { BuilderTabs, ClearOnHide, Description, Hidden, IsSensitiveData, Key, Label, PresentationConfig, Registration, SimpleConditional, Tooltip, Translations, Validate, useDeriveComponentKey, } from '../../components/builder';
import { LABELS } from '../../components/builder/messages';
import { Checkbox, Select, Tab, TabList, TabPanel, Tabs } from '../../components/formio';
import { BuilderContext } from '../../context';
import InteractionConfiguration from '../../registry/map/interaction-configuration';
import { useErrorChecker } from '../../utils/errors';
import MapConfiguration from './map-configuration';
/**
* Form to configure a Formio 'map' type component.
*/
const EditForm = () => {
const intl = useIntl();
const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
const { values, setValues } = useFormikContext();
const { hasAnyError } = useErrorChecker();
Validate.useManageValidatorsTranslations(['required']);
useEffect(() => {
var _a, _b;
const hasLocationSet = values.defaultZoom || ((_a = values === null || values === void 0 ? void 0 : values.initialCenter) === null || _a === void 0 ? void 0 : _a.lat) || ((_b = values === null || values === void 0 ? void 0 : values.initialCenter) === null || _b === void 0 ? void 0 : _b.lng);
if (values.useConfigDefaultMapSettings && hasLocationSet) {
setValues(Object.assign(Object.assign({}, values), { defaultZoom: undefined, initialCenter: undefined }));
}
});
return (_jsxs(Tabs, { children: [_jsxs(TabList, { children: [_jsx(BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'hidden', 'clearOnHide', 'isSensitiveData') }), _jsx(BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), _jsx(BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), _jsx(Tab, Object.assign({ hasErrors: hasAnyError('useConfigDefaultMapSettings', 'defaultZoom', 'initialCenter', 'tileLayerIdentifier', 'interactions') }, { children: _jsx(FormattedMessage, { id: 'wJ7Yha', defaultMessage: [{ type: 0, value: "Map settings" }] }) })), _jsx(BuilderTabs.Registration, { hasErrors: hasAnyError('registration') }), _jsx(BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), _jsxs(TabPanel, { children: [_jsx(Label, {}), _jsx(Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), _jsx(Description, {}), _jsx(Tooltip, {}), _jsx(PresentationConfig, {}), _jsx(Hidden, {}), _jsx(ClearOnHide, {}), _jsx(IsSensitiveData, {})] }), _jsx(TabPanel, { children: _jsx(SimpleConditional, {}) }), _jsxs(TabPanel, { children: [_jsx(Validate.Required, {}), _jsx(Validate.ValidatorPluginSelect, {}), _jsx(Validate.ValidationErrorTranslations, {})] }), _jsxs(TabPanel, { children: [_jsx(TileLayer, {}), _jsx(InteractionConfiguration, {}), _jsx(UseConfigDefaultMapSettings, {}), !values.useConfigDefaultMapSettings && _jsx(MapConfiguration, {})] }), _jsx(TabPanel, { children: _jsx(Registration.RegistrationAttributeSelect, {}) }), _jsx(TabPanel, { children: _jsx(Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(LABELS.label),
description: intl.formatMessage(LABELS.description),
tooltip: intl.formatMessage(LABELS.tooltip),
} }) })] }));
};
EditForm.defaultValues = {
// basic tab
label: '',
key: '',
description: '',
tooltip: '',
showInSummary: true,
showInEmail: false,
showInPDF: true,
hidden: false,
clearOnHide: true,
isSensitiveData: true,
useConfigDefaultMapSettings: false,
defaultZoom: undefined,
initialCenter: {
lat: undefined,
lng: undefined,
},
tileLayerIdentifier: undefined,
interactions: {
polygon: false,
polyline: false,
marker: true,
},
defaultValue: null,
// Advanced tab
conditional: {
show: undefined,
when: '',
eq: '',
},
// Validation tab
validate: {
required: false,
plugins: [],
},
translatedErrors: {},
// registration tab
registration: {
attribute: '',
},
};
const UseConfigDefaultMapSettings = () => {
const intl = useIntl();
const tooltip = intl.formatMessage({ id: "oXOxWz", defaultMessage: [{ type: 0, value: "When this is checked, the map component settings configured in the global configuration will be used." }] });
return (_jsx(Checkbox, { name: "useConfigDefaultMapSettings", label: _jsx(FormattedMessage, { id: 'z7HXSS', defaultMessage: [{ type: 0, value: "Use globally configured map component settings" }] }), tooltip: tooltip }));
};
const TileLayer = () => {
const { getMapTileLayers } = useContext(BuilderContext);
const intl = useIntl();
const { value: options, loading, error } = useAsync(async () => await getMapTileLayers(), []);
if (error) {
throw error;
}
const tooltip = intl.formatMessage({ id: "xbUkMg", defaultMessage: [{ type: 0, value: "The tile layer is responsible for showing the map background. This effects the map style at particular coordinates and zoom levels." }] });
return (_jsx(Select, { name: "tileLayerIdentifier", label: _jsx(FormattedMessage, { id: 'Qd9qN8', defaultMessage: [{ type: 0, value: "Tile layer" }] }), isClearable: true, tooltip: tooltip, isLoading: loading, options: options === null || options === void 0 ? void 0 : options.map(tileLayer => ({
label: tileLayer.label,
value: tileLayer.identifier,
})) }));
};
export default EditForm;