@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
35 lines (34 loc) • 2.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useManageValidatorsTranslations = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const context_1 = require("../../../context");
const formio_1 = require("../../formio");
function useManageValidatorsTranslations(keys, prefix = '') {
const fieldName = `${prefix}${prefix ? '.' : ''}translatedErrors`;
const { supportedLanguageCodes } = (0, react_1.useContext)(context_1.BuilderContext);
const [{ value }, , { setValue }] = (0, formik_1.useField)(fieldName);
(0, react_1.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 ((0, lodash_1.isEqual)(newValue, value))
return;
setValue(newValue);
}, [keys, value]);
}
exports.useManageValidatorsTranslations = useManageValidatorsTranslations;
const ValidationErrorTranslations = () => {
const intl = (0, react_intl_1.useIntl)();
const { supportedLanguageCodes } = (0, react_1.useContext)(context_1.BuilderContext);
const panelTooltip = intl.formatMessage({ id: "D5DCv0", defaultMessage: [{ type: 0, value: "Custom error messages for this component and their translations" }] });
return ((0, jsx_runtime_1.jsx)(formio_1.Panel, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 've3rsH', defaultMessage: [{ type: 0, value: "Custom error messages" }] }), tooltip: panelTooltip, collapsible: true, initialCollapsed: true }, { children: (0, jsx_runtime_1.jsxs)(formio_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(formio_1.TabList, { children: supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)(formio_1.Tab, { children: code.toUpperCase() }, code))) }), supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)(formio_1.TabPanel, { children: (0, jsx_runtime_1.jsx)(formio_1.DataMap, { name: `translatedErrors.${code}`, keyLabel: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'OlPsaw', defaultMessage: [{ type: 0, value: "Error code" }] }), ariaLabelMessage: (0, react_intl_1.defineMessage)({ id: "hEVgKd", defaultMessage: [{ type: 0, value: "Error message for \"" }, { type: 1, value: "key" }, { type: 0, value: "\"" }] }), valueComponent: (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: "message", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'k9tAyW', defaultMessage: [{ type: 0, value: "Error message" }] }) }) }) }, code)))] }) })));
};
exports.default = ValidationErrorTranslations;