@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
101 lines (100 loc) • 7.19 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 formik_1 = require("formik");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const useAsync_1 = __importDefault(require("react-use/esm/useAsync"));
const builder_1 = require("../../components/builder");
const messages_1 = require("../../components/builder/messages");
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
const interaction_configuration_1 = __importDefault(require("../../registry/map/interaction-configuration"));
const errors_1 = require("../../utils/errors");
const map_configuration_1 = __importDefault(require("./map-configuration"));
/**
* Form to configure a Formio 'map' type component.
*/
const EditForm = () => {
const intl = (0, react_intl_1.useIntl)();
const [isKeyManuallySetRef, generatedKey] = (0, builder_1.useDeriveComponentKey)();
const { values, setValues } = (0, formik_1.useFormikContext)();
const { hasAnyError } = (0, errors_1.useErrorChecker)();
builder_1.Validate.useManageValidatorsTranslations(['required']);
(0, react_1.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 ((0, jsx_runtime_1.jsxs)(formio_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(formio_1.TabList, { children: [(0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Basic, { hasErrors: hasAnyError('label', 'key', 'description', 'tooltip', 'showInSummary', 'showInEmail', 'showInPDF', 'hidden', 'clearOnHide', 'isSensitiveData') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Advanced, { hasErrors: hasAnyError('conditional') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Validation, { hasErrors: hasAnyError('validate') }), (0, jsx_runtime_1.jsx)(formio_1.Tab, Object.assign({ hasErrors: hasAnyError('useConfigDefaultMapSettings', 'defaultZoom', 'initialCenter', 'tileLayerIdentifier', 'interactions') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'wJ7Yha', defaultMessage: [{ type: 0, value: "Map settings" }] }) })), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Registration, { hasErrors: hasAnyError('registration') }), (0, jsx_runtime_1.jsx)(builder_1.BuilderTabs.Translations, { hasErrors: hasAnyError('openForms.translations') })] }), (0, jsx_runtime_1.jsxs)(formio_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(builder_1.Label, {}), (0, jsx_runtime_1.jsx)(builder_1.Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), (0, jsx_runtime_1.jsx)(builder_1.Description, {}), (0, jsx_runtime_1.jsx)(builder_1.Tooltip, {}), (0, jsx_runtime_1.jsx)(builder_1.PresentationConfig, {}), (0, jsx_runtime_1.jsx)(builder_1.Hidden, {}), (0, jsx_runtime_1.jsx)(builder_1.ClearOnHide, {}), (0, jsx_runtime_1.jsx)(builder_1.IsSensitiveData, {})] }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.SimpleConditional, {}) }), (0, jsx_runtime_1.jsxs)(formio_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(builder_1.Validate.Required, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.ValidatorPluginSelect, {}), (0, jsx_runtime_1.jsx)(builder_1.Validate.ValidationErrorTranslations, {})] }), (0, jsx_runtime_1.jsxs)(formio_1.TabPanel, { children: [(0, jsx_runtime_1.jsx)(TileLayer, {}), (0, jsx_runtime_1.jsx)(interaction_configuration_1.default, {}), (0, jsx_runtime_1.jsx)(UseConfigDefaultMapSettings, {}), !values.useConfigDefaultMapSettings && (0, jsx_runtime_1.jsx)(map_configuration_1.default, {})] }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Registration.RegistrationAttributeSelect, {}) }), (0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(builder_1.Translations.ComponentTranslations, { propertyLabels: {
label: intl.formatMessage(messages_1.LABELS.label),
description: intl.formatMessage(messages_1.LABELS.description),
tooltip: intl.formatMessage(messages_1.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 = (0, react_intl_1.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 ((0, jsx_runtime_1.jsx)(formio_1.Checkbox, { name: "useConfigDefaultMapSettings", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'z7HXSS', defaultMessage: [{ type: 0, value: "Use globally configured map component settings" }] }), tooltip: tooltip }));
};
const TileLayer = () => {
const { getMapTileLayers } = (0, react_1.useContext)(context_1.BuilderContext);
const intl = (0, react_intl_1.useIntl)();
const { value: options, loading, error } = (0, useAsync_1.default)(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 ((0, jsx_runtime_1.jsx)(formio_1.Select, { name: "tileLayerIdentifier", label: (0, jsx_runtime_1.jsx)(react_intl_1.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,
})) }));
};
exports.default = EditForm;