@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
31 lines (30 loc) • 2.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useField } from 'formik';
import { isEqual } from 'lodash';
import { useContext, useEffect } from 'react';
import { FormattedMessage, defineMessage, useIntl } from 'react-intl';
import { BuilderContext } from '../../../context';
import { DataMap, Panel, Tab, TabList, TabPanel, Tabs, TextField } from '../../formio';
export function useManageValidatorsTranslations(keys, prefix = '') {
const fieldName = `${prefix}${prefix ? '.' : ''}translatedErrors`;
const { supportedLanguageCodes } = useContext(BuilderContext);
const [{ value }, , { setValue }] = useField(fieldName);
useEffect(() => {
const newValue = value
? Object.assign({}, value) : Object.fromEntries(supportedLanguageCodes.map(code => [code, {}]));
const emptyDefaults = Object.fromEntries(keys.map(k => [k, '']));
for (const code of supportedLanguageCodes) {
newValue[code] = Object.assign(Object.assign({}, emptyDefaults), newValue[code]);
}
if (isEqual(newValue, value))
return;
setValue(newValue);
}, [keys, value]);
}
const ValidationErrorTranslations = () => {
const intl = useIntl();
const { supportedLanguageCodes } = useContext(BuilderContext);
const panelTooltip = intl.formatMessage({ id: "D5DCv0", defaultMessage: [{ type: 0, value: "Custom error messages for this component and their translations" }] });
return (_jsx(Panel, Object.assign({ title: _jsx(FormattedMessage, { id: 've3rsH', defaultMessage: [{ type: 0, value: "Custom error messages" }] }), tooltip: panelTooltip, collapsible: true, initialCollapsed: true }, { children: _jsxs(Tabs, { children: [_jsx(TabList, { children: supportedLanguageCodes.map(code => (_jsx(Tab, { children: code.toUpperCase() }, code))) }), supportedLanguageCodes.map(code => (_jsx(TabPanel, { children: _jsx(DataMap, { name: `translatedErrors.${code}`, keyLabel: _jsx(FormattedMessage, { id: 'OlPsaw', defaultMessage: [{ type: 0, value: "Error code" }] }), ariaLabelMessage: defineMessage({ id: "hEVgKd", defaultMessage: [{ type: 0, value: "Error message for \"" }, { type: 1, value: "key" }, { type: 0, value: "\"" }] }), valueComponent: _jsx(TextField, { name: "message", label: _jsx(FormattedMessage, { id: 'k9tAyW', defaultMessage: [{ type: 0, value: "Error message" }] }) }) }) }, code)))] }) })));
};
export default ValidationErrorTranslations;